ionic material ศึกษาจาก demo การทำงานของ controller ตอนที่ 3

/* global angular, document, window */
'use strict';

angular.module('starter.controllers', [])

.controller('AppCtrl', function($scope, $ionicModal, $ionicPopover, $timeout) {
    // Form data for the login modal
    $scope.loginData = {};
    $scope.isExpanded = false;
    $scope.hasHeaderFabLeft = false;
    $scope.hasHeaderFabRight = false;

    var navIcons = document.getElementsByClassName('ion-navicon');
    for (var i = 0; i < navIcons.length; i++) {
        navIcons.addEventListener('click', function() {
            this.classList.toggle('active');
        });
    }

    ////////////////////////////////////////
    // Layout Methods
    ////////////////////////////////////////

    $scope.hideNavBar = function() {
        document.getElementsByTagName('ion-nav-bar')[0].style.display = 'none';
    };

    $scope.showNavBar = function() {
        document.getElementsByTagName('ion-nav-bar')[0].style.display = 'block';
    };

    $scope.noHeader = function() {
        var content = document.getElementsByTagName('ion-content');
        for (var i = 0; i < content.length; i++) {
            if (content[i].classList.contains('has-header')) {
                content[i].classList.toggle('has-header');
            }
        }
    };

    $scope.setExpanded = function(bool) {
        $scope.isExpanded = bool;
    };

    $scope.setHeaderFab = function(location) {
        var hasHeaderFabLeft = false;
        var hasHeaderFabRight = false;

        switch (location) {
            case 'left':
                hasHeaderFabLeft = true;
                break;
            case 'right':
                hasHeaderFabRight = true;
                break;
        }

        $scope.hasHeaderFabLeft = hasHeaderFabLeft;
        $scope.hasHeaderFabRight = hasHeaderFabRight;
    };

    $scope.hasHeader = function() {
        var content = document.getElementsByTagName('ion-content');
        for (var i = 0; i < content.length; i++) {
            if (!content[i].classList.contains('has-header')) {
                content[i].classList.toggle('has-header');
            }
        }

    };

    $scope.hideHeader = function() {
        $scope.hideNavBar();
        $scope.noHeader();
    };

    $scope.showHeader = function() {
        $scope.showNavBar();
        $scope.hasHeader();
    };

    $scope.clearFabs = function() {
        var fabs = document.getElementsByClassName('button-fab');
        if (fabs.length && fabs.length > 1) {
            fabs[0].remove();
        }
    };
})

.controller('LoginCtrl', function($scope, $timeout, $stateParams, ionicMaterialInk) {
    $scope.$parent.clearFabs();
    $timeout(function() {
        $scope.$parent.hideHeader();
    }, 0);
    ionicMaterialInk.displayEffect();
})

.controller('FriendsCtrl', function($scope, $stateParams, $timeout, ionicMaterialInk, ionicMaterialMotion) {
    // Set Header
    $scope.$parent.showHeader();
    $scope.$parent.clearFabs();
    $scope.$parent.setHeaderFab('left');

    // Delay expansion
    $timeout(function() {
        $scope.isExpanded = true;
        $scope.$parent.setExpanded(true);
    }, 300);

    // Set Motion
    ionicMaterialMotion.fadeSlideInRight();

    // Set Ink
    ionicMaterialInk.displayEffect();
})

.controller('ProfileCtrl', function($scope, $stateParams, $timeout, ionicMaterialMotion, ionicMaterialInk) {
    // Set Header
    $scope.$parent.showHeader();
    $scope.$parent.clearFabs();
    $scope.isExpanded = false;
    $scope.$parent.setExpanded(false);
    $scope.$parent.setHeaderFab(false);

    // Set Motion
    $timeout(function() {
        ionicMaterialMotion.slideUp({
            selector: '.slide-up'
        });
    }, 300);

    $timeout(function() {
        ionicMaterialMotion.fadeSlideInRight({
            startVelocity: 3000
        });
    }, 700);

    // Set Ink
    ionicMaterialInk.displayEffect();
})

.controller('ActivityCtrl', function($scope, $stateParams, $timeout, ionicMaterialMotion, ionicMaterialInk) {
    $scope.$parent.showHeader();
    $scope.$parent.clearFabs();
    $scope.isExpanded = true;
    $scope.$parent.setExpanded(true);
    $scope.$parent.setHeaderFab('right');

    $timeout(function() {
        ionicMaterialMotion.fadeSlideIn({
            selector: '.animate-fade-slide-in .item'
        });
    }, 200);

    // Activate ink for controller
    ionicMaterialInk.displayEffect();
})

.controller('GalleryCtrl', function($scope, $stateParams, $timeout, ionicMaterialInk, ionicMaterialMotion) {
    $scope.$parent.showHeader();
    $scope.$parent.clearFabs();
    $scope.isExpanded = true;
    $scope.$parent.setExpanded(true);
    $scope.$parent.setHeaderFab(false);

    // Activate ink for controller
    ionicMaterialInk.displayEffect();

    ionicMaterialMotion.pushDown({
        selector: '.push-down'
    });
    ionicMaterialMotion.fadeSlideInRight({
        selector: '.animate-fade-slide-in .item'
    });

})
;

'use strict';  // ต้องประกาศตัวแปรก่อนเสมอถ้าจะใช้งาน โดยมี var นำหน้า

angular.module('starter.controllers', [])  // ลงทะเบียนชื่อโมดูลในการใช้งาน

$urlRouterProvider.otherwise('/app/login');

// การทำงาน controller ใน login state ที่ชื่อ  LoginCtrl
.controller('LoginCtrl', function($scope, $timeout, $stateParams, ionicMaterialInk) {
	// เรียกใช้งานฟังก์ชั่น clearFabs() เพื่อไม่แสดง ปุ่ม fab 
	// สังเกตว่าเรียกผ่าน $scope.$parent เพราะเป็นฟังก์ชั่นจาก controller ที่เป็น parent อีกที
    $scope.$parent.clearFabs();
	// หน่างเวลา 0 มิลลิวินาที แล้วซ่อน ส่วนของ header ของเนื้อหา
    $timeout(function() {
		// เรียกใช้งานฟักง์ชั่น  hideHeader() จาก parent
        $scope.$parent.hideHeader();
    }, 0); // การหน่วงเวลา ที่เป็น 0 มิลลิวินาที เหมือนจะไม่มีผลอะไร แต่ความจริงเป็นการคั่นให้สคริปทงานได้ถูกต้อง
	
	// สังเกตว่ามีการ inject ionicMaterialInk เข้ามาเพื่อใช้งาน 
    ionicMaterialInk.displayEffect(); // สร้าง effect สำหรับ link
})

// การทำงาน controller ใน profile state ที่ชื่อ  ProfileCtrl
.controller('ProfileCtrl', function($scope, $stateParams, $timeout, ionicMaterialMotion, ionicMaterialInk) {
    // การกำหนดต่าต่างๆ ของส่วน header
    $scope.$parent.showHeader(); // .แสดง header
    $scope.$parent.clearFabs(); // เคลียร์ปุ่ม fab 
    $scope.isExpanded = false; // กำหนดค่าเริ่มต้นให้ ไม่ขยายส่วนของ header
    $scope.$parent.setExpanded(false);// เรียกใช้ฟังก์ชั่นเพื่อกำหนดค่าให้ การขยายส่วน header
    $scope.$parent.setHeaderFab(false); // เรียกใช้ฟังก์ชั่นเพื่อกำหนดให้ไม่แสดงปุ่ม fab

    // delay การใช้งาน effect ส่วนที่ 1
    $timeout(function() {
        ionicMaterialMotion.slideUp({
            selector: '.slide-up'  // ให้ element ที่มี selector ชื่อ slide-up ใช้งาน effect slideUp
        }); // selector ในที่นี้คือชื่อ css class ที่อยู่ในไฟล์ profile.html
    }, 300); 

    // delay การใช้งาน effect ส่วนที่ 2
    $timeout(function() {
        ionicMaterialMotion.fadeSlideInRight({
            startVelocity: 3000  // ความเร้วในการแสดง
        }); // จะเห็นว่าส่วนนี้ไม่ได้กำหนดในนี้ว่าเป็น effect ของอะไร แต่จะไปกำหนดใน css class แทน
    }, 700);

	// สังเกตว่ามีการ inject ionicMaterialInk เข้ามาเพื่อใช้งาน 
    ionicMaterialInk.displayEffect(); // สร้าง effect สำหรับ link
})

        <div class="list animate-fade-slide-in-right">
            <a ui-sref="app.friends" class="item item-avatar item-icon-right">
                <img src="img/jon-snow.jpg">
                <h2>Jon Snow</h2>
                <p>Da illest illegitimate</p>
                <i class="icon ion-chatbubble muted"></i>
            </a>
            <a ui-sref="app.friends" class="item item-avatar item-icon-right">
                <img src="img/sansa.jpg">
                <h2>Sansa Stark</h2>
                <p>&amp; Joffrey <strike>sitting</strike> sat in a tree</p>
                <i class="icon ion-chatbubble muted"></i>
            </a>
            <a ui-sref="app.friends" class="item item-avatar item-icon-right">
                <img src="img/tyrion.jpg">
                <h2>Tyrion Lannister</h2>
                <p>B.A.M.F. imp</p>
                <i class="icon ion-chatbubble muted"></i>
            </a>
        </div>

// การทำงาน controller ใน friend state ที่ชื่อ  FriendsCtrl
.controller('FriendsCtrl', function($scope, $stateParams, $timeout, ionicMaterialInk, ionicMaterialMotion) {
    // การกำหนดต่าต่างๆ ของส่วน header
    $scope.$parent.showHeader(); // .แสดง header
    $scope.$parent.clearFabs(); // เคลียร์ปุ่ม fab 
    $scope.$parent.setHeaderFab('left');  // เรียกใช้ฟังก์ชั่นว่าให้ปุ่ม fab อยู่ด้านซ้าย

    // delay การขยาย header เพื่อรองรับปุ่ม fab
    $timeout(function() {
        $scope.isExpanded = true; //  กำหนดค่าเริ่มต้นให้ ให้ขยายส่วนของเนื้อหาใน ion-content ให้รองรับ header
        $scope.$parent.setExpanded(true); // เรียกใช้ฟังก์ชั่นเพื่อกำหนดค่าให้ มีการขยายส่วน header ของ ion-nav-bar
    }, 300);

    // กำหนด effect การแสดงส่วนที่กำหนด
    ionicMaterialMotion.fadeSlideInRight();

	// สังเกตว่ามีการ inject ionicMaterialInk เข้ามาเพื่อใช้งาน 
    ionicMaterialInk.displayEffect(); // สร้าง effect สำหรับ link
})