NOTICE

Enhancements in 0.6.0
- support expire
Enhancements in 0.5.0
- support background image
- could use your own progress indicator instead of the builtin progress circle
- the built-in progress circle could be inline-block
Demo and Playground: https://github.com/BenBBear/ionic-cache-src-demo

ionic-cache-src

Just change src to cache-src

    <img alt="" cache-src="http://a1.att.hudong.com/03/23/01300000332400125809239727476.jpg"/>

and it will take the rest work for you.

Demo

simple

complex

Install

bower

bower install ionic-cache-src

it depends on ngStorage, ngCordova, angular-svg-round-progress so you have to load them both in you index.html

<script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<script src="cordova_plugins.js"></script> <!-- This one is optional -->
<script src="lib/ngstorage/ngStorage.min.js"></script>
<script src="lib/angular-svg-round-progressbar/build/roundProgress.min.js"></script>
<script src="lib/ionic-cache-src/ionic-cache-src.js"></script>

and it use cordova-plugin-file-transfer and cordova-plugin-file, so

cordova plugin add cordova-plugin-file cordova-plugin-file-transfer

add ionic-cache-src to your angular module declaration dependencies

angular.module('myApp', ['ionic','ionic-cache-src'])

Done

How it Work

very simple strategy

Usage

Custom the progress circle

it accepts all options for angular-svg-round-progressbar , except for current

Change src

<img cache-src="" src-is="alt" />

will be rendered to

<img alt="file://xxx/xx/xxx.jpg" />

not so useful though.

Background image

<div  cache-src="http://farm4.static.flickr.com/3131/2877192571_3eb8bcf431.jpg"
src-is="background" >
<!-- stuff -->
</div>

Expire

<img alt="" cache-src="http://a1.att.hudong.com/03/23/01300000332400125809239727476.jpg" expire="{{60}}"/>

Set expiration time to 60 seconds. At the next page load and directive linking, this cache will be renewed if 60s passed. But there wouldn't be progress circle, the image will be replaced after the newly downloaded file is ready.

The expiration time is Infinity by default.

Custom background style

<div  cache-src="http://farm4.static.flickr.com/3131/2877192571_3eb8bcf431.jpg"
src-is="background"
background-style="no-repeat center"
background-loading-style="url('path/to/your/loading/image.gif') no-repeat center"
>
<!-- stuff -->
</div>

background-style will be used as

<div style="background:url('image/url') {{backgroundStyle}}">
<!-- stuff -->
</div>

Default background-loading-style is url('lib/ionic-cache-src/img/loader.gif') no-repeat center

Inline progress circle

By default the progress circle is a block div, here is source code.

function makeProgressCircle($scope, $compile) {
    return angular.element($compile('<div style="{{circleContainerStyle}}"><div round-progress  max="max"  current="progress"  color="{{color}}" bgcolor="{{bgcolor}}"  radius="{{radius}}"  stroke="{{stroke}}"  rounded="rounded" clockwise="clockwise" iterations="{{iterations}}"  animation="{{animation}}"></div></div>')($scope));
};

So you could change its style using circleContainerStyle

<div class="list">
    <a class="item item-avatar" href="#">
        <img cache-src="http://x1.zhuti.com/down/2012/12/13-win7/llx-1.jpg"
            circle-container-style="display:inline-block;position:absolute;left:30px;"/>
        <h2>inline progress circle</h2>
        <p>Test Progress Circle as inline block</p>
    </a>
</div>

Callback

<img cache-src="" on-error="onError" on-start="onStart" on-finish="onFinish" on-progress="fun" />

function onError(err){}
function onStart(originUrl){}
function onFinish(naiveUrl){}
function onProgress(number){}

Note that the OnProgress and OnStart will only be called if a download is needed.

Work in broswer

It will works in browser with a mock download process.

For local file path

The plugin will download and cache the file if the url is http, https or ftp, otherwise it won't.

So it works for local file path, or base64 etc...

Service

This plugin store cache info as $localstorage.cache_src = {RemoteUrl:LocalUrl}, and there is a factory defined:

    module.factory('cacheSrcStorage', function($localStorage) {
        var c = {};
        c._cache = $localStorage.cache_src;
        c.get = function(url){
            return c._cache[url] && (getCacheDir() + c._cache[url]);
        };
        c.set = function(url,localUrl){
            c._cache[url] = localUrl;
            return c;
        };
        return c;
    });

which you can use to access the cached file

Config

module.config(function($cacheSrcProvider){
    $cacheSrcProvider
              .set('key',value)
              .set({key:value}); // set option
})

Key, Value for options like

srcIs
onError for global use etc...
showProgressCircleInBrowser whether show progress circle in browser
showProgressCircleInDevice whether show progress circle in device
interval browser mock progress circle period, by default 200.
options for progress circle angular-svg-round-progressbar
backgroundStyle and backgroundLoadingStyle
circleContainerStyle
expire
Anything you like, if you use custom progress indicator.

Note that the in-tag config has the higher priority than $cacheSrcProvider

Use custom progress indicator instead of built-in progress circle

Use callback

uiOnStart, uiOnProgress, uiOnFinish

Here is the default source of this three functions, which implements the progress circle. Take it as reference and write your own.

    var default_config = {
        interval: 200,
        backgroundStyle:'',
        backgroundLoadingStyle:"url('lib/ionic-cache-src/img/loader.gif') no-repeat center",
        uiOnStart:uiOnStart,
        uiOnFinish:uiOnFinish,
        uiOnProgress:uiOnProgress
    };

    function makeProgressCircle($scope, $compile) {
        return angular.element($compile('<div style="{{circleContainerStyle}}"><div round-progress  max="max"  current="progress"  color="{{color}}" bgcolor="{{bgcolor}}"  radius="{{radius}}"  stroke="{{stroke}}"  rounded="rounded" clockwise="clockwise" iterations="{{iterations}}"  animation="{{animation}}"></div></div>')($scope));
    };

    var uiOnProgress = function(scope, element, $compile, uiData) {
        scope.progress = uiData.progress;
    };
    var uiOnStart = function(scope, element, $compile, uiData) {
        if (scope.srcIs == 'background') {
            element[0].style.background = scope.backgroundLoadingStyle;
        } else {
            extend(scope, default_circle_style);
            var progress_circle;

            function addCircle() {
                progress_circle = makeProgressCircle(scope, $compile);
                uiData.display = element.css('display');
                element.css('display', 'none');
                element.after(progress_circle);
            };

            if (window.cordova) {
                if (scope.showProgressCircleInDevice) {
                    addCircle();
                }
            } else {
                if (scope.showProgressCircleInBrowser) {
                    addCircle();
                }
            }
            uiData.progress_circle = progress_circle;
        }
    };
    var uiOnFinish = function(scope, element, $compile, uiData) {
        if (scope.srcIs != 'background') {
            function rmCircle() {
                element.css('display', uiData.display);
                uiData.progress_circle.remove();
            }
            if (window.cordova) {
                if (scope.showProgressCircleInDevice) {
                    rmCircle();
                }
            } else {
                if (scope.showProgressCircleInBrowser) {
                    rmCircle();
                }
            }
        }
    };

To use your own uiOn* functions

module.config(function($cacheSrcProvider){
    $cacheSrcProvider
              .set('uiOnStart', myUiOnStart)
              .set('uiOnProgress', myUiOnProgress)
              .set('uiOnFinish', myUiOnFinish);
});

Attention

cordova_plugins.js

Because of ionic-team/ionic-plugin-keyboard#82 , the ionicPlatform.ready may fail from exception. If you encounter this problem, Add

<script src="cordova_plugins.js"></script>

solve it.

android:cordova-plugin-file

For android, you may need to add this

<preference name="AndroidPersistentFileLocation" value="Internal" />

to your config.xml, as mentioned in #10. Otherwise the image won't be loaded, and no error console.log.

livereload

When using live reload, you’re actually running the assets off the computer and not the device

You will get an error: Not allowed to load local resource, but it will only occur when livereloading.

iOS 9 NSAppTransportSecurity

Because iOS 9 forbids arbitrary http request, you may add

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key><true/>
</dict>

to you .plist file. Details in this gist: https://gist.github.com/mlynch/284699d676fe9ed0abfa

johnnyoin / ionic-cache-src Goto Github PK

ionic-cache-src's Introduction