diff --git a/dist/framework-with-theme.css b/dist/framework-with-theme.css index f2a80e2ad7..12ddc7bbf7 100644 --- a/dist/framework-with-theme.css +++ b/dist/framework-with-theme.css @@ -409,3 +409,6 @@ a.list-item { background-color: whitesmoke; color: #222222; font-weight: bold; } + +a.list-item { + color: #333333; } diff --git a/example/angular/customer.html b/example/angular/customer.html index 89de7d697f..8a55a6bbf9 100644 --- a/example/angular/customer.html +++ b/example/angular/customer.html @@ -1,3 +1,5 @@ -

{{customer.name}}

-Edit -Delete +
+

{{customer.name}}

+ Edit + Delete +
diff --git a/example/angular/index.html b/example/angular/index.html index 433d255911..59f162b3ef 100644 --- a/example/angular/index.html +++ b/example/angular/index.html @@ -11,7 +11,7 @@ - + @@ -23,5 +23,6 @@
+ diff --git a/example/events.html b/example/events.html new file mode 100644 index 0000000000..0b52f9869f --- /dev/null +++ b/example/events.html @@ -0,0 +1,21 @@ + + + + Example + + + + + + + + +
+ Tap me! +
+
+ + + + diff --git a/example/events.js b/example/events.js new file mode 100644 index 0000000000..7f2727062f --- /dev/null +++ b/example/events.js @@ -0,0 +1,21 @@ +var logEvent = function(data) { + var e = document.getElementById('event-log'); + var l = document.createElement('div'); + l.innerHTML = 'EVENT: ' + data.type; + console.log(data.event); + e.appendChild(l); +} +window.FM.on('tap', function(e) { + console.log('GOT TAP', e); + logEvent({ + type: 'tap', + event: e + }); +}); +window.FM.on('click', function(e) { + console.log('GOT CLICK', e); + logEvent({ + type: 'click', + event: e + }); +}); diff --git a/js/framework/framework-events.js b/js/framework/framework-events.js new file mode 100644 index 0000000000..f67c220583 --- /dev/null +++ b/js/framework/framework-events.js @@ -0,0 +1,97 @@ +/** + * framework-events.js + * + * Author: Max Lynch + * + * 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. + */ + +(function(window, document, framework) { + framework.EventController = function (){}; + + // A map of event types that we virtually detect and emit + framework.EventController.prototype.VIRTUAL_EVENT_TYPES = ['tap', 'swipeleft', 'swiperight']; + + // Some convenient top-level event functions + + framework.trigger = function(type, data) { + window.dispatchEvent(new CustomEvent(type, data)); + }; + + framework.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); + }; + + var _touchStart = function(event) { + console.log("EVENT: touchstart", event); + framework.EventController.isTouching = true; + }; + + var _touchMove = function(event) { + console.log("EVENT: touchmove", event); + }; + + var _touchEnd = function(event) { + console.log("EVENT: touchend", event); + if(framework.EventController.isTouching) { + console.log("EVENT: (virtual) tap", event); + framework.trigger('tap', { + }); + } + framework.EventController.isTouching = false; + }; + + // 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 + var _click = function(e) { + var target = e.target; + + 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 + console.log("EVENT: click", e); + return; + } + // We need to cancel this one + e.preventDefault(); + } + + var _popstate = function(event) { + console.log("EVENT: popstate", event); + } + + // Set up various listeners + window.addEventListener('touchstart', _touchStart); + window.addEventListener('touchmove', _touchMove); + window.addEventListener('touchend', _touchEnd); + window.addEventListener('click', _click); + window.addEventListener('popstate', _popstate); +})(this, document, this.FM = this.FM || {}); diff --git a/js/framework/framework-list.js b/js/framework/framework-list.js new file mode 100644 index 0000000000..b6c7c8c7b1 --- /dev/null +++ b/js/framework/framework-list.js @@ -0,0 +1,23 @@ +(function(window, document, framework) { + framework.Tabs = function() {} + + framework.List.prototype._TAB_ITEM_CLASS = 'tab-item'; + + framework.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'); + } + }; + framework.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', framework.Tabs.prototype._onTouchStart); + document.addEventListener('touchstart', framework.Tabs.prototype._onTouchStart); + document.addEventListener('touchend', framework.Tabs.prototype._onTouchEnd); + +})(this, document, this.FM = this.FM || {}); diff --git a/js/framework/framework-tabs.js b/js/framework/framework-tabs.js index 4a4ed97c81..553cbc4454 100644 --- a/js/framework/framework-tabs.js +++ b/js/framework/framework-tabs.js @@ -1,3 +1,5 @@ +'use strict'; + (function(window, document, framework) { framework.Tabs = function() {} diff --git a/js/framework/framework-utilities.js b/js/framework/framework-utilities.js index 28348c6f87..444a63f141 100644 --- a/js/framework/framework-utilities.js +++ b/js/framework/framework-utilities.js @@ -1,12 +1,4 @@ (function(window, document, framework) { - framework.trigger = function(type, data) { - window.dispatchEvent( new CustomEvent(type, data) ); - }; - framework.on = function(type, callback, element) { - var e = element || window; - e.addEventListener(type, callback); - }; - -})(this, document, this.FM = this.FM || {}); \ No newline at end of file +})(this, document, this.FM = this.FM || {}); diff --git a/scss/framework/theme/default/_listview.scss b/scss/framework/theme/default/_listview.scss index afb725c2b0..007f1e04e6 100644 --- a/scss/framework/theme/default/_listview.scss +++ b/scss/framework/theme/default/_listview.scss @@ -3,3 +3,7 @@ color: $listDividerColor; font-weight: bold; } + +a.list-item { + color: $darkColor; +}