simple dist, global tap listener

Gruntfile.js

@@ -20,6 +20,18 @@ module.exports = function(grunt) {
           'js/controllers/**/*.js'
         ],
         dest: 'dist/<%= pkg.name %>.js'
+      },
+      distAngular: {
+        src: [
+          'ext/angular/src/*.js'
+        ],
+        dest: 'dist/<%= pkg.name %>-angular.js'
+      },
+      distSimple: {
+        src: [
+          'ext/simple/*.js'
+        ],
+        dest: 'dist/<%= pkg.name %>-simple.js'
       }
     },
     jshint: {
@@ -43,7 +55,7 @@ module.exports = function(grunt) {
     },
     watch: {
       scripts: {
-        files: ['js/**/*.js'],
+        files: ['js/**/*.js', 'ext/**/*.js'],
         tasks: ['concat'],
         options: {
           spawn: false

dist/ionic-angular.js

@@ -0,0 +1,113 @@
+angular.module('ionic.ui.content', {})
+
+.directive('content', function() {
+  return {
+    restrict: 'E',
+    replace: true,
+    template: '<div class="content"></div>'
+  }
+});
+;angular.module('ionic.ui.tabbar', {})
+
+.controller('TabBarCtrl', ['$scope', '$element', function($scope, $element) {
+  console.log('Tab controller');
+  var tabs = $scope.tabs = [];
+
+  
+  $scope.selectTab = function(index) {
+  };
+  $scope.beforeTabSelect = function(index) {
+  };
+  $scope.tabSelected = function(index) {
+  };
+
+  this.addTab = function(tab) {
+    tabs.push(tab);
+  };
+
+  this.getSelectedTabIndex = function() {
+    return $scope.selectedIndex;
+  };
+
+  this.selectTabAtIndex = function(index) {
+    $scope.selectedIndex = index;
+    console.log('Scope selected tab is', index);
+  };
+
+  this.getNumTabs = function() {
+    return tabs.length;
+  };
+}])
+
+.directive('tabBar', function() {
+  return {
+    restrict: 'E',
+    replace: true,
+    scope: {},
+    transclude: true,
+    controller: 'TabBarCtrl',
+    //templateUrl: 'ext/angular/tmpl/ionicTabBar.tmpl.html',
+    template: '<div class="view-wrapper" ng-transclude></div>',
+  }
+})
+
+.directive('tabs', function() {
+  return {
+    restrict: 'E',
+    replace: true,
+    require: '^tabBar',
+    transclude: true,
+    template: '<footer class="bar bar-tabs bar-footer bar-success">' + 
+  '<nav class="tabs">' + 
+    '<ul class="tabs-inner">' + 
+      '<tab-item text="Item" icon="icon-default" ng-repeat="tab in tabs">' + 
+      '</tab-item>' +
+    '</ul>' +
+  '</nav>' +
+'</footer>'
+  }
+})
+
+.directive('tabItem', function() {
+  return {
+    restrict: 'E',
+    replace: true,
+    require: '^tabBar',
+    scope: {
+      text: '@',
+      icon: '@',
+      active: '=',
+      tabSelected: '@',
+    },
+    compile: function(element, attrs, transclude) {
+      return function(scope, element, attrs, tabBarCtrl) {
+        var getActive, setActive;
+
+        scope.$watch('active', function(active) {
+          console.log('ACTIVE CHANGED', active);
+        });
+      };
+    },
+    link: function(scope, element, attrs, tabBarCtrl) {
+
+      // Store the index of this list item, which
+      // specifies which tab item it is
+      scope.tabIndex = element.index();
+
+      scope.active = true;
+
+      scope.selectTab = function(index) {
+        console.log('SELECT TAB', index);
+        tabBarCtrl.selectTabAtIndex(index);
+      };
+      
+      tabBarCtrl.addTab(scope);
+    },
+    template: '<li class="tab-item" ng-class="{active:active}">' + 
+        '<a href="#" ng-click="selectTab(tabIndex)">' + 
+          '<i class="{{icon}}"></i>' +
+          '{{text}}' +
+        '</a></li>'
+  }
+});
+

dist/ionic-simple.js

@@ -0,0 +1,58 @@
+(function(window, document, ionic) {
+
+  // polyfill use to simulate native "tap"
+  function inputTapPolyfill(ele, e) {
+    if(ele.type === "radio" || ele.type === "checkbox") {
+      ele.checked = !ele.checked;
+    } else if(ele.type === "submit" || ele.type === "button") {
+      ele.click();
+    } else {
+      ele.focus();
+    }
+    e.stopPropagation();
+    e.preventDefault();
+    return false;
+  }
+
+  function tapPolyfill(e) {
+    // evaluate the actual source event, not the created event by gestures.js
+    if(!e.gesture) return;
+
+    var 
+    e = e.gesture.srcEvent,
+    ele = e.target;
+
+    if(!e) return;
+
+    while(ele) {
+      if( ele.tagName === "INPUT" || ele.tagName === "TEXTAREA" || ele.tagName === "SELECT" ) {
+        return inputTapPolyfill(ele, e);
+      } else if( ele.tagName === "LABEL" ) {
+        if(ele.control) {
+          return inputTapPolyfill(ele.control, e);
+        }
+      } else if( ele.tagName === "A" || ele.tagName === "BUTTON" ) {
+        ele.click();
+        e.stopPropagation();
+        e.preventDefault();
+        return false;
+      }
+      ele = ele.parentElement;
+    }
+
+    // they didn't tap one of the above elements
+    // if the currently active element is an input, and they tapped outside
+    // of the current input, then unset its focus (blur) so the keyboard goes away
+    var activeElement = document.activeElement;
+    if(activeElement && (activeElement.tagName === "INPUT" || activeElement.tagName === "TEXTAREA" || activeElement.tagName === "SELECT")) {
+      activeElement.blur();
+      e.stopPropagation();
+      e.preventDefault();
+      return false;
+    }
+  }
+
+  // global tap event listener polyfill for HTML elements that were "tapped" by the user
+  ionic.on("tap", tapPolyfill, window);
+
+})(this, document, ionic);

dist/ionic.js

@@ -150,38 +150,38 @@ if ( document.readyState === "complete" ) {
       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;
+    // // 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(ionic.Gestures.HAS_TOUCHEVENTS) {
-        // We don't allow any clicks on mobile
-        e.preventDefault();
-        return false;
-      }
+    //   if(ionic.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();
+    //   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);
@@ -196,8 +196,9 @@ if ( document.readyState === "complete" ) {
   ionic.onGesture = function() { ionic.EventController.onGesture.apply(ionic.EventController.onGesture, arguments); }
   ionic.offGesture = function() { ionic.EventController.offGesture.apply(ionic.EventController.offGesture, arguments); }
 
+  // DISABLING FOR NOW. THE TAP CODE AT THE EXT LEVEL SHOULD BE DOING THIS
   // Set up various listeners
-  window.addEventListener('click', ionic.EventController.handleClick);
+  //window.addEventListener('click', ionic.EventController.handleClick);
 
 })(window.ionic);
 ;/**
@@ -292,11 +293,18 @@ if ( document.readyState === "complete" ) {
     ionic.Gestures.event.determineEventTypes();
 
     // Register all gestures inside ionic.Gestures.gestures
+    if(this === this.window) {
+      // this is a window, only add these
+      ionic.Gestures.detection.register(ionic.Gestures.gestures.Tap);
+
+    } else {
+      // everything else but the window
       for(var name in ionic.Gestures.gestures) {
         if(ionic.Gestures.gestures.hasOwnProperty(name)) {
           ionic.Gestures.detection.register(ionic.Gestures.gestures[name]);
         }
       }
+    }
 
     // Add touch events on the document
     ionic.Gestures.event.onTouch(ionic.Gestures.DOCUMENT, ionic.Gestures.EVENT_MOVE, ionic.Gestures.detection.detect);

ext/simple/events.js

@@ -0,0 +1,58 @@
+(function(window, document, ionic) {
+
+  // polyfill use to simulate native "tap"
+  function inputTapPolyfill(ele, e) {
+    if(ele.type === "radio" || ele.type === "checkbox") {
+      ele.checked = !ele.checked;
+    } else if(ele.type === "submit" || ele.type === "button") {
+      ele.click();
+    } else {
+      ele.focus();
+    }
+    e.stopPropagation();
+    e.preventDefault();
+    return false;
+  }
+
+  function tapPolyfill(e) {
+    // evaluate the actual source event, not the created event by gestures.js
+    if(!e.gesture) return;
+
+    var 
+    e = e.gesture.srcEvent,
+    ele = e.target;
+
+    if(!e) return;
+
+    while(ele) {
+      if( ele.tagName === "INPUT" || ele.tagName === "TEXTAREA" || ele.tagName === "SELECT" ) {
+        return inputTapPolyfill(ele, e);
+      } else if( ele.tagName === "LABEL" ) {
+        if(ele.control) {
+          return inputTapPolyfill(ele.control, e);
+        }
+      } else if( ele.tagName === "A" || ele.tagName === "BUTTON" ) {
+        ele.click();
+        e.stopPropagation();
+        e.preventDefault();
+        return false;
+      }
+      ele = ele.parentElement;
+    }
+
+    // they didn't tap one of the above elements
+    // if the currently active element is an input, and they tapped outside
+    // of the current input, then unset its focus (blur) so the keyboard goes away
+    var activeElement = document.activeElement;
+    if(activeElement && (activeElement.tagName === "INPUT" || activeElement.tagName === "TEXTAREA" || activeElement.tagName === "SELECT")) {
+      activeElement.blur();
+      e.stopPropagation();
+      e.preventDefault();
+      return false;
+    }
+  }
+
+  // global tap event listener polyfill for HTML elements that were "tapped" by the user
+  ionic.on("tap", tapPolyfill, window);
+
+})(this, document, ionic);

ext/simple/init.js

@@ -1,23 +0,0 @@
-(function(window, document, ionic) {
-
-  // add tap events to links
-  function onLinkTap(e) {
-    this.click();
-  }
-  
-  function addTapToLinks() {
-    for(var x = 0; x < document.links.length; x++) {
-      if(!document.links[x]._hasTap) {
-        ionic.on('tap', onLinkTap, document.links[x]);
-        document.links[x]._hasTap = true;
-      }
-    }
-  }
-
-  ionic.ResetTap = function() {
-    addTapToLinks()
-  };
-
-  ionic.ResetTap();
-
-})(this, document, ionic);

ext/simple/toggle.js

@@ -1,28 +0,0 @@
-(function(window) {
-
-  iconic = window.iconic || {};
-
-  // add tap events to links
-  function onToggleTap(e) {
-    if(e.currentTarget.control) {
-      e.currentTarget.control.checked = !e.currentTarget.control.checked;
-      e.stopPropagation();
-    }
-  }
-  
-  ionic.ResetToggles = function() {
-    var
-    x,
-    toggles = document.getElementsByClassName("toggle");
-
-    for(x = 0; x < toggles.length; x++) {
-      if(!toggles[x].hasTap) {
-        ionic.on('tap', onToggleTap, toggles[x]);
-        toggles[x].hasTap = true;
-      }
-    }
-  };
-
-  ionic.ResetToggles();
-
-})(this);

js/events.js

@@ -57,38 +57,38 @@
       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;
+    // // 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(ionic.Gestures.HAS_TOUCHEVENTS) {
-        // We don't allow any clicks on mobile
-        e.preventDefault();
-        return false;
-      }
+    //   if(ionic.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();
+    //   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);
@@ -103,7 +103,8 @@
   ionic.onGesture = function() { ionic.EventController.onGesture.apply(ionic.EventController.onGesture, arguments); }
   ionic.offGesture = function() { ionic.EventController.offGesture.apply(ionic.EventController.offGesture, arguments); }
 
+  // DISABLING FOR NOW. THE TAP CODE AT THE EXT LEVEL SHOULD BE DOING THIS
   // Set up various listeners
-  window.addEventListener('click', ionic.EventController.handleClick);
+  //window.addEventListener('click', ionic.EventController.handleClick);
 
 })(window.ionic);

js/gestures.js

@@ -90,11 +90,18 @@
     ionic.Gestures.event.determineEventTypes();
 
     // Register all gestures inside ionic.Gestures.gestures
+    if(this === this.window) {
+      // this is a window, only add these
+      ionic.Gestures.detection.register(ionic.Gestures.gestures.Tap);
+
+    } else {
+      // everything else but the window
       for(var name in ionic.Gestures.gestures) {
         if(ionic.Gestures.gestures.hasOwnProperty(name)) {
           ionic.Gestures.detection.register(ionic.Gestures.gestures[name]);
         }
       }
+    }
 
     // Add touch events on the document
     ionic.Gestures.event.onTouch(ionic.Gestures.DOCUMENT, ionic.Gestures.EVENT_MOVE, ionic.Gestures.detection.detect);

test/alerts.html

@@ -40,5 +40,8 @@
 
     </section>
     
+    <script src="../dist/ionic.js"></script>
+    <script src="../dist/ionic-simple.js"></script>
+
   </body>
 </html>

test/button-groups.html

@@ -30,5 +30,8 @@
 
     </section>
     
+    <script src="../dist/ionic.js"></script>
+    <script src="../dist/ionic-simple.js"></script>
+
   </body>
 </html>

test/buttons.html

@@ -32,5 +32,8 @@
 
     </section>
     
+    <script src="../dist/ionic.js"></script>
+    <script src="../dist/ionic-simple.js"></script>
+
   </body>
 </html>

test/cards.html

@@ -23,5 +23,8 @@
 
     </section>
     
+    <script src="../dist/ionic.js"></script>
+    <script src="../dist/ionic-simple.js"></script>
+
   </body>
 </html>

test/footers.html

@@ -99,5 +99,8 @@
 
     </section>
     
+    <script src="../dist/ionic.js"></script>
+    <script src="../dist/ionic-simple.js"></script>
+
   </body>
 </html>

test/headers.html

@@ -48,5 +48,8 @@
 
     </section>
     
+    <script src="../dist/ionic.js"></script>
+    <script src="../dist/ionic-simple.js"></script>
+
   </body>
 </html>

test/index.html

@@ -48,9 +48,8 @@
       }
     </script>
     
-    <script src="../js/gestures.js"></script>
-    <script src="../js/events.js"></script>
-    <script src="../ext/simple/init.js"></script>
+    <script src="../dist/ionic.js"></script>
+    <script src="../dist/ionic-simple.js"></script>
 
   </body>
 </html>

test/input-radio.html

@@ -68,5 +68,8 @@
 
     </section>
     
+    <script src="../dist/ionic.js"></script>
+    <script src="../dist/ionic-simple.js"></script>
+
   </body>
 </html>

test/input-range.html

@@ -33,5 +33,8 @@
 
     </section>
     
+    <script src="../dist/ionic.js"></script>
+    <script src="../dist/ionic-simple.js"></script>
+
   </body>
 </html>

test/input-select.html

@@ -36,5 +36,8 @@
 
     </section>
     
+    <script src="../dist/ionic.js"></script>
+    <script src="../dist/ionic-simple.js"></script>
+
   </body>
 </html>

test/input-text.html

@@ -259,5 +259,8 @@
 
     </section>
     
+    <script src="../dist/ionic.js"></script>
+    <script src="../dist/ionic-simple.js"></script>
+
   </body>
 </html>

test/input-textarea.html

@@ -115,5 +115,8 @@
 
     </section>
     
+    <script src="../dist/ionic.js"></script>
+    <script src="../dist/ionic-simple.js"></script>
+
   </body>
 </html>

test/input-toggle.html

@@ -55,10 +55,8 @@
 
     </section>
 
-    <script src="../js/gestures.js"></script>
-    <script src="../js/events.js"></script>
-    <script src="../ext/simple/init.js"></script>
-    <script src="../ext/simple/toggle.js"></script>
+    <script src="../dist/ionic.js"></script>
+    <script src="../dist/ionic-simple.js"></script>
 
 
     <!-- for testing only -->

test/lists.html

@@ -77,5 +77,8 @@
 
     </section>
     
+    <script src="../dist/ionic.js"></script>
+    <script src="../dist/ionic-simple.js"></script>
+
   </body>
 </html>

test/menus.html

@@ -250,8 +250,8 @@
       This is my other left side panel!
     </section>
     
+    <script src="../dist/ionic.js"></script>
+    <script src="../dist/ionic-simple.js"></script>
 
-    <script src="../../js/ionic-panel.js"></script>
-    <script src="../../connectors/default/panel-handler.js"></script>
   </body>
 </html>

test/modals.html

@@ -57,5 +57,8 @@
         return false;
       }, closer);
     </script>
+    
+    <script src="../dist/ionic.js"></script>
+    <script src="../dist/ionic-simple.js"></script>
   </body>
 </html>

test/popovers.html

@@ -23,5 +23,8 @@
 
     </section>
     
+    <script src="../dist/ionic.js"></script>
+    <script src="../dist/ionic-simple.js"></script>
+
   </body>
 </html>

test/pull-to-refresh.html

@@ -29,5 +29,8 @@
 
     </section>
     
+    <script src="../dist/ionic.js"></script>
+    <script src="../dist/ionic-simple.js"></script>
+
   </body>
 </html>

test/side-menus.html

@@ -72,5 +72,9 @@
         <h3 class="title"></h3>
       </footer>
     </section>
+    
+    <script src="../dist/ionic.js"></script>
+    <script src="../dist/ionic-simple.js"></script>
+    
   </body>
 </html>

test/swipe.html

@@ -23,5 +23,8 @@
 
     </section>
     
+    <script src="../dist/ionic.js"></script>
+    <script src="../dist/ionic-simple.js"></script>
+
   </body>
 </html>

test/type.html

@@ -31,5 +31,8 @@
 
     </section>
     
+    <script src="../dist/ionic.js"></script>
+    <script src="../dist/ionic-simple.js"></script>
+
   </body>
 </html>