Ionic 1.x: Advance Techniques

Listening for online and offline events, Gestures Event, Storage, Adaptive Platform Style

Listening for online and offline events

angular.module('App', ['ionic'])
    .run(function($rootScope, $window) {
        alert($window.navigator.onLine);
        $window.addEventListener('offline', function() {
            alert('offline');
            $rootScope.$digest();
        });
        $window.addEventListener('online', function() {
            alert('online');
            $rootScope.$digest();
        });
    })

Listen for events with Ionic event directives

Box directive

angular.module('App', ['ionic'])
    .directive('box', function() {
            return {
                restrict: 'E',
                link: function(scope, element) {
                    var time = 0,
                        boxX = 0,
                        boxY = 0;
                    var leftBound = window.innerWidth - 50;
                    var bottomBound = window.innerHeight - 50;
                    scope.top = 0;
                    scope.left = 0;
                    scope.startTouch = function(event) {
                        time = event.timeStamp;
                    };
                    scope.endTouch = function(event) {
                        console.log('You held the box for ' +
                            (event.timeStamp - time) + 'ms');
                        boxX = scope.left;
                        boxY = scope.top;
                    };
                    scope.drag = function(event) {
                        var left = boxX + Math.round(event.gesture.deltaX);
                        var top = boxY + Math.round(event.gesture.deltaY);
                        if (left > leftBound) {
                            scope.left = leftBound;
                        } else if (left < 0) {
                            scope.left = 0;
                        } else {
                            scope.left = left;
                        }
                        if (top > bottomBound) {
                            scope.top = bottomBound;
                        } else if (top < 0) {
                            scope.top = 0;
                        } else {
                            scope.top = top;
                        }
                    };
                },
                template: '<div id="box" class="icon ion-cube" ontouch="
                startTouch($event)
                " on-release="
                endTouch($event)
                " on-drag="
                drag($event)
                " ng-style=" {
                    top: top + \'px\', left: left +\
                    'px\'}"></div>'
                }
            })

Listen for events with $ionicGesture service

angular.module('App', ['ionic'])
    .directive('card', function() {
        return {
            scope: true,
            controller: function($scope, $element, $ionicGesture, $interval) {
                $scope.left = 0;
                $ionicGesture.on('drag', function(event) {
                    $scope.left = event.gesture.deltaX;
                    $scope.$digest();
                }, $element);
                $ionicGesture.on('dragend', function(event) {
                    if (Math.abs($scope.left) > (window.innerWidth / 3)) {
                        $scope.left = ($scope.left < 0) ? -window.innerWidth :
                            window.innerWidth;
                        $element.remove();
                    } else {
                        var interval = $interval(function() {
                            if ($scope.left < 5 && $scope.left > -5) {
                                $scope.left = 0;
                                $interval.cancel(interval);
                            } else {
                                $scope.left = ($scope.left < 0) ? $scope.left + 5 :
                                    $scope.left - 5;
                            }
                        }, 5);
                    }
                    $scope.$digest();
                }, $element);
            },
            transclude: true,
            template: '<div class="list card" ng-style="{left: left + \'px\'}"><div
            class = "item"
            ng - transclude > Swipe Me < /div></div > '
        }
    })

Available gesture events

Storing data for persistence

LocalStorage for key-value pairs and either Web SQL, IndexedDB, or SQLite

LocalForage: https://github.com/mozilla/localForage

LocalStorage

.factory('Locations', function($ionicPopup) {
    function store() {
        localStorage.setItem('locations', angular.toJson(Locations.data));
    }

    var Locations = {
        data: [],
        getIndex: function(item) {
            var index = -1;
            angular.forEach(Locations.data, function(location, i) {
                if (item.lat == location.lat && item.lng == location.lng) {
                    index = i;
                }
            });
            return index;
        },
        toggle: function(item) {
            var index = Locations.getIndex(item);
            if (index >= 0) {
                $ionicPopup.confirm({
                    title: 'Are you sure?',
                    template: 'This will remove ' + Locations.data[index].city
                }).then(function(res) {
                    if (res) {
                        Locations.data.splice(index, 1);
                    }
                });
            } else {
                Locations.data.push(item);
                $ionicPopup.alert({
                    title: 'Location saved'
                });
            }
            store();
        },
        primary: function(item) {
            var index = Locations.getIndex(item);
            if (index >= 0) {
                Locations.data.splice(index, 1);
                Locations.data.splice(0, 0, item);
            } else {
                Locations.data.unshift(item);
            }
            store();
        }
    };
    try {
        var items = angular.fromJson(localStorage.getItem('locations')) || [];
        Locations.data = items;
    } catch (e) {
        Locations.data = [];
    }
    return Locations;
})

Platform Style

Android Style: https://www.google.com/design/spec/style/color.html#color-color-schemes

iOS Style: https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/

Adaptive styling CSS

.scroll {
    text - align: center;
    padding - top: 50 px;
}
.ion - ionic {
    font - size: 100 px;
    color: #fff;
}
.pane {
    background: #333;
}
.platform-ios .pane {
	background: # C644FC;
	background: -webkit - linear - gradient(top, #C644FC 0 % , #5856D6 100%);
	background: linear-gradient(to bottom, # C644FC 0 % , #5856D6 100%);
}
.platform-android .pane {
	background: # C62828; background: -webkit - linear - gradient(top, #C62828 0 % , #F44336 100 % ); background: linear - gradient(to bottom, #C62828 0 % , #F44336 100 % );
}

Adapt behavior for a platform or device type

angular.module('App', ['ionic'])
    .controller('Controller', function($scope, $ionicActionSheet, $ionicPopover) {
        $scope.more = function(event) {
            if (ionic.Platform.isIOS()) {
                $ionicActionSheet.show({
                    buttons: [
                        { text: 'Just a button' }
                    ],
                    buttonClicked: function(index) {
                        return true;
                    }
                });
            } else {
                var popover = $ionicPopover.fromTemplate('<ion-popover-view> < button class = "button button-full" > Just a button < /button> < /ion-popover-view>');
                popover.show(event);
            }
        }
    })

Modify default behaviors with $ionicConfigProvider

angular.module('App', ['ionic'])
    .config(function($ionicConfigProvider) {
        $ionicConfigProvider.tabs.style('striped').position('bottom');
    })

Ionic in Action