ionic/test/html/slides.html at 1.x · CssFormWork/ionic · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
<!DOCTYPE html>
<html ng-app="slidesTest">
  <head>
    <meta charset="utf-8">
    <title>Slide Box</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 ng-controller="MyCtrl">
  <ion-pane>

    <ion-header-bar class="bar-assertive">
      <ion-title>Hello</ion-title>
    </ion-header-bar>
    <ion-content class="padding" scroll="false">
      <ion-slides options="options" slider="data.slider">
        <ion-slide-page>
          <ion-content>
            <h2>Journey to HD 219134 b</h2>
            <div>some property: {{viewModel.someProperty}}</div>
            <p>
              This app will prepare you for your journey through the galaxy
              to HD 219134 b, an exoplanet 21 lightyears away from our home on Earth.
            </p>
            <p>
              <img src="exoplanet.jpg" style="max-width: 100%" />
            </p>
            <div style="text-align: center">
              <small style="font-style: italic">An artist's rendering of your new home.</small>
            </div>
            <div>
              <button class="button button-assertive" ng-click="doClick()">Tap</button>
            </div>
          </ion-content>
        </ion-slide-page>
        <ion-slide-page>
          <h2>Before launch</h2>
          <div>some property: {{viewModel.someProperty}}</div>
          <p>
            Before entering the space capsule, please prepare accordingly:
          </p>
          <p>
            <img src="exoplanet.jpg" style="max-width: 100%" />
          </p>
          <ul>
            <li>Say "good bye" to your loved ones. You will not see them again.</li>
            <li>Turn off any gas sources and lights in your home.</li>
            <li>Pets cannot make the journey to distant planets. Please arrange for their safe keeping.</li>
          </ul>
          <div>
            <button class="button button-assertive" ng-click="doClick()">Tap</button>
          </div>
        </ion-slide-page>
        <ion-slide-page>
          <h2>During launch</h2>
          <div>some property: {{viewModel.someProperty}}</div>
          <p>
            Hang on and enjoy the ride. Your input is not needed (and, in fact, is heavily restricted) during the
            launch and minutes after reacing the proper altitude needed to utilize the ion propulsion engines
            that will carry you to HD 219134 b.
          </p>
          <p>
            <img src="exoplanet.jpg" style="max-width: 100%" />
          </p>
        </ion-slide-page>
        <ion-slide-page>
          <h2>After launch and years ahead</h2>
          <div>some property: {{viewModel.someProperty}}</div>
          <p>
            Thus begins the long journey to HD 219134 b. To pass the time, we've supplied
            you with a variety of pharmaceuticals along with a pamphlet to understand the benefits and drawbacks of each.
          </p>
          <p>
            <img src="exoplanet.jpg" style="max-width: 100%" />
          </p>
          <p>
            Whether you choose to utilize your full Vitality Buffer of four earth-years by experiencing the mystery and excitement
             of traveling through the vast universe, you must transition to the Cryo Pad for preservation for the rest of the voyage.
          </p>
          <p>
            During your long nap, the experimental Worm Slip engines will fire to reduce the journey by several hundreds of thousands of earth-years.
            The status of the experiment will not be known until your planned Cryo Wake in 4000 earth-years.
          </p>
          <div>
            <button class="button button-assertive" ng-click="doClick()">Tap</button>
          </div>
        </ion-slide-page>
        <ion-slide-page>
          <h2>Approaching HD 219134 b</h2>
          <div>some property: {{viewModel.someProperty}}</div>
          <p>
            <img src="exoplanet.jpg" style="max-width: 100%" />
          </p>
          <p>
            If you are lucky enough to be able to see HD 219134 b with your own eyes, congratulations! No
            space pioneer has ever made it this far. Take a minute and celebrate this monumental achievement by
            activating the Party Pod.
          </p>
          <p>
            Next, review the Approach checklist for a detailed list of instructions on preparing the capsule for
            entry into a possible atmosphere.
          </p>
          <p>
            If the Worm Slip experiment failed and you have only partially progressed on your journey to HD 219134 b, please review the
            Contingency Plan for ideas on how to make the most of the rest of your life in space.
          </p>
          <div>
            <button class="button button-assertive" ng-click="doClick()">Tap</button>
          </div>
        </ion-slide-page>
        <ion-slide-page>
          <h2>Life on HD 219134 b</h2>
          <p>
            <img src="exoplanet.jpg" style="max-width: 100%" />
          </p>
          <p>
            Scientists aren't quite sure what life on HD 219134 b will be like!
            In order to help you adapt to a set of predicted atmospheric, pressure, and temperature environments,
            we've provided three Life Support Configurations.
          </p>
          <p>
            Your Personal Pioneer Pad will help you determine which Life Support Configuration to use. In the event
            that none of the provided Life Support Configurations adaquately protects you from the HD 219134 b environment,
            we regret to inform you that the experiment is ended and we hope to one day retrieve your valuable data. From all of us
            at Ion Space Pursuits, we thank you for your participation in this important research study.
          </p>
          <div>some property: {{viewModel.someProperty}}</div>
          <div>
            <button class="button button-assertive" ng-click="doClick()">Tap</button>
          </div>
        </ion-slide-page>
      </ion-slides>
    </ion-content>
  </ion-pane>
  <script>
    angular.module('slidesTest', ['ionic'])
    .controller('MyCtrl', ['$scope', '$interval', '$timeout', function($scope, $interval, $timeout) {

      $scope.options = {
        loop: true
      }
      $scope.viewModel = {};
      $scope.viewModel.someProperty = "Waiting...";

      $scope.$on("$ionicSlides.sliderInitialized", function(event, data){
        console.log("Slider initialized: ", data);
        $scope.slider = data.slider;
      });

      $interval(function() {
        //$scope.someProperty = Math.random();
        $scope.viewModel.someProperty  = Math.random();
        if ( $scope.slider ){
          $scope.slider.updateLoop();
        }
      }, 1000);

      $scope.$on("$ionicSlides.slideChangeEnd", function(event, data){
        console.log("slideChangeEnd event: ", data);
      });

      $scope.$on("$ionicSlides.slideChangeStart", function(event, data){
        console.log("slideChangeStart event: ", data);
      });

      $scope.doClick = function(){
        alert("clicked!");
      }
    }]);
    </script>
  </body>
</html>