Skip to content

Instantly share code, notes, and snippets.

@YagoLopez

YagoLopez/Ggebvd.markdown

Created June 15, 2015 10:07
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save YagoLopez/93e30eeb79fd9063f8f5 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save YagoLopez/93e30eeb79fd9063f8f5 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. YagoLopez created this gist Jun 15, 2015.
    7 changes: 7 additions & 0 deletions Ggebvd.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    Ggebvd
    ------


    A [Pen](http://codepen.io/anon/pen/Ggebvd) by [Captain Anonymous](http://codepen.io/anon) on [CodePen](http://codepen.io/).

    [License](http://codepen.io/anon/pen/Ggebvd/license).
    46 changes: 46 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,46 @@
    <html ng-app="ionicApp">
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Ionic Material Design List with Loading and Modal</title>

    <link href="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.0.0-rc.1/css/ionic.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.0.0-rc.1/js/ionic.bundle.min.js"></script>
    </head>

    <body ng-controller="MyCtrl">

    <ion-header-bar class="bar-positive">
    <h1 class="title">Ionic Material Design List with Loading and Modal</h1>
    </ion-header-bar>

    <ion-content padding="true" has-header="true">

    <ion-refresher pulling-text="Pull to refresh"
    refreshing-text="Loading..."
    refreshing-icon="ion-loading-c"
    pulling-icon="ion-ios7-arrow-thin-down"
    on-refresh="doRefresh()">
    </ion-refresher>
    <ion-list on-swipe-left="openModal()"
    class="list">
    <ion-item ng-repeat="item in items">
    <h2 class="padding">Item {{ item.id }}</h2>
    <img src="http://cdn.flaticon.com/png/256/56261.png" alt="" width="40px" height="40px" />
    </ion-item>
    </ion-list>
    </ion-content>

    <script id="modal.html" type="text/ng-template">
    <div class="modal" id="modal">
    <ion-header-bar on-drag="dragDown($event)" on-release="resetPosition($event)">
    <h1 class="title">Modal view</h1>
    </ion-header-bar>
    <ion-content class="padding">
    <button class="button button-full button-positive" ng-click="closeModal()">click me to close</button>
    </ion-content>
    </div>
    </script>

    </body>
    </html>
    95 changes: 95 additions & 0 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,95 @@
    angular.module('ionicApp', ['ionic'])

    .controller('MyCtrl', function($scope, $timeout, $ionicLoading, $ionicModal ,$window) {

    // Setup the loader
    $ionicLoading.show({
    content: 'Loading',
    animation: 'fade-in',
    showBackdrop: true,
    maxWidth: 200,
    showDelay: 0
    });

    $timeout(function () {
    $ionicLoading.hide();
    $scope.items = [
    { id: 0 },
    { id: 1 },
    { id: 2 },
    { id: 3 },
    { id: 4 },
    { id: 5 },
    { id: 6 },
    { id: 7 },
    { id: 8 },
    { id: 9 },
    { id: 10 },
    { id: 11 },
    { id: 12 },
    { id: 13 },
    { id: 14 },
    { id: 15 },
    { id: 16 },
    { id: 17 },
    { id: 18 },
    { id: 19 },
    { id: 20 },
    { id: 21 },
    { id: 22 },
    { id: 23 },
    { id: 24 },
    { id: 25 },
    { id: 26 },
    { id: 27 },
    { id: 28 },
    { id: 29 },
    { id: 30 },
    { id: 31 },
    { id: 32 },
    { id: 33 },
    { id: 34 },
    { id: 35 },
    { id: 36 },
    { id: 37 },
    { id: 38 },
    { id: 39 },
    { id: 40 },
    { id: 41 },
    { id: 42 },
    { id: 43 },
    { id: 44 },
    { id: 45 },
    { id: 46 },
    { id: 47 },
    { id: 48 },
    { id: 49 },
    { id: 50 }
    ];
    }, 2000);

    $ionicModal.fromTemplateUrl('modal.html', {
    scope: $scope,
    animation: 'slide-in-up'
    }).then(function(modal) {
    $scope.modal = modal;
    })

    $scope.openModal = function() {
    $scope.modal.show()
    }

    $scope.closeModal = function() {
    return $scope.modal.hide();
    };

    $scope.$on('$destroy', function() {
    $scope.modal.remove();
    });

    $scope.doRefresh = function() {
    /* Do whatever you want here */
    $scope.$broadcast('scroll.refreshComplete');
    }

    })
    19 changes: 19 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,19 @@
    body {
    background: #eee;
    }
    .bar.bar-positive {
    background-color: #1F3A93 !important;
    background-image: none !important;
    border: none !important;
    }
    .list .item {
    margin-bottom: 10px;
    border: none;
    box-shadow: 0px 1px 3px rgba(51, 51, 51, 0.40);
    }
    .list .item h2 {
    float: left;
    }
    .list .item img {
    float: right
    }