├── test ├── grower.test.js ├── swipereveal.test.js ├── chai.helper.js ├── fixtures │ ├── afui-view.html │ ├── popup.html │ ├── toast.html │ ├── afui.html │ └── drawer.html ├── cssTranslate.test.js ├── vendorCss.test.js ├── transition.test.js ├── animation.test.js ├── getCssMatrix.test.js ├── replaceClass.test.js ├── desktopbrowsers.test.js ├── actionSheet.test.js ├── shim.test.js ├── toasts.test.js ├── drawer.test.js └── popup.test.js ├── samples ├── react │ ├── js │ │ ├── form.jsx │ │ └── app.jsx │ ├── readme.md │ └── index.html ├── angular │ ├── js │ │ ├── app.js │ │ ├── directives.js │ │ └── controllers.js │ ├── partials │ │ └── todo.html │ ├── readme.md │ └── index.html └── backbone │ ├── readme.md │ ├── js │ └── app.js │ └── index.html ├── .travis.yml ├── docs ├── build ├── plugins │ ├── af.animateheader.md │ ├── af.splashscreen.md │ ├── af.swipereveal.md │ ├── af.transform.md │ ├── af.touchevents.md │ ├── af.animation.md │ ├── af.lockscreen.md │ ├── af.drawer.md │ ├── af.toast.md │ ├── af.actionsheet.md │ └── af.popup.md ├── af.ui │ ├── $.afui.hideMask.md │ ├── $.afui.autoLaunch.md │ ├── $.afui.getTitle.md │ ├── $.afui.unblockUI.md │ ├── $.afui.goBack.md │ ├── $.afui.clearHistory.md │ ├── $.afui.disableTabBar.md │ ├── $.afui.removeBadge.md │ ├── $.afui.setBackButtonText.md │ ├── $.afui.blockUI.md │ ├── $.afui.setTitle.md │ ├── $.afui.ready.md │ ├── $.afui.manageHistory.md │ ├── $.afui.useAjaxCacheBuster.md │ ├── $.afui.setBackButtonVisbility.md │ ├── $.afui.drawer.show.md │ ├── $.afui.launch.md │ ├── $.afui.loadDefaultHash.md │ ├── $.afui.showMask.md │ ├── $.afui.registerDataDirective.md │ ├── $.afui.loadContent.md │ ├── $.afui.updateBadge.md │ ├── $.afui.actionsheet.md │ └── $.afui.popup.md └── docgen.js ├── lancaster ├── images │ ├── minus.png │ ├── plus.png │ ├── circle.png │ ├── divide2.png │ ├── home60.png │ ├── chalkboard.jpg │ ├── multiply2.png │ └── triangle_stroked.png └── index.html ├── .settings └── settings.json ├── ajax.html ├── .gitignore ├── src ├── af.splashscreen.js ├── less │ ├── grid.less │ ├── badges.less │ ├── af.swipereveal.less │ ├── anim2.less │ ├── splitview.less │ ├── af.popup.less │ ├── af.toast.less │ ├── af.actionsheet.less │ ├── af.splashscreen.less │ ├── lists.less │ ├── lockscreen.css │ ├── af.lockscreen.less │ ├── buttons.less │ ├── tizen.less │ └── appframework.less ├── af.animateheader.js ├── af.swipereveal.js ├── af.grower.js ├── af.lockscreen.js ├── af.toast.js ├── af.actionsheet.js └── af.animation.js ├── partials ├── lockscreen.html ├── leftnav.html ├── toast.html ├── actionsheet.html ├── popup.html ├── touch.html └── forms.html ├── .jshintrc ├── license.txt ├── README.md ├── package.json ├── jquery-widgets ├── af.popup.html ├── af.lockscreen.html ├── af.lockscreen.js ├── af.lockscreen.css └── af.popup.js ├── animgenerator └── generate.js ├── templates ├── tabview.html ├── drawer.html └── listview.html ├── karma.conf.js └── Gruntfile.js /test/grower.test.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /samples/react/js/form.jsx: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /test/swipereveal.test.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "0.10" 4 | - "0.8" 5 | -------------------------------------------------------------------------------- /docs/build: -------------------------------------------------------------------------------- 1 | dox <../src/af.ui.js > af.ui.json 2 | node docgen.js "af.ui.json" 3 | -------------------------------------------------------------------------------- /lancaster/images/minus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/intel/appframework/master/lancaster/images/minus.png -------------------------------------------------------------------------------- /lancaster/images/plus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/intel/appframework/master/lancaster/images/plus.png -------------------------------------------------------------------------------- /.settings/settings.json: -------------------------------------------------------------------------------- 1 | // Place your settings in this file to overwrite default and user settings. 2 | { 3 | } -------------------------------------------------------------------------------- /lancaster/images/circle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/intel/appframework/master/lancaster/images/circle.png -------------------------------------------------------------------------------- /lancaster/images/divide2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/intel/appframework/master/lancaster/images/divide2.png -------------------------------------------------------------------------------- /lancaster/images/home60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/intel/appframework/master/lancaster/images/home60.png -------------------------------------------------------------------------------- /lancaster/images/chalkboard.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/intel/appframework/master/lancaster/images/chalkboard.jpg -------------------------------------------------------------------------------- /lancaster/images/multiply2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/intel/appframework/master/lancaster/images/multiply2.png -------------------------------------------------------------------------------- /ajax.html: -------------------------------------------------------------------------------- 1 | This is an ajax panel. It will be added to the view

2 | Main 3 | -------------------------------------------------------------------------------- /lancaster/images/triangle_stroked.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/intel/appframework/master/lancaster/images/triangle_stroked.png -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.bat 2 | *.DS_Store 3 | /dev 4 | *.svn 5 | /node_modules 6 | /.idea 7 | /3rdparty 8 | /coverage 9 | /src/css 10 | >>>>>>> 3.0beta 11 | -------------------------------------------------------------------------------- /docs/plugins/af.animateheader.md: -------------------------------------------------------------------------------- 1 | #animateheader 2 | 3 | This plugin will animate headers during transitions. Simply include the script to enable header animations during panel transitions. 4 | 5 | -------------------------------------------------------------------------------- /samples/angular/js/app.js: -------------------------------------------------------------------------------- 1 | angular.module('todoaf',[]) 2 | .config(function () { 3 | 4 | }); 5 | 6 | 7 | 8 | $.afui.ready(function(){ 9 | angular.bootstrap(document, ['todoaf']); 10 | }); -------------------------------------------------------------------------------- /samples/backbone/readme.md: -------------------------------------------------------------------------------- 1 | #sample 2 | 3 | This sample is to show basic usage of Backbone and App Framework UI. This does not go into more advanced features, such as page routing/navigation. This shows initiating the view when App Framework UI is ready, and responding to a custom "longTap" event. -------------------------------------------------------------------------------- /docs/af.ui/$.afui.hideMask.md: -------------------------------------------------------------------------------- 1 | #$.afui.hideMask(); 2 | 3 | ``` 4 | 5 | Hide the loading mask 6 | 7 | ``` 8 | 9 | ##Example 10 | 11 | ``` 12 | $.afui.hideMask(); 13 | 14 | ``` 15 | 16 | 17 | ##Parameters 18 | 19 | ``` 20 | 21 | ``` 22 | 23 | ##Returns 24 | 25 | ``` 26 | undefined 27 | ``` 28 | 29 | -------------------------------------------------------------------------------- /samples/react/readme.md: -------------------------------------------------------------------------------- 1 | #sample 2 | 3 | This sample is to show basic usage of React and App Framework UI. This does not go into more advanced features, such as page routing/navigation. This shows how to create custom React components and load them in an App Framework UI app, along with responding to custom "longTap" events. -------------------------------------------------------------------------------- /docs/af.ui/$.afui.autoLaunch.md: -------------------------------------------------------------------------------- 1 | #$.afui.autoLaunch 2 | 3 | ``` 4 | 5 | Boolean if you want to auto launch afui 6 | 7 | ``` 8 | 9 | ##Example 10 | 11 | ``` 12 | $.afui.autoLaunch = false; // 13 | 14 | ``` 15 | 16 | 17 | ##Parameters 18 | 19 | ``` 20 | 21 | ``` 22 | 23 | ##Returns 24 | 25 | ``` 26 | undefined 27 | ``` 28 | 29 | -------------------------------------------------------------------------------- /docs/af.ui/$.afui.getTitle.md: -------------------------------------------------------------------------------- 1 | #$.afui.getTitle 2 | 3 | ``` 4 | 5 | Get the title of the active header 6 | 7 | ``` 8 | 9 | ##Example 10 | 11 | ``` 12 | $.afui.getTitle() 13 | 14 | ``` 15 | 16 | 17 | ##Parameters 18 | 19 | ``` 20 | 21 | ``` 22 | 23 | ##Returns 24 | 25 | ``` 26 | undefined 27 | ``` 28 | 29 | -------------------------------------------------------------------------------- /docs/af.ui/$.afui.unblockUI.md: -------------------------------------------------------------------------------- 1 | #$.afui.unblockUI() 2 | 3 | ``` 4 | 5 | This will remove the UI mask 6 | 7 | ``` 8 | 9 | ##Example 10 | 11 | ``` 12 | $.afui.unblockUI() 13 | 14 | ``` 15 | ` 16 | 17 | ##Parameters 18 | 19 | ``` 20 | 21 | ``` 22 | 23 | ##Returns 24 | 25 | ``` 26 | undefined 27 | ``` 28 | 29 | -------------------------------------------------------------------------------- /docs/af.ui/$.afui.goBack.md: -------------------------------------------------------------------------------- 1 | #$.afui.goBack() 2 | 3 | ``` 4 | 5 | Initiate a back transition 6 | 7 | ``` 8 | 9 | ##Example 10 | 11 | ``` 12 | $.afui.goBack() 13 | 14 | ``` 15 | 16 | 17 | ##Parameters 18 | 19 | ``` 20 | delta number= 21 | 22 | ``` 23 | 24 | ##Returns 25 | 26 | ``` 27 | undefined 28 | ``` 29 | 30 | -------------------------------------------------------------------------------- /src/af.splashscreen.js: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * af.splashscreen 4 | * @copyright Intel 2014 5 | * 6 | */ 7 | (function($){ 8 | "use strict"; 9 | $.afui.ready(function(){ 10 | //delay to hide the splashscreen 11 | setTimeout(function(){ 12 | $("#splashscreen").remove(); 13 | },250); 14 | }); 15 | })(jQuery); -------------------------------------------------------------------------------- /samples/angular/partials/todo.html: -------------------------------------------------------------------------------- 1 |

Todo

2 | 3 | Add 4 |
5 | 6 | -------------------------------------------------------------------------------- /test/chai.helper.js: -------------------------------------------------------------------------------- 1 | // turn on stack traces for errors thrown during chai assertions 2 | chai.Assertion.includeStack = true; 3 | 4 | // make API globally available 5 | var should = chai.should(); 6 | var expect = chai.expect; 7 | beforeEach(function() { 8 | $.afui.autoLaunch=false; 9 | $("#moo").remove(); 10 | }); 11 | 12 | $.afui.autoLaunch=false; 13 | -------------------------------------------------------------------------------- /docs/af.ui/$.afui.clearHistory.md: -------------------------------------------------------------------------------- 1 | #$.afui.clearHistory() 2 | 3 | ``` 4 | 5 | Clear the history queue for the current view based off the active div 6 | 7 | ``` 8 | 9 | ##Example 10 | 11 | ``` 12 | $.afui.clearHistory() 13 | 14 | ``` 15 | 16 | 17 | ##Parameters 18 | 19 | ``` 20 | 21 | ``` 22 | 23 | ##Returns 24 | 25 | ``` 26 | undefined 27 | ``` 28 | 29 | -------------------------------------------------------------------------------- /docs/af.ui/$.afui.disableTabBar.md: -------------------------------------------------------------------------------- 1 | #$.afui.disableTabBar 2 | 3 | ``` 4 | 5 | This disables the tab bar ability to keep pressed states on elements 6 | 7 | ``` 8 | 9 | ##Example 10 | 11 | ``` 12 | $.afui.disableTabBar(); 13 | 14 | ``` 15 | 16 | 17 | ##Parameters 18 | 19 | ``` 20 | 21 | ``` 22 | 23 | ##Returns 24 | 25 | ``` 26 | undefined 27 | ``` 28 | 29 | -------------------------------------------------------------------------------- /docs/af.ui/$.afui.removeBadge.md: -------------------------------------------------------------------------------- 1 | #$.afui.removeBadge(target) 2 | 3 | ``` 4 | 5 | Removes a badge from the selected target. 6 | 7 | ``` 8 | 9 | ##Example 10 | 11 | ``` 12 | $.afui.removeBadge("#mydiv"); 13 | 14 | ``` 15 | 16 | 17 | ##Parameters 18 | 19 | ``` 20 | target string 21 | 22 | ``` 23 | 24 | ##Returns 25 | 26 | ``` 27 | undefined 28 | ``` 29 | 30 | -------------------------------------------------------------------------------- /docs/af.ui/$.afui.setBackButtonText.md: -------------------------------------------------------------------------------- 1 | #$.afui.setBackButtonText(title) 2 | 3 | ``` 4 | 5 | set the back button text 6 | 7 | ``` 8 | 9 | ##Example 10 | 11 | ``` 12 | $.afui.setBackButtonText("about"); 13 | 14 | ``` 15 | 16 | 17 | ##Parameters 18 | 19 | ``` 20 | text string 21 | 22 | ``` 23 | 24 | ##Returns 25 | 26 | ``` 27 | undefined 28 | ``` 29 | 30 | -------------------------------------------------------------------------------- /docs/af.ui/$.afui.blockUI.md: -------------------------------------------------------------------------------- 1 | #$.afui.blockUI(opacity) 2 | 3 | ``` 4 | 5 | This will throw up a mask and block the UI 6 | 7 | ``` 8 | 9 | ##Example 10 | 11 | ``` 12 | $.afui.blockUI(.9) 13 | 14 | ``` 15 | ` 16 | 17 | ##Parameters 18 | 19 | ``` 20 | opacity number 21 | 22 | ``` 23 | 24 | ##Returns 25 | 26 | ``` 27 | undefined 28 | ``` 29 | 30 | -------------------------------------------------------------------------------- /docs/af.ui/$.afui.setTitle.md: -------------------------------------------------------------------------------- 1 | #$.afui.setTitle 2 | 3 | ``` 4 | 5 | Set the title of the active header from 6 | 7 | ``` 8 | 9 | ##Example 10 | 11 | ``` 12 | $.afui.setTitle("New Title") 13 | 14 | ``` 15 | 16 | 17 | ##Parameters 18 | 19 | ``` 20 | String string|object 21 | 22 | ``` 23 | 24 | ##Returns 25 | 26 | ``` 27 | undefined 28 | ``` 29 | 30 | -------------------------------------------------------------------------------- /samples/angular/readme.md: -------------------------------------------------------------------------------- 1 | #sample 2 | 3 | This sample is to show basic usage of Angular and App Framework UI. This does not go into more advanced features, such as page routing/navigation. The key takeway is delaying the loading of Angular until App Framework UI has been dispatched for loading the "partials" in App Framework UI. This also shows using a directive for the "longTap" event App Framework UI dispatches. -------------------------------------------------------------------------------- /test/fixtures/afui-view.html: -------------------------------------------------------------------------------- 1 |

2 |
3 |
4 | View Trans 5 |
6 | 7 |
8 | -------------------------------------------------------------------------------- /docs/af.ui/$.afui.ready.md: -------------------------------------------------------------------------------- 1 | #$.afui.ready 2 | 3 | ``` 4 | 5 | function to fire when afui is ready and completed launch 6 | 7 | ``` 8 | 9 | ##Example 10 | 11 | ``` 12 | $.afui.ready(function(){console.log('afui is ready');}); 13 | 14 | ``` 15 | 16 | 17 | ##Parameters 18 | 19 | ``` 20 | param function 21 | 22 | ``` 23 | 24 | ##Returns 25 | 26 | ``` 27 | undefined 28 | ``` 29 | 30 | -------------------------------------------------------------------------------- /docs/af.ui/$.afui.manageHistory.md: -------------------------------------------------------------------------------- 1 | #$.afui.manageHistory 2 | 3 | ``` 4 | 5 | This is a boolean property. When set to true, we manage history and update the hash 6 | 7 | ``` 8 | 9 | ##Example 10 | 11 | ``` 12 | $.afui.manageHistory=false;//Don't manage for apps using Backbone 13 | 14 | ``` 15 | 16 | 17 | ##Parameters 18 | 19 | ``` 20 | 21 | ``` 22 | 23 | ##Returns 24 | 25 | ``` 26 | undefined 27 | ``` 28 | 29 | -------------------------------------------------------------------------------- /docs/af.ui/$.afui.useAjaxCacheBuster.md: -------------------------------------------------------------------------------- 1 | #$.afui.useAjaxCacheBuster 2 | 3 | ``` 4 | 5 | This is a boolean that when set to true will add "&cache=rand" to any ajax loaded link 6 | The default is false 7 | 8 | ``` 9 | 10 | ##Example 11 | 12 | ``` 13 | $.afui.useAjaxCacheBuster=true; 14 | 15 | ``` 16 | 17 | 18 | ##Parameters 19 | 20 | ``` 21 | 22 | ``` 23 | 24 | ##Returns 25 | 26 | ``` 27 | undefined 28 | ``` 29 | 30 | -------------------------------------------------------------------------------- /docs/plugins/af.splashscreen.md: -------------------------------------------------------------------------------- 1 | #Splashscreen 2 | 3 | This plugin will hide a splashscreen when the $.afui.ready has triggered. Simply include the script and it will remove the div with id="splashscreen" 4 | 5 | ``` 6 | 7 |
8 | App Framework 9 |
10 |
11 | 12 |

Starting app

13 |
14 | 15 | ``` 16 | 17 | -------------------------------------------------------------------------------- /docs/af.ui/$.afui.setBackButtonVisbility.md: -------------------------------------------------------------------------------- 1 | #$.afui.setBackButtonVisbility 2 | 3 | ``` 4 | 5 | Set the visibility of the back button for the current header 6 | 7 | ``` 8 | 9 | ##Example 10 | 11 | ``` 12 | $.afui.setBackButtonVisbility(true) 13 | 14 | ``` 15 | 16 | 17 | ##Parameters 18 | 19 | ``` 20 | Boolean boolean 21 | 22 | ``` 23 | 24 | ##Returns 25 | 26 | ``` 27 | undefined 28 | ``` 29 | 30 | -------------------------------------------------------------------------------- /test/fixtures/popup.html: -------------------------------------------------------------------------------- 1 |
2 |

3 |
4 | 10 |
11 |
12 | 13 | -------------------------------------------------------------------------------- /samples/angular/js/directives.js: -------------------------------------------------------------------------------- 1 | angular.module('todoaf') 2 | .directive("li",function(){ 3 | return { 4 | restrict:"E", 5 | link:function($scope,$element,attrs){ 6 | $element.on("longTap",function(event){ 7 | if(!confirm("Are you sure you want to delete this todo")) return; 8 | $(event.target).off("longTap"); 9 | $scope.$eval(attrs.longPress); 10 | }); 11 | } 12 | }; 13 | }); -------------------------------------------------------------------------------- /docs/af.ui/$.afui.drawer.show.md: -------------------------------------------------------------------------------- 1 | #$.afui.drawer.show 2 | 3 | ``` 4 | 5 | This is a reference to the drawer plugin. 6 | 7 | ``` 8 | 9 | ##Example 10 | 11 | ``` 12 | $.afui.drawer.show('#left','left','reveal') 13 | 14 | ``` 15 | 16 | 17 | ##Parameters 18 | 19 | ``` 20 | id string 21 | position string 22 | transition string 23 | 24 | ``` 25 | 26 | ##Returns 27 | 28 | ``` 29 | undefined 30 | ``` 31 | 32 | -------------------------------------------------------------------------------- /docs/af.ui/$.afui.launch.md: -------------------------------------------------------------------------------- 1 | #$.afui.launch(); 2 | 3 | ``` 4 | 5 | This is callled when you want to launch afui. If autoLaunch is set to true, it gets called on DOMContentLoaded. 6 | If autoLaunch is set to false, you can manually invoke it. 7 | 8 | ``` 9 | 10 | ##Example 11 | 12 | ``` 13 | $.afui.autoLaunch=false; 14 | $.afui.launch(); 15 | 16 | ``` 17 | 18 | 19 | ##Parameters 20 | 21 | ``` 22 | 23 | ``` 24 | 25 | ##Returns 26 | 27 | ``` 28 | undefined 29 | ``` 30 | 31 | -------------------------------------------------------------------------------- /docs/af.ui/$.afui.loadDefaultHash.md: -------------------------------------------------------------------------------- 1 | #$.afui.loadDefaultHash 2 | 3 | ``` 4 | 5 | This is a boolean property. When set to true (default) it will load that panel when the app is started 6 | 7 | ``` 8 | 9 | ##Example 10 | 11 | ``` 12 | $.afui.loadDefaultHash=false; //Never load the page from the hash when the app is started 13 | $.afui.loadDefaultHash=true; //Default 14 | 15 | ``` 16 | 17 | 18 | ##Parameters 19 | 20 | ``` 21 | 22 | ``` 23 | 24 | ##Returns 25 | 26 | ``` 27 | undefined 28 | ``` 29 | 30 | -------------------------------------------------------------------------------- /docs/af.ui/$.afui.showMask.md: -------------------------------------------------------------------------------- 1 | #$.afui.showMask(text, value); 2 | 3 | ``` 4 | 5 | Show the loading mask with specificed text 6 | 7 | ``` 8 | 9 | ##Example 10 | 11 | ``` 12 | $.afui.showMask() 13 | $.afui.showMask('Fetching data...') 14 | $.afui.showMask('Fetching data...', 20000) //number of milliseconds to display the mask, default 15 secs 15 | 16 | ``` 17 | 18 | 19 | ##Parameters 20 | 21 | ``` 22 | text string= 23 | value number= 24 | 25 | ``` 26 | 27 | ##Returns 28 | 29 | ``` 30 | undefined 31 | ``` 32 | 33 | -------------------------------------------------------------------------------- /src/less/grid.less: -------------------------------------------------------------------------------- 1 | .grid { 2 | width: 100%; 3 | overflow:hidden; 4 | } 5 | .col2,.col3,.col1-3,.col2-3 { 6 | float: none; 7 | width: 100%; 8 | } 9 | .grid:after { 10 | content: ''; 11 | clear: both; 12 | } 13 | @media handheld, only screen and (min-width: 768px) { 14 | .col2 { 15 | width: 50%; 16 | float: left; 17 | } 18 | .col3 { 19 | width: 33.3%; 20 | float: left; 21 | } 22 | .col1-3 { 23 | width: 33.3%; 24 | float: left; 25 | } 26 | .col2-3 { 27 | width: 66.6%; 28 | float: left; 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /docs/af.ui/$.afui.registerDataDirective.md: -------------------------------------------------------------------------------- 1 | #$.afui.registerDataDirective 2 | 3 | ``` 4 | 5 | Register a data directive for a click event. Plugins use this to allow 6 | html based execution (see af.popup.js) 7 | 8 | ``` 9 | 10 | ##Example 11 | 12 | ``` 13 | $.afui.registerDataDirective("[data-foo]",function(){ 14 | console.log("foo was clicked"); 15 | }) 16 | 17 | ``` 18 | 19 | 20 | ##Parameters 21 | 22 | ``` 23 | selector string 24 | callback function 25 | 26 | ``` 27 | 28 | ##Returns 29 | 30 | ``` 31 | undefined 32 | ``` 33 | 34 | -------------------------------------------------------------------------------- /samples/angular/js/controllers.js: -------------------------------------------------------------------------------- 1 | angular.module('todoaf') 2 | .controller('TodoCtrl',function TodoCtrl($scope) { 3 | 'use strict'; 4 | 5 | var todos=$scope.todos=[]; 6 | 7 | 8 | $scope.addTodo=function(){ 9 | if(!$scope.todoVal) return; 10 | todos.push({ 11 | title:$scope.todoVal, 12 | completed:false 13 | }); 14 | $scope.todoVal=""; 15 | }; 16 | 17 | $scope.removeTodo=function(item){ 18 | todos.splice(todos.indexOf(item),1); 19 | $scope.$apply(); 20 | }; 21 | 22 | 23 | }); -------------------------------------------------------------------------------- /partials/lockscreen.html: -------------------------------------------------------------------------------- 1 | 15 | This creates a modal window asking users to enter a 4 digit password. You can have boxed keys or rounded. The password is 1111 16 |
17 |
18 |
19 | Show Lock Screen 20 |
21 | Show Lock Screen (rounded) 22 |
-------------------------------------------------------------------------------- /docs/af.ui/$.afui.loadContent.md: -------------------------------------------------------------------------------- 1 | #$.afui.loadContent(target, newTab, goBack, transition, anchor); 2 | 3 | ``` 4 | 5 | This is called to initiate a transition or load content via ajax. 6 | We can pass in a hash+id or URL. 7 | 8 | ``` 9 | 10 | ##Example 11 | 12 | ``` 13 | $.afui.loadContent("#main",false,false,"up"); 14 | 15 | ``` 16 | 17 | 18 | ##Parameters 19 | 20 | ``` 21 | target string 22 | newtab boolean= 23 | go boolean= 24 | transition string= 25 | anchor object= 26 | 27 | ``` 28 | 29 | ##Returns 30 | 31 | ``` 32 | undefined 33 | ``` 34 | 35 | -------------------------------------------------------------------------------- /partials/leftnav.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/af.ui/$.afui.updateBadge.md: -------------------------------------------------------------------------------- 1 | #$.afui.updateBadge(target,value,[position],[color]) 2 | 3 | ``` 4 | 5 | Update a badge on the selected target. Position can be 6 | bl = bottom left 7 | tl = top left 8 | br = bottom right 9 | tr = top right (default) 10 | 11 | ``` 12 | 13 | ##Example 14 | 15 | ``` 16 | $.afui.updateBadge("#mydiv","3","bl","green"); 17 | 18 | ``` 19 | 20 | 21 | ##Parameters 22 | 23 | ``` 24 | target string 25 | value string 26 | position string= 27 | color (string=|object) 28 | 29 | ``` 30 | 31 | ##Returns 32 | 33 | ``` 34 | undefined 35 | ``` 36 | 37 | -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "camelcase": true, 3 | "curly": false, 4 | "eqeqeq": true, 5 | "forin": false, 6 | "immed": true, 7 | "indent": 4, 8 | "noempty": true, 9 | "quotmark": "double", 10 | "evil": true, 11 | 12 | "undef": true, 13 | "globals": { 14 | "module": false, 15 | "define": false, 16 | "process": false, 17 | "__dirname": false, 18 | "console": false, 19 | "WebKitCSSMatrix": false, 20 | "MSCSSMatrix": false, 21 | "MSApp": false, 22 | "jQuery": false, 23 | "af":false 24 | }, 25 | 26 | "unused": true, 27 | "browser": true, 28 | "strict": true, 29 | "trailing": true, 30 | "maxdepth": 5, 31 | "newcap": false, 32 | "expr": true, 33 | "scripturl": true 34 | } 35 | -------------------------------------------------------------------------------- /partials/toast.html: -------------------------------------------------------------------------------- 1 | Toast Demo 2 | 3 |

4 | Toast1 5 |
6 |
7 | Toast2 8 |
9 |
10 | Toast3 11 |
12 |
13 | Toast4 -------------------------------------------------------------------------------- /src/less/badges.less: -------------------------------------------------------------------------------- 1 | .af-badge { 2 | position:absolute; 3 | top:2px; 4 | right:2px; 5 | display:inline-block; 6 | min-width:20px; 7 | max-width:90%; 8 | height:20px; 9 | padding:0 3px; 10 | background-color:red; 11 | border-radius:20px; 12 | font-size:12px; 13 | line-height:19px; 14 | font-weight:bold; 15 | color:#fff; 16 | text-overflow:ellipsis; 17 | text-align:center; 18 | text-shadow:0 -1px 0 rgba(64,0,0,.6); 19 | } 20 | .af-badge.br { 21 | bottom:2px; 22 | right:2px; 23 | top:auto; 24 | left:auto; 25 | } 26 | .af-badge.bl { 27 | bottom:2px; 28 | left:2px; 29 | top:auto; 30 | right:auto; 31 | } 32 | .af-badge.tl { 33 | top:2px; 34 | left:2px; 35 | right:auto; 36 | bottom:auto; 37 | } 38 | -------------------------------------------------------------------------------- /docs/af.ui/$.afui.actionsheet.md: -------------------------------------------------------------------------------- 1 | #$.afui.actionsheet() 2 | 3 | ``` 4 | 5 | This is a shorthand call to the $.actionsheet plugin. We wire it to the afui div automatically 6 | 7 | ``` 8 | 9 | ##Example 10 | 11 | ``` 12 | $.afui.actionsheet("Settings Logout") 13 | $.afui.actionsheet("[{ 14 | text: 'back', 15 | cssClasses: 'red', 16 | handler: function () { $.afui.goBack(); ; } 17 | }, { 18 | text: 'show alert 5', 19 | cssClasses: 'blue', 20 | handler: function () { alert("hi"); } 21 | }, { 22 | text: 'show alert 6', 23 | cssClasses: '', 24 | handler: function () { alert("goodbye"); } 25 | }]"); 26 | 27 | ``` 28 | 29 | 30 | ##Parameters 31 | 32 | ``` 33 | links (string|Array.) 34 | 35 | ``` 36 | 37 | ##Returns 38 | 39 | ``` 40 | undefined 41 | ``` 42 | 43 | -------------------------------------------------------------------------------- /docs/af.ui/$.afui.popup.md: -------------------------------------------------------------------------------- 1 | #$.afui.popup(opts) 2 | 3 | ``` 4 | 5 | This is a wrapper to $.popup.js plugin. If you pass in a text string, it acts like an alert box and just gives a message 6 | 7 | ``` 8 | 9 | ##Example 10 | 11 | ``` 12 | $.afui.popup(opts); 13 | $.afui.popup( { 14 | title:"Alert! Alert!", 15 | message:"This is a test of the emergency alert system!! Don't PANIC!", 16 | cancelText:"Cancel me", 17 | cancelCallback: function(){console.log("cancelled");}, 18 | doneText:"I'm done!", 19 | doneCallback: function(){console.log("Done for!");}, 20 | cancelOnly:false 21 | }); 22 | $.afui.popup('Hi there'); 23 | 24 | ``` 25 | 26 | 27 | ##Parameters 28 | 29 | ``` 30 | options (object|string) 31 | 32 | ``` 33 | 34 | ##Returns 35 | 36 | ``` 37 | undefined 38 | ``` 39 | 40 | -------------------------------------------------------------------------------- /docs/plugins/af.swipereveal.md: -------------------------------------------------------------------------------- 1 | #swipe to reveal 2 | 3 | The swipe to reveal allows you to swipe an object and reveal another. This is useful for "swipe to delete" implementations 4 | 5 | To use this, simply include the js plugin and css file. 6 | 7 | 8 | 9 | ##Using 10 | 11 | To use the plugin, add the class "swipe-reveal" to your container DOM node. Inside the container should be two elements, the first with the content you want to show with class "swipe-content". The second is the content to reveal with class "swipe-hidden" 12 | 13 | ``` 14 |
  • 15 |
    Swipe to reveal with some options
    16 |
    17 | More 18 | Archive 19 |
    20 |
    • 21 | ``` -------------------------------------------------------------------------------- /samples/backbone/js/app.js: -------------------------------------------------------------------------------- 1 | (function(){ 2 | 3 | 4 | "use strict"; 5 | 6 | var todos=[]; 7 | var app=Backbone.View.extend({ 8 | el: '#main', 9 | events: { 10 | 'click #addTodo': 'addTodo', 11 | 'longTap li': 'removeTodo' 12 | }, 13 | template:_.template($('#todoTemplate').html()), 14 | addTodo:function(){ 15 | var item=$("#todoVal"); 16 | var val=item.val(); 17 | if(val.length<2) return; 18 | 19 | todos.push(val); 20 | item.val(''); 21 | $("#todoList").append(this.template({title:val})); 22 | }, 23 | removeTodo:function(e){ 24 | var item=$(e.target); 25 | todos.splice(todos.indexOf(item.html()),1); 26 | $(item).remove(); 27 | }, 28 | initialize:function(){ 29 | } 30 | }); 31 | 32 | $.afui.ready(function(){ 33 | new app(); 34 | }); 35 | })(jQuery); -------------------------------------------------------------------------------- /src/less/af.swipereveal.less: -------------------------------------------------------------------------------- 1 | .swipe-reveal { 2 | .swipe-hidden { 3 | position:absolute; 4 | right:0px; 5 | top:0px; 6 | z-index:1; 7 | bottom:0px; 8 | } 9 | .swipe-content { 10 | display: block; 11 | position: relative; 12 | display: block; 13 | color: inherit; 14 | margin: -20px -20px -20px -10px; 15 | text-decoration: none; 16 | padding: 20px 20px 20px 10px; 17 | background:inherit; 18 | z-index:2; 19 | } 20 | } 21 | .swipe-hidden .button, .swipe-hidden .button.pressed { 22 | display:inline-block; 23 | height:100%; 24 | background:#ccc !important; 25 | color:white; 26 | border-radius:0 !important; 27 | border:none; 28 | padding: 20px 15px; 29 | margin:0; 30 | float:left; 31 | color:white !important; 32 | } 33 | .swipe-hidden .archive, .swipe-hidden .archive.pressed { 34 | background:red !important; 35 | 36 | } 37 | -------------------------------------------------------------------------------- /test/fixtures/toast.html: -------------------------------------------------------------------------------- 1 |
    2 |

    3 |
    4 |
    5 | Toast Demo 6 | 7 |

    8 | Toast1 9 |
    10 |
    11 | Toast2 12 |
    13 |
    14 | Toast3 15 |
    16 |
    17 | Toast4 18 |
    19 |
    20 |
    -------------------------------------------------------------------------------- /test/cssTranslate.test.js: -------------------------------------------------------------------------------- 1 | describe("cssTranslate", function () { 2 | var stubMatrix = { a: 1, b: 1, c: 1, d: 1, e: 1, f: 1 }; 3 | 4 | beforeEach(function () { 5 | $(document.body).append("
    "); 6 | 7 | 8 | }); 9 | 10 | it("should set the webkit css value", function () { 11 | $.feat.cssPrefix ="Webkit"; 12 | var el=document.getElementById("moo"); 13 | var time="100ms"; 14 | $(el).cssTranslate("100px,0"); 15 | var style=el.style["WebkitTransform"]; 16 | expect(style==="translate3d(100px, 0px, 0px)").is.true; 17 | 18 | }); 19 | 20 | it("should set the proper x/y coords", function () { 21 | $.feat.cssPrefix ="Webkit"; 22 | var el=document.getElementById("moo"); 23 | var time="100ms"; 24 | $(el).cssTranslate("100px,100px"); 25 | var style=el.style["WebkitTransform"]; 26 | expect(style==="translate3d(100px, 100px, 0px)").is.true; 27 | }); 28 | 29 | 30 | 31 | 32 | 33 | }); 34 | -------------------------------------------------------------------------------- /docs/plugins/af.transform.md: -------------------------------------------------------------------------------- 1 | #transform 2 | 3 | This plugin lets you run transition based animations via css3 transforms. 4 | 5 | ``` 6 | $(selector).transition() 7 | ``` 8 | 9 | ## Properties 10 | 11 | #### Attributes 12 | An animator object is return that you act upon 13 | 14 | ``` 15 | none 16 | ``` 17 | 18 | #### Functions 19 | 20 | ``` 21 | none 22 | ``` 23 | 24 | 25 | ## Methods 26 | ``` 27 | keep (boolean) Keep the class after animation has completed 28 | end (function) Function to execute after animation has completed 29 | run (transform,duration) CSS3 transform to run and duration 30 | ``` 31 | 32 | ## Events 33 | ``` 34 | none 35 | ``` 36 | 37 | 38 | ## Examples 39 | 40 | Here is a basic example to run the animation 41 | 42 | ``` 43 | $("#one").transition().run("translate3d(-100px,-100px,0)","500ms"); 44 | 45 | ``` 46 | 47 | Now we will execute a function after it's completed 48 | 49 | 50 | ``` 51 | $("#one").animation().end(function(){console.log('completed')}).run("translate3d(-100px,-100px,0)","500ms"); 52 | ``` -------------------------------------------------------------------------------- /partials/actionsheet.html: -------------------------------------------------------------------------------- 1 | 29 | This creates a slide in action sheet from the bottom. 30 |
    31 |
    32 | Show Custom Html Sheet 33 | Show Custom Json Sheet -------------------------------------------------------------------------------- /license.txt: -------------------------------------------------------------------------------- 1 | MIT X11 License 2 | Copyright (C) <2011> by 3 | 4 | Permission is hereby granted, free of charge, to any person obtaining a copy 5 | of this software and associated documentation files (the "Software"), to deal 6 | in the Software without restriction, including without limitation the rights 7 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | copies of the Software, and to permit persons to whom the Software is 9 | furnished to do so, subject to the following conditions: 10 | 11 | The above copyright notice and this permission notice shall be included in 12 | all copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 15 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 16 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 17 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 18 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 19 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 20 | THE SOFTWARE. -------------------------------------------------------------------------------- /src/less/anim2.less: -------------------------------------------------------------------------------- 1 | .panel.active, .panel.animation-active { 2 | display:block !important; 3 | z-index:100; 4 | -webkit-animation-timing-function: linear !important; 5 | animation-timing-function: linear !important; 6 | } 7 | 8 | .animation-active { 9 | -webkit-animation-timing-function: linear !important; 10 | animation-timing-function: linear !important; 11 | } 12 | 13 | .panel.animation-active { 14 | -webkit-transition-duration: 300ms; 15 | transition-duration: 300ms; 16 | } 17 | 18 | .fast { 19 | -webkit-transition-duration: 100ms !important; 20 | transition-duration: 100ms !important; 21 | } 22 | 23 | 24 | .none-in,.none-out { 25 | -webkit-animation: noTransition 1ms forwards; 26 | animation: noTransition 1ms forwards; 27 | } 28 | 29 | .blank-in,.blank-out,.blank { 30 | -webkit-animation: noTransition 300ms forwards; 31 | animation: noTransition 300ms forwards; 32 | } 33 | 34 | 35 | @-webkit-keyframes noTransition { 36 | from { 37 | opacity:1.0; 38 | } 39 | to { 40 | opacity:0.99 41 | } 42 | } 43 | @keyframes noTransition { 44 | from { 45 | opacity:1.0; 46 | } 47 | to { 48 | opacity:0.99; 49 | } 50 | } 51 | 52 | -------------------------------------------------------------------------------- /docs/plugins/af.touchevents.md: -------------------------------------------------------------------------------- 1 | #Touch Events 2 | 3 | This plugin adds additional touch events that you can register to listen for. Simply include the plugin and it will do the rest. We do not call preventDefault or stopPropagation on any events. 4 | 5 | ##NOTE 6 | 7 | 8 | ##Events 9 | 10 | ``` 11 | tap Tap on the element 12 | singleTap Single tap on the elem (250ms delay after tap is triggered) 13 | doubleTap Double tap (quick) on the element 14 | longTap Long press on the element 15 | swipe The element was swiped (30px threshold) 16 | swipeLeft The element was swiped left 17 | swipeRight The element was swiped right 18 | swipeUp The element was swiped up 19 | swipeDown The element was swiped down 20 | swipeLeftStart A swipe left has been started 21 | swipeRightStart A swipe right has been started 22 | swipeUpStart A swipe up has been started 23 | swipeDownStart A swipe down has been started 24 | ``` 25 | 26 | ##Listening 27 | 28 | You can listen for any of the events like any other event 29 | 30 | ``` 31 | $("#element").bind("doubleTap",function(){}); 32 | ``` -------------------------------------------------------------------------------- /src/less/splitview.less: -------------------------------------------------------------------------------- 1 | @media handheld, only screen and (min-width: 768px) { 2 | .splitview >*:not(nav) { 3 | margin-left:256px; 4 | z-index:9; 5 | -webkit-transform:none !important; 6 | transform:none !important; 7 | -webkit-animation: none !important; 8 | animation: none !important; 9 | } 10 | 11 | .splitview > nav { 12 | left:0px !important; 13 | width:256px !important; 14 | display:block !important; 15 | 16 | z-index:10; 17 | -webkit-animation: none !important; 18 | animation: none !important; 19 | } 20 | .splitview header .menuButton{ 21 | display:none !important; 22 | } 23 | } 24 | 25 | header { 26 | .menuButton { 27 | position: relative; 28 | top: 5px; 29 | right: -8px; 30 | height: 36px; 31 | width: 36px; 32 | z-index:2; 33 | float:right; 34 | } 35 | .menuButton:after { 36 | border-bottom: 9px double white; 37 | border-top: 3px solid white; 38 | top: 9px; 39 | left: 3px; 40 | content: ""; 41 | height: 15px; 42 | position: absolute; 43 | width: 15px; 44 | } 45 | } -------------------------------------------------------------------------------- /test/vendorCss.test.js: -------------------------------------------------------------------------------- 1 | 2 | describe("vendorCss", function () { 3 | var stubMatrix = { a: 1, b: 1, c: 1, d: 1, e: 1, f: 1 }; 4 | 5 | beforeEach(function () { 6 | $(document.body).append("
    "); 7 | }); 8 | 9 | it("should set the webkit css value", function () { 10 | $.feat.cssPrefix ="Webkit"; 11 | var el=document.getElementById("moo"); 12 | var time="100ms"; 13 | $(el).vendorCss("TransitionDuration",time); 14 | var val=el.style['WebkitTransitionDuration']; 15 | val.should.eql(time); 16 | }); 17 | 18 | it("should set the vendor neutral css value", function () { 19 | $.feat.cssPrefix ="Webkit"; 20 | var el=document.getElementById("moo"); 21 | var time="100ms"; 22 | $(el).vendorCss("TransitionDuration",time); 23 | var val=el.style['transitionduration']; 24 | val.should.eql(time); 25 | }); 26 | 27 | it("should not set the another vendor css value", function () { 28 | var el=document.getElementById("moo"); 29 | var time="100ms"; 30 | $(el).vendorCss("TransitionDuration",time); 31 | var val=el.style['MozTransitionDuration']; 32 | expect(val).to.be.undefined; 33 | }); 34 | 35 | 36 | }); 37 | -------------------------------------------------------------------------------- /docs/plugins/af.animation.md: -------------------------------------------------------------------------------- 1 | #animation 2 | 3 | This plugin lets you run class based animations and keep the class, reverse them, run a function after it's finished, etc. 4 | 5 | 6 | ``` 7 | $(selector).animator() 8 | ``` 9 | 10 | ## Properties 11 | 12 | #### Attributes 13 | An animator object is return that you act upon 14 | 15 | ``` 16 | none 17 | ``` 18 | 19 | #### Functions 20 | 21 | ``` 22 | none 23 | ``` 24 | 25 | 26 | ## Methods 27 | ``` 28 | keep (boolean) Keep the class after animation has completed 29 | remove (string) Remove class from classlist 30 | reverse (string) Run the animation in reverse 31 | end (function) Function to execute after animation has completed 32 | run (string) Run the animation with the given class 33 | reRun(string) Run the animation again. 34 | ``` 35 | 36 | ## Events 37 | ``` 38 | none 39 | ``` 40 | 41 | 42 | ## Examples 43 | 44 | Here is a basic example to run the animation 45 | 46 | ``` 47 | $("#one").animation().run("slide-in"); 48 | 49 | ``` 50 | 51 | Now we will execute a function after it's completed 52 | 53 | 54 | ``` 55 | $("#one").animation().end(function(){console.log('completed')}).run("slide-in"); 56 | ``` 57 | 58 | Run the animation in reverse and make sure the class was removed 59 | 60 | 61 | ``` 62 | $("#one").animation().remove("slide-out").reverse().end(function(){ 63 | this.classList.add("active"); 64 | }).run("slide-out"); 65 | ``` -------------------------------------------------------------------------------- /test/fixtures/afui.html: -------------------------------------------------------------------------------- 1 | 2 |
    3 |

    4 |
    5 |
    6 | Hello world 7 |
    8 |
    9 | Foobar 10 | 11 |
    12 | One 13 | two 14 | three 15 |
    16 | 3 17 |
    18 |
    19 | 24 |
    25 |
    26 |

    27 |
    28 |
    29 | View Trans 30 |
    31 | 32 |
    33 | 37 |
    38 | 39 | -------------------------------------------------------------------------------- /partials/popup.html: -------------------------------------------------------------------------------- 1 | This creates a popup dialog to interact with users. You can pass in an HTML string, which acts (and replaces) an alert dialog. You can also pass in an object to get more interaction. 33 |
    34 |
    35 | Alert style diaglog 36 |
    37 | Detailed ineraction 38 |
    39 | HTML markup 40 |
    -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | DISCONTINUATION OF PROJECT. This project will no longer be maintained by Intel. Intel will not provide or guarantee development of or support for this project, including but not limited to, maintenance, bug fixes, new releases or updates. Patches to this project are no longer accepted by Intel. In an effort to support the developer community, Intel has made this project available under the terms of the MIT X11 License. If you have an ongoing need to use this project, are interested in independently developing it, or would like to maintain patches for the community, please create your own fork of the project. 2 | 3 | # App Framework - a HTML5 targeted Javascript Framework 4 | 5 | App Framework is a UI framework targeted at HTML5 browsers. 6 | 7 | # 3.0 version 8 | 9 | The 3.0 version of App Framework removes the following 10 | 11 | 1. Query selector library - instead use jQuery* or Zepto* 12 | 2. Only supports Android* 4+, iOS* 6+, WP* 8, FF* OS and Blackberry* 10 13 | 3. No longer provides a "Touchlayer", use Fastclick (https://github.com/ftlabs/fastclick) instead. 14 | 4. Native scrolling is only used. If you need a JS scroller, use an existing one like FTScroller (https://github.com/ftlabs/ftscroller) or iScroll 15 | 16 | # License 17 | 18 | App Framework is is licensed under the terms of the MIT License, see the included license.txt file. 19 | 20 | App Framework uses code from the following software: 21 | 22 | 1) Karma Test Runner - https://github.com/karma-runner/karma (MIT-X11 License) 23 | -------------------------------------------------------------------------------- /src/less/af.popup.less: -------------------------------------------------------------------------------- 1 | #mask { 2 | display:block; 3 | width:100%; 4 | height:100%; 5 | background:#000; 6 | z-index: 999999; 7 | position:fixed; 8 | top:0; 9 | left:0; 10 | } 11 | .afPopup { 12 | display: block; 13 | width: 280px; 14 | float:left; 15 | border: solid 1px #72767b; 16 | border-radius:10px; 17 | padding: 10px; 18 | opacity: 1; 19 | -webkit-transform: scale(1); 20 | transform:scale(1); 21 | position: absolute; 22 | z-index: 1000000; 23 | top: 50%; 24 | left: 50%; 25 | margin: 0px auto; 26 | background: rgba(70,70,70,1); 27 | color:white; 28 | & > * { 29 | color:inherit; 30 | } 31 | & > HEADER { 32 | font-weight:bold; 33 | font-size:20px; 34 | margin:0; 35 | padding:5px; 36 | } 37 | & > DIV { 38 | font-size:14px; 39 | margin:8px; 40 | } 41 | & > FOOTER { 42 | width:100%; 43 | text-align:center; 44 | display:block !important; 45 | & > A#cancel { 46 | float:left; 47 | } 48 | & > A#action { 49 | float:right; 50 | } 51 | & > A.center { 52 | float:none!important; 53 | width:80%; 54 | margin:8px; 55 | } 56 | } 57 | } 58 | .afPopup.hidden { 59 | opacity: 0; 60 | -webkit-transform: scale(0.1); 61 | 62 | } 63 | 64 | .afPopup.show { 65 | -webkit-transition: all 0.20s ease-in-out; 66 | transition: all 0.20s ease-in-out; 67 | } 68 | -------------------------------------------------------------------------------- /partials/touch.html: -------------------------------------------------------------------------------- 1 | 2 | 29 |

    Touch Events

    30 | Back 31 | 32 | 46 | -------------------------------------------------------------------------------- /test/transition.test.js: -------------------------------------------------------------------------------- 1 | describe("transition", function () { 2 | 3 | beforeEach(function () { 4 | $(document.body).remove("#transitioner"); 5 | $(document.body).append("
    "); 6 | }); 7 | 8 | it("should be an object",function(){ 9 | var foo=$("#transitioner").transition(); 10 | expect($.isObject(foo)).to.be.true; 11 | }); 12 | 13 | it("should run a transition with a callback but not keep the transition",function(done){ 14 | $("#transitioner").transition().end(function(){ 15 | var matrix=($.getCssMatrix(this)); 16 | matrix.m22.should.eql(1.2); 17 | }).run('scale(1.2)',"200ms"); 18 | setTimeout(function(){ 19 | var matrix=($.getCssMatrix($("#transitioner").get(0))); 20 | matrix.m22.should.eql(1); 21 | done(); 22 | },300); 23 | }); 24 | it("should run a transition with no callback",function(done){ 25 | $("#transitioner").transition().run('scale(1.2)',"200ms"); 26 | setTimeout(function(){ 27 | var matrix=($.getCssMatrix($("#transitioner").get(0))); 28 | matrix.m22.should.eql(1); 29 | done(); 30 | },300); 31 | }); 32 | 33 | it("should keep the transition",function(done){ 34 | $("#transitioner").transition().keep().run('scale(1.2)',"200ms"); 35 | setTimeout(function(){ 36 | var matrix=($.getCssMatrix($("#transitioner").get(0))); 37 | matrix.m22.should.eql(1.2); 38 | done(); 39 | },300); 40 | }); 41 | 42 | }); 43 | 44 | 45 | -------------------------------------------------------------------------------- /src/less/af.toast.less: -------------------------------------------------------------------------------- 1 | .afToast { 2 | width: auto; 3 | border: solid 1px #72767b; 4 | z-index: 1000000; 5 | margin: 0px auto; 6 | background: #464646; 7 | color:white; 8 | opacity:0.95; 9 | height:auto; 10 | font-size:20px; 11 | -webkit-transition: all 0.3s; 12 | transition: all 0.3s; 13 | text-align: left; 14 | line-height:46px; 15 | margin:5px 10px; 16 | border-radius:5px; 17 | overflow:hidden; 18 | & > * { 19 | color:inherit; 20 | } 21 | & > DIV { 22 | font-size:16px; 23 | margin:8px; 24 | } 25 | } 26 | .afToast.hidden { 27 | opacity:0.1; 28 | height:5px; 29 | overflow:hidden; 30 | } 31 | .afToastContainer { 32 | position:absolute; 33 | top:0px; 34 | left:0px; 35 | z-index:99999; 36 | } 37 | .afToast.success { 38 | background:#499349; 39 | } 40 | .afToast.error { 41 | background:#AA312A; 42 | } 43 | .afToast.warning { 44 | background:#DF8505; 45 | } 46 | .afToastContainer.br { 47 | bottom:0px; 48 | right:0px; 49 | top:auto; 50 | left:auto; 51 | } 52 | .afToastContainer.bl { 53 | bottom:0px; 54 | left:0px; 55 | top:auto; 56 | right:auto; 57 | } 58 | .afToastContainer.tl { 59 | top:0px; 60 | left:0px; 61 | right:auto; 62 | bottom:auto; 63 | } 64 | .afToastContainer.tr { 65 | top:0px; 66 | right:0px; 67 | left:auto; 68 | bottom:auto; 69 | } 70 | .afToastContainer.tc { 71 | top:0px; 72 | right:0px; 73 | bottom:auto; 74 | left:0px; 75 | } 76 | .afToastContainer.bc { 77 | top:auto; 78 | right:0px; 79 | bottom:0px; 80 | left:0px; 81 | } 82 | -------------------------------------------------------------------------------- /src/af.animateheader.js: -------------------------------------------------------------------------------- 1 | /** 2 | * af.animateheader 3 | * @copyright Intel 2014 4 | * 5 | */ 6 | 7 | (function($){ 8 | "use strict"; 9 | //animate the headers on transtion 10 | var oldTitle=$.afui.setTitle; 11 | $.afui.animateHeader=function(what){ 12 | if(what!==false){ 13 | $.afui.setTitle=function(item,view,back,newView){ 14 | 15 | var title; 16 | if(typeof(item)==="string"){ 17 | title=item; 18 | } 19 | else if($(item).attr("data-title")) 20 | title=$(item).attr("data-title"); 21 | else if($(item).attr("title")) 22 | title=$(item).attr("title"); 23 | 24 | if(!title||title.length===0) return; 25 | 26 | var header=$(this.activeDiv).closest(".view").children("header").eq(0); 27 | var cssClass=back?"header-unload":"header-load"; 28 | 29 | var old=header.find("h1").eq(0).html(); 30 | 31 | //update the current header h1 so we keep the DOM node for events, etc 32 | header.find("h1").eq(0).html(title).removeClass("header-unload header-load"); 33 | if(newView) return; 34 | header.find("h1").animation().run(cssClass+"-to"); 35 | 36 | //append a second for animation 37 | var second=$("

    "+old+"

    "); 38 | header.append(second); 39 | second.animation().end(function(){ 40 | $(this).remove(); 41 | }).run(cssClass); 42 | }; 43 | } 44 | else{ 45 | $.afui.setTitle=oldTitle; 46 | } 47 | }; 48 | 49 | })(jQuery); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "intel-appframework", 3 | "version": "3.0.0", 4 | "description": "App Framework is a Javascript framework targeted at HTML5 browsers with a blazingly fast query selector library that supports W3C queries.", 5 | "main": "build/appframework.ui.min.js", 6 | "repository": { 7 | "type": "git", 8 | "url": "git://github.com/01org/appframework.git" 9 | }, 10 | "authors": [ 11 | { 12 | "name": "Ian Maffett", 13 | "email": "ian.maffett@intel.com" 14 | } 15 | ], 16 | "engines": { 17 | "node": ">=0.8.14 <0.11" 18 | }, 19 | "license": "MIT", 20 | "bugs": { 21 | "url": "https://github.com/01org/appframework/issues" 22 | }, 23 | "keywords": [ 24 | "mobile", 25 | "app", 26 | "html5", 27 | "hybrid", 28 | "cordova", 29 | "phonegap", 30 | "tablet", 31 | "touch" 32 | ], 33 | "devDependencies": { 34 | "blanket": "~1.1.5", 35 | "chai": "~1.7.2", 36 | "express": "~3.3.7", 37 | "grunt": "~0.4.1", 38 | "grunt-banner": "~0.2.0", 39 | "grunt-cli": "~0.1.9", 40 | "grunt-closure-compiler": "~0.0.21", 41 | "grunt-contrib-clean": "~0.5.0", 42 | "grunt-contrib-concat": "~0.3.0", 43 | "grunt-contrib-cssmin": "~0.4.1", 44 | "grunt-contrib-jshint": "~0.6.2", 45 | "grunt-contrib-uglify": "~0.2.2", 46 | "grunt-karma": "^0.8.3", 47 | "grunt-mochaccino": "~0.1.7", 48 | "karma": "^0.12.17", 49 | "karma-chai": "^0.1.0", 50 | "karma-chrome-launcher": "^0.1.4", 51 | "karma-coverage": "^0.2.4", 52 | "karma-html2js-preprocessor": "^0.1.0", 53 | "karma-htmlfile-reporter": "^0.1.2", 54 | "karma-mocha": "^0.1.6", 55 | "mocha": "^1.20.1", 56 | "grunt-contrib-less": "latest", 57 | "grunt-contrib-watch": "latest" 58 | } 59 | } -------------------------------------------------------------------------------- /docs/plugins/af.lockscreen.md: -------------------------------------------------------------------------------- 1 | #Lockscreen 2 | 3 | The lockscreen enables developers of hybrid apps to present a lock screen to users. 4 | Users are required to enter a 4 digit pin to unlock it. This can easily be bypassed 5 | on web browsers 6 | 7 | ``` 8 | $(document.body).lockScreen(opts) 9 | ``` 10 | 11 | ## Properties 12 | 13 | #### Attributes 14 | You can object of options 15 | 16 | ``` 17 | logo (string) image to show above password box 18 | roundKeyboard (boolean) When set to true, rounded keys are shown 19 | 20 | 21 | ``` 22 | 23 | #### Functions 24 | 25 | ``` 26 | renderKeyboard(function) Function to render the keyboard. This returns a string 27 | validatePassword(function) Function to validate the password. It accepts a string and returns a boolean 28 | 29 | 30 | ``` 31 | 32 | 33 | ## Methods 34 | ``` 35 | show () Show the lockscreen 36 | hide () Hide the lockscreen 37 | ``` 38 | 39 | ## Events 40 | ``` 41 | none 42 | ``` 43 | 44 | ## Examples 45 | 46 | Here are two examples. The first shows the lock screen. The second uses the cordova device pause/resume events to show it 47 | 48 | ``` 49 | var lock=$(document.body).lockScreen(); 50 | lock.validatePassword=function(pass){ 51 | pass=parseInt(pass,10); 52 | return pass==1111; 53 | } 54 | lock.show(); 55 | ``` 56 | 57 | Now we force showing on the cordova device pause/resume events 58 | 59 | ``` 60 | 61 | function showLockScreen(){ 62 | var lock=$(document.body).lockScreen(); 63 | lock.validatePassword=function(pass){ 64 | pass=parseInt(pass,10); 65 | return pass==1111; 66 | } 67 | lock.show(); 68 | } 69 | 70 | $(document).on("pause resume",showLockScreen,false); 71 | 72 | ``` -------------------------------------------------------------------------------- /jquery-widgets/af.popup.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | App Framework Kitchen Sink 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 44 | 45 | 46 | 47 | Test 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /test/animation.test.js: -------------------------------------------------------------------------------- 1 | describe("animation", function () { 2 | 3 | beforeEach(function () { 4 | $("#animmator").remove(); 5 | $(document.body).append("
    "); 6 | }); 7 | 8 | it("should be an object",function(){ 9 | var foo=$("#animmator").animation(); 10 | expect($.isObject(foo)).to.be.true; 11 | }); 12 | 13 | it("should run an animation",function(done){ 14 | $("#animmator").animation().end(function(){ 15 | done(); 16 | }).run('asdf'); 17 | }); 18 | it("should run an animation with no callback",function(done){ 19 | $("#animmator").animation().run('asdf'); 20 | done(); 21 | }); 22 | it("should keep the class",function(done){ 23 | $("#animmator").animation().keep().end(function(){ 24 | expect(this.classList.contains("asdf")).to.be.true; 25 | done(); 26 | }).run('asdf'); 27 | }); 28 | it("should keep the class",function(done){ 29 | $("#animmator").animation().keep().end(function(){ 30 | expect(this.classList.contains("asdf")).to.be.true; 31 | done(); 32 | }).run('asdf'); 33 | }); 34 | 35 | it("should rerun the animation",function(done){ 36 | $("#animmator").animation().end(function(){ 37 | done(); 38 | }).reRun('asdf'); 39 | }); 40 | 41 | it("should run the animation in reverse",function(done){ 42 | $("#animmator").animation().reverse().end(function(){ 43 | done(); 44 | }).run('asdf'); 45 | }); 46 | 47 | it("should run the slide-in animation",function(done){ 48 | $("#animmator").animation().end(function(){ 49 | done(); 50 | }).run('slide-in'); 51 | }); 52 | 53 | }); 54 | 55 | 56 | -------------------------------------------------------------------------------- /docs/plugins/af.drawer.md: -------------------------------------------------------------------------------- 1 | #drawer 2 | 3 | This plugin enables drawers (side menus) in your application. The drawers must be <nav> items in the same view. 4 | 5 | 6 | ``` 7 | $.afui.drawer Reference to a drawer object 8 | ``` 9 | 10 | ## Properties 11 | 12 | 13 | ``` 14 | none 15 | ``` 16 | 17 | #### Functions 18 | 19 | ``` 20 | none 21 | ``` 22 | 23 | 24 | ## Methods 25 | ``` 26 | show (id, position, string) Show a drawer based of the id, position and transition 27 | hide (string,string) Hide a drawer based off the id and position 28 | 29 | ``` 30 | 31 | ## Positions 32 | ``` 33 | left Show the drawer on the left side 34 | right Show the drawer on the right side 35 | ``` 36 | 37 | ## Transitions 38 | ``` 39 | cover The menu will cover the main area 40 | reveal The main area will slide out and reveal the menu 41 | push The menu will push the main area to the side 42 | ``` 43 | 44 | ## Events 45 | ``` 46 | none 47 | ``` 48 | 49 | ## Data Directive 50 | ``` 51 | data-left-menu Show the menu on the left side 52 | data-right-menu Show the menu on the right side 53 | data-transition Transition to run 54 | data-menu-close Close the active menu 55 | 56 | 57 | Left Cover 58 | Close Menu 59 | ``` 60 | 61 | 62 | ## Examples 63 | 64 | 65 | Here is a basic example to show the drawer with id "left", on the left side with a reveal transition. 66 | 67 | ``` 68 | $.afui.drawer.show("#left","left","reveal"); 69 | 70 | ``` 71 | 72 | We can hide the drawer in two ways. One is calling hide, which hides the active drawer. The other is specifying the exact drawer to hide. 73 | 74 | ``` 75 | $.afui.drawer.hide(); 76 | 77 | $.afui.drawer.hide("#left","left"); 78 | ``` 79 | 80 | -------------------------------------------------------------------------------- /samples/react/js/app.jsx: -------------------------------------------------------------------------------- 1 | /** @jsx React.DOM */ 2 | $.afui.ready(function(){ 3 | var _todoList=[]; 4 | 5 | var todo = React.createClass({ 6 | render: function() { 7 | return ( 8 |
  • {this.props.name}
    • 9 | ); 10 | }, 11 | componentDidMount:function(){ 12 | $(this.getDOMNode()).on("longTap",function(e){ 13 | var cf=confirm("Are you sure you want to delete this item?") 14 | if(!cf) return; 15 | var item=e.target; 16 | React.unmountComponentAtNode(item); 17 | $(item).remove(); 18 | _todoList.splice(_todoList.indexOf(item.innerHTML)); 19 | }); 20 | }, 21 | componentWillUnmount:function(){ 22 | console.log("remove test"); 23 | } 24 | }); 25 | 26 | 27 | 28 | var todolist = React.createClass({ 29 | render: function() { 30 | var items=_todoList.map(function(item){ 31 | return ( 32 | 33 | ); 34 | }); 35 | return ( 36 |
      {items}
    37 | ); 38 | } 39 | }); 40 | 41 | 42 | 43 | /** @jsx React.DOM */ 44 | var todoform = React.createClass({ 45 | handleSubmit: function(e) { 46 | e.preventDefault(); 47 | var val=this.refs.todoVal.getDOMNode().value.trim(); 48 | if(val.length<2) 49 | return; 50 | _todoList.push(val); 51 | this.refs.todoVal.getDOMNode().value=null; 52 | renderTodos(); 53 | return; 54 | }, 55 | render: function() { 56 | return ( 57 |
    58 | Add
    59 | ); 60 | } 61 | }); 62 | React.renderComponent( 63 | , 64 | document.getElementById('todoform') 65 | ); 66 | 67 | function renderTodos(){ 68 | React.renderComponent( 69 | , 70 | document.getElementById('todolist') 71 | ); 72 | } 73 | renderTodos(); 74 | }); -------------------------------------------------------------------------------- /jquery-widgets/af.lockscreen.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | App Framework Kitchen Sink 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 48 | 49 | 50 | 51 | Test 52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /test/getCssMatrix.test.js: -------------------------------------------------------------------------------- 1 | 2 | describe("getCssMatrix", function () { 3 | var stubMatrix = { a: 1, b: 1, c: 1, d: 1, e: 1, f: 1 }; 4 | var oldWK=window.WebKitCSSMatrix; 5 | var oldMS=window.MSCSSMatrix; 6 | beforeEach(function () { 7 | $(document.body).append("
    "); 8 | 9 | }); 10 | afterEach(function(){ 11 | window.WebKitCSSMatrix=oldWK; 12 | window.MSCSSMatrix=oldMS; 13 | }) 14 | 15 | it("should return a default matrix if no element argument passed and no matrix function", function () { 16 | window.WebKitCSSMatrix=null; 17 | var matrix = $.getCssMatrix(); 18 | var expected = { a: 0, b: 0, c: 0, d: 0, e: 0, f: 0 }; 19 | matrix.should.eql(expected); 20 | }); 21 | 22 | it("should return a matrix from a *Matrix function if present and no element", function () { 23 | var matrix = $.getCssMatrix(); 24 | matrix.should.eql(new WebKitCSSMatrix()); 25 | }); 26 | 27 | 28 | it("should use the MSCSSMatrix function if present", function () { 29 | var elt = document.getElementById("moo"); 30 | 31 | var matrix = $.getCssMatrix(elt); 32 | var computedStyle = window.getComputedStyle(elt); 33 | 34 | var transform = computedStyle.webkitTransform || 35 | computedStyle.transform || 36 | computedStyle[$.feat.cssPrefix + "Transform"]; 37 | 38 | 39 | matrix.should.eql(new WebKitCSSMatrix(transform)); 40 | }); 41 | 42 | 43 | it("should return a matrix hacked from the stylesheet", function () { 44 | window.WebKitCSSMatrix=null; 45 | $("#moo").cssTranslate("1px,1px"); 46 | var ele=document.getElementById("moo"); 47 | var matrix=$.getCssMatrix(ele); 48 | var expected = { a: 1, b: 0, c: 0, d: 1, e: 1, f: 1 }; 49 | matrix.should.eql(expected); 50 | 51 | var matrix=$.getCssMatrix(); 52 | var expected = { a: 0, b: 0, c: 0, d: 0, e: 0, f: 0}; 53 | matrix.should.eql(expected); 54 | }); 55 | 56 | 57 | }); 58 | -------------------------------------------------------------------------------- /test/replaceClass.test.js: -------------------------------------------------------------------------------- 1 | describe("replaceClass", function () { 2 | var stubMatrix = { a: 1, b: 1, c: 1, d: 1, e: 1, f: 1 }; 3 | 4 | beforeEach(function () { 5 | $(document.body).append("
    "); 6 | 7 | 8 | }); 9 | 10 | it("should replace a css class", function () { 11 | var el=document.getElementById("moo"); 12 | el.className="foobar"; 13 | 14 | $(el).replaceClass("foobar","bar"); 15 | 16 | expect($(el).hasClass("bar")).to.be.true; 17 | expect($(el).hasClass("foobar")).to.be.false; 18 | }); 19 | 20 | it("should do nothing to the classes", function () { 21 | var el=document.getElementById("moo"); 22 | el.className="foobar"; 23 | 24 | $(el).replaceClass(); 25 | 26 | expect($(el).hasClass("bar")).to.be.false; 27 | expect($(el).hasClass("foobar")).to.be.true; 28 | }); 29 | it("Should add the class",function(){ 30 | var el=document.getElementById("moo"); 31 | el.className="foobar"; 32 | 33 | $(el).replaceClass("","bar"); 34 | 35 | expect($(el).hasClass("bar")).to.be.true; 36 | expect($(el).hasClass("foobar")).to.be.true; 37 | }); 38 | it("should replace a css class when multiple classes exist", function () { 39 | var el=document.getElementById("moo"); 40 | el.className="foobar temp stuff"; 41 | 42 | $(el).replaceClass("foobar","bar"); 43 | expect($(el).hasClass("bar")).to.be.true; 44 | expect($(el).hasClass("temp")).to.be.true; 45 | expect($(el).hasClass("stuff")).to.be.true; 46 | expect($(el).hasClass("foobar")).to.be.false; 47 | }); 48 | 49 | it("should replace multiple classess", function () { 50 | var el=document.getElementById("moo"); 51 | el.className="foobar temp"; 52 | 53 | $(el).replaceClass("foobar temp","bar has"); 54 | expect($(el).hasClass("bar")).to.be.true; 55 | expect($(el).hasClass("has")).to.be.true; 56 | expect($(el).hasClass("foobar")).to.be.false; 57 | expect($(el).hasClass("temp")).to.be.false; 58 | }); 59 | 60 | }); 61 | -------------------------------------------------------------------------------- /src/less/af.actionsheet.less: -------------------------------------------------------------------------------- 1 | #af_actionsheet { 2 | position:absolute; 3 | left:0px; 4 | right:0px; 5 | padding-left:10px; 6 | padding-right:10px; 7 | padding-top:10px; 8 | margin:auto; 9 | background:black; 10 | float:left; 11 | z-index:9999; 12 | border-top:#fff 1px solid; 13 | background:rgba(71,71,71,.95); 14 | background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.4)), to(rgba(255,255,255,0)), color-stop(.08,rgba(255,255,255,.1)), color-stop(.08,rgba(255,255,255,0))); 15 | background-image:-webkit-linear-gradient(top, rgba(255,255,255,.4) 0%, rgba(255,255,255,.1) 8%, rgba(255,255,255,0) 8%); 16 | box-shadow:0px -1px 2px rgba(0,0,0,.4); 17 | bottom:0px; 18 | a { 19 | text-decoration:none; 20 | -webkit-transition:all 0.4s ease; 21 | transition:all 0.4s ease; 22 | text-shadow:0px -1px rgba(0,0,0,.8); 23 | padding:0px .25em; 24 | border:1px solid rgba(0,0,0,.8); 25 | text-overflow:ellipsis; 26 | border-radius:.75em; 27 | background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.4)), to(rgba(255,255,255,0)), color-stop(.5,rgba(255,255,255,.1)), color-stop(.5,rgba(255,255,255,0))); 28 | background-image:-webkit-linear-gradient(top, rgba(255,255,255,.5) 0%, rgba(255,255,255,.2) 50%, rgba(255,255,255,0) 50%); 29 | box-shadow:0px 1px 1px rgba(255,255,255,0.7); 30 | display:block; 31 | color:white; 32 | text-align:center; 33 | line-height:36px; 34 | font-size:20px; 35 | font-weight:bold; 36 | margin-bottom:10px; 37 | background-color:rgba(130,130,130,1); 38 | } 39 | a.selected { 40 | background-color:rgba(150,150,150,1); 41 | } 42 | a.cancel { 43 | background-color:rgba(43,43,43,1); 44 | color:white; 45 | } 46 | a.cancel.selected { 47 | background-color:rgba(73,73,73,1); 48 | } 49 | a.red { 50 | color:white; 51 | background-color:rgba(204,0,0,1); 52 | } 53 | a.red.selected { 54 | background-color:rgba(255,0,0,1); 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /test/desktopbrowsers.test.js: -------------------------------------------------------------------------------- 1 | describe("desktopbrowsers",function(){ 2 | 3 | var $item; 4 | var item; 5 | before(function(){ 6 | $(document.body).append("
    "); 7 | $item=$("#desktopbrowsers"); 8 | item=$item.get(0); 9 | }); 10 | 11 | function fakeMouseEvent(evt,target,x,y){ 12 | var mousedownEvent = document.createEvent ("MouseEvent"); 13 | mousedownEvent.initMouseEvent (evt, true, true, window, 0, 14 | x,y,x,y, 15 | 0,0,0,0, 16 | 0, null); 17 | target.dispatchEvent (mousedownEvent); 18 | } 19 | 20 | after(function(){ 21 | $("#desktopbrowsers").remove(); 22 | }) 23 | 24 | it("mouse click should trigger a touchstart",function(done){ 25 | $item.one("touchstart",function(){done();}); 26 | fakeMouseEvent("mousedown",item,1,1); 27 | 28 | }); 29 | it("should trigger touchmove from mousemove",function(done){ 30 | $item.one("touchmove",function(){ 31 | done(); 32 | }); 33 | fakeMouseEvent("mousemove",item,2,2); 34 | }); 35 | it("should NOT trigger touchmove from mousemove with no movement",function(done){ 36 | var bad=true; 37 | $item.one("touchmove",function(){ 38 | bad=false; 39 | }); 40 | setTimeout(function(){ 41 | expect(bad).to.be.true 42 | done(); 43 | },100); 44 | fakeMouseEvent("mousemove",item,1,1); 45 | }); 46 | it("should trigger touchend from mouseup event",function(done){ 47 | $item.one("touchend",function(){done();}); 48 | fakeMouseEvent("mouseup",item,1,1); 49 | }); 50 | it("should NOT trigger touchmove from mousemove with no mousedown",function(done){ 51 | var bad=true; 52 | $item.one("touchmove",function(){ 53 | bad=false; 54 | }); 55 | setTimeout(function(){ 56 | expect(bad).to.be.true 57 | done(); 58 | },100); 59 | fakeMouseEvent("mousemove",item,1,1); 60 | }); 61 | 62 | 63 | }); -------------------------------------------------------------------------------- /test/actionSheet.test.js: -------------------------------------------------------------------------------- 1 | describe("actionsheet", function () { 2 | 3 | 4 | 5 | it("should display the action sheet from an html string",function(done){ 6 | var sheet=$(document.body).actionsheet('BackShow Alert 3Show Alert 4'); 7 | $("#af_actionsheet").css("display").should.eql("block"); 8 | setTimeout(function(){ 9 | $("#af_actionsheet a").length.should.eql(4); 10 | sheet.hideSheet(); 11 | setTimeout(function(){ 12 | $("#af_actionsheet").length.should.eql(0); 13 | done(); 14 | },400); 15 | },400); 16 | }); 17 | it("should display the action sheet from an array of objects",function(done){ 18 | var sheet=$(document.body).actionsheet( 19 | [{ 20 | text: 'back', 21 | cssClasses: 'red', 22 | handler: function () { 23 | $.ui.goBack(); 24 | } 25 | }, { 26 | text: 'show alert 6', 27 | cssClasses: '', 28 | handler: function () { 29 | alert("goodbye"); 30 | } 31 | }]); 32 | $("#af_actionsheet").css("display").should.eql("block"); 33 | setTimeout(function(){ 34 | $("#af_actionsheet a").length.should.eql(3); 35 | sheet.hideSheet(); 36 | setTimeout(function(){ 37 | $("#af_actionsheet").length.should.eql(0); 38 | done(); 39 | },400); 40 | },400); 41 | }); 42 | it("should dismiss the action sheet from an item click",function(done){ 43 | var sheet=$(document.body).actionsheet( 44 | [{ 45 | text: 'back', 46 | cssClasses: 'red', 47 | handler: function () { 48 | done(); 49 | } 50 | }, { 51 | text: 'show alert 6', 52 | cssClasses: '' 53 | }]); 54 | $("#af_actionsheet").css("display").should.eql("block"); 55 | setTimeout(function(){ 56 | $("#af_action_mask").trigger("click"); 57 | $("#af_actionsheet a").eq(0).trigger("click"); 58 | //trigger a click on the mask 59 | },400); 60 | }); 61 | }); 62 | -------------------------------------------------------------------------------- /src/less/af.splashscreen.less: -------------------------------------------------------------------------------- 1 | #splashscreen { 2 | position:absolute; 3 | top:0; 4 | bottom:0; 5 | width:100%; 6 | left:0; 7 | min-height:120%; 8 | background:rgba(29,29,28,1) !important; 9 | color:white !important; 10 | font-size:30px; 11 | text-align:center; 12 | z-index:9999; 13 | display:block; 14 | margin-left: auto !important; 15 | margin-right: auto !important; 16 | padding-top:80px !important; 17 | } 18 | 19 | .ui-icon { 20 | background: #666; 21 | background: rgba(0,0,0,.4); 22 | background-repeat: no-repeat; 23 | } 24 | .ui-loader { 25 | display: none; 26 | margin:10px; 27 | position: absolute; 28 | opacity: .85; 29 | z-index: 100; 30 | left: 50%; 31 | width: 200px; 32 | margin-left: -100px; 33 | margin-top: -35px; 34 | padding: 10px 30px; 35 | background: #666; 36 | background:rgba(0,0,0,.4); 37 | color:white; 38 | h1 { 39 | font-size: 15px; 40 | text-align: center; 41 | } 42 | .ui-icon { 43 | position: static; 44 | display: block; 45 | opacity: .9; 46 | margin: 10px auto; 47 | width: 35px; 48 | height: 35px; 49 | background-color: #eee; 50 | } 51 | } 52 | .ui-loader.heavy { 53 | opacity:1; 54 | } 55 | .spin { 56 | -webkit-transform: rotate(360deg); 57 | -webkit-animation-name: spin; 58 | -webkit-animation-duration: 1s; 59 | -webkit-animation-iteration-count: infinite; 60 | transform: rotate(360deg); 61 | animation-name: spin; 62 | animation-duration: 1s; 63 | animation-iteration-count: infinite; 64 | } 65 | 66 | @-webkit-keyframes 67 | spin { 68 | from {-webkit-transform: rotate(0deg);} 69 | to {-webkit-transform: rotate(360deg);} 70 | } 71 | 72 | 73 | @keyframes 74 | spin { 75 | from {transform: rotate(0deg);} 76 | to {transform: rotate(360deg);} 77 | } 78 | 79 | 80 | .ui-icon-loading { 81 | width: 40px; 82 | height: 40px; 83 | border-left:2px solid #ccc; 84 | border-right:2px solid #ccc; 85 | border-top:2px solid #ccc; 86 | border-bottom:2px solid #ccc; 87 | background:white; 88 | border-radius:10px; 89 | } 90 | .ui-corner-all { 91 | border-radius:.6em; 92 | } 93 | -------------------------------------------------------------------------------- /src/less/lists.less: -------------------------------------------------------------------------------- 1 | .list { 2 | margin: 0px; 3 | padding: 0px; 4 | list-style: none; 5 | background-color: #fff; 6 | margin:0 -10px; 7 | box-sizing: border-box; 8 | -webkit-box-sizing: border-box; 9 | li { 10 | display: block; 11 | list-style: none; 12 | position: relative; 13 | padding: 20px 20px 20px 10px; 14 | border-bottom: 1px solid #ccc; 15 | background:inherit; 16 | } 17 | li:first-child { 18 | /* border-top: 1px solid #ccc;*/ 19 | } 20 | & > li { 21 | & > a { 22 | display: block; 23 | position: relative; 24 | display: block; 25 | color: inherit; 26 | margin: -20px -20px -20px -10px; 27 | text-decoration: none; 28 | padding: 20px 20px 20px 10px; 29 | } 30 | & > a:after, & .chevron:after { 31 | position: absolute; 32 | right: 8px; 33 | font-family: 'chevron'; 34 | speak: none; 35 | font-style: normal; 36 | font-weight: normal; 37 | font-variant: normal; 38 | text-transform: none; 39 | line-height: 1; 40 | -webkit-font-smoothing: antialiased; 41 | content: "\f054"; 42 | top: 50%; 43 | margin-top: -0.5em; 44 | color:inherit; 45 | } 46 | } 47 | a { 48 | .af-badge { 49 | position: absolute; 50 | right: 30px; 51 | top: 48%; 52 | margin-top: -10px; 53 | } 54 | } 55 | .divider { 56 | position: relative; 57 | top: -1px; 58 | padding-top: 6px; 59 | padding-bottom: 6px; 60 | font-size: 12px; 61 | font-weight: bold; 62 | line-height: 18px; 63 | background-color: #dfe0e2; 64 | border-top: 1px solid #ccc; 65 | border-bottom: 1px solid #ccc; 66 | box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4); 67 | padding-right: 60px; 68 | } 69 | } 70 | .list.inset { 71 | border: 1px solid #ccc; 72 | border-radius: 6px; 73 | margin: 10px; 74 | li:first-child { 75 | border-top: none; 76 | margin-top: 3px; 77 | } 78 | li:last-child { 79 | border-bottom: none; 80 | margin-bottom:3px; 81 | } 82 | } 83 | -------------------------------------------------------------------------------- /docs/plugins/af.toast.md: -------------------------------------------------------------------------------- 1 | #Toast 2 | 3 | The toast plugin enables developers to deliver toast style messages to users 4 | 5 | ``` 6 | $.afui.toast(options) 7 | ``` 8 | 9 | ## Properties 10 | 11 | #### Attributes 12 | You can pass in a string that will display a message, or an object of options 13 | 14 | ``` 15 | message (string) Text to show for toast message 16 | position (string) possitions the message will be in 17 | tr - top right, tl - top left 18 | br - bottom right, br - bottom left 19 | tc - top center, bc - bottom center 20 | 21 | delay (ms) Delay in milliseconds for auto-hiding the message 22 | 23 | autoClose (boolean) Autoclose the toast from the delay 24 | type (string) Type/css class for the message 25 | success - green 26 | error - red 27 | warning - yellow 28 | 29 | addCssClass (string) CSS class to addd to the toast 30 | ``` 31 | 32 | #### Functions 33 | 34 | ``` 35 | none 36 | ``` 37 | 38 | 39 | ## Methods 40 | ``` 41 | none 42 | ``` 43 | 44 | ## Events 45 | ``` 46 | none 47 | ``` 48 | 49 | ## Data Directive (maps to option parameters) 50 | ``` 51 | data-toast Declare the data-toast element 52 | data-message message parameter 53 | data-position position parameter 54 | data-type type parameter 55 | data-auto-close autoClose parameter 56 | data-delay delay parameter 57 | 58 | 59 | Toast 60 | ``` 61 | 62 | 63 | ## Examples 64 | 65 | Here are three examples. Two uses JavaScript to display the toasts and another uses data attributes on the anchor 66 | 67 | ``` 68 | $.afui.toast({ 69 | message:"Top Right", 70 | position:"tr", 71 | autoClose:false, //have to click the message to close 72 | type:"success" 73 | }); 74 | ``` 75 | 76 | Just display a message 77 | 78 | ``` 79 | $.afui.toast("Hello World"); 80 | ``` 81 | 82 | ###Directive example 83 | 84 | Here we will dismiss the actionsheet in 5 seconds if there is no response from the user 85 | 86 | ``` 87 | Toast1 88 | 89 | Toast2 90 | ``` -------------------------------------------------------------------------------- /src/af.swipereveal.js: -------------------------------------------------------------------------------- 1 | /** 2 | * af.swipereveal 3 | * @copyright Intel 2014 4 | * 5 | */ 6 | (function($){ 7 | "use strict"; 8 | 9 | //Register the handler for opening 10 | var target; 11 | var pos=0; 12 | var end; 13 | var width; 14 | $.afui.swipeThreshold=0.3; 15 | $(document).on("swipeStartLeft",".swipe-reveal",function(e,touch,originalE){ 16 | 17 | originalE.preventDefault(); 18 | target=$(e.target).closest(".swipe-content"); 19 | pos=touch.x2; 20 | width=target.closest(".swipe-reveal").find(".swipe-hidden").width(); 21 | if($.getCssMatrix(e.target).e!==0) 22 | return ; 23 | 24 | target.bind("touchmove",tracker); 25 | target.one("touchend",function(){ 26 | target.unbind("touchmove",tracker); 27 | if(Math.abs(end)/width<$.afui.swipeThreshold) 28 | { 29 | width=0; 30 | } 31 | target.transition().keep().end(function(){ 32 | width=null; 33 | target=null; 34 | }).run("translate3d("+(-width)+"px,0px,0)","100ms"); 35 | }); 36 | }); 37 | 38 | $(document).on("swipeStartRight",".swipe-reveal",function(e,touch,originalE){ 39 | originalE.preventDefault(); 40 | target=$(e.target).closest(".swipe-content"); 41 | 42 | width=target.closest(".swipe-reveal").find(".swipe-hidden").width(); 43 | if ($(e.target).parents(".swipe-content").length===0) { 44 | if($.getCssMatrix(e.target).e===0) 45 | return ; 46 | } 47 | pos=touch.x2+width; 48 | target.bind("touchmove",tracker); 49 | target.one("touchend",function(){ 50 | target.unbind("touchmove",tracker); 51 | if((1-Math.abs(end)/width)>$.afui.swipeThreshold) 52 | { 53 | width=0; 54 | } 55 | target.transition().keep().end(function(){ 56 | width=null; 57 | target=null; 58 | }).run("translate3d("+(-width)+"px,0px,0)","100ms"); 59 | }); 60 | }); 61 | 62 | 63 | var tracker=function(e){ 64 | var to=-(pos-(e.touches[0].pageX)); 65 | if((to)<-width) 66 | to="-"+width; 67 | else if(to>0) 68 | to=0; 69 | end=to; 70 | 71 | target.cssTranslate(to+"px,0"); 72 | }; 73 | 74 | })(jQuery); -------------------------------------------------------------------------------- /samples/angular/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | AF/Angular 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
    27 | App Framework 28 |
    29 |
    30 | 31 |

    Starting app

    32 | 33 |
    34 |
    35 |
    36 |

    Welcome

    37 |
    38 |
    39 |
    40 |
    41 |
    42 | This basic demo shows how to use Angular and App Framework UI together. 43 |
    44 |
    45 | 49 |
    50 | 51 | 52 | 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /animgenerator/generate.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Generate animations based off a json file 3 | * Android <4.4 does not support animation-direction:reverse, so we have to create the reverse animation 4 | */ 5 | 6 | var fs=require("fs"); 7 | var path = require("path"); 8 | 9 | var anims=require("./anims.json"); 10 | 11 | var out=""; 12 | anims.forEach(function(obj){ 13 | if(obj.noTrans) 14 | out+=generateNoTrans(obj.name,obj.time); 15 | else 16 | out+=generateAnim(obj.name,obj.time,obj.steps,obj.easing,obj.css); 17 | }); 18 | 19 | fs.writeFile(path.join(__dirname,"../src/less/animation.less"),out); 20 | 21 | function generateNoTrans(name,time,css){ 22 | css=css||""; 23 | var tmp="."+name+" {\n"+ 24 | " -webkit-animation: noTransition "+time+" forwards;\n"+ 25 | " animation: noTransition "+time+" forwards;\n"+ 26 | " "+(css)+"\n"+ 27 | "}\n\n"; 28 | return tmp; 29 | } 30 | 31 | function generateAnim(name,time,steps,easing,css){ 32 | 33 | //loop through steps 34 | if(!css||!css.length) 35 | css=""; 36 | 37 | var to=""; 38 | var reverse=""; 39 | if(steps){ 40 | for(var j in steps) 41 | { 42 | to+=" "+j+"% { "+steps[j]+"}\n"; 43 | reverse+=" "+(100-parseInt(j,10))+"% { "+steps[j]+"}\n"; 44 | } 45 | } 46 | 47 | var tmp="."+name+" {\n"+ 48 | " -webkit-animation: "+name+"Animation "+time+" forwards;\n"+ 49 | " animation: "+name+"Animation "+time+" forwards;\n"+ 50 | " "+(css)+"\n"+ 51 | "}\n\n"+ 52 | "@-webkit-keyframes "+name+"Animation {\n"+ 53 | to.replace(/transform/g,"-webkit-transform")+ 54 | "}\n\n"+ 55 | "@keyframes "+name+"Animation {\n"+ 56 | to+ 57 | "}\n\n"; 58 | 59 | var time=parseInt(time,10); 60 | time*=1.5; 61 | time=time+"ms"; 62 | tmp+="."+name+".animation-reverse {\n"+ 63 | " -webkit-animation: "+name+"AnimationReverse "+time+" forwards;\n"+ 64 | " animation: "+name+"AnimationReverse "+time+" forwards;\n"+ 65 | "}\n\n"+ 66 | "@-webkit-keyframes "+name+"AnimationReverse {\n"+ 67 | reverse.replace(/transform/g,"-webkit-transform")+ 68 | "}\n\n"+ 69 | "@keyframes "+name+"AnimationReverse {\n"+ 70 | reverse+ 71 | "}\n\n"; 72 | return tmp; 73 | } 74 | -------------------------------------------------------------------------------- /test/fixtures/drawer.html: -------------------------------------------------------------------------------- 1 | 2 |
    3 |

    4 |
    5 |
    6 | Hello world 7 |
    8 |
    9 |
    10 |
    11 | 15 | 41 | 54 |
    55 | 56 | -------------------------------------------------------------------------------- /test/shim.test.js: -------------------------------------------------------------------------------- 1 | 2 | describe("shimTest", function () { 3 | 4 | beforeEach(function () { 5 | 6 | $(document.body).append("
    "); 7 | 8 | }); 9 | 10 | it("should $.query find the dom node", function () { 11 | var el=document.getElementById("moo"); 12 | $("#moo").length.should.eql(1); 13 | }); 14 | 15 | it("should fail on the $.query selector",function(){ 16 | var foo=$.query("@#$!#"); 17 | foo.length.should.eql(0); 18 | }) 19 | 20 | it("should $.create create dom nodes",function(){ 21 | 22 | var tmp=$.create("div",{html:"foobar"}); 23 | tmp.get(0).nodeName.toLowerCase().should.eql("div"); 24 | tmp.get(0).innerHTML.should.eql("foobar"); 25 | 26 | var tmp=$.create("
    foobar
    "); 27 | tmp.get(0).nodeName.toLowerCase().should.eql("div"); 28 | tmp.get(0).innerHTML.should.eql("foobar"); 29 | 30 | }); 31 | 32 | it("should be an object", function(){ 33 | 34 | var obj={}; 35 | expect($.isObject(obj)).to.be.true; 36 | }); 37 | 38 | it("should be a jQuery Object", function(){ 39 | 40 | var obj=$(); 41 | expect($.is$(obj)).to.be.true; 42 | }); 43 | 44 | it("should create a touchlist",function(){ 45 | var tl=new $.feat.TouchList(); 46 | tl.length.should.eql(0); 47 | }); 48 | 49 | it("should create a touch item",function(){ 50 | 51 | var touch=new $.feat.Touch(); 52 | expect(touch.identifier>=1000).to.be.true; 53 | 54 | }); 55 | 56 | it("should have a touch list with one item",function(){ 57 | var tl=new $.feat.TouchList(); 58 | var touch=new $.feat.Touch(); 59 | tl._add(touch); 60 | tl.length.should.eql(1); 61 | touch.should.eql(tl.item(0)); 62 | }); 63 | 64 | it("should get the computed style",function(){ 65 | var ele=document.getElementById("moo"); 66 | moo.style.width="30px"; 67 | $("#moo").computedStyle("width").should.eql("30px"); 68 | }) 69 | it("should return the object if nothing is passed to computed style",function(){ 70 | var ele=document.getElementById("moo"); 71 | moo.style.width="30px"; 72 | expect($("#moo3").computedStyle()===undefined).to.be.true; 73 | }); 74 | 75 | it("should have a length of 36 for $.uuid",function(){ 76 | $.uuid().length.should.eql(36); 77 | }) 78 | }); 79 | -------------------------------------------------------------------------------- /src/af.grower.js: -------------------------------------------------------------------------------- 1 | /** 2 | * This plugin creates a "grow" transition using scaling and transforms 3 | * @author Ian Maffett 4 | * @copyright 2014 Intel 5 | */ 6 | 7 | 8 | (function($){ 9 | "use strict"; 10 | 11 | 12 | $.afui.registerDataDirective("[data-grower]",function(item,e){ 13 | var $el=$(item).closest("[data-grower]"); 14 | var items=$el.offset(); 15 | var view=$el.closest(".view"); 16 | var toPanel=e.target.hash||$el.attr("data-grower"); 17 | view.css("zIndex","1"); 18 | var growView=$(toPanel).closest(".view"); 19 | 20 | var scaleX=($el.width()/window.innerWidth); 21 | var scaleY=($el.height()/window.innerHeight); 22 | 23 | var transProps={ 24 | left:items.left, 25 | top:items.top, 26 | x:scaleX, 27 | y:scaleY 28 | }; 29 | $(toPanel).trigger("panelgrowstart",[$el.get(0)]); 30 | growView.addClass("active").css("zIndex","10"); 31 | growView.vendorCss("TransformOrigin","0 0"); 32 | growView.data("growTransProps",transProps); 33 | growView.vendorCss("TransitionDuration","0"); 34 | growView.vendorCss("Transform","translate3d("+items.left+"px,"+items.top+"px,0) scale("+scaleX+","+scaleY+")"); 35 | growView.data("growTarget",$el.closest(".panel")); 36 | growView.data("growFrom",$(toPanel).attr("id")); 37 | $.afui.loadContent(toPanel,view,false,"stretch"); 38 | $(toPanel).one("panelload",function(){ 39 | growView.vendorCss("Transform",""); 40 | $(toPanel).trigger("panelgrowcomplete",[$el.get(0)]); 41 | }); 42 | }); 43 | 44 | $.afui.registerDataDirective("[data-grower-back]",function(item){ 45 | 46 | var growView=$(item).closest(".view"); 47 | var fromPanel=$("#"+growView.data("growFrom")); 48 | fromPanel.trigger("panelgrowendstart"); 49 | var trans=growView.data("growTransProps"); 50 | var toPanel="#"+growView.data("growTarget").prop("id"); 51 | $(toPanel).closest(".view").addClass("active"); 52 | growView.addClass("animation-active"); 53 | 54 | growView.transition().end(function(){ 55 | growView.removeClass("active"); 56 | fromPanel.trigger("panelgrowendstart"); 57 | $.afui.loadContent(toPanel,false,false,"none"); 58 | }).run("translate3d("+trans.left+"px,"+trans.top+"px,0) scale("+trans.x+","+trans.y+")","300ms"); 59 | }); 60 | })(jQuery); -------------------------------------------------------------------------------- /samples/react/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | AF/React 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |
    28 | App Framework 29 |
    30 |
    31 | 32 |

    Starting app

    33 | 34 |
    35 |
    36 |
    37 |

    Welcome

    38 |
    39 |
    40 |
    41 | 42 |

    Todo

    43 |
    44 |
    45 |

    Long press to delete

    46 |
    47 |
    48 |
    49 | This basic demo shows how to use React and App Framework UI together. 50 |
    51 |
    52 | 56 |
    57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /samples/backbone/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | AF/Angular 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |
    28 | App Framework 29 |
    30 |
    31 | 32 |

    Starting app

    33 | 34 |
    35 |
    36 |
    37 |

    Welcome

    38 |
    39 |
    40 |
    41 |

    Todo

    42 | 43 | Add 44 |
    45 | 46 |
      47 |
    48 |
    49 |
    50 | This basic demo shows how to use Backbone and App Framework UI together. 51 |
    52 |
    53 | 57 |
    58 | 59 | 62 | 63 | 64 | 65 | -------------------------------------------------------------------------------- /templates/tabview.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Tab View Template 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 |
    26 | App Framework - Tab View 27 |
    28 |
    29 | 30 |

    Starting app

    31 |
    32 | 33 |
    34 |
    35 |

    Tab View

    36 |
    37 | 38 |
    39 | 40 | 41 |
    42 | This is view for first Tab 43 |
    44 | 45 |
    46 | This is view for second Tab 47 |
    48 |
    49 | About 50 |
    51 | 52 |
    53 | This is view for third Tab 54 |
    55 | 56 |
    57 | This is view for fourth Tab 58 |
    59 | 60 |
    61 | 62 | 68 |
    69 | 70 | 71 | 72 | 73 | 74 | -------------------------------------------------------------------------------- /karma.conf.js: -------------------------------------------------------------------------------- 1 | module.exports = function (karma) { 2 | karma.set({ 3 | 4 | // base path, that will be used to resolve files and exclude 5 | basePath: './', 6 | 7 | frameworks: ['mocha'], 8 | preprocessors: { 9 | 'test/fixtures/*.html': ['html2js'], 10 | '**/src/*.js': 'coverage' 11 | }, 12 | 13 | // list of files / patterns to load in the browser 14 | files: [ 15 | {pattern: 'node_modules/chai/chai.js', include: true}, 16 | {pattern: '3rdparty/jquery.min.js', served: true, included: true}, 17 | {pattern: 'build/appframework.ui.js',served: true, included: true}, 18 | {pattern: 'test/chai.helper.js', include: true}, 19 | 'build/af.ui.css', 20 | 'test/fixtures/*.html', 21 | 'test/*.test.js' 22 | /*'test/drawer.test.js'*/ 23 | 24 | ], 25 | 26 | // list of files to exclude 27 | exclude: [ 28 | 'karma.conf.js' 29 | ], 30 | 31 | // use dots reporter, as travis terminal does not support escaping sequences 32 | // possible values: 'dots', 'progress', 'junit', 'teamcity' 33 | // CLI --reporters progress 34 | reporters: ['progress', 'coverage'], 35 | 36 | //Code Coverage options. report type available: 37 | //- html (default) 38 | //- lcov (lcov and html) 39 | //- lcovonly 40 | //- text (standard output) 41 | //- text-summary (standard output) 42 | //- cobertura (xml format supported by Jenkins) 43 | coverageReporter: { 44 | // cf. http://gotwarlost.github.com/istanbul/public/apidocs/ 45 | type: 'html', 46 | dir: 'coverage/' 47 | }, 48 | 49 | 50 | // web server port 51 | port: 9876, 52 | 53 | 54 | // cli runner port 55 | runnerPort: 9100, 56 | 57 | 58 | // enable / disable colors in the output (reporters and logs) 59 | colors: true, 60 | 61 | 62 | // level of logging 63 | // possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG 64 | //logLevel: LOG_DEBUG, 65 | 66 | 67 | // enable / disable watching file and executing tests whenever any file changes 68 | autoWatch: false, 69 | 70 | 71 | // Start these browsers, currently available: 72 | // - Chrome 73 | // - ChromeCanary 74 | // - Firefox 75 | // - Opera 76 | // - Safari (only Mac) 77 | // - PhantomJS 78 | // - IE (only Windows) 79 | // CLI --browsers Chrome,Firefox,Safari 80 | browsers: ['Chrome'], 81 | 82 | 83 | // If browser does not capture in given timeout [ms], kill it 84 | captureTimeout: 6000, 85 | 86 | 87 | // Continuous Integration mode 88 | // if true, it capture browsers, run tests and exit 89 | singleRun: true, 90 | 91 | 92 | plugins: [ 93 | 'karma-mocha', 94 | 'karma-chrome-launcher', 95 | 'karma-coverage', 96 | 'karma-htmlfile-reporter', 97 | 'karma-html2js-preprocessor' 98 | ] 99 | }); 100 | } -------------------------------------------------------------------------------- /templates/drawer.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | App Framework Kitchen Sink 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 25 | 26 | 27 | 28 | 29 |
    30 | App Framework 31 |
    32 |
    33 | 34 |

    Starting app

    35 | 36 |
    37 |
    38 |
    39 |

    What

    40 | 41 |
    42 |
    43 |
    44 | Splitview Demo 45 | 46 | 47 |
    48 |
    49 | Foobar stuff goes here 50 |
    51 | 52 |
    53 | 57 | 58 | 79 | 80 |
    81 | 82 | 83 | 84 | -------------------------------------------------------------------------------- /src/less/lockscreen.css: -------------------------------------------------------------------------------- 1 | #lockScreen { 2 | position: absolute; 3 | top: 0px; 4 | bottom: 0px; 5 | width: 100%; 6 | height: 100%; 7 | left: 0px; 8 | z-index: 99999999999999; 9 | background: #ccc; 10 | } 11 | #lockScreen .flexContainer { 12 | display: -webkit-box; 13 | display: -moz-box; 14 | display: box; 15 | -webkit-box-orient: vertical; 16 | -moz-box-orient: vertical; 17 | box-orient: vertical; 18 | -webkit-box-align: center; 19 | -moz-box-align: center; 20 | box-align: center; 21 | -webkit-box-pack: center; 22 | -moz-box-pack: center; 23 | box-pack: center; 24 | } 25 | #lockScreen .keyboard { 26 | width: 100%; 27 | position: absolute; 28 | bottom: 0px; 29 | } 30 | #lockScreen .keyboard .row { 31 | display: block; 32 | width: 100%; 33 | text-align: center; 34 | height: 50px; 35 | line-height: 50px; 36 | font-size: 1.3em; 37 | font-weight: bold; 38 | } 39 | #lockScreen .keyboard .row div { 40 | display: block; 41 | width: 33.33%; 42 | float: left; 43 | border: 1px solid #000; 44 | justify-content: center; 45 | text-align: center; 46 | } 47 | #lockScreen .keyboard .row div.grey { 48 | background: white; 49 | } 50 | #lockScreen .content { 51 | position: absolute; 52 | top: 0px; 53 | bottom: 170px; 54 | width: 100%; 55 | text-align: center; 56 | -moz-box-flex: 0; 57 | -webkit-box-flex: 0; 58 | -ms-box-flex: 0; 59 | box-flex: 0; 60 | -moz-box-ordinal-group: 1; 61 | -webkit-box-ordinal-group: 1; 62 | -ms-box-ordinal-group: 1; 63 | box-ordinal-group: 1; 64 | align-items: center; 65 | justify-content: center; 66 | } 67 | #lockScreen .touched { 68 | background-color: white; 69 | } 70 | #lockScreen input[type="password"] { 71 | height: 50px; 72 | font-size: 40px; 73 | width: 200px; 74 | text-align: center; 75 | } 76 | #lockScreen .icon { 77 | font-size: 50px; 78 | color: white; 79 | margin-bottom: 10px; 80 | } 81 | #lockScreen .error { 82 | padding-top: 10px; 83 | visibility: hidden; 84 | color: red; 85 | font-weight: bold; 86 | font-size: 1.3em; 87 | } 88 | #lockScreen.round .content { 89 | bottom: 250px; 90 | } 91 | #lockScreen.round .keyboard { 92 | bottom: 10px; 93 | } 94 | #lockScreen.round .keyboard .row { 95 | display: -webkit-box; 96 | display: -moz-box; 97 | display: box; 98 | -webkit-box-align: center; 99 | -moz-box-align: center; 100 | box-align: center; 101 | -webkit-box-pack: center; 102 | -moz-box-pack: center; 103 | box-pack: center; 104 | margin-bottom: 20px; 105 | } 106 | #lockScreen.round .keyboard .row div { 107 | -moz-box-flex: 0; 108 | -webkit-box-flex: 0; 109 | -ms-box-flex: 0; 110 | box-flex: 0; 111 | -moz-box-ordinal-group: 1; 112 | -webkit-box-ordinal-group: 1; 113 | -ms-box-ordinal-group: 1; 114 | box-ordinal-group: 1; 115 | float: none; 116 | width: 60px; 117 | height: 60px; 118 | border-radius: 60px; 119 | line-height: 60px; 120 | margin: 10px; 121 | cursor: pointer; 122 | } 123 | #lockScreen.round .keyboard .row div.grey { 124 | background: transparent; 125 | border: none; 126 | } 127 | #lockScreen.round input[type="password"] { 128 | height: 50px; 129 | font-size: 40px; 130 | width: 200px; 131 | text-align: center; 132 | background: transparent; 133 | color: white; 134 | } 135 | #lockScreen.round input[type="password"]::-webkit-input-placeholder { 136 | color: white; 137 | } 138 | #lockScreen.round input[type="password"]::-moz-placeholder { 139 | /* Firefox 19+ */ 140 | color: white; 141 | } 142 | #lockScreen.round input[type="password"]:-ms-input-placeholder { 143 | color: white; 144 | } 145 | -------------------------------------------------------------------------------- /jquery-widgets/af.lockscreen.js: -------------------------------------------------------------------------------- 1 | //onShow = open 2 | //cancelCallback = cancel 3 | //doneCallback = done 4 | //removed id property 5 | // added this.lockscreen = $el; 6 | 7 | (function($){ 8 | "use strict"; 9 | 10 | $.widget("afui.lockscreen",{ 11 | options:{ 12 | logo:"
    ", 13 | roundKeyboard:false, 14 | validatePassword:function(){}, 15 | renderKeyboard:function(){ 16 | var html=""; 17 | for(var i=0;i<8;i=i+3){ 18 | html+="
    "; 19 | for(var j=1;j<=3;j++){ 20 | var num=i+j; 21 | html+="
    "+num+"
    "; 22 | } 23 | html+="
    "; 24 | } 25 | html+="
     
    0
    <=
    "; 26 | return html; 27 | }, 28 | 29 | }, 30 | visible:false, 31 | _create:function(){ 32 | }, 33 | _init:function(){ 34 | return this; 35 | }, 36 | widget:function(){ 37 | return this.lockscreen; 38 | }, 39 | show: function () { 40 | if(this.visible) return; 41 | var logo=this.options.logo; 42 | var container="
    "+logo+"
    Invalid Password
    "; 43 | container+="
    "+this.options.renderKeyboard()+"
    "; 44 | var item=$("
    "); 45 | item.html(container); 46 | if(this.options.roundKeyboard){ 47 | item.addClass("round"); 48 | item.find("input[type='password']").attr("placeholder",("◌◌◌◌")); 49 | } 50 | this.lockscreen=item; 51 | $(document.body).append(item); 52 | var pass=$("#lockScreen input[type='password']"); 53 | var self=this; 54 | $(item).on("click",function(evt){ 55 | var target=$(evt.target); 56 | if(target.length===0) return; 57 | var key=target.attr("data-key"); 58 | if(!key) return; 59 | if(key==="delete"){ 60 | pass.val(pass.val().substring(0,pass.val().length-1)); 61 | return; 62 | } 63 | var len=pass.val().length; 64 | 65 | if(len<4) 66 | pass.val(pass.val()+key); 67 | if(pass.val().length===4){ 68 | if(self.options.validatePassword(pass.val())) 69 | self.hide(); 70 | else { 71 | self.lockscreen.find(".error").css("visibility","visible"); 72 | setTimeout(function(){ 73 | self.lockscreen.find(".error").css("visibility","hidden"); 74 | pass.val(""); 75 | },1000); 76 | } 77 | } 78 | }); 79 | $(item).on("touchstart",function(evt){ 80 | $(evt.target).addClass("touched"); 81 | }).on("touchend",function(evt){ 82 | $(evt.target).removeClass("touched"); 83 | }); 84 | }, 85 | hide:function(){ 86 | this.lockscreen.remove(); 87 | } 88 | 89 | }); 90 | })(jQuery); 91 | -------------------------------------------------------------------------------- /docs/plugins/af.actionsheet.md: -------------------------------------------------------------------------------- 1 | #actionsheet 2 | 3 | The actionsheet plugin enables developers create an action sheet for the user to interact with. We always add a last "Cancel" option to the actionsheet. 4 | 5 | ``` 6 | $.afui.actionsheet(options) 7 | ``` 8 | 9 | ## Properties 10 | 11 | #### Attributes 12 | You can pass in a string of anchors that will be rendered or an array of objects. Below are for each object in the array. 13 | 14 | ``` 15 | text (string) Text to show for actionsheet element 16 | cssClass (string) CSS class actionsheet element 17 | ``` 18 | 19 | #### Functions 20 | 21 | ``` 22 | click(function) Function to execute for the item selected 23 | ``` 24 | 25 | 26 | ## Methods 27 | ``` 28 | hideSheet() Dismiss the actionsheet. 29 | ``` 30 | 31 | ## Events 32 | ``` 33 | none 34 | ``` 35 | 36 | ## CSS/Customize 37 | 38 | Below is an example used by App Framework's iOS7 theme to customize the look and feel of the popup 39 | 40 | ``` 41 | /* The main container*/ 42 | .ios7 #af_actionsheet { 43 | background-color:transparent; 44 | color:black; 45 | padding-left:10px; 46 | padding-right:10px; 47 | border-top: transparent 1px solid; 48 | box-shadow: 0px -1px 2px rgba(0,0,0,0); 49 | } 50 | 51 | /* Styling for each anchor*/ 52 | .ios7 #af_actionsheet a{ 53 | background-image:none; 54 | text-shadow:none; 55 | box-shadow:none; 56 | font-weight:normal; 57 | border-radius: 0; 58 | border:none; 59 | -webkit-box-shadow:none; 60 | color:rgba(82,155,234,255); 61 | background-color:white; 62 | cursor:pointer; 63 | border-radius:0px; 64 | line-height: 40px; 65 | font-size: 20px; 66 | margin-bottom: 1px; 67 | } 68 | 69 | /* Custom styles for the first anchor */ 70 | .ios7 #af_actionsheet a:first-child{ 71 | border-top-left-radius:5px; 72 | border-top-right-radius:5px; 73 | } 74 | 75 | /* Custom style for the last anchor */ 76 | .ios7 #af_actionsheet a:nth-last-child(2){ 77 | border-bottom-left-radius:5px; 78 | border-bottom-right-radius:5px; 79 | } 80 | 81 | /* Special styles for the cancel anchor*/ 82 | .ios7 #af_actionsheet a.cancel{ 83 | font-weight:bold; 84 | margin: 9px 0; 85 | border-radius:5px; 86 | } 87 | 88 | ``` 89 | 90 | 91 | ## Examples 92 | 93 | Here is a basic alert style popup. You can pass in a string instead of an object. Any clicks, events, etc are available to the anchors. 94 | 95 | ``` 96 | $(document.body).actionsheet('HiGoodbye'); 97 | ``` 98 | 99 | Below is an example using an array of objects. We can specify custom CSS classes and click handlers for each anchor 100 | 101 | ``` 102 | $.afui.actionsheet( 103 | [{ 104 | text: 'back', 105 | cssClasses: 'red', 106 | click: function () { 107 | alert("Clicked Back") 108 | } 109 | }, { 110 | text: 'Alert Hi', 111 | cssClasses: 'blue', 112 | click: function () { 113 | alert("Hi"); 114 | } 115 | }, { 116 | text: 'Alert Goodbye', 117 | cssClasses: '', 118 | click: function () { 119 | alert("Goodbye"); 120 | } 121 | }] 122 | ); 123 | ``` 124 | 125 | Here we will dismiss the actionsheet in 5 seconds if there is no response from the user 126 | 127 | ``` 128 | var sheet=$.afui.actionsheet('HiGoodbye'); 129 | setTimeout(function(){ 130 | sheet.hideSheet(); 131 | },5000); 132 | ``` -------------------------------------------------------------------------------- /partials/forms.html: -------------------------------------------------------------------------------- 1 |
    Standard
    2 |
    3 | 4 | 5 | 6 | 7 |
    8 | 9 |
    Grouping
    10 |
    11 |
    12 | 13 | 14 | 15 |
    16 |
    17 |
    Labeled
    18 |
    19 | 20 | 21 | 22 | 23 | 24 | 25 |
    26 |
    27 |
    28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 |
    37 |
    38 | 39 |
    Radios
    40 |
    41 |
    42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 |
    50 | 51 |
    52 |
    53 |
    Checkbox and Button
    54 |
    55 |
    56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 |
    64 | 65 |
    66 |
    67 | 68 |
    Toggle Switches
    69 |
    70 |
    71 | 72 | 73 | 75 | 76 | 78 | 79 | 81 | 82 |
    83 |
    84 | -------------------------------------------------------------------------------- /src/af.lockscreen.js: -------------------------------------------------------------------------------- 1 | /** 2 | * af.lockscreen - a lockscreen for html5 mobile apps 3 | * Copyright 2015 - Intel 4 | */ 5 | 6 | /** global FastClick **/ 7 | 8 | /** jshint camelcase:false **/ 9 | 10 | 11 | (function($){ 12 | "use strict"; 13 | 14 | $.fn.lockScreen = function(opts) { 15 | var tmp; 16 | for (var i = 0; i < this.length; i++) { 17 | tmp = new LockScreen(this[i], opts); 18 | } 19 | return this.length === 1 ? tmp : this; 20 | }; 21 | 22 | var LockScreen = function (containerEl, opts) { 23 | if (typeof(opts) === "object") { 24 | for (var j in opts) { 25 | this[j] = opts[j]; 26 | } 27 | } 28 | }; 29 | LockScreen.prototype= { 30 | logo:"
    ", 31 | roundKeyboard:false, 32 | validatePassword:function(){}, 33 | renderKeyboard:function(){ 34 | var html=""; 35 | for(var i=0;i<8;i=i+3){ 36 | html+="
    "; 37 | for(var j=1;j<=3;j++){ 38 | var num=i+j; 39 | html+="
    "+num+"
    "; 40 | } 41 | html+="
    "; 42 | } 43 | html+="
     
    0
    <=
    "; 44 | return html; 45 | }, 46 | show: function () { 47 | if(this.visible) return; 48 | var logo=this.logo; 49 | var container="
    "+logo+"
    Invalid Password
    "; 50 | container+="
    "+this.renderKeyboard()+"
    "; 51 | var item=$("
    "); 52 | item.html(container); 53 | if(this.roundKeyboard){ 54 | item.addClass("round"); 55 | item.find("input[type='password']").attr("placeholder",("◌◌◌◌")); 56 | } 57 | this.lockscreen=item; 58 | $(document.body).append(item); 59 | var pass=$("#lockScreen input[type='password']"); 60 | var self=this; 61 | $(item).on("click",function(evt){ 62 | var target=$(evt.target); 63 | if(target.length===0) return; 64 | var key=target.attr("data-key"); 65 | if(!key) return; 66 | if(key==="delete"){ 67 | pass.val(pass.val().substring(0,pass.val().length-1)); 68 | return; 69 | } 70 | var len=pass.val().length; 71 | 72 | if(len<4) 73 | pass.val(pass.val()+key); 74 | if(pass.val().length===4){ 75 | if(self.validatePassword(pass.val())) 76 | self.hide(); 77 | else { 78 | self.lockscreen.find(".error").css("visibility","visible"); 79 | setTimeout(function(){ 80 | self.lockscreen.find(".error").css("visibility","hidden"); 81 | pass.val(""); 82 | },1000); 83 | } 84 | } 85 | }); 86 | $(item).on("touchstart",function(evt){ 87 | $(evt.target).addClass("touched"); 88 | }).on("touchend",function(evt){ 89 | $(evt.target).removeClass("touched"); 90 | }); 91 | }, 92 | hide:function(){ 93 | if(this.lockscreen) 94 | this.lockscreen.remove(); 95 | } 96 | }; 97 | })(jQuery); 98 | -------------------------------------------------------------------------------- /docs/docgen.js: -------------------------------------------------------------------------------- 1 | /*global require*/ 2 | var fs = require("fs"); 3 | 4 | var cmdArgs = process.argv.splice(2); 5 | 6 | function stripTags(oldString) { 7 | "use strict"; 8 | return oldString.replace(/(<([^>]+)>)/ig,""); 9 | } 10 | 11 | function rPad(string,val,length){ 12 | "use strict"; 13 | if(!string||!val||length===0) return; 14 | while(string.length
    ","\n```\n\n##Example\n\n```\n").
 75 |                     replace("
    ","\n```\n"). 76 | replace(/
    /g,"\n"). 77 | replace(/

    /g,"\n"). 78 | replace(/```js/g,"```"). 79 | replace(/ /g,""); 80 | summary=stripTags(summary); 81 | var paramsTxt=""; 82 | var returnTxt=rPad(returnObj.types," ",30)+returnObj.desc; 83 | Object.keys(params).forEach(function(key){ 84 | paramsTxt+=rPad(key," ",30)+params[key].join("|")+"\n"; 85 | }); 86 | var extra=""; 87 | var extraName=title.replace(";",""); 88 | if(extraName.indexOf("(")!==-1) 89 | extraName=extraName.substr(0,extraName.indexOf("(")); 90 | 91 | try { 92 | if(fs.statSync("./detail/"+extraName+".md")) 93 | { 94 | extra=fs.readFileSync("./detail/"+extraName+".md").toString(); 95 | extra=extra.replace(/```js/g,"```"); 96 | extra=extra.replace(/```html/g,"```"); 97 | extra="##Detail\n\n"+extra; 98 | } 99 | } 100 | catch(e){ 101 | } 102 | var md=makeMD(title,summary,paramsTxt,returnTxt,extra); 103 | fs.writeFileSync("./"+name+"/"+extraName+".md",md); 104 | }); 105 | } 106 | }); 107 | 108 | -------------------------------------------------------------------------------- /jquery-widgets/af.lockscreen.css: -------------------------------------------------------------------------------- 1 | #lockScreen * { 2 | padding:0; 3 | margin:0; 4 | box-sizing:border-box; 5 | -webkit-tap-highlight-color: rgba(0,0,0,0); 6 | -webkit-user-select: none; 7 | } 8 | 9 | #lockScreen { 10 | position: absolute; 11 | top:0px; 12 | bottom:0px; 13 | width:100%; 14 | height:100%; 15 | left:0px; 16 | z-index:99999999999999; 17 | background: #ccc; 18 | } 19 | 20 | #lockScreen .flexContainer { 21 | display: -webkit-box; 22 | display: -moz-box; 23 | display: box; 24 | 25 | -webkit-box-orient: vertical; 26 | -moz-box-orient: vertical; 27 | box-orient: vertical; 28 | 29 | -webkit-box-align: center; 30 | -moz-box-align: center; 31 | box-align: center; 32 | -webkit-box-pack: center; 33 | -moz-box-pack: center; 34 | box-pack: center; 35 | } 36 | 37 | #lockScreen .keyboard { 38 | width:100%; 39 | position:absolute; 40 | bottom:0px; 41 | } 42 | 43 | #lockScreen .content { 44 | position:absolute; 45 | top:0px; 46 | bottom:170px; 47 | width:100%; 48 | text-align:center; 49 | -moz-box-flex: 0; 50 | -webkit-box-flex: 0; 51 | -ms-box-flex: 0; 52 | box-flex: 0; 53 | -moz-box-ordinal-group: 1; 54 | -webkit-box-ordinal-group: 1; 55 | -ms-box-ordinal-group: 1; 56 | box-ordinal-group: 1; 57 | align-items: center; 58 | justify-content: center; 59 | } 60 | 61 | #lockScreen .keyboard .row { 62 | display: block; 63 | width:100%; 64 | text-align: center; 65 | height:50px; 66 | line-height:50px; 67 | font-size:1.3em; 68 | font-weight: bold; 69 | 70 | } 71 | 72 | #lockScreen .keyboard .row div { 73 | display: block; 74 | width:33.33%; 75 | float:left; 76 | border:1px solid #000; 77 | justify-content: center; 78 | text-align: center; 79 | } 80 | 81 | #lockScreen .keyboard .row div.grey { 82 | background:white; 83 | } 84 | 85 | #lockScreen .touched { 86 | background-color: white; 87 | } 88 | 89 | #lockScreen input[type="password"] { 90 | height:50px; 91 | font-size:40px; 92 | width:200px; 93 | text-align: center; 94 | 95 | } 96 | 97 | #lockScreen .icon { 98 | font-size:50px; 99 | color:white; 100 | margin-bottom: 10px; 101 | 102 | } 103 | #lockScreen .error { 104 | padding-top:10px; 105 | visibility: hidden; 106 | color:red; 107 | font-weight:bold; 108 | font-size:1.3em; 109 | } 110 | 111 | #lockScreen.round .keyboard{ 112 | bottom:10px; 113 | } 114 | 115 | #lockScreen.round .keyboard .row { 116 | display: -webkit-box; 117 | display: -moz-box; 118 | display: box; 119 | 120 | -webkit-box-align: center; 121 | -moz-box-align: center; 122 | box-align: center; 123 | 124 | -webkit-box-pack: center; 125 | -moz-box-pack: center; 126 | box-pack: center; 127 | margin-bottom:20px; 128 | 129 | } 130 | 131 | #lockScreen.round .keyboard .row div { 132 | -moz-box-flex: 0; 133 | -webkit-box-flex: 0; 134 | -ms-box-flex: 0; 135 | box-flex: 0; 136 | -moz-box-ordinal-group: 1; 137 | -webkit-box-ordinal-group: 1; 138 | -ms-box-ordinal-group: 1; 139 | box-ordinal-group: 1; 140 | float:none; 141 | width:60px; 142 | height:60px; 143 | border-radius:60px; 144 | line-height:60px; 145 | margin:10px; 146 | cursor:pointer; 147 | 148 | } 149 | 150 | #lockScreen.round input[type="password"] { 151 | height:50px; 152 | font-size:40px; 153 | width:200px; 154 | text-align: center; 155 | background: transparent; 156 | color:white; 157 | } 158 | 159 | #lockScreen.round input[type="password"]::-webkit-input-placeholder { 160 | color: white; 161 | } 162 | 163 | 164 | #lockScreen.round input[type="password"]::-moz-placeholder { /* Firefox 19+ */ 165 | color: white; 166 | } 167 | 168 | #lockScreen.round input[type="password"]:-ms-input-placeholder { 169 | color: white; 170 | } 171 | 172 | #lockScreen.round .keyboard .row div.grey { 173 | background:transparent; 174 | border:none; 175 | } -------------------------------------------------------------------------------- /test/toasts.test.js: -------------------------------------------------------------------------------- 1 | describe("toast",function(){ 2 | before(function(){ 3 | $("#toasttest").remove(); 4 | $(document.body).append("

    "); 5 | $("#toasttest").append(__html__['test/fixtures/toast.html']); 6 | $.afui.isLaunching=false; 7 | $.afui.hasLaunched=true; 8 | $.afui.launchCompleted=false; 9 | $.afui.defaultPanel=null; 10 | $.afui.activeDiv=null; 11 | $.afui.launch(); 12 | }); 13 | 14 | after(function(){ 15 | $("#toasttest").remove(); 16 | }); 17 | 18 | 19 | it("should display a toast and auto hide",function(done){ 20 | 21 | var msg="Hello 1"; 22 | $(document.body).toast({message:msg,delay:100}); 23 | setTimeout(function(){ 24 | $('.afToastContainer').find(".afToast div").html().should.eql(msg); 25 | setTimeout(function(){ 26 | expect( $('.afToastContainer').find(".afToast").length===0).to.be.true; 27 | done(); 28 | },500); 29 | },50); 30 | }); 31 | it("should display a toast and stay open",function(done){ 32 | 33 | var msg="Hello 2"; 34 | $(document.body).toast({message:msg,autoClose:false}); 35 | setTimeout(function(){ 36 | $('.afToastContainer').find(".afToast div").html().should.eql(msg); 37 | setTimeout(function(){ 38 | expect( $('.afToastContainer').find(".afToast").length===1).to.be.true; 39 | done(); 40 | },500); 41 | },50); 42 | }); 43 | 44 | it("should close a toast by clicking it",function(done){ 45 | expect( $('.afToastContainer').find(".afToast").length===1).to.be.true; 46 | $('.afToastContainer').find(".afToast").trigger("click"); 47 | setTimeout(function(){ 48 | expect( $('.afToastContainer').find(".afToast").length===0).to.be.true; 49 | done(); 50 | },350); 51 | }); 52 | it("should not animate hiding",function(done){ 53 | var msg="Hello 2"; 54 | $.os.android=true; 55 | $(document.body).toast({message:msg,autoClose:true,delay:100}); 56 | setTimeout(function(){ 57 | $('.afToastContainer').find(".afToast div").html().should.eql(msg); 58 | setTimeout(function(){ 59 | expect( $('.afToastContainer').find(".afToast").length===0).to.be.true; 60 | $.os.android=false; 61 | done(); 62 | },300); 63 | },50); 64 | }); 65 | 66 | it("should be bottom center with warning class",function(done){ 67 | var msg="Hello 6"; 68 | $(document.body).toast({message:msg,autoClose:true,delay:100,position:"bc",type:"warning"}); 69 | setTimeout(function(){ 70 | var elem=$('.afToastContainer').find(".afToast"); 71 | expect(elem.hasClass("warning")).to.be.true; 72 | expect(elem.parent().hasClass("bc")).to.be.true; 73 | setTimeout(function(){ 74 | expect( $('.afToastContainer').find(".afToast").length===0).to.be.true; 75 | done(); 76 | },500); 77 | },50); 78 | }); 79 | 80 | it("should launch and dispatch ready function",function(done){ 81 | 82 | $.afui.ready(function(){ 83 | done(); 84 | }); 85 | $.afui.launch(); 86 | 87 | }); 88 | it("should use the data directive for a toast",function(done){ 89 | var item=$("#toasttest").find("a").eq(1); 90 | item.trigger("click"); 91 | 92 | setTimeout(function(){ 93 | $('.afToastContainer').find(".afToast div").html().should.eql(item.attr("data-message")); 94 | var elem=$('.afToastContainer').find(".afToast"); 95 | expect(elem.hasClass(item.attr("data-type"))).to.be.true; 96 | expect(elem.parent().hasClass(item.attr("data-position"))).to.be.true; 97 | $('.afToastContainer').find(".afToast div").trigger("click"); 98 | setTimeout(function(){ 99 | expect( $('.afToastContainer').find(".afToast").length===0).to.be.true; 100 | done(); 101 | },500); 102 | },50); 103 | }) 104 | 105 | }); -------------------------------------------------------------------------------- /test/drawer.test.js: -------------------------------------------------------------------------------- 1 | describe("drawerTests",function(){ 2 | 3 | before(function(){ 4 | $.afui.hasLaunched=false; 5 | $("#drawertest").remove(); 6 | $(document.body).append("
    "); 7 | 8 | $("#drawertest").append(__html__['test/fixtures/drawer.html']); 9 | $.afui.isLaunching=false; 10 | $.afui.hasLaunched=true; 11 | $.afui.launchCompleted=false; 12 | $.afui.defaultPanel=null; 13 | $.afui.activeDiv=null; 14 | $.afui.launch(); 15 | 16 | }); 17 | 18 | after(function(){ 19 | $("#drawertest").remove(); 20 | }); 21 | it("should wait for afui read",function(done){ 22 | $.afui.ready(function(){ 23 | done(); 24 | }); 25 | }); 26 | 27 | it("should show left menu by cover js call",function(done){ 28 | //$("#leftcover").trigger("click"); 29 | $.afui.drawer.show("#left","left","cover"); 30 | setTimeout(function(){ 31 | 32 | expect($("#left").hasClass("active")).to.be.true; 33 | done(); 34 | },500); 35 | }); 36 | 37 | it("should close the left menu",function(done){ 38 | $.afui.drawer.hide('#left'); 39 | setTimeout(function(){ 40 | expect($("#left").hasClass("active")).to.be.false; 41 | done(); 42 | },500); 43 | }); 44 | it("should show left menu by push data directive",function(done){ 45 | $("#leftpush").trigger("click"); 46 | setTimeout(function(){ 47 | expect($("#left").hasClass("active")).to.be.true; 48 | expect($($.afui.activeDiv).closest('.view').find('.slide-left-out').length===3).to.be.true 49 | done(); 50 | },500); 51 | }); 52 | 53 | it("should close the left menu by data directive",function(done){ 54 | $("#hideactive").trigger("click"); 55 | setTimeout(function(){ 56 | expect($("#left").hasClass("active")).to.be.false; 57 | done(); 58 | },500); 59 | }); 60 | 61 | it("should show right menu by cover js call",function(done){ 62 | //$("#leftcover").trigger("click"); 63 | $.afui.drawer.show("#right","right","reveal"); 64 | setTimeout(function(){ 65 | expect($("#right").hasClass("active")).to.be.true; 66 | expect($($.afui.activeDiv).closest('.view').find('.slide-right-out').length===3).to.be.true 67 | done(); 68 | },500); 69 | }); 70 | 71 | it("should close the right menu",function(done){ 72 | $("#hideright").trigger("click"); 73 | setTimeout(function(){ 74 | expect($("#right").hasClass("active")).to.be.false; 75 | done(); 76 | },500); 77 | }); 78 | 79 | it("should show left menu and auto hide",function(done){ 80 | //$("#leftcover").trigger("click"); 81 | $.afui.drawer.show("#left","left","reveal"); 82 | setTimeout(function(){ 83 | expect($("#left").hasClass("active")).to.be.true; 84 | $.afui.drawer.hide(); 85 | setTimeout(function(){ 86 | expect($("#left").hasClass("active")).to.be.false; 87 | done(); 88 | },500); 89 | },500); 90 | }); 91 | 92 | it("should show left",function(done){ 93 | //$("#leftcover").trigger("click"); 94 | $.afui.drawer.show("#left","left","reveal"); 95 | setTimeout(function(){ 96 | done(); 97 | },500); 98 | }); 99 | it("should hide left when showing right",function(done){ 100 | //$("#leftcover").trigger("click"); 101 | expect($("#left").hasClass("active")).to.be.true; 102 | $.afui.drawer.show("#right","right","reveal"); 103 | setTimeout(function(){ 104 | expect($("#right").hasClass("active")).to.be.true; 105 | expect($("#left").hasClass("active")).to.be.false; 106 | done(); 107 | },500); 108 | }); 109 | 110 | it("should do nothing when already shown",function(done){ 111 | //$("#leftcover").trigger("click"); 112 | $.afui.drawer.show("#left","left","reveal"); 113 | setTimeout(function(){ 114 | $.afui.drawer.show("#left","left","reveal"); 115 | done(); 116 | },500); 117 | }); 118 | }); -------------------------------------------------------------------------------- /src/af.toast.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | (function ($) { 6 | "use strict"; 7 | $.fn.toast = function (opts) { 8 | return new Toast(this[0], opts); 9 | }; 10 | var Toast = (function () { 11 | var Toast = function (containerEl, opts) { 12 | 13 | if (typeof containerEl === "string" || containerEl instanceof String) { 14 | this.container = document.getElementById(containerEl); 15 | } else { 16 | this.container = containerEl; 17 | } 18 | if (!this.container) { 19 | window.alert("Error finding container for toast " + containerEl); 20 | return; 21 | } 22 | if (typeof (opts) === "string" || typeof (opts) === "number") { 23 | opts = { 24 | message: opts 25 | }; 26 | } 27 | this.addCssClass = opts.addCssClass ? opts.addCssClass : ""; 28 | this.message = opts.message || ""; 29 | this.delay=opts.delay||this.delay; 30 | this.position=opts.position||""; 31 | this.addCssClass+=" "+this.position; 32 | this.type=opts.type||""; 33 | //Check if the container exists 34 | this.container=$(this.container); 35 | if(this.container.find(".afToastContainer").length===0) 36 | { 37 | this.container.append("
    "); 38 | } 39 | this.container=this.container.find(".afToastContainer"); 40 | this.container.removeClass("tr br tl bl tc bc").addClass(this.addCssClass); 41 | if(opts.autoClose===false) 42 | this.autoClose=false; 43 | this.show(); 44 | }; 45 | 46 | Toast.prototype = { 47 | addCssClass: null, 48 | message: null, 49 | delay:5000, 50 | el:null, 51 | container:null, 52 | timer:null, 53 | autoClose:true, 54 | show: function () { 55 | var self = this; 56 | var markup = "
    "+ 57 | "
    " + this.message + "
    "+ 58 | "
    "; 59 | this.el=$(markup).get(0); 60 | this.container.append(this.el); 61 | var $el=$(this.el); 62 | var height=this.el.clientHeight; 63 | $el.addClass("hidden"); 64 | setTimeout(function(){ 65 | $el.css("height",height); 66 | $el.removeClass("hidden"); 67 | },20); 68 | if(this.autoClose){ 69 | this.timer=setTimeout(function(){ 70 | self.hide(); 71 | },this.delay); 72 | } 73 | $el.bind("click",function(){ 74 | self.hide(); 75 | }); 76 | }, 77 | 78 | hide: function () { 79 | var self = this; 80 | clearTimeout(this.timer); 81 | $(this.el).unbind("click").addClass("hidden"); 82 | $(this.el).css("height","0px"); 83 | if(!$.os.ie&&!$.os.android){ 84 | setTimeout(function () { 85 | self.remove(); 86 | }, 300); 87 | } 88 | else 89 | self.remove(); 90 | }, 91 | 92 | remove: function () { 93 | var $el = $(this.el); 94 | $el.remove(); 95 | } 96 | }; 97 | return Toast; 98 | })(); 99 | 100 | 101 | $.afui.toast=function(opts){ 102 | $(document.body).toast(opts); 103 | }; 104 | 105 | $.afui.registerDataDirective("[data-toast]",function(item){ 106 | var $item=$(item); 107 | var message=$item.attr("data-message")||""; 108 | if(message.length===0) return; 109 | var position=$item.attr("data-position")||"tr"; 110 | var type=$item.attr("data-type"); 111 | var autoClose=$item.attr("data-auto-close")==="false"?false:true; 112 | var delay=$item.attr("data-delay")||0; 113 | var opts={ 114 | message:message, 115 | position:position, 116 | delay:delay, 117 | autoClose:autoClose, 118 | type:type 119 | }; 120 | $(document.body).toast(opts); 121 | }); 122 | 123 | })(jQuery); 124 | -------------------------------------------------------------------------------- /src/less/af.lockscreen.less: -------------------------------------------------------------------------------- 1 | 2 | #lockScreen { 3 | position: absolute; 4 | top:0px; 5 | bottom:0px; 6 | width:100%; 7 | height:100%; 8 | left:0px; 9 | z-index:99999999999999; 10 | background: #ccc; 11 | 12 | .flexContainer { 13 | display: -webkit-box; 14 | display: -moz-box; 15 | display: box; 16 | 17 | -webkit-box-orient: vertical; 18 | -moz-box-orient: vertical; 19 | box-orient: vertical; 20 | 21 | -webkit-box-align: center; 22 | -moz-box-align: center; 23 | box-align: center; 24 | -webkit-box-pack: center; 25 | -moz-box-pack: center; 26 | box-pack: center; 27 | } 28 | 29 | .keyboard { 30 | width:100%; 31 | position:absolute; 32 | bottom:0px; 33 | .row { 34 | display: block; 35 | width:100%; 36 | text-align: center; 37 | height:50px; 38 | line-height:50px; 39 | font-size:1.3em; 40 | font-weight: bold; 41 | div { 42 | display: block; 43 | width:33.33%; 44 | float:left; 45 | border:1px solid #000; 46 | justify-content: center; 47 | text-align: center; 48 | } 49 | div.grey { 50 | background:white; 51 | } 52 | } 53 | } 54 | 55 | .content { 56 | position:absolute; 57 | top:0px; 58 | bottom:170px; 59 | width:100%; 60 | text-align:center; 61 | -moz-box-flex: 0; 62 | -webkit-box-flex: 0; 63 | -ms-box-flex: 0; 64 | box-flex: 0; 65 | -moz-box-ordinal-group: 1; 66 | -webkit-box-ordinal-group: 1; 67 | -ms-box-ordinal-group: 1; 68 | box-ordinal-group: 1; 69 | align-items: center; 70 | justify-content: center; 71 | } 72 | 73 | 74 | .touched { 75 | background-color: white; 76 | } 77 | 78 | input[type="password"] { 79 | height:50px; 80 | font-size:40px; 81 | width:200px; 82 | text-align: center; 83 | } 84 | 85 | .icon { 86 | font-size:50px; 87 | color:white; 88 | margin-bottom: 10px; 89 | } 90 | .error { 91 | padding-top:10px; 92 | visibility: hidden; 93 | color:red; 94 | font-weight:bold; 95 | font-size:1.3em; 96 | } 97 | 98 | &.round{ 99 | .content { 100 | bottom:250px; 101 | } 102 | .keyboard{ 103 | bottom:10px; 104 | .row { 105 | display: -webkit-box; 106 | display: -moz-box; 107 | display: box; 108 | 109 | -webkit-box-align: center; 110 | -moz-box-align: center; 111 | box-align: center; 112 | 113 | -webkit-box-pack: center; 114 | -moz-box-pack: center; 115 | box-pack: center; 116 | margin-bottom:20px; 117 | div { 118 | -moz-box-flex: 0; 119 | -webkit-box-flex: 0; 120 | -ms-box-flex: 0; 121 | box-flex: 0; 122 | -moz-box-ordinal-group: 1; 123 | -webkit-box-ordinal-group: 1; 124 | -ms-box-ordinal-group: 1; 125 | box-ordinal-group: 1; 126 | float:none; 127 | width:60px; 128 | height:60px; 129 | border-radius:60px; 130 | line-height:60px; 131 | margin:10px; 132 | cursor:pointer; 133 | } 134 | div.grey { 135 | background:transparent; 136 | border:none; 137 | } 138 | } 139 | } 140 | input[type="password"] { 141 | height:50px; 142 | font-size:40px; 143 | width:200px; 144 | text-align: center; 145 | background: transparent; 146 | color:white; 147 | } 148 | 149 | 150 | input[type="password"]::-webkit-input-placeholder { 151 | color: white; 152 | } 153 | 154 | 155 | input[type="password"]::-moz-placeholder { /* Firefox 19+ */ 156 | color: white; 157 | } 158 | 159 | input[type="password"]:-ms-input-placeholder { 160 | color: white; 161 | } 162 | } 163 | } -------------------------------------------------------------------------------- /templates/listview.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | List View Template 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |
    28 | App Framework - List View 29 |
    30 |
    31 | 32 |

    Starting app

    33 |
    34 | 35 |
    36 |
    37 |

    List View Example

    38 |
    39 | 40 |
    41 | 42 | 43 |
    44 | 58 |
    59 | 60 | 61 |
    62 |

    This is detail view for Item 1

    63 |
    64 | 65 |
    66 |

    This is detail view for Item 2

    67 |
    68 | 69 |
    70 |

    This is detail view for Item 3

    71 |
    72 | 73 |
    74 |

    This is detail view for Item 4

    75 |
    76 | 77 |
    78 |

    This is detail view for Item 5

    79 |
    80 | 81 |
    82 |

    This is detail view for Item 6

    83 |
    84 | 85 |
    86 |

    This is detail view for Item 7

    87 |
    88 | 89 |
    90 |

    This is detail view for Item 8

    91 |
    92 | 93 |
    94 |

    This is detail view for Item 9

    95 |
    96 | 97 |
    98 |

    This is detail view for Item 10

    99 |
    100 | 101 |
    102 |

    This is detail view for Item 11

    103 |
    104 | 105 |
    106 |

    This is detail view for Item 12

    107 |
    108 | 109 |
    110 | 111 | 112 |
    113 | 114 |
    115 |
    116 | 117 | 118 | 119 | 120 | 121 | -------------------------------------------------------------------------------- /test/popup.test.js: -------------------------------------------------------------------------------- 1 | describe("popup",function(){ 2 | before(function(){ 3 | $("#popuptest").remove(); 4 | $(document.body).append("
    "); 5 | $("#popuptest").append(__html__['test/fixtures/popup.html']); 6 | $.afui.isLaunching=false; 7 | $.afui.hasLaunched=true; 8 | $.afui.launchCompleted=false; 9 | $.afui.defaultPanel=null; 10 | $.afui.activeDiv=null; 11 | $.afui.launch(); 12 | }); 13 | 14 | after(function(){ 15 | $("#popuptest").remove(); 16 | }); 17 | 18 | 19 | it("should display a popup and dismiss it",function(done){ 20 | 21 | var msg="Hello 1"; 22 | $(document.body).popup({title:'Alert',id:'myTestPopup'}); 23 | setTimeout(function(){ 24 | $('#myTestPopup').length.should.eql(1); 25 | $("#myTestPopup").trigger("close"); 26 | setTimeout(function(){ 27 | $('#myTestPopup').length.should.eql(0); 28 | done(); 29 | },300); 30 | 31 | },200); 32 | }); 33 | 34 | it("should display a popup execute the done callback",function(done){ 35 | 36 | var msg="Hello 1"; 37 | var what=false; 38 | $(document.body).popup({ 39 | id:"myTestPopup", 40 | title:"Alert! Alert!", 41 | message:"This is a test of the emergency alert system!! Don't PANIC!", 42 | cancelText:"Cancel me", 43 | cancelCallback: function(){console.log("cancelled");}, 44 | doneText:"I'm done!", 45 | doneCallback: function(){what=true;}, 46 | cancelOnly:false, 47 | doneClass:'button', 48 | cancelClass:'button', 49 | onShow:function(){}, 50 | autoCloseDone:true, //default is true will close the popup when done is clicked. 51 | suppressTitle:false //Do not show the title if set to true 52 | }); 53 | setTimeout(function(){ 54 | $('#myTestPopup').length.should.eql(1); 55 | $("#myTestPopup #action").trigger("click"); 56 | setTimeout(function(){ 57 | $('#myTestPopup').length.should.eql(0); 58 | expect(what).to.be.true; 59 | done(); 60 | },300); 61 | 62 | },200); 63 | }); 64 | 65 | it("should display a popup execute the cancel callback",function(done){ 66 | 67 | var msg="Hello 1"; 68 | var what=false; 69 | $(document.body).popup({ 70 | id:"myTestPopup", 71 | title:"Alert! Alert!", 72 | message:"This is a test of the emergency alert system!! Don't PANIC!", 73 | cancelText:"Cancel me", 74 | cancelOnly:true, 75 | cancelCallback: function(){what=true;}, 76 | doneText:"I'm done!", 77 | doneCallback: function(){what=false;}, 78 | cancelOnly:false, 79 | doneClass:'button', 80 | cancelClass:'button', 81 | onShow:function(){}, 82 | autoCloseDone:true, //default is true will close the popup when done is clicked. 83 | suppressTitle:false //Do not show the title if set to true 84 | }); 85 | setTimeout(function(){ 86 | $('#myTestPopup').length.should.eql(1); 87 | $("#myTestPopup #cancel").trigger("click"); 88 | setTimeout(function(){ 89 | $('#myTestPopup').length.should.eql(0); 90 | expect(what).to.be.true; 91 | done(); 92 | },300); 93 | 94 | },200); 95 | }); 96 | 97 | it("should display a popup and dismiss it",function(done){ 98 | 99 | var msg="Hello 1"; 100 | $(document.body).popup({title:'Alert',id:'myTestPopup'}); 101 | setTimeout(function(){ 102 | $('#myTestPopup').length.should.eql(1); 103 | $("#myTestPopup").trigger("close"); 104 | setTimeout(function(){ 105 | $('#myTestPopup').length.should.eql(0); 106 | done(); 107 | },300); 108 | 109 | },200); 110 | }); 111 | 112 | it("should launch and dispatch ready function",function(done){ 113 | 114 | $.afui.ready(function(){ 115 | done(); 116 | }); 117 | $.afui.launch(); 118 | 119 | }); 120 | 121 | /// data directives 122 | /* 123 | it("should display a data directive popup and dismiss it",function(done){ 124 | 125 | $("#popuptest a").trigger("click"); 126 | setTimeout(function(){ 127 | $('.afPopup').length.should.eql(1); 128 | $(".afPopup").trigger("close"); 129 | setTimeout(function(){ 130 | $('.afPopup').length.should.eql(0); 131 | done(); 132 | },300); 133 | 134 | },200); 135 | }); 136 | */ 137 | }); -------------------------------------------------------------------------------- /src/af.actionsheet.js: -------------------------------------------------------------------------------- 1 | /** 2 | * af.actionsheet - an actionsheet for html5 mobile apps 3 | * Copyright 2014 - Intel 4 | */ 5 | /* EXAMPLE 6 | You can pass in an HTML string that will get rendered 7 | 8 | $(document.body).actionsheet('BackShow Alert 3Show Alert 4'); 9 | 10 | You can also use an arra of objects to show each item. There are three propertyes 11 | text - the text to display 12 | cssClasses - extra css classes 13 | handler - click handler function 14 | 15 | $(document.body).actionsheet( 16 | [{ 17 | text: 'back', 18 | cssClasses: 'red', 19 | handler: function () { 20 | $.ui.goBack(); 21 | } 22 | }, { 23 | text: 'show alert 5', 24 | cssClasses: 'blue', 25 | handler: function () { 26 | alert("hi"); 27 | } 28 | }, { 29 | text: 'show alert 6', 30 | cssClasses: '', 31 | handler: function () { 32 | alert("goodbye"); 33 | } 34 | }] 35 | ); 36 | 37 | */ 38 | 39 | (function($) { 40 | "use strict"; 41 | $.fn.actionsheet = function(opts) { 42 | var tmp; 43 | for (var i = 0; i < this.length; i++) { 44 | tmp = new actionsheet(this[i], opts); 45 | } 46 | return this.length === 1 ? tmp : this; 47 | }; 48 | var actionsheet = function(elID, opts) { 49 | if (typeof elID === "string" || elID instanceof String) { 50 | this.el = document.getElementById(elID); 51 | } else { 52 | this.el = elID; 53 | } 54 | if (!this.el) { 55 | window.alert("Could not find element for actionsheet " + elID); 56 | return; 57 | } 58 | 59 | if (this instanceof actionsheet) { 60 | if (typeof(opts) === "object") { 61 | for (var j in opts) { 62 | this[j] = opts[j]; 63 | } 64 | } 65 | } else { 66 | return new actionsheet(elID, opts); 67 | } 68 | 69 | var markStart = "
    "; 70 | var markEnd = "
    "; 71 | var markup; 72 | var noop=function(){}; 73 | if (typeof opts === "string") { 74 | markup = $(markStart + opts + "Cancel" + markEnd); 75 | } else if (typeof opts === "object") { 76 | markup = $(markStart + markEnd); 77 | var container = $(markup.children().get(0)); 78 | opts.push({ 79 | text: "Cancel", 80 | cssClasses: "cancel" 81 | }); 82 | for (var i = 0; i < opts.length; i++) { 83 | var item = $("" + (opts[i].text || "TEXT NOT ENTERED") + ""); 84 | item[0].onclick = (opts[i].handler || noop); 85 | if (opts[i].cssClasses && opts[i].cssClasses.length > 0) 86 | item.addClass(opts[i].cssClasses); 87 | container.append(item); 88 | } 89 | } 90 | $(elID).find("#af_actionsheet").remove(); 91 | $(elID).find("#af_action_mask").remove(); 92 | $(elID).append(markup); 93 | 94 | markup.vendorCss("Transition", "all 0ms"); 95 | this.el.style.overflow = "hidden"; 96 | markup.on("click", "a", this.sheetClickHandler.bind(this)); 97 | this.activeSheet = markup; 98 | markup.cssTranslate("0," + ((markup.height())) + "px"); 99 | $(elID).append("
    "); 100 | setTimeout(function() { 101 | markup.vendorCss("Transition", "all 300ms"); 102 | markup.cssTranslate("0,0"); 103 | }, 10); 104 | $("#af_action_mask").bind("touchstart touchmove touchend click",function(e){ 105 | e.preventDefault(); 106 | e.stopPropagation(); 107 | }); 108 | 109 | }; 110 | actionsheet.prototype = { 111 | activeSheet: null, 112 | sheetClickHandler:function(){ 113 | this.hideSheet(); 114 | return false; 115 | }, 116 | hideSheet: function() { 117 | this.activeSheet.off("click", "a", this.sheetClickHandler); 118 | $(this.el).find("#af_action_mask").unbind("click").remove(); 119 | this.activeSheet.vendorCss("Transition", "all 0ms"); 120 | var markup = this.activeSheet; 121 | var theEl = this.el; 122 | setTimeout(function() { 123 | markup.vendorCss("Transition", "all 300ms"); 124 | markup.cssTranslate("0,"+(markup.height()+60)+"px"); 125 | setTimeout(function() { 126 | markup.remove(); 127 | markup = null; 128 | theEl.style.overflow = "none"; 129 | }, 350); 130 | }, 10); 131 | } 132 | }; 133 | $.afui.actionsheet=function(opts){ 134 | return $(document.body).actionsheet(opts); 135 | }; 136 | })(jQuery); 137 | -------------------------------------------------------------------------------- /src/less/buttons.less: -------------------------------------------------------------------------------- 1 | .button { 2 | position:relative; 3 | display:inline-block; 4 | padding:8px 12px; 5 | margin:8px 0; 6 | font-weight:bold; 7 | color:#000; 8 | text-align:center; 9 | vertical-align:top; 10 | cursor:pointer; 11 | background-color:#eee; 12 | border:1px solid #666; 13 | text-decoration: none; 14 | z-index:2; 15 | } 16 | .button.pressed { 17 | background:#fff; 18 | } 19 | .button.previous { 20 | margin-left:16px; 21 | padding-left:6px; 22 | border-color:#666 #666 transparent transparent !important; 23 | } 24 | .button.next { 25 | border-color:#666 transparent #666 #666 !important; 26 | margin-right:16px; 27 | padding-right:6px; 28 | } 29 | .button.previous::after { 30 | z-index:-1; 31 | content:''; 32 | position:absolute; 33 | width:25px; 34 | height:27px; 35 | background-color:inherit; 36 | top:3px; 37 | left:-11px; 38 | border-radius:5px; 39 | border:1px solid; 40 | border-color:transparent transparent inherit transparent; 41 | -webkit-transform:rotate(45deg); 42 | transform:rotate(45deg); 43 | } 44 | .button.next::after { 45 | z-index:-1; 46 | content:''; 47 | position:absolute; 48 | width:25px; 49 | height:27px; 50 | background-color:inherit; 51 | top:3px; 52 | right:-11px; 53 | border-radius:5px; 54 | border:1px solid; 55 | border-color:transparent transparent transparent transparent; 56 | -webkit-transform:rotate(45deg); 57 | transform:rotate(45deg); 58 | } 59 | .button.block { 60 | display:block; 61 | } 62 | .button.flat { 63 | border-radius: 0; 64 | box-shadow:none; 65 | } 66 | .header { 67 | .button-grouped { 68 | & > .button { 69 | margin:0; 70 | border-color:#fff; 71 | } 72 | } 73 | .button { 74 | color: #fff; 75 | background:none; 76 | border-color: transparent; 77 | font-size:12px; 78 | padding:7px; 79 | height:32px; 80 | margin:5px; 81 | text-overflow: ellipsis; 82 | white-space: nowrap; 83 | } 84 | .button.icon:before { 85 | padding-left:6px; 86 | } 87 | } 88 | .button-grouped { 89 | display:inline-block; 90 | margin: 5px; 91 | * { 92 | border-radius:0px; 93 | float:left; 94 | border-left:0px solid transparent; 95 | border-right: 1px solid #666; 96 | border-bottom: 1px solid #666; 97 | border-top: 1px solid #666; 98 | margin:0; 99 | } 100 | & > .button:first-child { 101 | border-left: 1px solid #666; 102 | border-top-left-radius: 3px; 103 | border-bottom-left-radius: 3px; 104 | } 105 | & > .button:last-child { 106 | border-top-right-radius: 3px; 107 | border-bottom-right-radius: 3px; 108 | } 109 | } 110 | .button-grouped.flex { 111 | display: -webkit-box; 112 | display: -moz-box; 113 | display: -ms-flexbox; 114 | display: -webkit-flex; 115 | display: flex; 116 | & > .button { 117 | -webkit-box-flex: 1; 118 | -moz-box-flex: 1 auto; 119 | -webkit-flex: 1 auto; 120 | -ms-flex: 1 auto; 121 | flex: 1 auto; 122 | white-space: nowrap; 123 | overflow: hidden; 124 | text-overflow: ellipsis; 125 | } 126 | } 127 | .button-grouped.flex.vertical { 128 | display: inline-block; 129 | } 130 | .button-grouped.vertical { 131 | * { 132 | border-radius:0px; 133 | display:block; 134 | float:none; 135 | width:100%; 136 | border-left: 1px solid #666; 137 | border-right: 1px solid #666; 138 | border-top: 1px solid #666; 139 | border-bottom: 0px solid #666; 140 | } 141 | & > .button:first-child { 142 | border-top-left-radius: 3px; 143 | border-top-right-radius: 3px; 144 | border-bottom-left-radius:0px; 145 | border-bottom-right-radius:0px; 146 | } 147 | & > .button:last-child { 148 | border-top-right-radius:0px; 149 | border-top-left-radius:0px; 150 | border-bottom-right-radius: 3px; 151 | border-bottom-left-radius: 3px; 152 | border-bottom:1px solid #666; 153 | } 154 | } 155 | .button.gray { 156 | background:#999; 157 | border-color:#666; 158 | } 159 | .button.yellow { 160 | background-color:#F1C222; 161 | border-color:#999; 162 | } 163 | .button.red { 164 | color:#fff; 165 | text-shadow:0 -1px 0 #666; 166 | background:#B20000; 167 | border-color:#666; 168 | } 169 | .button.green { 170 | color:#fff; 171 | text-shadow:0 -1px 0 #666; 172 | background:#009C0C; 173 | border-color:#666; 174 | } 175 | .button.orange { 176 | color:#fff; 177 | text-shadow:0 -1px 0 #666; 178 | background-color:#FF8000; 179 | border-color:#666; 180 | } 181 | .button.black { 182 | color:#fff; 183 | text-shadow:none; 184 | background:#000; 185 | border-color:#666; 186 | } 187 | .button.slate { 188 | color:#fff; 189 | text-shadow:0 -1px 0 #000; 190 | background:#171F28; 191 | border-color:#666; 192 | } 193 | .backButton { 194 | text-overflow: ellipsis; 195 | white-space: nowrap; 196 | } 197 | -------------------------------------------------------------------------------- /lancaster/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Lancaster 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 34 | 35 | 36 | 37 |
    38 | 39 | 40 | 41 | 42 | 43 | 44 |
    45 |
    46 |
    47 | Andrew Student: 0 Points 48 |
    49 |
    50 |
    51 |
    52 |
    53 |
    54 | Addition 55 |
    56 |
    57 |
    58 |
    59 | Subtraction 60 |
    61 |
    62 |
    63 |
    64 | Multiplication 65 |
    66 |
    67 | 68 |
    69 | 70 |
    71 | Division 72 |
    73 |
    74 | 85 |
    86 |
    87 |
    88 |
    89 |
    90 |
    91 |
    92 |
    93 |

    Your Profile

    94 | 95 |
    96 | 97 | 98 |
    99 |

    Avatar

    100 |
    101 | Pick your avatar 102 |
    103 |
    104 |
    105 |
    106 |
    107 |
    Sign Out
    108 | 109 | 110 |
    111 |
    112 | 113 |
    114 |
    115 |
    116 |
    117 |
    118 | 119 |

    Quiz content stuff

    120 |
    ✓
    121 |

    (0/0)

    122 | 123 |
    What is 0+1?
    124 | 125 |
      126 |
    • One
      • 127 |
    • Three
      • 128 |
    • Two
      • 129 |
    • Four
      • 130 |
    131 | 132 |
    133 | 134 | 135 |
    136 |
    137 | 140 | 141 |
    142 | 143 | 144 | 145 | 146 | -------------------------------------------------------------------------------- /jquery-widgets/af.popup.js: -------------------------------------------------------------------------------- 1 | //onShow = open 2 | //cancelCallback = cancel 3 | //doneCallback = done 4 | //removed id property 5 | // added this.popup = $el; 6 | 7 | (function($){ 8 | "use strict"; 9 | var queue=[]; 10 | $.widget("afui.popup",{ 11 | options:{ 12 | addCssClass: "", 13 | title: "Alert", 14 | message: "", 15 | cancelText: "Cancel", 16 | cancel: null, 17 | cancelClass: "", 18 | doneText: "", 19 | done:null, 20 | doneClass: "", 21 | cancelOnly: false, 22 | open:null, 23 | autoCloseDone: true, 24 | suppressTitle: false 25 | }, 26 | _create:function(){ 27 | }, 28 | _init:function(){ 29 | queue.push(this); 30 | if (queue.length === 1) 31 | this.show(); 32 | }, 33 | widget:function(){ 34 | return this.popup; 35 | }, 36 | show: function () { 37 | var markup = ""; 46 | 47 | var $el=$(markup); 48 | this.element.append($el); 49 | this.popup=$el; 50 | this._on($el,{close:"hide"}); 51 | 52 | if (this.options.cancelOnly) { 53 | $el.find("A#action").hide(); 54 | $el.find("A#cancel").addClass("center"); 55 | } 56 | 57 | //@TODO Change to event 58 | this._on($el,{"click a":function(event){ 59 | var button = $(event.target); 60 | console.log(button); 61 | if (button.attr("id") === "cancel") { 62 | this._trigger("cancel",event); 63 | //this.options.cancelCallback.call(this.options.cancelCallback, this); 64 | this.hide(); 65 | } else { 66 | this._trigger("done",event); 67 | //this.options.doneCallback.call(this.options.doneCallback, this); 68 | if (this.options.autoCloseDone) 69 | this.hide(); 70 | } 71 | event.preventDefault(); 72 | }}); 73 | 74 | this.positionPopup(); 75 | $.blockUI(0.5); 76 | 77 | this._on({orientationchange:"positionPopup"}); 78 | 79 | //force header/footer showing to fix CSS style bugs 80 | this.popup.find("header,footer").show(); 81 | this._delay(function(){ 82 | this.popup.removeClass("hidden").addClass("show"); 83 | //this.options.onShow(this); 84 | this._trigger("open"); 85 | },50); 86 | }, 87 | 88 | hide: function () { 89 | this.popup.addClass("hidden"); 90 | $.unblockUI(); 91 | if(1==1){//!$.os.ie&&!$.os.android){ 92 | this._delay("remove",250); 93 | } 94 | else 95 | this.remove(); 96 | }, 97 | 98 | remove: function () { 99 | this._off(this.element,"orientationchange"); 100 | this.popup.remove(); 101 | queue.splice(0, 1); 102 | if (queue.length > 0) 103 | queue[0].show(); 104 | }, 105 | 106 | positionPopup: function () { 107 | this.popup.css({ 108 | "top":((window.innerHeight / 2.5) + window.pageYOffset) - (this.popup[0].clientHeight / 2), 109 | "left":(window.innerWidth / 2) - (this.popup[0].clientWidth / 2) 110 | }); 111 | } 112 | }); 113 | var uiBlocked = false; 114 | $.blockUI = function (opacity) { 115 | if (uiBlocked) 116 | return; 117 | opacity = opacity ? " style='opacity:" + opacity + ";'" : ""; 118 | $("BODY").prepend($("
    ")); 119 | $("BODY DIV#mask").bind("touchstart", function (e) { 120 | e.preventDefault(); 121 | }); 122 | $("BODY DIV#mask").bind("touchmove", function (e) { 123 | e.preventDefault(); 124 | }); 125 | uiBlocked = true; 126 | }; 127 | 128 | $.unblockUI = function () { 129 | uiBlocked = false; 130 | $("BODY DIV#mask").unbind("touchstart"); 131 | $("BODY DIV#mask").unbind("touchmove"); 132 | $("BODY DIV#mask").remove(); 133 | }; 134 | $.afui.registerDataDirective("[data-alert]",function(item){ 135 | var $item=$(item); 136 | var message=$item.attr("data-message"); 137 | if(message.length===0) return; 138 | $(document.body).popup({message:message,cancelOnly:true}); 139 | }); 140 | 141 | $.afui.popup=function(opts){ 142 | return $(document.body).popup(opts); 143 | }; 144 | })(jQuery); 145 | -------------------------------------------------------------------------------- /docs/plugins/af.popup.md: -------------------------------------------------------------------------------- 1 | #Popup 2 | 3 | The popup plugin allows you to creat your own stylized popup with App Framework. It is non-blocking and allows more flexibility then native dialogs. You can use this plugin to show messages, options, or even login forms. 4 | 5 | ``` 6 | $.afui.popup(options) // returns a reference to the popup object 7 | ``` 8 | 9 | ## Properties 10 | 11 | #### Attributes 12 | 13 | You can pass in a string or an object to the popup function. If you pass in a string, it will emulate an alert box. 14 | 15 | ``` 16 | id (string) ID of DOM element for the popup container 17 | title (string) Title to show for the popup 18 | message (string) Text to display in the popup 19 | cancelText (string) Text to display for the cancel button 20 | doneText (string) Text to display for the done button 21 | cancelOnly (bool/false) When true, only the cancel button will show 22 | cancelClass (string) CSS class for the cancel button 23 | doneClass (string) CSS Class for the done button 24 | autoCloseDone (bool/false) When true, the popup will auto hide when the done button is pressed 25 | suppressTitle (bool/false) When true, the title will not be shown in the popup 26 | 27 | ``` 28 | 29 | #### Functions 30 | 31 | ``` 32 | cancelCallback(function) Function to execute when the cancel button is clicked 33 | doneCallback(function) Function to execute when the done button is clicked 34 | onShow(function) Function to execute when the popup is displayed to the user 35 | ``` 36 | 37 | 38 | ## Methods 39 | 40 | ``` 41 | show() Call to present the popup to the user 42 | hide() Call to dismiss the popup from the user 43 | ``` 44 | 45 | ## Events 46 | ``` 47 | close When dispatched, this event will close the popup window programatically 48 | ``` 49 | 50 | 51 | ## CSS/Customize 52 | 53 | Below is an example used by App Framework's iOS7 theme to customize the look and feel of the popup 54 | 55 | ``` 56 | /* The main container/* 57 | .ios7 .afPopup { 58 | display: block; 59 | border:1px solid rgba(158,158,158,255); 60 | border-radius:10px; 61 | padding:0; 62 | text-align: center; 63 | width:280px; 64 | position: absolute; 65 | z-index: 1000000; 66 | top: 50%; 67 | color:inherit; 68 | background:rgba(249,249,249,1); 69 | text-align:center; 70 | } 71 | 72 | /* The title/* 73 | .ios7 .afPopup>HEADER{ 74 | padding:10px 0; 75 | } 76 | 77 | /* The content area/* 78 | .ios7 .afPopup>DIV{ 79 | font-size:14px; 80 | padding-bottom:10px; 81 | } 82 | 83 | /* The bottom where the buttons are displayed/* 84 | 85 | .ios7 .afPopup>FOOTER{ 86 | border-top:1px solid #aaa; 87 | } 88 | 89 | 90 | /* The cancel/done buttons/* 91 | .ios7 .afPopup .button { 92 | border: none; 93 | width: 50%; 94 | margin: 0; 95 | background: transparent; 96 | color:rgba(82,155,234,255); 97 | padding:12px 0; 98 | } 99 | 100 | .ios7 .afPopup .button.pressed { 101 | background: none; 102 | } 103 | 104 | .ios7 .button.pressed { 105 | font-weight:bold; 106 | background: white; 107 | } 108 | 109 | .ios7 .afPopup a:not(:first-of-type) { 110 | border-left:1px solid rgba(158,158,158,255); 111 | } 112 | ``` 113 | 114 | ## Data Directive 115 | ``` 116 | data-popup Declare the popup 117 | data-message Message parameter 118 | 119 | Hi 120 | ``` 121 | 122 | 123 | ## Examples 124 | 125 | Here is a basic alert style popup. You can pass in a string instead of an object 126 | 127 | ``` 128 | $.afui.popup("I'm replacing an alert box"); 129 | ``` 130 | 131 | Below shows a more advanced example setting properties 132 | 133 | ``` 134 | $.afui.popup({ 135 | title: "Alert! Alert!", 136 | message: "This is a test of the emergency alert system!! Don't PANIC!", 137 | cancelText: "Cancel me", 138 | cancelCallback: function () { 139 | console.log("cancelled"); 140 | }, 141 | doneText: "I'm done!", 142 | doneCallback: function () { 143 | console.log("Done for!"); 144 | }, 145 | cancelOnly: false 146 | }); 147 | ``` 148 | 149 | Here we will show a login prompt for the user 150 | 151 | ``` 152 | $.afui.popup({ 153 | title: "Login", 154 | message: "Username:
    Password: ", 155 | cancelText: "Cancel", 156 | cancelCallback: function () {}, 157 | doneText: "Login", 158 | doneCallback: function () { 159 | alert("Logging in") 160 | }, 161 | cancelOnly: false 162 | }); 163 | ``` 164 | 165 | Now we will programatically dismiss the popup. The first will be by callling "hide" 166 | 167 | ``` 168 | var popup= $.afui.popup("This will hide after 3 seconds"); 169 | setTimeout(function(){ 170 | popup.hide(); 171 | },3000); 172 | ``` 173 | 174 | Here we trigger the "close" event on the popup based of the id we gave it. 175 | 176 | ``` 177 | $(document.body).popup({ 178 | id:"myPopup", 179 | title:"Hide", 180 | message:"auto hide after 3 seconds", 181 | cancelOnly:true 182 | }); 183 | setTimeout(function(){ 184 | $("#myPopup").trigger("close"); 185 | },3000); 186 | ``` 187 | 188 | ###Directive example 189 | 190 | 191 | ``` 192 | Hello 193 | ``` 194 | -------------------------------------------------------------------------------- /src/less/tizen.less: -------------------------------------------------------------------------------- 1 | @tizenbg:#313f66; 2 | 3 | .tizen, .tizen .view, .tizen .view .pages { 4 | font:14px 'TizenSans',sans-serif; 5 | background:#000; 6 | color:#fff; 7 | border-color:#fff; 8 | } 9 | .tizen.light, .tizen.light .view , .tizen.light .view .pages { 10 | background:#FDFDFD; 11 | color:#000; 12 | } 13 | .tizen { 14 | .view { 15 | header { 16 | background:@tizenbg; 17 | color:inherit; 18 | border-color:@tizenbg; 19 | .button { 20 | color: inherit; 21 | border-color:transparent; 22 | font-size:14px; 23 | } 24 | .button-grouped { 25 | & > .button { 26 | border-color:#aaa; 27 | } 28 | } 29 | .backButton { 30 | background: inherit; 31 | color:inherit; 32 | } 33 | } 34 | footer { 35 | box-shadow: none; 36 | background: none; 37 | border-color: #000; 38 | padding:0; 39 | & > a:not(.button) { 40 | color: inherit; 41 | height:49px; 42 | top:0px; 43 | border-top:4px solid #414f6e; 44 | background:#414f6e; 45 | } 46 | & > a.pressed:not(.button) { 47 | border-top:4px solid #316fc6; 48 | background:@tizenbg; 49 | } 50 | & > a.icon.pressed:not(.button):before { 51 | color:inherit; 52 | } 53 | } 54 | } 55 | .menuButton:after { 56 | border-color:white; 57 | } 58 | .af-badge { 59 | border:none; 60 | } 61 | .list { 62 | background:inherit; 63 | color:inherit; 64 | border-color:#303030; 65 | .divider { 66 | color:black; 67 | } 68 | } 69 | .panel { 70 | h2 { 71 | color:inherit; 72 | } 73 | } 74 | .collapsed:after { 75 | border-top: 6px solid; 76 | } 77 | .collapsed:before { 78 | border:2px solid; 79 | } 80 | .expanded:after { 81 | border-bottom: 6px solid; 82 | } 83 | .expanded:before { 84 | border:2px solid; 85 | } 86 | input.toggle+label:after { 87 | color:inherit; 88 | } 89 | input.toggle+label { 90 | border-radius:0; 91 | & > span { 92 | border-radius:0; 93 | top:0; 94 | width:27px; 95 | height:28px; 96 | } 97 | } 98 | label { 99 | color:inherit; 100 | } 101 | .afPopup { 102 | border: solid 1px #888; 103 | padding: 5px; 104 | border-radius: 5px; 105 | -webkit-transform:none; 106 | transform:none; 107 | -webkit-transition: none; 108 | transition:none; 109 | background:@tizenbg; 110 | color:inherit; 111 | & > HEADER { 112 | text-align:center; 113 | padding:5px; 114 | } 115 | & > DIV { 116 | font-size:14px; 117 | text-align:center; 118 | padding:5px; 119 | margin:0; 120 | } 121 | & > FOOTER { 122 | & > A { 123 | width:120px; 124 | } 125 | } 126 | } 127 | #af_actionsheet { 128 | background:inherit; 129 | color:inherit; 130 | a { 131 | border-radius:0; 132 | border:1px solid #ccc; 133 | background:@tizenbg; 134 | color:inherit; 135 | } 136 | } 137 | } 138 | .tizen.light { 139 | .view { 140 | header { 141 | background:#e9e6df; 142 | color:inherit; 143 | border-color:#e9e6df; 144 | } 145 | footer { 146 | border-color: #fff; 147 | & > a:not(.button) { 148 | border-top:4px solid #dedcd5; 149 | background:#dedcd5; 150 | } 151 | & > a.pressed:not(.button) { 152 | border-top:4px solid #ceccc5; 153 | background:#e9e6df; 154 | } 155 | } 156 | } 157 | .menuButton:after { 158 | border-color:black; 159 | } 160 | .afPopup { 161 | background:#e9e6df; 162 | } 163 | #af_actionsheet { 164 | a { 165 | background:#e9e6df; 166 | } 167 | } 168 | } 169 | .tizen .panel, .tizen #modalContainer { 170 | background:#000; 171 | color:#fff; 172 | } 173 | .tizen .collapsed:before,.tizen .expanded:before { 174 | border-color: inherit; 175 | } 176 | .tizen .collapsed:after,.tizen .expanded:after { 177 | border-top-color:inherit; 178 | border-top-color:inherit; 179 | } 180 | .tizen select, .tizen textarea, .tizen input[type="text"],.tizen input[type=search], .tizen input[type="password"],.tizen input[type="datetime"], .tizen input[type="datetime-local"],.tizen input[type="date"], .tizen input[type="month"],.tizen input[type="time"], .tizen input[type="week"],.tizen input[type="number"], .tizen input[type="email"],.tizen input[type="url"], .tizen input[type="tel"],.tizen input[type="color"], .tizen .input-group { 181 | background:inherit; 182 | color:inherit; 183 | } 184 | .tizen input.toggle:checked + label { 185 | background: @tizenbg; 186 | } 187 | 188 | .tizen input[type="radio"]:not(.toggle):checked+label:before,.tizen input[type="checkbox"]:not(.toggle):checked+label:before { 189 | background: @tizenbg; 190 | } 191 | 192 | .tizen .view footer .icon:not(.button):before { 193 | margin-bottom: 2px; 194 | top:0px; 195 | } 196 | 197 | -------------------------------------------------------------------------------- /src/af.animation.js: -------------------------------------------------------------------------------- 1 | /** 2 | * af.animation 3 | * @copyright Intel 2014 4 | * 5 | */ 6 | /* jshint strict:false*/ 7 | (function ($) { 8 | 9 | $.fn.animation = function () { 10 | var item = this; 11 | this.each(function () { 12 | item = new Animator(this); 13 | }); 14 | return item; 15 | }; 16 | 17 | function Animator(element) { 18 | this.element = element; 19 | this.element.classList.remove("animation-reverse"); 20 | this.keepClass = false; 21 | } 22 | 23 | var animEnd = function (evt) { 24 | this.element.removeEventListener("webkitAnimationEnd", this.endCBCache, false); 25 | this.element.removeEventListener("animationend", this.endCBCache, false); 26 | this.element.removeEventListener("MSAnimationEnd", this.endCBCache, false); 27 | if (this.endcb) 28 | this.endcb.call(this.element, evt); 29 | this.element.classList.remove("animation-reverse"); 30 | this.element.classList.remove("animation-active"); 31 | if (!this.keepClass) 32 | this.element.classList.remove(this.animClass); 33 | }; 34 | Animator.prototype = { 35 | element: null, 36 | animClass: null, 37 | runEnd: false, 38 | keepClass: false, 39 | keep: function () { 40 | this.keepClass = true; 41 | return this; 42 | }, 43 | remove: function (item) { 44 | this.element.classList.remove(item); 45 | this.element.offsetWidth = this.element.offsetWidth; 46 | return this; 47 | }, 48 | endCBCache: null, 49 | run: function (item, duration) { 50 | this.runEnd = false; 51 | this.element.classList.add("animation-active"); 52 | //Hack to trigger reflow 53 | this.element.offsetWidth = this.element.offsetWidth; 54 | this.element.classList.add(item); 55 | this.animClass = item; 56 | //check if it exists..if not trigger end 57 | var computedStyle = window.getComputedStyle(this.element, null); 58 | var time = computedStyle.animation - duration; 59 | if (!time) 60 | time = computedStyle.animationDuration; 61 | if (!time) 62 | time = computedStyle.MozAnimationDuration; 63 | if (!time) 64 | time = computedStyle.webkitAnimationDuration; 65 | time = parseFloat(time); 66 | if (time <= 0.01 || isNaN(time)) 67 | this.runEnd = true; 68 | 69 | //Due to calling .bind, we need to cache a reference to the function to remove it 70 | this.endCBCache = animEnd.bind(this); 71 | 72 | if (this.runEnd) { 73 | this.endCBCache(); 74 | return this; 75 | } 76 | this.element.addEventListener("webkitAnimationEnd", this.endCBCache, false); 77 | this.element.addEventListener("animationend", this.endCBCache, false); 78 | this.element.addEventListener("MSAnimationEnd", this.endCBCache, false); 79 | return this; 80 | }, 81 | reverse: function () { 82 | this.element.classList.add("animation-reverse"); 83 | return this; 84 | }, 85 | reRun: function (item) { 86 | this.remove(item); 87 | return this.run(item); 88 | }, 89 | endcb: function () {}, 90 | end: function (cb) { 91 | this.endcb = cb; 92 | return this; 93 | } 94 | }; 95 | 96 | 97 | $.fn.transition = function () { 98 | var item = this; 99 | this.each(function () { 100 | item = new Transition(this); 101 | }); 102 | return item; 103 | }; 104 | 105 | function Transition(element) { 106 | this.element = element; 107 | this.element; 108 | } 109 | 110 | var transitionEnd = function (evt) { 111 | 112 | clearTimeout(this.timer); 113 | this.element.removeEventListener("webkitTransitionEnd", this.endCBCache, false); 114 | this.element.removeEventListener("transitionend", this.endCBCache, false); 115 | this.element.removeEventListener("MSTransitionEnd", this.endCBCache, false); 116 | if (this.endcb) 117 | this.endcb.call(this.element, evt); 118 | if (!this.keepEnd) { 119 | $(this.element).vendorCss("TransitionDuration", ""); 120 | $(this.element).vendorCss("Transform", ""); 121 | } 122 | 123 | }; 124 | Transition.prototype = { 125 | element: null, 126 | runEnd: false, 127 | keepEnd: false, 128 | keep: function () { 129 | this.keepEnd = true; 130 | return this; 131 | }, 132 | endCBCache: null, 133 | timer: null, 134 | run: function (trans, duration) { 135 | 136 | this.endCBCache = transitionEnd.bind(this); 137 | this.element.addEventListener("webkitTransitionEnd", this.endCBCache, false); 138 | this.element.addEventListener("transitionend", this.endCBCache, false); 139 | this.element.addEventListener("MSTransitionEnd", this.endCBCache, false); 140 | //$(this.element).vendorCss("TransitionProperty","all"); 141 | $(this.element).vendorCss("TransitionDuration", duration); 142 | $(this.element).vendorCss("Transform", trans); 143 | this.timer = setTimeout(function () { 144 | this.endCBCache(); 145 | }.bind(this), parseInt(duration,10) + 50); 146 | return this; 147 | }, 148 | endcb: function () {}, 149 | end: function (cb) { 150 | this.endcb = cb; 151 | return this; 152 | } 153 | }; 154 | })(jQuery); -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | var path = require("path"); 2 | 3 | module.exports = function (grunt) { 4 | grunt.loadNpmTasks("grunt-contrib-clean"); 5 | grunt.loadNpmTasks("grunt-contrib-jshint"); 6 | grunt.loadNpmTasks("grunt-contrib-cssmin"); 7 | grunt.loadNpmTasks("grunt-contrib-concat"); 8 | grunt.loadNpmTasks("grunt-mochaccino"); 9 | grunt.loadNpmTasks("grunt-closure-compiler"); 10 | grunt.loadNpmTasks("grunt-banner"); 11 | grunt.loadNpmTasks('grunt-karma'); 12 | grunt.loadNpmTasks('grunt-contrib-less'); 13 | grunt.loadNpmTasks('grunt-contrib-watch'); 14 | 15 | 16 | grunt.initConfig({ 17 | pkg: grunt.file.readJSON('package.json'), 18 | clean: [ "build/cov" ], 19 | 20 | // see .jshintrc file for the options; 21 | // options are explained at http://www.jshint.com/docs/config/ 22 | jshint: { 23 | options: { 24 | jshintrc: ".jshintrc" 25 | }, 26 | 27 | core: [ "src/*.js" ], 28 | 29 | }, 30 | karma: { 31 | unit: { 32 | configFile: 'karma.conf.js' 33 | } 34 | }, 35 | 36 | concat: { 37 | afui:{ 38 | files: { 39 | "build/appframework.ui.js": [ 40 | "src/af.shim.js", 41 | "src/af.ui.js", 42 | "src/af.actionsheet.js", 43 | "src/af.grower.js", 44 | "src/af.touchEvents.js", 45 | "src/af.animateheader.js", 46 | "src/af.popup.js", 47 | "src/af.animation.js", 48 | "src/af.splashscreen.js", 49 | "src/af.drawer.js", 50 | "src/af.swipereveal.js", 51 | "src/af.desktopBrowsers.js", 52 | "src/af.toast.js", 53 | "src/af.lockscreen.js" 54 | ] 55 | } 56 | }, 57 | less: { 58 | files: { 59 | "build/af.ui.less":[ 60 | "src/less/main.less", 61 | "src/less/anim2.less", 62 | "src/less/animation.less", 63 | "src/less/*.less" 64 | ] 65 | } 66 | }, 67 | lessBase: { 68 | files: { 69 | "./build/af.ui.base.less": [ 70 | "src/less/main.less", 71 | "src/less/anim2.less", 72 | "src/less/animation.less", 73 | "src/less/appframework.less", 74 | "src/less/af.actionsheet.less", 75 | "src/less/af.popup.less", 76 | "src/less/af.splashscreen.less", 77 | "src/less/af.swipereveal.less", 78 | "src/less/af.toast.less", 79 | "src/less/badges.less", 80 | "src/less/buttons.less", 81 | "src/less/forms.less", 82 | "src/less/grid.less", 83 | "src/less/lists.less", 84 | "src/less/splitview.less", 85 | "src/less/af.lockscreen.less" 86 | ] 87 | } 88 | } 89 | }, 90 | "closure-compiler": { 91 | "appframework-ui": { 92 | closurePath: "../closure/", 93 | js: ["build/appframework.ui.js"], 94 | jsOutputFile: "build/appframework.ui.min.js", 95 | options: { 96 | }, 97 | maxBuffer: 500, 98 | noreport:true 99 | }, 100 | }, 101 | usebanner: { 102 | taskName: { 103 | options: { 104 | position: "top", 105 | banner: "/*! <%= pkg.name %> - v<%= pkg.version %> - "+ 106 | "<%= grunt.template.today('yyyy-mm-dd') %> */\n", 107 | linebreak: true 108 | }, 109 | files: { 110 | src: [ "build/*.js","build/*.js","build/css/*.css" ] 111 | } 112 | } 113 | }, 114 | less: { 115 | development: { 116 | options: { 117 | paths: ["./src/less"], 118 | yuicompress: false 119 | }, 120 | files: { 121 | "./build/af.ui.css": "./src/less/*.less" 122 | } 123 | }, 124 | base: { 125 | options: { 126 | paths: ["./src/less"], 127 | yuicompress: false 128 | }, 129 | files: { 130 | "./build/af.ui.base.css": [ 131 | "src/less/main.less", 132 | "src/less/anim2.less", 133 | "src/less/animation.less", 134 | "src/less/appframework.less", 135 | "src/less/af.actionsheet.less", 136 | "src/less/af.popup.less", 137 | "src/less/af.splashscreen.less", 138 | "src/less/af.swipereveal.less", 139 | "src/less/af.toast.less", 140 | "src/less/badges.less", 141 | "src/less/buttons.less", 142 | "src/less/forms.less", 143 | "src/less/grid.less", 144 | "src/less/lists.less", 145 | "src/less/splitview.less", 146 | "src/less/af.lockscreen.less" 147 | ] 148 | } 149 | } 150 | }, 151 | watch: { 152 | files: "./src/less/*.less", 153 | tasks: ["less"] 154 | } 155 | }); 156 | 157 | 158 | grunt.registerTask("default", [ 159 | "jshint", 160 | "test", 161 | "clean", 162 | "closure-compiler", 163 | "usebanner", 164 | "watch" 165 | ]); 166 | 167 | grunt.registerTask("rebuild" , ["less","concat","closure-compiler","usebanner"]); 168 | grunt.registerTask("hint" , ["jshint"]); 169 | grunt.registerTask("test" , ["karma"]); 170 | 171 | }; -------------------------------------------------------------------------------- /src/less/appframework.less: -------------------------------------------------------------------------------- 1 | @headerbg:#0088D1; 2 | @footerbg:#0088D1; 3 | @headercolor:#fff; 4 | @footercolor:#fff; 5 | 6 | 7 | @-ms-viewport { 8 | width: device-width; 9 | } 10 | body { 11 | 12 | .afPopup { 13 | border: solid 1px #33B5E5; 14 | border-radius: 5px; 15 | background:inherit; 16 | color:inherit; 17 | & > FOOTER { 18 | & > A { 19 | width: 120px; 20 | } 21 | } 22 | } 23 | #af_actionsheet { 24 | background:#0190d6; 25 | color:inherit; 26 | a { 27 | border-radius:0; 28 | color:black; 29 | background:white; 30 | border:none; 31 | text-shadow:none; 32 | } 33 | } 34 | } 35 | .view { 36 | header { 37 | background:@headerbg; 38 | border:none; 39 | border-bottom:1px solid @headerbg; 40 | color:@headercolor; 41 | h1 { 42 | text-shadow:none; 43 | width:45%; 44 | } 45 | .backButton { 46 | background:rgba(249,249,249,1); 47 | color:#fff; 48 | display: block; 49 | position: absolute; 50 | line-height:44px; 51 | left: 25px; 52 | text-overflow: ellipsis; 53 | font-size: 14px; 54 | padding:0; 55 | text-shadow: none; 56 | background-color: transparent; 57 | border:none; 58 | border-color:transparent; 59 | height: 44px; 60 | top:0; 61 | border-radius:0; 62 | box-shadow:none; 63 | margin: 0; 64 | padding-left: 0; 65 | text-align: center; 66 | width:50px; 67 | padding:0 !important; 68 | margin:0 !important; 69 | position:absolute; 70 | } 71 | } 72 | footer { 73 | background:@footerbg; 74 | border:none; 75 | border-top:1px solid @footerbg; 76 | box-shadow:none; 77 | & > a { 78 | color:@footercolor; 79 | } 80 | & > a.pressed:not(.button) { 81 | border-radius:0; 82 | background-color:#00AEEF; 83 | } 84 | & > a.icon.pressed:not(.button):before { 85 | color:inherit; 86 | } 87 | } 88 | } 89 | .backButton::before { 90 | z-index: -1; 91 | font-size:22px; 92 | position: absolute; 93 | top: -2px; 94 | left: -30px; 95 | text-align: center; 96 | border-radius:0; 97 | border: none; 98 | border-color:transparent; 99 | box-shadow: none; 100 | -webkit-transform: none; 101 | transform: none; 102 | font-family: 'chevron'; 103 | speak: none; 104 | font-style: normal; 105 | font-weight: normal; 106 | font-variant: normal; 107 | text-transform: none; 108 | line-height: 1; 109 | -webkit-font-smoothing: antialiased; 110 | content: "\f054"; 111 | -webkit-transform:rotate(180deg); 112 | transform:rotate(180deg); 113 | background-color: transparent; 114 | padding:12px; 115 | } 116 | .af-badge { 117 | border:none; 118 | box-shadow:none; 119 | } 120 | .list { 121 | background:inherit; 122 | color:inherit; 123 | border-color:#303030; 124 | font-weight:normal; 125 | .divider { 126 | color:black; 127 | } 128 | & > li { 129 | & > a:after { 130 | color:#0088D1; 131 | } 132 | } 133 | } 134 | .panel { 135 | color:inherit; 136 | background:inherit; 137 | h2 { 138 | color:#0088D1; 139 | } 140 | } 141 | .collapsed:after { 142 | border-top: 6px solid; 143 | } 144 | .collapsed:before { 145 | border:2px solid; 146 | } 147 | .expanded:after { 148 | border-bottom: 6px solid; 149 | } 150 | .expanded:before { 151 | border:2px solid; 152 | } 153 | .collapsed:before, .expanded:before { 154 | border-color: inherit; 155 | } 156 | .collapsed:after, .expanded:after { 157 | border-top-color:inherit; 158 | border-top-color:inherit; 159 | } 160 | select, textarea, input[type="text"],input[type=search], input[type="password"],input[type="datetime"], input[type="datetime-local"],input[type="date"], input[type="month"],input[type="time"], input[type="week"],input[type="number"], input[type="email"],input[type="url"], input[type="tel"],input[type="color"], .input-group { 161 | background:inherit; 162 | color:inherit; 163 | } 164 | input.toggle+label:after { 165 | color:inherit; 166 | } 167 | input.toggle+label { 168 | border-radius:0; 169 | & > span { 170 | border-radius:0; 171 | top:0; 172 | width:27px; 173 | height:23px; 174 | } 175 | } 176 | label { 177 | color:inherit; 178 | } 179 | input[type="radio"]:checked+label:before, input[type="checkbox"]:checked+label:before { 180 | background: #33B5E5; 181 | } 182 | .button { 183 | border-radius:0; 184 | text-shadow:none; 185 | } 186 | .button.previous { 187 | border:none; 188 | } 189 | .button.next { 190 | border:none; 191 | } 192 | .button.previous::after { 193 | color:black; 194 | z-index: -1; 195 | font-size:22px; 196 | position: absolute; 197 | top: 2px; 198 | left: -25px; 199 | text-align: center; 200 | border-radius:0; 201 | border: none; 202 | border-color:transparent; 203 | box-shadow: none; 204 | -webkit-transform: none; 205 | transform: none; 206 | font-family: 'chevron'; 207 | speak: none; 208 | font-style: normal; 209 | font-weight: normal; 210 | font-variant: normal; 211 | text-transform: none; 212 | line-height: 1; 213 | -webkit-font-smoothing: antialiased; 214 | content: "\f054"; 215 | -webkit-transform:rotate(180deg); 216 | transform:rotate(180deg); 217 | background-color: transparent; 218 | } 219 | .button.next::after { 220 | color:black; 221 | z-index: -1; 222 | font-size:22px; 223 | position: absolute; 224 | top: 6px; 225 | right: -25px; 226 | text-align: center; 227 | border-radius:0; 228 | border: none; 229 | border-color:transparent; 230 | box-shadow: none; 231 | -webkit-transform: none; 232 | transform: none; 233 | font-family: 'chevron'; 234 | speak: none; 235 | font-style: normal; 236 | font-weight: normal; 237 | font-variant: normal; 238 | text-transform: none; 239 | line-height: 1; 240 | -webkit-font-smoothing: antialiased; 241 | content: "\f054"; 242 | background-color: transparent; 243 | } 244 | --------------------------------------------------------------------------------