Updated panel example and fixed drag issue

example/cordova/iOS/www/js/ionic-buttons.js

@@ -0,0 +1,29 @@
+(function(window, document, ion) {
+  ion.Button = function() {}
+
+  // Process an the touchstart event and if this is a button,
+  // add the .active class so Android will show depressed
+  // button states.
+  ion.Button.prototype._onTouchStart = function(event) {
+    console.log('Touch start!', event);
+    if(event.target && event.target.classList.contains('button')) {
+      event.target.classList.add('active');
+    }
+  };
+
+
+  // Remove any active state on touch end/cancel/etc.
+  ion.Button.prototype._onTouchEnd = function(event) {
+    console.log('Touch end!', event);
+    if(event.target && event.target.classList.contains('button')) {
+      event.target.classList.remove('active');
+    }
+
+    // TODO: Process the click? Set flag to not process other click events
+  };
+
+  document.addEventListener('touchstart', ion.Button.prototype._onTouchStart);
+  document.addEventListener('touchend', ion.Button.prototype._onTouchEnd);
+  document.addEventListener('touchcancel', ion.Button.prototype._onTouchEnd);
+
+})(this, document, ion = this.ion || {});

example/cordova/iOS/www/js/ionic-events.js

@@ -0,0 +1,98 @@
+/**
+ * ion-events.js
+ *
+ * Author: Max Lynch <max@drifty.com>
+ *
+ * Framework events handles various mobile browser events, and 
+ * detects special events like tap/swipe/etc. and emits them
+ * as custom events that can be used in an app.
+ *
+ * Portions lovingly adapted from github.com/maker/ratchet and github.com/alexgibson/tap.js - thanks guys!
+ */
+
+(function(window, document, ion) {
+  ion.EventController = {
+
+    // Trigger a new event
+    trigger: function(eventType, data) {
+      // TODO: Do we need to use the old-school createEvent stuff?
+      var event = new CustomEvent(eventType, data);
+
+      // Make sure to trigger the event on the given target, or dispatch it from
+      // the window if we don't have an event target
+      data.target && data.target.dispatchEvent(event) || window.dispatchEvent(event);
+    },
+  
+    // Bind an event
+    on: function(type, callback, element) {
+      var e = element || window;
+      e.addEventListener(type, callback);
+    },
+
+    off: function(type, callback, element) {
+      element.removeEventListener(type, callback);
+    },
+
+    // Register for a new gesture event on the given element
+    onGesture: function(type, callback, element) {
+      var gesture = new ion.Gesture(element);
+      gesture.on(type, callback);
+      return gesture;
+    },
+
+    // Unregister a previous gesture event
+    offGesture: function(gesture, type, callback) {
+      gesture.off(type, callback);
+    },
+
+    // With a click event, we need to check the target
+    // and if it's an internal target that doesn't want
+    // a click, cancel it
+    handleClick: function(e) {
+      var target = e.target;
+
+      if(ion.Gestures.HAS_TOUCHEVENTS) {
+        // We don't allow any clicks on mobile
+        e.preventDefault();
+        return false;
+      }
+
+      if (
+        !  target
+        || e.which > 1
+        || e.metaKey
+        || e.ctrlKey
+        //|| isScrolling
+        || location.protocol !== target.protocol
+        || location.host     !== target.host
+        // Not sure abotu this one
+        //|| !target.hash && /#/.test(target.href)
+        || target.hash && target.href.replace(target.hash, '') === location.href.replace(location.hash, '')
+        //|| target.getAttribute('data-ignore') == 'push'
+      ) {
+        // Allow it
+        return;
+      }
+      // We need to cancel this one
+      e.preventDefault();
+
+    },
+    
+    handlePopState: function(event) {
+      console.log("EVENT: popstate", event);
+    },
+  };
+  
+  
+  // Map some convenient top-level functions for event handling
+  ion.on = ion.EventController.on;
+  ion.off = ion.EventController.off;
+  ion.trigger = ion.EventController.trigger;
+  ion.onGesture = ion.EventController.onGesture;
+  ion.offGesture = ion.EventController.offGesture;
+
+  // Set up various listeners
+	window.addEventListener('click', ion.EventController.handleClick);
+  //window.addEventListener('popstate', ion.EventController.handlePopState);
+
+})(this, document, ion = this.ion || {});

example/cordova/iOS/www/js/ionic-init.js

@@ -0,0 +1,28 @@
+(function(window, document, ion) {
+
+  function initalize() {
+    // remove the ready listeners
+    document.removeEventListener( "DOMContentLoaded", initalize, false );
+    window.removeEventListener( "load", initalize, false );
+
+    // trigger that the DOM is ready
+    ion.trigger("ready");
+
+    // trigger that the start page is in view
+    ion.trigger("pageview");
+
+    // trigger that the webapp has been initalized
+    ion.trigger("initalized");
+  }
+
+  // When the DOM is ready, initalize the webapp
+  if ( document.readyState === "complete" ) {
+    // DOM is already ready
+    setTimeout( initalize );
+  } else {
+    // DOM isn't ready yet, add event listeners
+    document.addEventListener( "DOMContentLoaded", initalize, false );
+    window.addEventListener( "load", initalize, false );
+  }
+
+})(this, document, ion = this.ion || {});

example/cordova/iOS/www/js/ionic-list.js

@@ -0,0 +1,23 @@
+(function(window, document, ion) {
+  ion.List = function() {}
+
+  ion.List.prototype._TAB_ITEM_CLASS = 'tab-item';
+
+  ion.List.prototype._onTouchStart = function(event) {
+    console.log('Touch start!', event);
+    if(event.target && event.target.parentNode.classList.contains(this._TAB_ITEM_CLASS)) {
+      event.target.classList.add('active');
+    }
+  };
+  ion.List.prototype._onTouchEnd = function(event) {
+    console.log('Touch end!', event);
+    if(event.target && event.target.parentNode.classList.contains(this._TAB_ITEM_CLASS)) {
+      event.target.classList.remove('active');
+    }
+  };
+
+  document.addEventListener('mousedown', ion.List.prototype._onTouchStart);
+  document.addEventListener('touchstart', ion.List.prototype._onTouchStart);
+  document.addEventListener('touchend', ion.List.prototype._onTouchEnd);
+
+})(this, document, ion = this.ion || {});

example/cordova/iOS/www/js/ionic-navigation.js

@@ -0,0 +1,154 @@
+(function(window, document, location, ion) {
+
+  var  
+  x,
+  el;
+
+  // Add listeners to each link in the document
+  function click(e) {
+    // an element has been clicked. If its a link its good to go
+    // if its not a link then jump up its parents until you find
+    // its wrapping link. If you never find a link do nothing.
+    if(e.target) {
+      el = e.target;
+      if(el.tagName === "A") {
+        return linkClick(e, el);
+      }
+      while(el.parentElement) {
+        el = el.parentElement;
+        if(el.tagName === "A") {
+          return linkClick(e, el);
+        }
+      }
+    }
+  }
+
+  // A link has been clicked
+  function linkClick(e, el) {
+
+    // if they clicked a link while scrolling don't nav to it
+    if(ion.isScrolling) {
+      e.preventDefault();
+      return false;
+    }
+
+    // data-history-go="-1"
+    // shortcut if they just want to use window.history.go()
+    if(el.dataset.historyGo) {
+      window.history.go( parseInt(el.dataset.historyGo, 10) );
+      e.preventDefault();
+      return false;
+    }
+
+    // only intercept the nav click if they're going to the same domain or page
+    if (location.protocol === el.protocol && location.host === el.host) {
+      
+      // trigger the event that a new page should be shown
+      ion.trigger("pageinit", el.href);
+
+      // decide how to handle this click depending on the href
+      if(el.getAttribute("href").indexOf("#") === 0) {
+        // this click is going to another element within this same page
+        
+
+      } else {
+        // this click is going to another page in the same domain
+        requestData({
+          url: el.href,
+          success: successPageLoad,
+          fail: failedPageLoad
+        });
+      }
+
+      // stop the browser itself from continuing on with this click
+      // the above code will take care of the navigation
+      e.preventDefault();
+      return false;
+    }
+  }
+
+  function locationChange(e) {
+    if(!this._initPopstate) {
+      this._initPopstate = true;
+      return;
+    }
+
+    requestData({
+      url: location.href,
+      success: successPageLoad,
+      fail: failedPageLoad
+    });
+  }
+
+  function requestData(options) {
+    var xhr = new XMLHttpRequest();
+    xhr.open('GET', options.url, true);
+    xhr.onreadystatechange = function() {
+      if (xhr.readyState === 4) {
+        if(xhr.status === 200) {
+          options.success(xhr, options);
+        } else {
+          options.fail(xhr, options);
+        }
+      }
+    };
+    xhr.send();
+  }
+
+  function successPageLoad(xhr, options) {
+    var data = parseXHR(xhr, options);
+    ion.trigger("pageloaded", {
+      data: data
+    });
+    history.pushState({}, data.title, data.url);
+    document.title = data.title;
+  }
+
+  function failedPageLoad(xhr, options) {
+    ion.trigger("pageinitfailed", {
+      responseText: xhr.responseText,
+      responseStatus: xhr.status
+    });
+  }
+
+  function parseXHR(xhr, options) {
+    var 
+    container,
+    tmp,
+    data = {};
+
+    data.url = options.url;
+
+    if (!xhr.responseText) return data;
+
+    container = document.createElement('div');
+    container.innerHTML = xhr.responseText;
+
+    // get the title of the page
+    tmp = container.querySelector("title");
+    if(tmp) {
+      data.title = tmp.innerText;
+    } else {
+      data.title = data.url;
+    }
+
+    // get the main content of the page
+    tmp = container.querySelector("main");
+    if(tmp) {
+      data.main = tmp.innerHTML;
+    } else {
+      // something is wrong with the data, trigger that the page init failed
+      ion.trigger("pageinitfailed");
+    }
+
+    return data;
+  }
+
+  // listen to every click
+  document.addEventListener("click", click, false);
+
+  // listen to when the location changes
+  ion.on("popstate", locationChange);
+  
+
+})(this, document, location, ion = this.ion || {});

example/cordova/iOS/www/js/ionic-panel.js

@@ -0,0 +1,72 @@
+(function(window, document, ion) {
+
+  var 
+  x,
+  isPanelOpen,
+
+  PANEL_ACTIVE = "ion-panel-active",
+  PANEL_ACTIVE_LEFT = "ion-panel-active-left",
+  PANEL_ACTIVE_RIGHT = "ion-panel-active-right",
+
+  PANEL_OPEN_LEFT = "ion-panel-left",
+  PANEL_OPEN_RIGHT = "ion-panel-right";
+
+  ion.Panel = {
+
+    toggle: function(panelId, options) {
+      if(isPanelOpen) {
+        this.close();
+      } else {
+        this.open(panelId, options);
+      }
+    },
+
+    open: function(panelId, options) {
+      // see if there is an element with this id
+      var panel = document.getElementById(panelId);
+      if(panel) {
+        // this element is a panel, open it!
+
+        // remember that a panel is currently open
+        isPanelOpen = true;
+
+        // find all the panels that are or were once active
+        var panelsActive = document.getElementsByClassName(PANEL_ACTIVE);
+
+        // remove the panel-active css classes from each of the previously active panels
+        for(x=0; x<panelsActive.length; x++) {
+          panelsActive[x].classList.remove(PANEL_ACTIVE);
+        }
+
+        // activate the panel we want open by adding the panel-active css classes
+        panel.classList.add(PANEL_ACTIVE);
+
+        // add to <body> that there is a panel open
+        if(options && options.direction === "right") {
+          panel.classList.add(PANEL_ACTIVE_RIGHT);
+          document.body.classList.add(PANEL_OPEN_RIGHT);
+        } else {
+          // left is the default
+          panel.classList.add(PANEL_ACTIVE_LEFT);
+          document.body.classList.add(PANEL_OPEN_LEFT);
+        }
+      }
+    },
+
+    close: function() {
+      if(isPanelOpen) {
+        // there is a panel already open, so close it
+        isPanelOpen = false;
+
+        // remove from <body> so that no panels should be open
+        var className = document.body.className;
+        className = className.replace(PANEL_OPEN_LEFT, "").replace(PANEL_OPEN_RIGHT, "").trim();
+        document.body.className = className;
+      }
+    }
+
+  };
+
+  window.addEventListener("popstate", ion.Panel.close, false);
+
+})(this, document, ion = this.ion || {});

example/cordova/iOS/www/js/ionic-tabs.js

@@ -0,0 +1,25 @@
+'use strict';
+
+(function(window, document, ion) {
+  ion.Tabs = function() {}
+
+  ion.Tabs.prototype._TAB_ITEM_CLASS = 'tab-item';
+
+  ion.Tabs.prototype._onTouchStart = function(event) {
+    console.log('Touch start!', event);
+    if(event.target && event.target.parentNode.classList.contains(this._TAB_ITEM_CLASS)) {
+      event.target.classList.add('active');
+    }
+  };
+  ion.Tabs.prototype._onTouchEnd = function(event) {
+    console.log('Touch end!', event);
+    if(event.target && event.target.parentNode.classList.contains(this._TAB_ITEM_CLASS)) {
+      event.target.classList.remove('active');
+    }
+  };
+
+  document.addEventListener('mousedown', ion.Tabs.prototype._onTouchStart);
+  document.addEventListener('touchstart', ion.Tabs.prototype._onTouchStart);
+  document.addEventListener('touchend', ion.Tabs.prototype._onTouchEnd);
+
+})(this, document, ion = this.ion || {});

example/cordova/iOS/www/js/ionic-template.js

@@ -0,0 +1,68 @@
+'use strict';
+
+(function(window, document, ion) {
+
+  // Loop through each element in the DOM and collect up all 
+  // the templates it has. A template either has data to supply
+  // to others, or it needs data from another template
+  function initTemplates() {
+    var 
+    x,
+    el,
+    tmp,
+    emptyTemplates = [],
+    container,
+    templateElements;
+
+    // collect up all the templates currently in the DOM
+    templateElements = document.body.querySelectorAll("[data-template]");
+    for(x=0; x<templateElements.length; x++) {
+      el = templateElements[x];
+
+      if(el.dataset.template && !el.tSet) {
+        // this element is either supplying template
+        // data or it needs to be filled with template data
+
+        if(el.innerHTML == "") {
+          // this element is requesting to have its innerHTML
+          // built from a template already set
+          emptyTemplates.push(el);
+
+        } else {
+          // this element contains innerHTML which should be used
+          // as a template for other elements. Save this template
+          // data for future use.
+
+          // Save only in sessionStorage, which maintains a storage area that's 
+          // available for the duration of the page session. A page session 
+          // lasts for as long as the browser is open and survives over page 
+          // reloads and restores. Opening a page in a new tab or window will 
+          // cause a new session to be initiated.
+          sessionStorage.setItem("t:" + el.dataset.template, el.outerHTML);          
+        }
+
+        // remember that this is set so we don't bother doing all this 
+        // code again for the same element in the future
+        el.tSet = true;
+      }
+    }
+
+    // go through each empty template and build it up with existing template data
+    for(x=0; x<emptyTemplates.length; x++) {
+      el = emptyTemplates[x];
+      tmp = sessionStorage.getItem("t:" + el.dataset.template);
+      if(tmp) {
+        // we've got template data, plug it into this element's innerHTML
+        container = document.createElement("div");
+        container.innerHTML = tmp;
+
+        el.parentNode.replaceChild(container.children[0].cloneNode(true), el);
+      }
+    }
+
+  }
+
+  ion.on("ready", initTemplates);
+  ion.on("pagecreate", initTemplates);
+
+})(this, document, ion = this.ion || {});

example/cordova/iOS/www/js/ionic-transition.js

@@ -0,0 +1,41 @@
+(function(window, document, ion) {
+
+  function initTransitions(e) {
+    var data = e.detail.data;
+
+    // build a new main element to hold the new html
+    var newMainElement = document.createElement("main");
+    newMainElement.innerHTML = data.main;
+
+    // get the old main element, which will be the first one
+    var oldMainElement = document.querySelector("main");
+
+    // decide how to do the page transition
+    if(data.transition === "slide-from-left") {
+      slideStart(newMainElement, oldMainElement, "left");
+    } else {
+      // No animation. Nothing fancy here
+      noTransition(newMainElement, oldMainElement, data);
+    }
+  }
+  
+  function noTransition(newMainElement, oldMainElement, data) {
+    // entirely replace the old element, no transition
+    oldMainElement.parentNode.replaceChild(newMainElement, oldMainElement);
+    ion.trigger("pagecreate", {
+      url: data.url,
+      title: data.title
+    });
+    ion.trigger("pageview");
+  }
+  
+  function slideStart(newMainElement, oldMainElement, fromDirection) {
+    // copy what the main element currently looks like into a document fragment
+    // make all the changes to the document fragment, then replace the 
+    // old main with the two new ones. Both the old and new main will be 
+    // in the DOM, but their CSS classes will do the transitioning for us
+  }
+
+  ion.on("pageloaded", initTransitions);
+
+})(this, document, ion = this.ion || {});

example/cordova/iOS/www/js/ionic-utils.js

@@ -0,0 +1,22 @@
+(function(window, document, ion) {
+  
+  ion.Utils = {
+    /**
+     * extend method,
+     * also used for cloning when dest is an empty object
+     * @param   {Object}    dest
+     * @param   {Object}    src
+     * @parm	{Boolean}	merge		do a merge
+     * @returns {Object}    dest
+     */
+    extend: function extend(dest, src, merge) {
+      for (var key in src) {
+        if(dest[key] !== undefined && merge) {
+          continue;
+        }
+        dest[key] = src[key];
+      }
+      return dest;
+    },
+  }
+})(this, document, ion = this.ion || {});