Skip to content

Commit

Permalink
feat(): V5
Browse files Browse the repository at this point in the history
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
  • Loading branch information
triniwiz committed Jun 30, 2019
1 parent 4bf9da4 commit 5348437
Show file tree
Hide file tree
Showing 33 changed files with 11,555 additions and 422 deletions.
3 changes: 2 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -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
40 changes: 25 additions & 15 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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_

Expand Down Expand Up @@ -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
```
Expand Down Expand Up @@ -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) -->

```

Expand All @@ -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
Expand Down
10 changes: 2 additions & 8 deletions demo-ng/app/app.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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]
Expand Down
2 changes: 1 addition & 1 deletion demo-ng/app/item/items.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
71 changes: 35 additions & 36 deletions demo-ng/package.json
Original file line number Diff line number Diff line change
@@ -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"
}
}
2 changes: 2 additions & 0 deletions demo-ng/references.d.ts
Original file line number Diff line number Diff line change
@@ -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" />
3 changes: 3 additions & 0 deletions demo-ng/tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,9 @@
"*": [
"./node_modules/tns-core-modules/*",
"./node_modules/*"
],
"~/*": [
"app/*"
]
}
},
Expand Down
67 changes: 34 additions & 33 deletions demo/app/App_Resources/Android/AndroidManifest.xml
Original file line number Diff line number Diff line change
@@ -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>
19 changes: 10 additions & 9 deletions demo/app/App_Resources/Android/app.gradle
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}


20 changes: 20 additions & 0 deletions demo/app/app.css
Original file line number Diff line number Diff line change
@@ -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;
}
3 changes: 2 additions & 1 deletion demo/app/app.ts
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
import * as application from 'tns-core-modules/application';
application.start({ moduleName: "main-page" });

application.run({moduleName: 'main-page'});
11 changes: 5 additions & 6 deletions demo/app/main-page.xml
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
1 change: 0 additions & 1 deletion demo/hooks/before-prepare/nativescript-dev-typescript.js

This file was deleted.

1 change: 0 additions & 1 deletion demo/hooks/before-watch/nativescript-dev-typescript.js

This file was deleted.

3 changes: 3 additions & 0 deletions demo/nsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"useLegacyWorkflow": false
}
Loading

0 comments on commit 5348437

Please sign in to comment.