Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/donkeycode/ionic-tools
This project is a coolection of tools to quickly start one ionicframework app
https://github.com/donkeycode/ionic-tools
Last synced: 4 days ago
JSON representation
This project is a coolection of tools to quickly start one ionicframework app
- Host: GitHub
- URL: https://github.com/donkeycode/ionic-tools
- Owner: donkeycode
- Created: 2015-04-06T09:48:11.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2022-04-07T20:08:08.000Z (over 2 years ago)
- Last Synced: 2024-11-09T23:37:40.964Z (7 days ago)
- Language: JavaScript
- Size: 4.05 MB
- Stars: 1
- Watchers: 5
- Forks: 1
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
This project is a coolection of tools to quickly start one [ionicframework](http://ionicframework.com/) app
This project is built using [ng-build](https://github.com/izeau/ng-build)
You can see sample of usage with our [ionic-init](https://github.com/donkeycode/ionic-init) project
# How to install
````
bower install --save donkeycode-ionic-tools
````
In your ionic app add `dc.tools` dep
````
.module("dc.bootstrap", [
"ionic",
"angularMoment",
"angular-data.DSCacheFactory",
"pascalprecht.translate",
"ngCordova",
"truncate",
"dc.tools",
"dc.common",
"dc.home"
])
`````
# What is in ?
## Structure
In the structure folder, you will find a base template for `ngIndex` (ng-build) specially created for ionic
```` js
.pipe(ngIndex({
main: 'dc.bootstrap',
baseTemplate: __dirname + '/bower_components/donkeycode-ionic-tools/structure/layout.template.html'
}))
````
## SCSS
````
@import "../../bower_components/donkeycode-ionic-tools/scss/tools";
````
This scss contains some hooks to help you skin tabs and list.
## Services
### dcToolsOnline
Help you check if connection is online switching mode depends if you have cordova or not
````
dcToolsOnline.isOnline()
````
### dcToolsPushwoosh
Help you to register user to pushwoosh
Configure a `dcToolsConfig` constant using the dcToolsConfigProvider
`````
app.config(function configPushWoosh(dcToolsConfigProvider) {
dcToolsConfigProvider.config.pushwoosh.AppId = "YOUR_APP_ID";
dcToolsConfigProvider.config.pushwoosh.googleProjectNumber = "YOUR_PROJECT_NUMBER";
});
`````
At ionic start call :
`````
if (window.cordova && window.plugins.pushNotification) {
dcToolsPushwoosh.registerListener();
}
`````
To register a device call
`````
dcToolsPushwoosh.registerDevice(tags)
`````
### dcToolsTranslation
Configure a `dcToolsConfig` constant using `dcToolsConfigProvider`
`````
app.config(function langConfig(dcToolsConfigProvider) {
dcToolsConfigProvider.lang.api = "./mocks/lang.json";
});
`````
Configure translator :
`````
function ($translateProvider) {
$translateProvider.preferredLanguage('fr');
$translateProvider.fallbackLanguage('en');
$translateProvider.useLoader('dcToolsTranslation');
}
`````
### dcToolsAutocacheImages
Require add `imgcache.js` in your `bower.json` (>=v1.0rc1)
Init your app with
`````
// ImageCache
ImgCache.options.debug = true;
// increase allocated space on Chrome to 50MB, default was 10MB
ImgCache.options.chromeQuota = 50*1024*1024;
ImgCache.options.usePersistentCache = true;
ImgCache.init(function(){
$log.debug('ImgCache init: success!');
// from within this function you're now able to call other ImgCache methods
// or you can wait for the ImgCacheReady event
dcToolsAutocacheImages.ready();
}, function(){
$log.debug('ImgCache init: error! Check the log for errors');
});
`````
And when you load json in your services do :
`````
dcToolsAutocacheImages.cacheImages(
response.data, // The json array
'item.id', // path to build image /// item = root of row
[ // Optional filter list to find the image
"firstFilter", // Simple filter by string
// Or by object to pass args
{
filter: "userIdToImageUrl",
args: [
"someparam"
]
}
]
);
`````
Afer use `dc-tools-use-cached-images` directive
## Filters
### Striptags
````
````
### Highlight
````
````
## Directives
### Tabs headers
Add method goToSlide and slideChanged to connect a slidebox to tabs header
````
First slide
Second slide
````
### Search bar
````
````
### Header shrink
Shrink search bar when scroll to got more space
````
````
### Blur on scroll
Focus out all focused fields when content is scrolled
````
````
### Confirm click
Call an action only when modal is confirmed
````
Link
````
# Cached images
````
![]()
````
````
````