Some new text examples for fun 🎅

ionic-team · Dec 7, 2015 · efbc7f1 · efbc7f1
1 parent b9449c7
commit efbc7f1
Show file tree

Hide file tree

Showing 9 changed files with 568 additions and 0 deletions.
diff --git a/test/html/contenteditable.html b/test/html/contenteditable.html
@@ -0,0 +1,47 @@
+
+<!DOCTYPE html>
+<html ng-app="navTest">
+  <head>
+    <meta charset="utf-8">
+    <title>Content</title>
+
+    <!-- Sets initial viewport load and disables zooming  -->
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
+    <link rel="stylesheet" href="../../../../dist/css/ionic.css">
+
+    <script src="../../../../dist/js/ionic.bundle.js"></script>
+  </head>
+  <body>
+    <ion-pane>
+      <ion-header-bar id="header" class="bar-positive">
+        <h1 class="title">Video Test</h1>
+      </ion-header-bar>
+
+      <ion-content id="container">
+        <div contenteditable="true" data-tap-disabled="true">
+          <h1>Test for &lt;video /&gt; native controls.</h1>
+          <h2>Confirmed by the behavior of the browser Internet Explorer 11.</h2>
+
+          <p>default: (working)</p>
+          <video id="without" controls="controls">
+              <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
+          </video>
+
+          <p>with stopPropagation on mousedown: (working)</p>
+          <video id="with-propagation" controls="controls">
+              <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
+          </video>
+
+          <p>with preventDefault on mousedown: (<strong>doesn't working</strong>)</p>
+          <video id="with-prevent" controls="controls">
+              <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
+          </video>
+        </div>
+      </ion-content>
+    </ion-pane>
+
+    <script>
+      angular.module('navTest', ['ionic'])
+    </script>
+  </body>
+</html>
diff --git a/test/html/input-range.html b/test/html/input-range.html
@@ -0,0 +1,34 @@
+<html ng-app="ionicApp">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
+
+  <title>Radio Buttons</title>
+
+  <link rel="stylesheet" href="../../dist/css/ionic.css">
+  <script src="../../../../dist/js/ionic.bundle.js"></script>
+</head>
+
+<body ng-controller="MainCtrl">
+
+<ion-header-bar class="bar-positive">
+  <h1 class="title">Radio Buttons</h1>
+</ion-header-bar>
+
+<ion-content>
+<div class="list">
+  <div class="item range range-positive">
+    <i class="icon ion-ios-sunny-outline"></i>
+    <input type="range" name="volume" min="0" max="100" value="33">
+    <i class="icon ion-ios-sunny"></i>
+  </div>
+</div>
+</ion-content>
+<script>
+angular.module('ionicApp', ['ionic'])
+.controller('MainCtrl', function($scope) {
+  $scope.formData = {};
+});
+</script>
+</body>
+</html>
diff --git a/test/html/loading.html b/test/html/loading.html
@@ -23,6 +23,14 @@
             delay: 100,
             duration: 3000
           });
+          $ionicLoading.hide();
+          $ionicLoading.show({
+            //template: '<div>Connection problem.</div><br/><div>Please check your internet connection!</div>',
+            delay: 100,
+            duration: 3000
+          });
+
+          console.log('Loading', l);
         };
       });
     </script>

diff --git a/test/html/navParams.html b/test/html/navParams.html
@@ -0,0 +1,123 @@
+<html ng-app="nav">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
+
+    <title>navViews and ion-tabs w/ nested navViews</title>
+
+    <link rel="stylesheet" href="../../../../dist/css/ionic.css">
+    <script src="../../../../dist/js/ionic.bundle.js"></script>
+    <script src="dom-trace.js"></script>
+  </head>
+  <body>
+
+    <div>
+      <ion-nav-bar class="bar-positive">
+        <ion-nav-back-button class="button-icon" from-title>
+          Back
+        </ion-nav-back-button>
+      </ion-nav-bar>
+      <ion-nav-view></ion-nav-view>
+    </div>
+
+    <script id="page1.html" type="text/ng-template">
+      <ion-view title="Page 1">
+        <ion-nav-buttons side="right">
+          <button class="button button-icon ion-android-search"></button>
+        </ion-nav-buttons>
+        <ion-content padding="true">
+          <h2>Random {{random}}</h2>
+          <ion-list>
+            <div class="item item-divider">
+              Things
+            </div>
+            <ion-item ng-repeat="item in items" ui-sref="page2({itemId: item.id})">
+              Item {{$index}}
+            </ion-item>
+            <div class="item item-divider">
+              Stuff
+            </div>
+            <ion-item ng-repeat="item in items2" ui-sref="page2({item: item})">
+              Item {{$index}}
+            </ion-item>
+          </ion-list>
+        </ion-content>
+      </ion-view>
+    </script>
+    <script id="page2.html" type="text/ng-template">
+      <ion-view title="Page 2">
+        <ion-content padding="true">
+          <h2>Item ID: {{itemId}}</h2>
+          <a ng-click="goBack()" class="button button-positive">Back</a>
+          <a ui-sref="page3({itemId: itemId})" class="button button-positive">Page 3</a>
+        </ion-content>
+      </ion-view>
+    </script>
+    <script id="page3.html" type="text/ng-template">
+      <ion-view title="Page 3">
+        <ion-content padding="true">
+          <h2>IITTEEEM {{itemId}}</h2>
+          <a ng-click="goBack()" class="button button-positive">Back</a>
+          <a href="#/page1" class="button button-positive">Page 1</a>
+        </ion-content>
+      </ion-view>
+    </script>
+    <script>
+      angular.module('nav', ['ionic'])
+
+      .config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
+
+        //$ionicConfigProvider.views.maxCache(0);
+
+        $stateProvider
+          .state('page1', {
+            url: "/page1",
+            templateUrl: "page1.html",
+            controller: 'Page1Ctrl'
+          })
+          .state('page2', {
+            url: "/page2/:itemId",
+            templateUrl: "page2.html",
+            controller: 'Page2Ctrl'
+          })
+          .state('page3', {
+            url: "/page3/:itemId",
+            templateUrl: "page3.html",
+            controller: 'Page3Ctrl'
+          })
+
+         $urlRouterProvider.otherwise("/page1");
+       })
+
+       .controller('Page1Ctrl', function($scope, $ionicHistory) {
+         $scope.random = Math.random() * 100;
+         $scope.items = [];
+         for(var i = 0; i < 4; i++) {
+          $scope.items.push({ id: i });
+         }
+
+         $scope.items2 = [];
+         for(var i = 0; i < 4; i++) {
+          $scope.items2.push({id: i});
+         }
+       })
+
+       .controller('Page2Ctrl', function($timeout, $scope, $ionicNavBarDelegate, $ionicHistory, $stateParams) {
+         console.log('Page 2 params', $stateParams);
+         $scope.itemId = $stateParams.itemId;
+         $scope.goBack = function() {
+           $ionicNavBarDelegate.back();
+         };
+       })
+
+       .controller('Page3Ctrl', function($scope, $ionicNavBarDelegate, $stateParams) {
+         console.log('State params 3', $stateParams);
+         $scope.itemId = $stateParams.itemId;
+         $scope.goBack = function() {
+           $ionicNavBarDelegate.back();
+         };
+       })
+
+    </script>
+  </body>
+</html>
diff --git a/test/html/openLayers.html b/test/html/openLayers.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
+
+    <title>Maps</title>
+
+    <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.15&sensor=true&region=PL&language=pl"></script>
+    <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.9/src/markerwithlabel.js"></script>
+    <link rel="stylesheet" href="../../../../dist/css/ionic.css">
+    <link rel="stylesheet" href="http://openlayers.org/en/v3.11.2/css/ol.css">
+    <script src="http://openlayers.org/en/v3.11.2/build/ol.js"></script>
+    <script src="../../../../dist/js/ionic.bundle.js"></script>
+    <style>
+    .map:-moz-full-screen {
+  height: 100%;
+}
+.map:-webkit-full-screen {
+  height: 100%;
+}
+.map:fullscreen {
+  height: 100%;
+}
+/* position the rotate control lower than usual */
+.ol-rotate {
+  top: 3em;
+}
+
+    </style>
+  </head>
+  <body ng-controller="mainCtrl">
+    <div class="row-fluid">
+      <div class="span12">
+        <div id="map" class="map" data-tap-disabled="true"></div>
+      </div>
+    </div>
+  <script>
+    var map = new ol.Map({
+      interactions: ol.interaction.defaults().extend([
+        new ol.interaction.DragRotateAndZoom()
+      ]),
+      layers: [
+        new ol.layer.Tile({
+          source: new ol.source.OSM({})
+        })
+      ],
+      // Use the canvas renderer because it's currently the fastest
+      target: 'map',
+      view: new ol.View({
+        center: [-33519607, 5616436],
+        rotation: -Math.PI / 8,
+        zoom: 8
+      })
+    });
+
+  </script>
+</body>
+</html>
diff --git a/test/html/popupRace.html b/test/html/popupRace.html
@@ -0,0 +1,35 @@
+<html ng-app="myApp">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
+
+  <title>Ionic Pull to Refresh</title>
+
+  <link rel="stylesheet" href="../../dist/css/ionic.css">
+  <script src="../../../../dist/js/ionic.bundle.js"></script>
+</head>
+    <ion-content ng-controller="HomeCtrl as homeCtrl">
+      <button class="button button-positive"
+              ng-click="homeCtrl.showAlerts()">Click Me</button>
+    </ion-content>
+    <script>
+    var app = angular.module('myApp', ['ionic']);
+    app.controller('HomeCtrl', function($scope, $ionicPopup, $state, $timeout) {
+      this.showAlerts = function() {
+        /* show first popup */
+        var alertPopup = $ionicPopup.alert({
+          title: 'First Popup',
+          template: 'You don\'t see me'
+        });
+        /* something changed - close immediately and show different popup */
+        alertPopup.close();
+        /*
+        var newPopup = $ionicPopup.alert({
+          title: 'Second Popup',
+          buttons: [{text: 'You can\'t close me', type: 'button-assertive'}],
+          template: 'Ouch, stuck with new message'
+        });*/
+      };
+    });
+    </script>
+</html>
diff --git a/test/html/sideMenuExpose.html b/test/html/sideMenuExpose.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html ng-app="sideMenuTest">
+  <head>
+    <meta charset="utf-8">
+    <title>Side Menus</title>
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../../../../dist/css/ionic.css">
+    <script src="../../../../dist/js/ionic.bundle.js"></script>
+  </head>
+  <body>
+    <div>
+<ion-side-menus>
+
+ <ion-side-menu side="left">
+    <header class="bar bar-header bar-stable">
+      <h1 class="title">Left</h1>
+    </header>
+    <ion-content class="has-header">
+      <ion-list>
+        <ion-item nav-clear menu-close href="#/app/search">
+          Search
+        </ion-item>
+        <ion-item nav-clear menu-close href="#/app/browse">
+          Browse
+        </ion-item>
+        <ion-item nav-clear menu-close href="#/app/playlists">
+          Playlists
+        </ion-item>
+      </ion-list>
+    </ion-content>
+  </ion-side-menu>
+
+  <ion-pane ion-side-menu-content>
+    <ion-nav-bar class="bar-stable">
+      <ion-nav-back-button class="button-clear"><i class="icon ion-chevron-left"></i> Back</ion-nav-back-button>
+    </ion-nav-bar>
+    <ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
+    <ion-nav-buttons side="right">
+            <button menu-toggle="right" class="button button-icon icon ion-navicon"></button>
+        </ion-nav-buttons>
+  </ion-pane>
+
+  <ion-side-menu side="right" expose-aside-when="large">
+    <header class="bar bar-header bar-stable">
+      <h1>Right</h1>
+    </header>
+    <ion-content class="has-header">
+      test
+    </ion-content>
+  </ion-side-menu>
+</ion-side-menus>
+</div>
+
+    <script>
+      angular.module('sideMenuTest', ['ionic'])
+
+      .controller('MenuCtrl', function($scope, $ionicSideMenuDelegate) {
+
+        $scope.list = [];
+        for(var i = 0; i < 20; i++) {
+          $scope.list.push({
+            text: 'Item ' + i
+          });
+        }
+      })
+
+      .controller('LeftCtrl', function($scope) {
+        $scope.value = true;
+        $scope.list = [{text:1},{text:2},{text:3}];
+      });
+
+    </script>
+  </body>
+</html>