Readme

ionic-team · Mar 18, 2014 · bb4c757 · bb4c757
1 parent d8c9ffc
commit bb4c757
Show file tree

Hide file tree

Showing 106 changed files with 141,095 additions and 0 deletions.
diff --git a/.cordova/config.json b/.cordova/config.json
@@ -0,0 +1,4 @@
+{
+    "id": "com.ionicframework.starter",
+    "name": "StarterApp"
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+*.keystore
+*.sw*
+platforms/^.*
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2014 Drifty
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/config.xml b/config.xml
@@ -0,0 +1,16 @@
+<?xml version='1.0' encoding='utf-8'?>
+<widget id="com.ionicframework.starter" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
+    <name>StarterApp</name>
+    <description>
+        A sample Ionic Framework app using Cordova and AngularJS
+    </description>
+    <author email="support@drifty.com" href="http://ionicframework.com/">
+        Ionic Framework Team
+    </author>
+    <content src="index.html" />
+    <access origin="*" />
+    <preference name="fullscreen" value="true" />
+    <preference name="webviewbounce" value="false" />
+    <preference name="UIWebViewBounce" value="false" />
+    <preference name="DisallowOverscroll" value="true" />
+</widget>
diff --git a/platforms/.gitignore b/platforms/.gitignore
@@ -0,0 +1,4 @@
+# Ignore everything in this directory
+*
+# Except this file
+!.gitignore
diff --git a/plugins/.gitignore b/plugins/.gitignore
@@ -0,0 +1,4 @@
+# Ignore everything in this directory
+*
+# Except this file
+!.gitignore
diff --git a/www/config.xml b/www/config.xml
@@ -0,0 +1,16 @@
+<?xml version='1.0' encoding='utf-8'?>
+<widget id="com.ionicframework.starter" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
+    <name>StarterApp</name>
+    <description>
+        A sample Ionic Framework app using Cordova and AngularJS
+    </description>
+    <author email="support@drifty.com" href="http://ionicframework.com/">
+        Ionic Framework Team
+    </author>
+    <content src="index.html" />
+    <access origin="*" />
+    <preference name="fullscreen" value="true" />
+    <preference name="webviewbounce" value="false" />
+    <preference name="UIWebViewBounce" value="false" />
+    <preference name="DisallowOverscroll" value="true" />
+</widget>
diff --git a/www/css/app.css b/www/css/app.css
@@ -0,0 +1,8 @@
+/* Your app's CSS, go crazy, make it your own */
+
+.ionic-logo {
+  display: block;
+  margin: 15px auto;
+  width: 96px;
+  height: 96px;
+}
diff --git a/www/img/ionic.png b/www/img/ionic.png
diff --git a/www/index.html b/www/index.html
@@ -0,0 +1,154 @@
+<!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>Ionic Seed App</title>
+
+    <!-- ionic css -->
+    <link href="lib/css/ionic.css" rel="stylesheet">
+
+    <!-- your app's css -->
+    <link href="css/app.css" rel="stylesheet">
+
+    <!-- ionic/angularjs scripts -->
+    <script src="lib/js/ionic.bundle.js"></script>
+
+    <!-- cordova script (this will be a 404 during development) -->
+    <script src="cordova.js"></script>
+
+    <!-- your app's script -->
+    <script src="js/app.js"></script>
+    <script src="js/services.js"></script>
+    <script src="js/controllers.js"></script>
+  </head>
+
+  <!-- 
+    'starter' is the name of this angular module (js/app.js)
+  -->
+  <body ng-app="starter" animation="slide-left-right-ios7">
+
+    <ion-pane>
+      <ion-header-bar class="bar-positive">
+        <div class="buttons">
+          <button class="button button-icon ion-navicon"></button>
+        </div>
+        <h1 class="title">Things</h1>
+      </ion-header-bar>
+      <ion-content header-shrink>
+        <div style="height: 64px;"></div>
+        <div class="list card">
+
+          <div class="item item-avatar">
+            <img src="http://ionicframework.com/img/docs/mcfly.jpg">
+            <h2>Marty McFly</h2>
+            <p>November 05, 1955</p>
+          </div>
+
+          <div class="item item-body">
+            <img class="full-image" src="http://ionicframework.com/img/docs/delorean.jpg">
+            <p>
+              This is a "Facebook" styled Card. The header is created from a Thumbnail List item,
+              the content is from a card-body consisting of an image and paragraph text. The footer
+              consists of tabs, icons aligned left, within the card-footer.
+            </p>
+            <p>
+              <a href="#" class="subdued">1 Like</a>
+              <a href="#" class="subdued">5 Comments</a>
+            </p>
+          </div>
+
+          <div class="item tabs tabs-secondary tabs-icon-left">
+            <a class="tab-item" href="#">
+              <i class="icon ion-thumbsup"></i>
+              Like
+            </a>
+            <a class="tab-item" href="#">
+              <i class="icon ion-chatbox"></i>
+              Comment
+            </a>
+            <a class="tab-item" href="#">
+              <i class="icon ion-share"></i>
+              Share
+            </a>
+          </div>
+
+        </div>
+        <div class="list card">
+
+          <div class="item item-avatar">
+            <img src="http://ionicframework.com/img/docs/mcfly.jpg">
+            <h2>Marty McFly</h2>
+            <p>November 05, 1955</p>
+          </div>
+
+          <div class="item item-body">
+            <img class="full-image" src="http://ionicframework.com/img/docs/delorean.jpg">
+            <p>
+              This is a "Facebook" styled Card. The header is created from a Thumbnail List item,
+              the content is from a card-body consisting of an image and paragraph text. The footer
+              consists of tabs, icons aligned left, within the card-footer.
+            </p>
+            <p>
+              <a href="#" class="subdued">1 Like</a>
+              <a href="#" class="subdued">5 Comments</a>
+            </p>
+          </div>
+
+          <div class="item tabs tabs-secondary tabs-icon-left">
+            <a class="tab-item" href="#">
+              <i class="icon ion-thumbsup"></i>
+              Like
+            </a>
+            <a class="tab-item" href="#">
+              <i class="icon ion-chatbox"></i>
+              Comment
+            </a>
+            <a class="tab-item" href="#">
+              <i class="icon ion-share"></i>
+              Share
+            </a>
+          </div>
+
+        </div>
+        <div class="list card">
+
+          <div class="item item-avatar">
+            <img src="http://ionicframework.com/img/docs/mcfly.jpg">
+            <h2>Marty McFly</h2>
+            <p>November 05, 1955</p>
+          </div>
+
+          <div class="item item-body">
+            <img class="full-image" src="http://ionicframework.com/img/docs/delorean.jpg">
+            <p>
+              This is a "Facebook" styled Card. The header is created from a Thumbnail List item,
+              the content is from a card-body consisting of an image and paragraph text. The footer
+              consists of tabs, icons aligned left, within the card-footer.
+            </p>
+            <p>
+              <a href="#" class="subdued">1 Like</a>
+              <a href="#" class="subdued">5 Comments</a>
+            </p>
+          </div>
+
+          <div class="item tabs tabs-secondary tabs-icon-left">
+            <a class="tab-item" href="#">
+              <i class="icon ion-thumbsup"></i>
+              Like
+            </a>
+            <a class="tab-item" href="#">
+              <i class="icon ion-chatbox"></i>
+              Comment
+            </a>
+            <a class="tab-item" href="#">
+              <i class="icon ion-share"></i>
+              Share
+            </a>
+          </div>
+
+        </div>
+      </ion-content>
+    </ion-pane>
+  </body>
+</html>
diff --git a/www/js/app.js b/www/js/app.js
@@ -0,0 +1,46 @@
+// Ionic Starter App
+
+// angular.module is a global place for creating, registering and retrieving Angular modules
+// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
+// the 2nd parameter is an array of 'requires'
+// 'starter.services' is found in services.js
+// 'starter.controllers' is found in controllers.js
+angular.module('starter', ['ionic'])
+
+.directive('headerShrink', function($document) {
+  var fadeAmt;
+
+  var shrink = function(header, content, amt, max) {
+    console.log('Translating up', amt);
+    amt = Math.min(max, amt);
+    fadeAmt = 1 - amt / max;
+    ionic.requestAnimationFrame(function() {
+      header.style[ionic.CSS.TRANSFORM] = 'translate3d(0, -' + amt + 'px, 0)';
+      for(var i = 0, j = header.children.length; i < j; i++) {
+        header.children[i].style.opacity = fadeAmt;
+      }
+    });
+  };
+
+  return {
+    restrict: 'A',
+    link: function($scope, $element, $attr) {
+      var starty = $scope.$eval($attr.headerShrink) || 0;
+      var shrinkAmt;
+
+      var header = $document[0].body.querySelector('.bar-header');
+      var headerHeight = header.offsetHeight;
+
+      $element.bind('scroll', function(e) {
+        if(e.detail.scrollTop > starty) {
+          // Start shrinking
+          shrinkAmt = headerHeight - Math.max(0, (starty + headerHeight) - e.detail.scrollTop);
+          shrink(header, $element[0], shrinkAmt, headerHeight);
+        } else {
+          shrink(header, $element[0], 0, headerHeight);
+        }
+      });
+    }
+  }
+})
+
diff --git a/www/js/controllers.js b/www/js/controllers.js
@@ -0,0 +1,15 @@
+angular.module('starter.controllers', [])
+
+
+// A simple controller that fetches a list of data from a service
+.controller('PetIndexCtrl', function($scope, PetService) {
+  // "Pets" is a service returning mock data (services.js)
+  $scope.pets = PetService.all();
+})
+
+
+// A simple controller that shows a tapped item's data
+.controller('PetDetailCtrl', function($scope, $stateParams, PetService) {
+  // "Pets" is a service returning mock data (services.js)
+  $scope.pet = PetService.get($stateParams.petId);
+});
diff --git a/www/js/services.js b/www/js/services.js
@@ -0,0 +1,26 @@
+angular.module('starter.services', [])
+
+/**
+ * A simple example service that returns some data.
+ */
+.factory('PetService', function() {
+  // Might use a resource here that returns a JSON array
+
+  // Some fake testing data
+  var pets = [
+    { id: 0, title: 'Cats', description: 'Furry little creatures. Obsessed with plotting assassination, but never following through on it.' },
+    { id: 1, title: 'Dogs', description: 'Lovable. Loyal almost to a fault. Smarter than they let on.' },
+    { id: 2, title: 'Turtles', description: 'Everyone likes turtles.' },
+    { id: 3, title: 'Sharks', description: 'An advanced pet. Needs millions of gallons of salt water. Will happily eat you.' }
+  ];
+
+  return {
+    all: function() {
+      return pets;
+    },
+    get: function(petId) {
+      // Simple index lookup
+      return pets[petId];
+    }
+  }
+});