Merge branch 'master' of https://github.com/driftyco/framework-prototypes

Conflicts:
	example/panels.html
	js/framework/framework-panel.js

js/framework/framework-events.js

@@ -13,75 +13,36 @@
 (function(window, document, framework) {
   framework.EventController = {
 
-    // A map of event types that we virtually detect and emit
-    VIRTUAL_EVENT_TYPES: ['tap', 'swipeleft', 'swiperight'],
-  
-    /**
-     * Trigger a new event.
-     */
+    // 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);
     },
   
-    /**
-     * Shorthand for binding a new event listener to the given
-     * event type.
-     */
+    // Bind an event
     on: function(type, callback, element) {
-      var i;
       var e = element || window;
-      /*
-      var virtualTypes = framework.EventController.VIRTUAL_EVENT_TYPES;
-
-      for(i = 0; i < virtualTypes.length; i++) {
-        if(type.toLowerCase() == virtualTypes[i]) {
-          // TODO: listen for virtual event
-          return;
-        }
-      }
-      */
-
-      // Native listener
       e.addEventListener(type, callback);
     },
 
-
-    /**
-     * Process a touchstart event.
-     */
-    handleTouchStart: function(e) {
-      console.log("EVENT: touchstart", e);
-      framework.GestureController.startGesture(e);
+    off: function(type, callback, element) {
+      element.removeEventListener(type, callback);
     },
 
-    /**
-     * Process a touchmove event.
-     */
-    handleTouchMove: function(e) {
-      console.log("EVENT: touchmove", e);
-      framework.GestureController.detectGesture(e);
-
+    // Register for a new gesture event on the given element
+    onGesture: function(type, callback, element) {
+      var gesture = new framework.Gesture(element);
+      gesture.on(type, callback);
+      return gesture;
     },
 
-    /**
-     * Process a touchend event.
-     */
-    handleTouchEnd: function(e) {
-      console.log("EVENT: touchend", e);
-      framework.GestureController.detectGesture(e);
-    },
-
-
-    /**
-     * Process a touchcancel event.
-     */
-    handleTouchCancel: function(e) {
-      this._hasMoved = false;
-      this._touchStartX = null;
-      this._touchStartY = null;
+    // Unregister a previous gesture event
+    offGesture: function(gesture, type, callback) {
+      gesture.off(type, callback);
     },
 
     // With a click event, we need to check the target
@@ -90,6 +51,12 @@
     handleClick: function(e) {
       var target = e.target;
 
+      if(framework.Gestures.HAS_TOUCHEVENTS) {
+        // We don't allow any clicks on mobile
+        e.preventDefault();
+        return false;
+      }
+
       if (
         !  target
         || e.which > 1
@@ -104,14 +71,11 @@
         //|| target.getAttribute('data-ignore') == 'push'
       ) {
         // Allow it
-        console.log("EVENT: click", e);
         return;
       }
       // We need to cancel this one
       e.preventDefault();
 
-      // TODO: should we do this?
-      // e.stopPropagation();
     },
     
     handlePopState: function(event) {
@@ -122,14 +86,13 @@
   
   // Map some convenient top-level functions for event handling
   framework.on = framework.EventController.on;
+  framework.off = framework.EventController.off;
   framework.trigger = framework.EventController.trigger;
+  framework.onGesture = framework.EventController.onGesture;
+  framework.offGesture = framework.EventController.offGesture;
 
   // Set up various listeners
-  window.addEventListener('touchstart', framework.EventController.handleTouchStart);
-  window.addEventListener('touchmove', framework.EventController.handleTouchMove);
-  window.addEventListener('touchcancel', framework.EventController.handleTouchCancel);
-  window.addEventListener('touchend', framework.EventController.handleTouchEnd);
-  window.addEventListener('click', framework.EventController.handleClick);
-  window.addEventListener('popstate', framework.EventController.handlePopState);
+	window.addEventListener('click', framework.EventController.handleClick);
+  //window.addEventListener('popstate', framework.EventController.handlePopState);
 
 })(this, document, FM = this.FM || {});

js/framework/framework-panel.js.orig

@@ -0,0 +1,177 @@
+(function(window, document, framework) {
+
+  var 
+<<<<<<< HEAD
+  x,
+  lockInWidthStyles,
+  isLockInWidthSet,
+  isPanelOpen,
+  panelReferences = {},
+  timeout,
+  className,
+
+  PANEL_ACTIVE = "panel-active",
+  PANEL_OPENED = "panel-opened";
+
+
+  function click(e) {
+    if(e.target.dataset.togglePanel) {
+      logEvent("click");
+      if(isPanelOpen) {
+        // there's a panel open, close it if the page location changed
+        closePanel();
+      } else {
+        openPanel(e.target.dataset.togglePanel);
+=======
+  el,
+  styleElement,
+  isPanelOpen;
+
+  function onTap(e) {
+    var el = e.target;
+    return togglePanel(e, el, el.dataset.togglePanel);
+		
+    if(e.target) {
+      if(el.dataset.togglePanel) {
+      }
+      while(el.parentElement) {
+        el = el.parentElement;
+        if(el.dataset.togglePanel) {
+          return togglePanel(e, el, el.dataset.togglePanel);
+        }
+>>>>>>> 6a7b2a94d30be5df37cff8f6f754e9e987f11163
+      }
+      return true;
+    }
+  }
+
+  function touchEnd(e) {
+    if(click(e)) {
+      e.preventDefault();
+      e.stopPropagation();
+      return false;
+    }
+  }
+
+  function autoClose() {
+    if(isPanelOpen) {
+      logEvent("autoClose");
+      // there's a panel open, close it if the page location changed
+      closePanel();
+    }
+  }
+
+  function openPanel(panelId) {
+    logEvent("openPanel: " + panelId);
+
+    // see if there is an element with this id
+    var panel = getPanelElement(panelId);
+    if(panel) {
+      // this element is a panel, open it!
+
+      // find all the panels that are or were active
+      var panelsActive = document.getElementsByClassName(PANEL_ACTIVE);
+
+      // remove the panel-active css classes from each of the previously opened panels
+      for(x=0; x<panelsActive.length; x++) {
+        className = panelsActive[x].className.replace(PANEL_ACTIVE, "").trim();
+        panelsActive[x].className = className;
+      }
+
+      // open the panel we want open by adding the panel-active css classes
+      panel.className += " " + PANEL_ACTIVE;
+
+      // manually lock in all the widths of the page which the panel will slide over
+      // do all of this in one DOM manipulation
+      // This makes it easy to modify all of the elements in one call, 
+      // and also undo all of the element widths in one call
+      // the css added below makes something like:  #my-panel ~ * {width: 420px !important}
+      // basically any sibling elements to the panel should lock in the document width
+      setLockInWidthStyles();
+
+      // add to <body> that a panel is open
+      document.body.className += " " + PANEL_OPENED;
+
+      // remember that a panel is currently open
+      isPanelOpen = true;
+    }
+  }
+
+  function closePanel() {
+    logEvent("closePanel");
+
+    // there is a panel already open, so close it
+    isPanelOpen = false;
+
+    // note: do not remove the panel-active class from panel
+    // the panel should stay displayed as it panel closes
+    // find the element with panel-open class
+    var openedPanels = document.getElementsByClassName(PANEL_OPENED);
+
+    // remove the panel-opened css classes from each of the previously opened panels
+    for(x=0; x<openedPanels.length; x++) {
+      // if this panel is the same last opened panel then don't remove the css class yet
+      className = openedPanels[x].className.replace(PANEL_OPENED, "").trim();
+      openedPanels[x].className = className;
+    }
+
+    // remove from <body> that no panels should be open
+    className = document.body.className.replace(PANEL_OPENED, "").trim();
+    document.body.className = className;
+
+    // remove the locked in widths
+    timeout = setTimeout(removeLockInWidthStyles, 300);
+  }
+
+  function setLockInWidthStyles() {
+    if(isLockInWidthSet) return;
+
+    clearTimeout(timeout);
+
+    var styles = "section>header,section>main,section>footer {width:" + document.width + "px !important}";
+
+    if(!lockInWidthStyles) {
+      lockInWidthStyles = document.createElement("style");
+      lockInWidthStyles.innerHTML = styles;
+      document.head.appendChild(lockInWidthStyles);
+    } else {
+      lockInWidthStyles.innerHTML = styles;
+    }
+    isLockInWidthSet = true;
+  }
+<<<<<<< HEAD
+
+  function removeLockInWidthStyles() {
+    lockInWidthStyles.innerHTML = "";
+    isLockInWidthSet = false;
+  }
+
+  function getPanelElement(panelId) {
+    // used to minimize DOM lookups
+    if( !panelReferences[panelId] ) {
+      panelReferences[panelId] = document.querySelector( "[data-panel='" + panelId + "']" );
+    }
+    return panelReferences[panelId];
+  }
+
+  var logEvent = function(data) {
+    var e = document.getElementById('event-log');
+    var l = document.createElement('div');
+    l.innerHTML = data;
+    if(e.childNodes.length > 10) {
+      e.innerHTML = "";
+    }
+    e.appendChild(l);
+  }
+
+  window.addEventListener('click', click, false);
+  window.addEventListener('touchend', touchEnd, false);
+
+  window.addEventListener("resize", autoClose, false);
+  window.addEventListener("popstate", autoClose, false);
+=======
+  
+  //framework.onGesture("tap", onTap, document.getElementById('open-panel'));
+>>>>>>> 6a7b2a94d30be5df37cff8f6f754e9e987f11163
+
+})(this, document, FM = this.FM || {});