feat(): V5

Upgrade SDWebImage Switch to Glide for Android Add initial css filters blur, contrast, brightness, grayscale, invert & sepia deprecate imageUri in favor of src deprecate resize in favor of decodedWidth & decodedHeight
triniwiz · Jun 30, 2019 · 5348437 · 5348437
1 parent 4bf9da4
commit 5348437
Show file tree

Hide file tree

Showing 33 changed files with 11,555 additions and 422 deletions.
diff --git a/.gitignore b/.gitignore
@@ -30,4 +30,5 @@ demo-ng/lib
 demo-ng/platforms
 demo-ng/report/report.html
 demo-ng/report/stats.json
-package-lock.json
+package-lock.json
+src/platforms/android/*.aar
diff --git a/README.md b/README.md
@@ -4,7 +4,7 @@
 
 # Image-Cache-It
 
-[_Picasso_](http://square.github.io/picasso/) - _Android_
+[_Glide_](https://github.com/bumptech/glide/) - _Android_
 
 [_SDWebImage_](https://github.com/rs/SDWebImage/) - _IOS_
 
@@ -46,18 +46,15 @@ Set placeholder for images are that failed to download.
 errorHolder = '~/assets/images/broken.png';
 ```
 
-Set image size.
-
-_Note:_ Resize should be width then height and split with a `,` (comma).
+Set decoded image size.
 
 ```js
-resize = '300 300';
+decodedWidth = '300';
+decodedHeight = '300';
 ```
 
 Stretch
 
-_Note:_ When using `aspectFit` or `aspectFill` on android you need to provide the `resize` value or set a height/width on the ImageCacheIt instance.
-
 ```js
 stretch = "aspectFit" // (optional) aspectFit || aspectFill || fill || none
 ```
@@ -85,22 +82,25 @@ e.g
 ```ts
 import { ImageCacheIt } from 'nativescript-image-cache-it';
 let cache = new ImageCacheIt();
-cache.imageUri = image;
+cache.src = image;
 cache.placeHolder = '~/assets/images/broken.png';
 cache.errorHolder = '~/assets/images/ph.png';
-cache.resize = '300,300';
+cache.decodedWidth = '300';
+cache.decodedHeight = '300';
+cache.filter = 'blur(10px);';
 cache.stretch = 'aspectFit';
 return cache;
 ```
 
 Xml markup settings
 
 ```xml
-resize="300,300" <!-- (optional) -->
+decodedWidth="300"; <!-- (optional) -->
+decodedHeight="300"; <!-- (optional) -->
 placeHolder="~/assets/images/ph.png" <!-- (optional) -->
 errorHolder="~/assets/images/broken.png"  <!-- (optional) -->
 stretch = "aspectFit" <!-- (optional) -->
-imageUri= "http://screenrant.com/wp-content/uploads/The-Flash-vs-the-Reverse-Flash.jpg" <!-- (required) -->
+src= "http://screenrant.com/wp-content/uploads/The-Flash-vs-the-Reverse-Flash.jpg" <!-- (required) -->
 
 ```
 
@@ -109,14 +109,24 @@ IMPORTANT: Make sure you include xmlns:i="nativescript-image-cache-it" on the Pa
 e.g
 
 ```xml
-<i:ImageCacheIt stretch="aspectFit"  resize="300,300" placeHolder="~/assets/images/ph.png" errorHolder="~/assets/images/broken.png" imageUri="http://screenrant.com/wp-content/uploads/The-Flash-vs-the-Reverse-Flash.jpg"/>
+<i:ImageCacheIt stretch="aspectFit"  resize="300,300" placeHolder="~/assets/images/ph.png" errorHolder="~/assets/images/broken.png" src="http://screenrant.com/wp-content/uploads/The-Flash-vs-the-Reverse-Flash.jpg"/>
 ```
 
 ### Angular
 
-import { registerElement } from 'nativescript-angular/element-registry';
-registerElement('ImageCacheIt', () => require('nativescript-image-cache-it').ImageCacheIt);
-
+```ts
+import { TNSImageCacheItModule } from 'nativescript-image-cache-it/angular';
+
+@NgModule({
+    imports: [
+    TNSImageCacheItModule
+    ],
+    declarations: [
+        AppComponent
+    ],
+    bootstrap: [AppComponent]
+})
+```
 ### Screenshots
 
 #### Repeater

diff --git a/demo-ng/app/app.module.ts b/demo-ng/app/app.module.ts
@@ -6,22 +6,16 @@ import { AppComponent } from './app.component';
 import { ItemService } from './item/item.service';
 import { ItemsComponent } from './item/items.component';
 import { ItemDetailComponent } from './item/item-detail.component';
-
+import { TNSImageCacheItModule } from 'nativescript-image-cache-it/angular';
 // Uncomment and add to NgModule imports if you need to use two-way binding
 // import { NativeScriptFormsModule } from "nativescript-angular/forms";
 
 // Uncomment and add to NgModule imports  if you need to use the HTTP wrapper
 // import { NativeScriptHttpModule } from "nativescript-angular/http";
 
-import { registerElement } from 'nativescript-angular/element-registry';
-registerElement(
-  'ImageCacheIt',
-  () => require('nativescript-image-cache-it').ImageCacheIt
-);
-
 @NgModule({
   bootstrap: [AppComponent],
-  imports: [NativeScriptModule, AppRoutingModule],
+  imports: [NativeScriptModule, AppRoutingModule, TNSImageCacheItModule],
   declarations: [AppComponent, ItemsComponent, ItemDetailComponent],
   providers: [ItemService],
   schemas: [NO_ERRORS_SCHEMA]

diff --git a/demo-ng/app/item/items.component.html b/demo-ng/app/item/items.component.html
@@ -28,7 +28,7 @@
         <ng-template let-item="item">
             <GridLayout class="list-group-item" columns="auto,*" [nsRouterLink]="['/item', item.id]" [text]="item.name">
                 <ImageCacheIt placeHolder="res://place" errorHolder="res://error" [stretch]="stretch" [borderRadius]="borderRadius" [borderWidth]="borderWidth"
-                    [borderColor]="borderColor" width="100" height="100" [imageUri]="item.url"></ImageCacheIt>
+                    [borderColor]="borderColor" width="100" height="100" [src]="item.url"></ImageCacheIt>
                 <StackLayout col="1">
                     <Label [text]="item.url"></Label>
                 </StackLayout>

diff --git a/demo-ng/package.json b/demo-ng/package.json
@@ -1,38 +1,37 @@
 {
-	"description": "NativeScript Application",
-	"license": "SEE LICENSE IN <your-license-filename>",
-	"readme": "NativeScript Application",
-	"repository": "<fill-your-repository-here>",
-	"nativescript": {
-		"id": "org.nativescript.demong",
-		"tns-android": {
-			"version": "4.0.1"
-		}
-	},
-	"dependencies": {
-		"@angular/animations": "~5.2.0",
-		"@angular/common": "~5.2.0",
-		"@angular/compiler": "~5.2.0",
-		"@angular/core": "~5.2.0",
-		"@angular/forms": "~5.2.0",
-		"@angular/http": "~5.2.0",
-		"@angular/platform-browser": "~5.2.0",
-		"@angular/platform-browser-dynamic": "~5.2.0",
-		"@angular/router": "~5.2.0",
-		"nativescript-angular": "~5.3.0",
-		"nativescript-image-cache-it": "file:../src",
-		"nativescript-theme-core": "~1.0.4",
-		"reflect-metadata": "~0.1.8",
-		"rxjs": "~5.5.2",
-		"tns-core-modules": "~4.0.0",
-		"zone.js": "~0.8.2"
-	},
-	"devDependencies": {
-		"babel-traverse": "6.26.0",
-		"babel-types": "6.26.0",
-		"babylon": "6.18.0",
-		"lazy": "1.0.11",
-		"nativescript-dev-typescript": "~0.6.0",
-		"typescript": "~2.6.2"
-	}
+  "description": "NativeScript Application",
+  "license": "SEE LICENSE IN <your-license-filename>",
+  "readme": "NativeScript Application",
+  "repository": "<fill-your-repository-here>",
+  "nativescript": {
+    "id": "org.nativescript.demong",
+    "tns-android": {
+      "version": "5.4.0"
+    }
+  },
+  "dependencies": {
+    "@angular/animations": "8.0.0",
+    "@angular/common": "8.0.0",
+    "@angular/compiler": "8.0.0",
+    "@angular/core": "8.0.0",
+    "@angular/forms": "8.0.0",
+    "@angular/platform-browser": "8.0.0",
+    "@angular/platform-browser-dynamic": "8.0.0",
+    "@angular/router": "8.0.0",
+    "nativescript-angular": "^8.0.1",
+    "nativescript-image-cache-it": "file:../src",
+    "nativescript-theme-core": "~1.0.4",
+    "reflect-metadata": "~0.1.8",
+    "rxjs": "^6.3.3",
+    "tns-core-modules": "^5.4.3",
+    "zone.js": "^0.8.4"
+  },
+  "devDependencies": {
+    "babel-traverse": "6.26.0",
+    "babel-types": "6.26.0",
+    "babylon": "6.18.0",
+    "lazy": "1.0.11",
+    "nativescript-dev-typescript": "^0.10.0",
+    "typescript": "~3.4.5"
+  }
 }
diff --git a/demo-ng/references.d.ts b/demo-ng/references.d.ts
@@ -0,0 +1,2 @@
+/// <reference path="../src/node_modules/tns-platform-declarations/ios.d.ts" />
+/// <reference path="../src/node_modules/tns-platform-declarations/android.d.ts" />
diff --git a/demo-ng/tsconfig.json b/demo-ng/tsconfig.json
@@ -16,6 +16,9 @@
             "*": [
                 "./node_modules/tns-core-modules/*",
                 "./node_modules/*"
+            ],
+            "~/*": [
+                "app/*"
             ]
         }
     },

diff --git a/demo/app/App_Resources/Android/AndroidManifest.xml b/demo/app/App_Resources/Android/AndroidManifest.xml
@@ -1,43 +1,44 @@
 <?xml version="1.0" encoding="utf-8"?>
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
-	package="__PACKAGE__"
-	android:versionCode="1"
-	android:versionName="1.0">
+          package="__PACKAGE__"
+          android:versionCode="1"
+          android:versionName="1.0">
 
-	<supports-screens
-		android:smallScreens="true"
-		android:normalScreens="true"
-		android:largeScreens="true"
-		android:xlargeScreens="true"/>
+    <supports-screens
+            android:smallScreens="true"
+            android:normalScreens="true"
+            android:largeScreens="true"
+            android:xlargeScreens="true"/>
 
-	<uses-sdk
-		android:minSdkVersion="17"
-		android:targetSdkVersion="__APILEVEL__"/>
+    <uses-sdk
+            android:minSdkVersion="17"
+            android:targetSdkVersion="__APILEVEL__"/>
 
-	<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
-	<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
-	<uses-permission android:name="android.permission.INTERNET"/>
+    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
+    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
+    <uses-permission android:name="android.permission.INTERNET"/>
 
-	<application
-		android:name="com.tns.NativeScriptApplication"
-		android:allowBackup="true"
-		android:icon="@drawable/icon"
-		android:label="@string/app_name"
-		android:theme="@style/AppTheme">
+    <application
+            android:usesCleartextTraffic="true"
+            android:name="com.tns.NativeScriptApplication"
+            android:allowBackup="true"
+            android:icon="@drawable/icon"
+            android:label="@string/app_name"
+            android:theme="@style/AppTheme">
 
-		<activity
-			android:name="com.tns.NativeScriptActivity"
-			android:label="@string/title_activity_kimera"
-			android:configChanges="keyboardHidden|orientation|screenSize"
-			android:theme="@style/LaunchScreenTheme">
+        <activity
+                android:name="com.tns.NativeScriptActivity"
+                android:label="@string/title_activity_kimera"
+                android:configChanges="keyboardHidden|orientation|screenSize"
+                android:theme="@style/LaunchScreenTheme">
 
-			<meta-data android:name="SET_THEME_ON_LAUNCH" android:resource="@style/AppTheme" />
+            <meta-data android:name="SET_THEME_ON_LAUNCH" android:resource="@style/AppTheme"/>
 
-			<intent-filter>
-				<action android:name="android.intent.action.MAIN" />
-				<category android:name="android.intent.category.LAUNCHER" />
-			</intent-filter>
-		</activity>
-		<activity android:name="com.tns.ErrorReportActivity"/>
-	</application>
+            <intent-filter>
+                <action android:name="android.intent.action.MAIN"/>
+                <category android:name="android.intent.category.LAUNCHER"/>
+            </intent-filter>
+        </activity>
+        <activity android:name="com.tns.ErrorReportActivity"/>
+    </application>
 </manifest>
diff --git a/demo/app/App_Resources/Android/app.gradle b/demo/app/App_Resources/Android/app.gradle
@@ -5,12 +5,13 @@
 //	compile 'com.android.support:recyclerview-v7:+'
 //}
 
-android {  
-  defaultConfig {  
-    generatedDensities = []
-    applicationId = "org.nativescript.demo"  
-  }  
-  aaptOptions {  
-    additionalParameters "--no-version-vectors"  
-  }  
-} 
+android {
+    defaultConfig {
+        generatedDensities = []
+    }
+    aaptOptions {
+        additionalParameters "--no-version-vectors"
+    }
+}
+
+
diff --git a/demo/app/app.css b/demo/app/app.css
@@ -1 +1,21 @@
 @import '~nativescript-theme-core/css/core.light.css';
+
+.even {
+    border-radius: 50;
+    border-top-color: red;
+    border-right-color: red;
+    border-left-color: red;
+    border-bottom-color: red;
+    border-width: 2;
+    width: 100;
+    height: 100;
+    filter: blur(10px)
+}
+
+.odd {
+    width: 80;
+    height: 80;
+    border-radius: 10;
+    border-width: 1;
+    border-color: blue;
+}
diff --git a/demo/app/app.ts b/demo/app/app.ts
@@ -1,2 +1,3 @@
 import * as application from 'tns-core-modules/application';
-application.start({ moduleName: "main-page" });
+
+application.run({moduleName: 'main-page'});
diff --git a/demo/app/main-page.xml b/demo/app/main-page.xml
@@ -7,22 +7,20 @@
       <Button col="1" text="Add Image" tap="addImage"/>
       <Button tap="{{ deleteRandom }}" text="Delete Random"/>
     </GridLayout>
-    <!--<scroll-view row="1"><repeater items="{{images}}"><repeater.itemTemplate><GridLayout columns="auto,*"><i:ImageCacheIt override="300 300" centerCrop="true" stretch="fill" imageUri="{{url}}"/><stack-layout col="1"><label text="{{url}}"/></stack-layout></GridLayout></repeater.itemTemplate></repeater></scroll-view>-->
     <ListView id="listView" row="1" items="{{ images }}" itemTemplateSelector="$index % 2 === 0 ? 'even' : 'odd'">
       <ListView.itemTemplates>
-
         <template key="even">
-          <GridLayout columns="auto,*">
-            <i:ImageCacheIt tap="onTapEven" stretch="aspectFill" placeHolder="res://law" errorHolder="res://error" borderRadius="50" borderWidth="1" borderColor="red" width="100" height="100" imageUri="{{url}}"/>
+          <GridLayout rows="150"  columns="100,*">
+            <i:ImageCacheIt stretch="fill" tap="onTapEven" placeHolder="res://law" errorHolder="res://error"  class="even" width="100" height="100" src="{{url}}"/>
             <stack-layout col="1">
               <Label text="{{url}}"/>
             </stack-layout>
           </GridLayout>
         </template>
 
         <template key="odd">
-          <GridLayout columns="auto,*">
-            <i:ImageCacheIt tap="onTapOdd" placeHolder="res://law" errorHolder="res://error" stretch="aspectFill" borderRadius="10" borderWidth="1" borderColor="red" width="100" height="100" imageUri="{{url}}"/>
+          <GridLayout rows="150" columns="100,*">
+            <i:ImageCacheIt stretch="fill" tap="onTapOdd" decodedWidth="50" decodedHeight="50" placeHolder="res://law" errorHolder="res://error" class="odd" src="{{url}}"/>
             <stack-layout col="1">
               <Label text="{{url}}"/>
             </stack-layout>
@@ -31,6 +29,7 @@
 
       </ListView.itemTemplates>
     </ListView>
+
     <!--<scroll-view row="1"><repeater items="{{images}}"><repeater.itemTemplate><GridLayout columns="auto,*"><Image width="300" height="300" src="{{url}}"/><stack-layout col="1"><label text="{{url}}"/></stack-layout></GridLayout></repeater.itemTemplate></repeater></scroll-view>-->
     <!--<ListView row="1" items="{{images}}"><ListView.itemTemplate><GridLayout columns="auto,*"><Image width="300" height="300" src="{{url}}"/><stack-layout col="1"><label text="{{url}}"/></stack-layout></GridLayout></ListView.itemTemplate></ListView>-->
   </GridLayout>

diff --git a/demo/hooks/before-prepare/nativescript-dev-typescript.js b/demo/hooks/before-prepare/nativescript-dev-typescript.js
diff --git a/demo/hooks/before-watch/nativescript-dev-typescript.js b/demo/hooks/before-watch/nativescript-dev-typescript.js
diff --git a/demo/nsconfig.json b/demo/nsconfig.json
@@ -0,0 +1,3 @@
+{
+	"useLegacyWorkflow": false
+}