diff --git a/package.json b/package.json index eb8f44c..c91f9f0 100644 --- a/package.json +++ b/package.json @@ -31,12 +31,15 @@ "@angular/compiler": "2.4.8", "@angular/compiler-cli": "2.4.8", "@angular/core": "2.4.8", + "@angular/forms": "2.4.8", + "@angular/http": "2.4.8", "@angular/platform-browser": "2.4.8", "@ionic-native/core": "^3.1.1", "@ionic-native/file": "^3.1.1", "@ionic-native/transfer": "^3.1.1", "@types/lodash": "4.14.50", "conventional-changelog-cli": "1.2.0", + "ionic-angular": "^2.2.0", "rxjs": "5.0.1", "typescript": "2.0.9", "zone.js": "0.7.2" diff --git a/src/components/img-loader/img-loader.ts b/src/components/img-loader/img-loader.ts index ba8d9de..279ba6f 100644 --- a/src/components/img-loader/img-loader.ts +++ b/src/components/img-loader/img-loader.ts @@ -4,7 +4,7 @@ import { ImageLoaderConfig } from '../../providers/image-loader-config'; @Component({ selector: 'img-loader', - template: '' + template: '' }) export class ImgLoader implements OnInit { diff --git a/src/image-loader.module.ts b/src/image-loader.module.ts index 8d9daef..60c69ca 100644 --- a/src/image-loader.module.ts +++ b/src/image-loader.module.ts @@ -4,6 +4,7 @@ import { ImageLoader } from './providers/image-loader'; import { ImageLoaderConfig } from './providers/image-loader-config'; import { ImageLoaderSpinner } from './components/image-loader-spinner/image-loader-spinner'; import { BrowserModule } from '@angular/platform-browser'; +import { IonicModule } from 'ionic-angular'; @NgModule({ declarations: [ @@ -15,7 +16,8 @@ import { BrowserModule } from '@angular/platform-browser'; ImageLoader ], imports: [ - BrowserModule + BrowserModule, + IonicModule ], exports: [ ImgLoader diff --git a/src/providers/image-loader.ts b/src/providers/image-loader.ts index e8cf12b..ab6583e 100644 --- a/src/providers/image-loader.ts +++ b/src/providers/image-loader.ts @@ -1,10 +1,10 @@ import { Injectable } from '@angular/core'; -import { File, FileEntry, FileReader, Transfer } from 'ionic-native'; +import { File, FileEntry, FileReader } from '@ionic-native/file'; +import { Transfer } from '@ionic-native/transfer'; import { ImageLoaderConfig } from "./image-loader-config"; +import { Platform } from 'ionic-angular'; import * as _ from 'lodash'; -declare var cordova: any; - @Injectable() export class ImageLoader { @@ -50,20 +50,28 @@ export class ImageLoader { private indexed: boolean = false; - private get shouldIndex() { + private get shouldIndex(): boolean { return (this.config.maxCacheAge > -1) || (this.config.maxCacheSize > -1); } - constructor(private config: ImageLoaderConfig) { + private get isWKWebView(): boolean { + return this.platform.is('ios') && (window).webkit; + } + + constructor( + private config: ImageLoaderConfig, + private file: File, + private transfer: Transfer, + private platform: Platform + ) { if (window.location.protocol === 'http:' || window.location.protocol === 'https:') { // we are running on a browser, or using livereload // plugin will not function in this case this.isInit = true; this.throwWarning('You are running on a browser or using livereload, IonicImageLoader will not function, falling back to browser loading.'); } else { - document.addEventListener('deviceready', () => { - this.initCache(); - }, false); + this.platform.ready() + .then(() => this.initCache()); } } @@ -81,7 +89,7 @@ export class ImageLoader { */ clearCache(): void { - if (typeof cordova === 'undefined') return; + if (!this.platform.is('cordova')) return; const clear = () => { @@ -94,7 +102,7 @@ export class ImageLoader { // pause any operations this.isInit = false; - File.removeRecursively(cordova.file.cacheDirectory, this.config.cacheDirectoryName) + this.file.removeRecursively(this.file.cacheDirectory, this.config.cacheDirectoryName) .then(() => { this.initCache(true); }) @@ -113,7 +121,7 @@ export class ImageLoader { * @returns {Promise} Returns a promise that resolves when the download is complete, or rejects on error. */ private downloadImage(imageUrl: string, localPath: string): Promise { - let transfer = new Transfer(); + const transfer = this.transfer.create(); return transfer.download(imageUrl, localPath, true); } @@ -209,7 +217,7 @@ export class ImageLoader { this.processQueue(); }; - let localPath = cordova.file.cacheDirectory + this.config.cacheDirectoryName + '/' + this.createFileName(currentItem.imageUrl); + let localPath = this.file.cacheDirectory + this.config.cacheDirectoryName + '/' + this.createFileName(currentItem.imageUrl); this.downloadImage(currentItem.imageUrl, localPath) .then((file: FileEntry) => { @@ -238,11 +246,6 @@ export class ImageLoader { this.concurrency = this.config.concurrency; - if (!this.filePluginExists) { - this.isInit = true; - return; - } - this.cacheDirectoryExists .catch(() => { // doesn't exist @@ -277,7 +280,7 @@ export class ImageLoader { && (Date.now() - metadata.modificationTime.getTime()) > this.config.maxCacheAge ) { // file age exceeds maximum cache age - return File.removeFile(cordova.file.cacheDirectory + this.config.cacheDirectoryName, file.name); + return this.file.removeFile(this.file.cacheDirectory + this.config.cacheDirectoryName, file.name); } else { // file age doesn't exceed maximum cache age, or maximum cache age isn't set @@ -308,7 +311,7 @@ export class ImageLoader { this.cacheIndex = []; - return File.listDir(cordova.file.cacheDirectory, this.config.cacheDirectoryName) + return this.file.listDir(this.file.cacheDirectory, this.config.cacheDirectoryName) .then(files => Promise.all(files.map(this.addFileToIndex.bind(this)))) .then(() => { this.cacheIndex = _.sortBy(this.cacheIndex, 'modificationTime'); @@ -333,7 +336,7 @@ export class ImageLoader { // we exceeded max cache size while (this.currentCacheSize > this.config.maxCacheSize) { let file = this.cacheIndex.splice(0,1)[0]; - File.removeFile(cordova.file.cacheDirectory + this.config.cacheDirectoryName, file.name); + this.file.removeFile(this.file.cacheDirectory + this.config.cacheDirectoryName, file.name); this.currentCacheSize -= file.size; } @@ -358,18 +361,18 @@ export class ImageLoader { let fileName = this.createFileName(url); // get full path - let dirPath = cordova.file.cacheDirectory + this.config.cacheDirectoryName; + let dirPath = this.file.cacheDirectory + this.config.cacheDirectoryName; // check if exists - File.resolveLocalFilesystemUrl(dirPath + '/' + fileName) + this.file.resolveLocalFilesystemUrl(dirPath + '/' + fileName) .then((fileEntry: FileEntry) => { // file exists in cache // now check if iOS device & using WKWebView Engine - if (cordova.platformId == 'ios' && (window).webkit) { + if (this.isWKWebView) { // Read FileEntry and return as data url - fileEntry.file((file: Blob) => { + fileEntry.file((file: any) => { const reader = new FileReader(); reader.onloadend = function() { @@ -411,24 +414,12 @@ export class ImageLoader { } } - /** - * Check if file plugin exists - * @returns {boolean} returns a boolean that indicates whether the plugin exists - */ - private get filePluginExists(): boolean { - if (!cordova || !cordova.file) { - this.throwWarning('Unable to find the cordova file plugin. ImageLoader will not cache images.'); - return false; - } - return true; - } - /** * Check if the cache directory exists * @returns {Promise} Returns a promise that resolves if exists, and rejects if it doesn't */ private get cacheDirectoryExists(): Promise { - return >File.checkDir(cordova.file.cacheDirectory, this.config.cacheDirectoryName); + return this.file.checkDir(this.file.cacheDirectory, this.config.cacheDirectoryName); } /** @@ -437,7 +428,7 @@ export class ImageLoader { * @returns {Promise} Returns a promise that resolves if the directory was created, and rejects on error */ private createCacheDirectory(replace: boolean = false): Promise { - return File.createDir(cordova.file.cacheDirectory, this.config.cacheDirectoryName, replace); + return this.file.createDir(this.file.cacheDirectory, this.config.cacheDirectoryName, replace); } /**