38 |
40 | This is a Single View App template
39 |Title
47 | 48 |This is a Modal View App template main page.
50 |` element that will become the title for the page. The code for SingleView app with header buttons will look like this:
35 | ```
36 |
37 |
38 | New Title
39 |
40 | Setup
41 |
42 | This is a Single View App template
43 |
44 | ```
45 | Things to note:
46 | - `` element for title should be the first element, this text will override the `title` attribute in the `.panel`
47 | - button can be specified like any other `afui` button
48 | - button on the right should have a `style="float:right"`
49 |
50 | 
51 |
52 | → [__Demo__](http://htmlpreview.github.io/?https://raw.github.com/krisrak/appframework-templates/master/template-SingleViewApp-header.html) → [Code](https://github.com/krisrak/appframework-templates/blob/master/template-SingleViewApp-header.html)
53 |
54 | If you plan to use this same header in a different page then you can and a `id` move the `` outside the `#content` DIV and reference the header `id` in the `.panel`'s `data-header` attribute. The code will look like this:
55 | ```
56 |
57 |
58 |
59 | New Title
60 |
61 | Setup
62 |
63 |
64 |
65 |
66 | This is a Single View App template
67 |
68 |
69 |
70 |
71 | ```
72 | Documentation
73 | -
74 | Full documentation for AFUI are below, it explains all the attributes for `.panel` and also javascript properties and methods for manupilating UI:
75 | - [Page Layout](http://app-framework-software.intel.com/documentation.php#afui/afui_layout)
76 | - [Panel properties](http://app-framework-software.intel.com/documentation.php#afui/afui_panels)
77 | - [Full Documentation](http://app-framework-software.intel.com/documentation.php#afui/afui_about)
78 |
79 |
--------------------------------------------------------------------------------
/template-ListViewApp-social.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | List View App template for social app
5 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
25 |
26 |
27 |
35 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 | -
50 |
51 |
52 | username1
Placeholder text for this list item 1. This sections can modified for your need.
53 |
54 |
55 | -
56 |
57 |
58 | username2
Placeholder text for this list item 2. This sections can modified for your need.
59 |
60 |
61 | -
62 |
63 |
64 | username3
Placeholder text for this list item 3. This sections can modified for your need.
65 |
66 |
67 | -
68 |
69 |
70 | username4
Placeholder text for this list item 4. This sections can modified for your need.
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 | This is detail view for Item 1
79 |
80 |
81 |
82 | This is detail view for Item 2
83 |
84 |
85 |
86 | This is detail view for Item 3
87 |
88 |
89 |
90 | This is detail view for Item 4
91 |
92 |
93 |
94 |
95 |
96 |
--------------------------------------------------------------------------------
/appframework/plugins/af.scrollScreen.js:
--------------------------------------------------------------------------------
1 | /**
2 | * af.scrollScreen - Widget to hide the header/footer when scrolling to go "full screen"
3 | * Copyright 2013 - Intel
4 | */
5 | /* global af*/
6 | (function($) {
7 | "use strict";
8 |
9 | if (!$||!$.ui) {
10 | throw "This plugin requires App Framework UI";
11 | }
12 |
13 | $.extend($.ui,{
14 | _hideHeaderOnScroll:false,
15 | _hideFooterOnScroll:false,
16 | hideHeaderOnScroll:function(){
17 | console.log(this);
18 | this._hideHeaderOnScroll=true;
19 | this.setupScrollStart();
20 | },
21 | hideFooterOnScroll:function(){
22 | this._hideFooterOnScroll=true;
23 | this.setupScrollStart();
24 | }
25 | });
26 |
27 |
28 | $.ui.ready(function(){
29 |
30 | var headerShown=false;
31 | var footerShown=false;
32 | var startY=0;
33 | var prevY=0;
34 | var hdrHeight;
35 | var ftrHeight;
36 | var scrollSetup=false;
37 |
38 | for(var j in $.ui.scrollingDivs){
39 | $.ui.scrollingDivs[j].initScrollProgress=true;
40 | $.ui.scrollingDivs[j].lockBounce=false;
41 | }
42 |
43 | var oldAddDiv=$.ui.addDivAndScroll;
44 |
45 | $.ui.addDivAndScroll=function(){
46 | var id=oldAddDiv.apply($.ui,arguments);
47 | $.ui.scrollingDivs[id].initScrollProgress=(headerShown||footerShown);
48 | $.ui.scrollingDivs[id].lockBounce=false;
49 | };
50 |
51 | $.ui.setupScrollStart=function(){
52 | if(scrollSetup) return;
53 | $.bind($.touchLayer,"scrollstart",initScrollStart);
54 | $.bind($.touchLayer,"scroll",trackScroll);
55 | scrollSetup=true;
56 | };
57 | $.ui.removeScrollStart=function(){
58 | $.unbind($.touchLayer,"scrollstart",trackScroll);
59 | };
60 |
61 | var initScrollStart = function(){
62 | startY=null;
63 | prevY=0;
64 | };
65 | var trackScroll=function(pos){
66 |
67 | if(!startY) startY=pos.y;
68 |
69 | //scrolling down
70 | var hdr,ftr;
71 | if(pos.y80))
72 | {
73 | if($.ui._hideHeaderOnScroll&&!headerShown){
74 | headerShown=true;
75 | hdr=$("#header");
76 | hdrHeight=hdr.css("height");
77 | hdr.vendorCss("TransitionDuration","200ms");
78 | hdr.css("height","0px");
79 | startY=pos.y;
80 | }
81 | if($.ui._hideFooterOnScroll&&!footerShown){
82 | footerShown=true;
83 | ftr=$("#navbar");
84 | ftrHeight=ftr.css("height");
85 | ftr.vendorCss("TransitionDuration","200ms");
86 | ftr.css("height","0px");
87 | startY=pos.y;
88 | }
89 | }
90 |
91 |
92 | if(pos.y>prevY&&(Math.abs(pos.y)-Math.abs(startY))<-40)
93 | {
94 | if(headerShown&&$.ui._hideHeaderOnScroll){
95 | headerShown=false;
96 | hdr=$("#header");
97 | hdr.css("height",hdrHeight);
98 | startY=pos.y;
99 | }
100 | if(footerShown&&$.ui._hideFooterOnScroll){
101 | footerShown=false;
102 | ftr=$("#navbar");
103 | ftr.css("height",ftrHeight);
104 | startY=pos.y;
105 | }
106 | }
107 |
108 |
109 |
110 | prevY=pos.y;
111 | };
112 |
113 |
114 | var oldLoader=$.ui.loadContent;
115 |
116 | $.ui.loadContent=function(){
117 | if(headerShown)
118 | $("#header").css("height",hdrHeight);
119 | if(footerShown)
120 | $("#navbar").css("height",ftrHeight);
121 | $("#header").vendorCss("TransitionDuration","");
122 | oldLoader.apply($.ui,arguments);
123 | headerShown=false;
124 | footerShown=false;
125 | };
126 | $.ui.hideHeaderOnScroll();
127 | $.ui.hideFooterOnScroll();
128 | });
129 | })(af);
--------------------------------------------------------------------------------
/appframework/plugins/af.touchEvents.js:
--------------------------------------------------------------------------------
1 | //Touch events are based from zepto/touch.js
2 | //Many modifications and enhancements made
3 | /**
4 | * Simply include this in your project to get access to the following touch events on an element
5 | * tap
6 | * doubleTap
7 | * singleTap
8 | * longPress
9 | * swipe
10 | * swipeLeft
11 | * swipeRight
12 | * swipeUp
13 | * swipeDown
14 | */
15 | /* global af*/
16 | (function($) {
17 | "use strict";
18 | var touch = {}, touchTimeout;
19 |
20 | function parentIfText(node) {
21 | return "tagName" in node ? node : node.parentNode;
22 | }
23 |
24 | function swipeDirection(x1, x2, y1, y2) {
25 | var xDelta = Math.abs(x1 - x2), yDelta = Math.abs(y1 - y2);
26 | if (xDelta >= yDelta) {
27 | return (x1 - x2 > 0 ? "Left" : "Right");
28 | } else {
29 | return (y1 - y2 > 0 ? "Up" : "Down");
30 | }
31 | }
32 |
33 | var longTapDelay = 750;
34 | function longTap() {
35 | if (touch.last && (Date.now() - touch.last >= longTapDelay)) {
36 | touch.el.trigger("longTap");
37 | touch = {};
38 | }
39 | }
40 | var longTapTimer;
41 | $(document).ready(function() {
42 | var prevEl;
43 | $(document.body).bind("touchstart", function(e) {
44 | if (e.originalEvent)
45 | e = e.originalEvent;
46 | if (!e.touches || e.touches.length === 0) return;
47 | var now = Date.now(), delta = now - (touch.last || now);
48 | if (!e.touches || e.touches.length === 0) return;
49 | touch.el = $(parentIfText(e.touches[0].target));
50 | touchTimeout && clearTimeout(touchTimeout);
51 | touch.x1 = e.touches[0].pageX;
52 | touch.y1 = e.touches[0].pageY;
53 | touch.x2 = touch.y2 = 0;
54 | if (delta > 0 && delta <= 250)
55 | touch.isDoubleTap = true;
56 | touch.last = now;
57 | longTapTimer = setTimeout(longTap, longTapDelay);
58 |
59 | if ($.ui.useAutoPressed && !touch.el.data("ignore-pressed"))
60 | touch.el.addClass("pressed");
61 | if (prevEl && $.ui.useAutoPressed && !prevEl.data("ignore-pressed") && prevEl[0] !== touch.el[0])
62 | prevEl.removeClass("pressed");
63 | prevEl = touch.el;
64 | }).bind("touchmove", function(e) {
65 | if(e.originalEvent)
66 | e = e.originalEvent;
67 | touch.x2 = e.touches[0].pageX;
68 | touch.y2 = e.touches[0].pageY;
69 | clearTimeout(longTapTimer);
70 | }).bind("touchend", function(e) {
71 | if(e.originalEvent)
72 | e=e.originalEvent;
73 | if (!touch.el)
74 | return;
75 | if ($.ui.useAutoPressed && !touch.el.data("ignore-pressed"))
76 | touch.el.removeClass("pressed");
77 | if (touch.isDoubleTap) {
78 | touch.el.trigger("doubleTap");
79 | touch = {};
80 | } else if (touch.x2 > 0 || touch.y2 > 0) {
81 | (Math.abs(touch.x1 - touch.x2) > 30 || Math.abs(touch.y1 - touch.y2) > 30) &&
82 | touch.el.trigger("swipe") &&
83 | touch.el.trigger("swipe" + (swipeDirection(touch.x1, touch.x2, touch.y1, touch.y2)));
84 | touch.x1 = touch.x2 = touch.y1 = touch.y2 = touch.last = 0;
85 | } else if ("last" in touch) {
86 | touch.el.trigger("tap");
87 | touchTimeout = setTimeout(function() {
88 | touchTimeout = null;
89 | if (touch.el)
90 | touch.el.trigger("singleTap");
91 | touch = {};
92 | }, 250);
93 | }
94 | }).bind("touchcancel", function() {
95 | if(touch.el && $.ui.useAutoPressed && !touch.el.data("ignore-pressed"))
96 | touch.el.removeClass("pressed");
97 | touch = {};
98 | clearTimeout(longTapTimer);
99 | });
100 | });
101 |
102 | ["swipe", "swipeLeft", "swipeRight", "swipeUp", "swipeDown", "doubleTap", "tap", "singleTap", "longTap"].forEach(function(m) {
103 | $.fn[m] = function(callback) {
104 | return this.bind(m, callback);
105 | };
106 | });
107 | })(af);
--------------------------------------------------------------------------------
/template-ListViewApp.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | List View App template
5 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
24 |
25 |
26 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
55 |
56 |
57 |
58 |
59 | This is detail view for Item 1
60 |
61 |
62 |
63 | This is detail view for Item 2
64 |
65 |
66 |
67 | This is detail view for Item 3
68 |
69 |
70 |
71 | This is detail view for Item 4
72 |
73 |
74 |
75 | This is detail view for Item 5
76 |
77 |
78 |
79 | This is detail view for Item 6
80 |
81 |
82 |
83 | This is detail view for Item 7
84 |
85 |
86 |
87 | This is detail view for Item 8
88 |
89 |
90 |
91 | This is detail view for Item 9
92 |
93 |
94 |
95 | This is detail view for Item 10
96 |
97 |
98 |
99 | This is detail view for Item 11
100 |
101 |
102 |
103 | This is detail view for Item 12
104 |
105 |
106 |
107 |
108 |
109 |
--------------------------------------------------------------------------------
/app-GridViewApp-Photos.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Instagram
5 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
67 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
108 |
109 |
110 |
115 |
116 |
117 |
118 |
--------------------------------------------------------------------------------
/template-CarouselViewApp.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Carosuel App template
5 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
27 |
28 |
29 |
59 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 | Page One
112 | Text and images for Page One goes here. Swipe to go to the next page.
113 |
114 |
115 | Page Two
116 | Text and images for Page Two goes here. Swipe to go to the next page.
117 |
118 |
119 | Page Three
120 | Text and images for Page Three goes here. Swipe to go to the next page.
121 |
122 |
123 | Page Four
124 | Text and images for Page Four goes here. Swipe to go to the next page.
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 |
--------------------------------------------------------------------------------
/template-ListViewApp-pullRefresh.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | List View App template with pull refresh
5 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
24 |
25 |
26 |
67 |
70 |
71 |
72 |
73 |
100 |
101 |
102 |
--------------------------------------------------------------------------------
/template-LoginViewApp.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Login template
5 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
24 |
25 |
26 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 | Welcome
79 |
80 |
81 | This is space for welcome message
82 |
83 |
84 |
85 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 | This is space for login message
97 |
98 |
99 |
100 |
101 |
102 | Login
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 | This is space for register message
111 |
112 |
113 |
114 |
115 |
116 |
117 |
118 |
119 | Register
120 |
121 |
122 |
123 |
124 | This is App page after user has signed in...
125 |
126 |
127 |
128 |
129 |
130 |
131 |
--------------------------------------------------------------------------------
/data/male_user_icon.svg:
--------------------------------------------------------------------------------
1 |
2 |
62 |
--------------------------------------------------------------------------------
/app-FlipViewApp-Maps.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Maps
5 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
80 |
85 |
86 |
87 |
88 |
124 |
125 |
126 |
127 |
--------------------------------------------------------------------------------
/documentation/SideMenuApp.md:
--------------------------------------------------------------------------------
1 | SideMenu App
2 | -
3 |
4 | - [Left-Side Menu Template](#left-side-menu-template)
5 | - [Right-Side Menu Template](#right-side-menu-template)
6 | - [Both-Side Menu Template](#both-side-menu-template)
7 | - [Side Menu with header](#side-menu-with-header)
8 |
9 |
10 | This template can be used for simple app with side menu that can be opened to switch views, this template can be used for creating applications similar to __Youtube app__ or __Gmail app__. This template can also be used for chat app with right side menu that can be opened to select items, this template can be used for creating applications similar to __Facebook Chat app__.
11 |
12 | 
13 |
14 | Left-Side Menu Template
15 | -
16 | The left side menu can be created by adding `` element in the main `afui` DIV:
17 | ```
18 |
19 |
26 |
27 | ...
28 |
29 |
30 | ```
31 |
32 | → [__Demo__](http://htmlpreview.github.io/?https://raw.github.com/krisrak/appframework-templates/master/template-SideMenuApp-left.html) → [Code](https://github.com/krisrak/appframework-templates/blob/master/template-SideMenuApp-left.html)
33 |
34 | The left side menu can be toggled by using the method `$.ui.toggleLeftSideMenu()`
35 |
36 | The left side menu width can be set by using the method `$.ui.setLeftSideMenuWidth(WIDTH);`
37 |
38 | Right-Side Menu Template
39 | -
40 | The right side menu can be created by adding `` element in the main `afui` DIV:
41 | ```
42 |
43 |
50 |
51 | ...
52 |
53 |
54 | ```
55 | → [__Demo__](http://htmlpreview.github.io/?https://raw.github.com/krisrak/appframework-templates/master/template-SideMenuApp-right.html) → [Code](https://github.com/krisrak/appframework-templates/blob/master/template-SideMenuApp-right.html)
56 |
57 | The right side menu can be toggled by using the method `$.ui.toggleRightSideMenu()`
58 |
59 | The left side menu width can be set by using the method `$.ui.setRightSideMenuWidth(WIDTH);`
60 |
61 | Both-Side Menu Template
62 | -
63 | The left and right side menu can be created by adding `` and `` elements in the main `afui` DIV:
64 | ```
65 |
66 |
73 |
80 |
81 | ...
82 |
83 |
84 | ```
85 | → [__Demo__](http://htmlpreview.github.io/?https://raw.github.com/krisrak/appframework-templates/master/template-SideMenuApp-both.html) → [Code](https://github.com/krisrak/appframework-templates/blob/master/template-SideMenuApp-both.html)
86 |
87 | The left and right side menu can be toggled by using the methods `$.ui.toggleLeftSideMenu()` and `$.ui.toggleRightSideMenu()`
88 |
89 | The left and right side menu width can be set by using the methods `$.ui.setLeftSideMenuWidth(WIDTH);` and `$.ui.setRightSideMenuWidth(WIDTH);`
90 |
91 | Side Menu with header
92 | -
93 | A header similar to the header in main pages can be created in Side Menu by setting `title` attribute. This will created a header in side menu and add the value of `title` attribute as the title:
94 | ```
95 |
98 |
99 |
102 | ```
103 | 
104 |
105 | If you want to create the Side Menu header with custom buttons, then you can create a header manually like this:
106 | ```
107 |
113 | ```
114 | 
115 |
116 |
117 | Documentation
118 | -
119 | Full documentation for AFUI are below, it explains all styled list in AFUI:
120 | - [Side Menu](http://app-framework-software.intel.com/documentation.php#afui/afui_side)
121 | - [Full Documentation](http://app-framework-software.intel.com/documentation.php#afui/afui_about)
122 |
--------------------------------------------------------------------------------
/appframework/plugins/af.actionsheet.js:
--------------------------------------------------------------------------------
1 | /**
2 | * af.actionsheet - an actionsheet for html5 mobile apps
3 | * Copyright 2012 - 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 | /* global af*/
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() {
49 | var actionsheet = function(elID, opts) {
50 | if (typeof elID === "string" || elID instanceof String) {
51 | this.el = document.getElementById(elID);
52 | } else {
53 | this.el = elID;
54 | }
55 | if (!this.el) {
56 | window.alert("Could not find element for actionsheet " + elID);
57 | return;
58 | }
59 |
60 | if (this instanceof actionsheet) {
61 | if (typeof(opts) === "object") {
62 | for (var j in opts) {
63 | this[j] = opts[j];
64 | }
65 | }
66 | } else {
67 | return new actionsheet(elID, opts);
68 | }
69 |
70 | // try {
71 | var that = this;
72 | var markStart = "";
73 | var markEnd = "";
74 | var markup;
75 | var noop=function(){};
76 | if (typeof opts === "string") {
77 | markup = $(markStart + opts + "Cancel" + markEnd);
78 | } else if (typeof opts === "object") {
79 | markup = $(markStart + markEnd);
80 | var container = $(markup.children().get(0));
81 | opts.push({
82 | text: "Cancel",
83 | cssClasses: "cancel"
84 | });
85 | for (var i = 0; i < opts.length; i++) {
86 | var item = $("" + (opts[i].text || "TEXT NOT ENTERED") + "");
87 | item[0].onclick = (opts[i].handler || noop);
88 | if (opts[i].cssClasses && opts[i].cssClasses.length > 0)
89 | item.addClass(opts[i].cssClasses);
90 | container.append(item);
91 | }
92 | }
93 | $(elID).find("#af_actionsheet").remove();
94 | $(elID).find("#af_action_mask").remove();
95 | $(elID).append(markup);
96 |
97 | markup.vendorCss("Transition", "all 0ms");
98 | markup.cssTranslate("0,0");
99 | markup.css("top", window.innerHeight + "px");
100 | this.el.style.overflow = "hidden";
101 | markup.on("click", "a", function() {
102 | that.hideSheet();
103 | return false;
104 | });
105 | this.activeSheet = markup;
106 | $(elID).append("");
107 | setTimeout(function() {
108 | markup.vendorCss("Transition", "all 300ms");
109 | markup.cssTranslate("0," + (-(markup.height())) + "px");
110 | }, 10);
111 | $("#af_action_mask").bind("touchstart touchmove touchend click",function(e){
112 | e.preventDefault();
113 | e.stopPropagation();
114 | });
115 |
116 | };
117 | actionsheet.prototype = {
118 | activeSheet: null,
119 | hideSheet: function() {
120 | var that = this;
121 | this.activeSheet.off("click", "a", function() {
122 | that.hideSheet();
123 | });
124 | $(this.el).find("#af_action_mask").unbind("click").remove();
125 | this.activeSheet.vendorCss("Transition", "all 0ms");
126 | var markup = this.activeSheet;
127 | var theEl = this.el;
128 | setTimeout(function() {
129 | markup.vendorCss("Transition", "all 300ms");
130 | markup.cssTranslate("0,0px");
131 | setTimeout(function() {
132 | markup.remove();
133 | markup = null;
134 | theEl.style.overflow = "none";
135 | }, 500);
136 | }, 10);
137 | }
138 | };
139 | return actionsheet;
140 | })();
141 | })(af);
142 |
--------------------------------------------------------------------------------
/appframework/plugins/af.slidemenu.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Slide menu plugin for App Framework UI
3 | * @copyright Intel
4 | * simply include this plugin to allow sliding of your app to reveal the left and right hand menus.
5 | */
6 |
7 | /* global af*/
8 | /* global numOnly*/
9 | (function($) {
10 | "use strict";
11 | var startX, startY, dx, dy,
12 | checking = false,
13 | doMenu = true,
14 | showHide = false;
15 | $.ui.slideSideMenu = true;
16 | $.ui.fixedSideMenuWidth = 20000; //By default, we want it to always be revealed
17 | var isAside=false;
18 | var keepOpen=false;
19 |
20 | $.ui.ready(function() {
21 |
22 | if ($.os.ie) return; //ie has the menu at the bottom
23 | var afui=$("#afui").get(0);
24 | var elems = $("#content, #header, #navbar");
25 | var max = 0;
26 | var slideOver = max/3;
27 | var transTime = $.ui.transitionTime;
28 | var openState=0;
29 | var showHideThresh=false;
30 | var $menu = $.query("#menu");
31 | var $asideMenu = $.query("#aside_menu");
32 | var menuWidth = $menu.width();
33 | var asideWidth = $asideMenu.width();
34 | var inputElements = ["input", "select", "textarea"];
35 | var tracking=false;
36 | var hasMoved=false;
37 | afui.addEventListener("touchstart", function(e) {
38 | openState=0;
39 | if (!$.ui.isSideMenuEnabled() && !$.ui.isAsideMenuEnabled()) return true;
40 | if(e.touches.length>1) return;
41 | var tagName=e.target.tagName.toLowerCase();
42 | if(tagName&&inputElements.indexOf(tagName) !== -1) return;
43 |
44 | tracking=true;
45 | menuWidth = $menu.width();
46 | asideWidth = $asideMenu.width();
47 | startX = e.touches[0].pageX;
48 | startY = e.touches[0].pageY;
49 |
50 | checking = false;
51 | doMenu=false;
52 | keepOpen=false;
53 | isAside=false;
54 | if (window.innerWidth >= $.ui.fixedSideMenuWidth){
55 | doMenu = false;
56 | keepOpen=true;
57 | }
58 | else
59 | doMenu = true;
60 |
61 | var sidePos=$.ui.getSideMenuPosition();
62 | if(sidePos>0){
63 | openState=1;
64 | max = menuWidth;
65 | } else if(sidePos<0){
66 | openState=2;
67 | max = asideWidth;
68 | }
69 | },true);
70 |
71 | afui.addEventListener("touchmove", function(e) {
72 |
73 | if(e.touches.length>1||!tracking) return;
74 | if (!$.ui.isSideMenuEnabled() && !$.ui.isAsideMenuEnabled()) return true;
75 | if (!$.ui.slideSideMenu||keepOpen) return true;
76 |
77 | dx = e.touches[0].pageX;
78 | dy = e.touches[0].pageY;
79 |
80 | //splitview stuff
81 | if(hasMoved){
82 | e.preventDefault();
83 | e.stopPropagation();
84 | }
85 |
86 | if($.ui.splitview&&window.innerWidth>=parseInt($.ui.handheldMinWidth,10)&& (dx > startX)&&openState===0) return true;
87 | if (!$.ui.isSideMenuEnabled() && (dx > startX) && openState===0) return true;
88 | if (!$.ui.isAsideMenuEnabled() && (dx < startX) && openState===0) return true;
89 | if (Math.abs(dy - startY) > Math.abs(dx - startX)) return true;
90 |
91 | if (!checking) {
92 | checking = true;
93 | doMenu=false;
94 | return true;
95 | }
96 | else
97 | doMenu=true;
98 | var thePlace = (dx - startX);
99 | if(openState===0){
100 | if(thePlace<0){
101 | max = asideWidth;
102 | $asideMenu.show();
103 | if(!$.ui.splitview)
104 | $menu.hide();
105 | } else {
106 | max = menuWidth;
107 | $menu.show();
108 | $asideMenu.hide();
109 | }
110 | }
111 |
112 | if (Math.abs(thePlace) > max){
113 | return true;
114 | }
115 |
116 | e.preventDefault();
117 | e.stopPropagation();
118 | slideOver=max/3;
119 | showHideThresh=Math.abs(thePlace)max)
125 | thePlace=max;
126 | } else if(openState===2){
127 | thePlace=(-1*max)+thePlace;
128 | showHideThresh=Math.abs(thePlace)
2 |
74 |
--------------------------------------------------------------------------------
/appframework/plugins/af.desktopBrowsers.js:
--------------------------------------------------------------------------------
1 | //desktopBrowsers contributed by Carlos Ouro @ Badoo
2 | //translates desktop browsers events to touch events and prevents defaults
3 | //It can be used independently in other apps but it is required for using the touchLayer in the desktop
4 | /* global af*/
5 | (function ($) {
6 | "use strict";
7 | var cancelClickMove = false;
8 | var preventAll = function (e) {
9 | e.preventDefault();
10 | e.stopPropagation();
11 | };
12 |
13 | var redirectMouseToTouch = function (type, originalEvent, newTarget) {
14 |
15 | var theTarget = newTarget ? newTarget : originalEvent.target;
16 |
17 | //stop propagation, and remove default behavior for everything but INPUT, TEXTAREA & SELECT fields
18 | if (theTarget.tagName.toUpperCase().indexOf("SELECT") === -1 &&
19 | theTarget.tagName.toUpperCase().indexOf("TEXTAREA") === -1 &&
20 | theTarget.tagName.toUpperCase().indexOf("INPUT") === -1) //SELECT, TEXTAREA & INPUT
21 | {
22 | preventAll(originalEvent);
23 | }
24 |
25 | var touchevt = document.createEvent("MouseEvent");
26 |
27 | touchevt.initEvent(type, true, true);
28 | touchevt.initMouseEvent(type, true, true, window, originalEvent.detail, originalEvent.screenX, originalEvent.screenY, originalEvent.clientX, originalEvent.clientY, originalEvent.ctrlKey, originalEvent.shiftKey, originalEvent.altKey, originalEvent.metaKey, originalEvent.button, originalEvent.relatedTarget);
29 | if (type !== "touchend") {
30 | touchevt.touches = [];
31 | touchevt.touches[0] = {};
32 | touchevt.touches[0].pageX = originalEvent.pageX;
33 | touchevt.touches[0].pageY = originalEvent.pageY;
34 | //target
35 | touchevt.touches[0].target = theTarget;
36 | touchevt.changedTouches = touchevt.touches;
37 | touchevt.targetTouches = touchevt.touches;
38 | }
39 | //target
40 |
41 | touchevt.mouseToTouch = true;
42 | if ($.os.ie) {
43 | //handle inline event handlers for target and parents (for bubbling)
44 | var elem = originalEvent.target;
45 | while (elem !== null) {
46 | if (elem.hasAttribute("on" + type)) {
47 | eval(elem.getAttribute("on" + type));
48 | }
49 | elem = elem.parentElement;
50 | }
51 | }
52 | theTarget.dispatchEvent(touchevt);
53 | };
54 |
55 | var mouseDown = false,
56 | lastTarget = null,
57 | prevX=0,
58 | prevY=0;
59 | if (!window.navigator.msPointerEnabled) {
60 |
61 | document.addEventListener("mousedown", function (e) {
62 | mouseDown = true;
63 | lastTarget = e.target;
64 | if (e.target.nodeName.toLowerCase() === "a" && e.target.href.toLowerCase() === "javascript:;")
65 | e.target.href = "#";
66 | redirectMouseToTouch("touchstart", e);
67 | cancelClickMove = false;
68 | prevX=e.clientX;
69 | prevY=e.clientY;
70 | }, true);
71 |
72 | document.addEventListener("mouseup", function (e) {
73 | if (!mouseDown) return;
74 | redirectMouseToTouch("touchend", e, lastTarget); //bind it to initial mousedown target
75 | lastTarget = null;
76 | mouseDown = false;
77 | }, true);
78 |
79 | document.addEventListener("mousemove", function (e) {
80 | if(e.clientX===prevX&&e.clientY===prevY) return;
81 | if (!mouseDown) return;
82 | redirectMouseToTouch("touchmove", e, lastTarget);
83 | e.preventDefault();
84 |
85 | cancelClickMove = true;
86 | }, true);
87 | } else { //Win8
88 | var skipMove=false;
89 | document.addEventListener("MSPointerDown", function (e) {
90 |
91 | mouseDown = true;
92 | skipMove=true;
93 | lastTarget = e.target;
94 | if (e.target.nodeName.toLowerCase() === "a" && e.target.href.toLowerCase() === "javascript:;")
95 | e.target.href = "";
96 | redirectMouseToTouch("touchstart", e);
97 | cancelClickMove = false;
98 | prevX=e.clientX;
99 | prevY=e.clientY;
100 | // e.preventDefault();e.stopPropagation();
101 | }, true);
102 |
103 | document.addEventListener("MSPointerUp", function (e) {
104 | if (!mouseDown) return;
105 | redirectMouseToTouch("touchend", e, lastTarget); //bind it to initial mousedown target
106 | lastTarget = null;
107 | mouseDown = false;
108 | // e.preventDefault();e.stopPropagation();
109 | }, true);
110 |
111 | document.addEventListener("MSPointerMove", function (e) {
112 | if(skipMove){
113 | skipMove=false;
114 | return;
115 | }
116 | if(e.clientX===prevX&&e.clientY===prevY) return;
117 | if (!mouseDown) return;
118 | redirectMouseToTouch("touchmove", e, lastTarget);
119 | e.preventDefault();
120 | //e.stopPropagation();
121 |
122 | cancelClickMove = true;
123 |
124 | }, true);
125 | }
126 |
127 |
128 | //prevent all mouse events which dont exist on touch devices
129 | document.addEventListener("drag", preventAll, true);
130 | document.addEventListener("dragstart", preventAll, true);
131 | document.addEventListener("dragenter", preventAll, true);
132 | document.addEventListener("dragover", preventAll, true);
133 | document.addEventListener("dragleave", preventAll, true);
134 | document.addEventListener("dragend", preventAll, true);
135 | document.addEventListener("drop", preventAll, true);
136 | //Allow selection of input elements
137 | document.addEventListener("selectstart", function(e){
138 | var theTarget = e.target;
139 | if (theTarget.tagName.toUpperCase().indexOf("SELECT") === -1 &&
140 | theTarget.tagName.toUpperCase().indexOf("TEXTAREA") === -1 &&
141 | theTarget.tagName.toUpperCase().indexOf("INPUT") === -1) //SELECT, TEXTAREA & INPUT
142 | {
143 | preventAll(e);
144 | }
145 | }, true);
146 | document.addEventListener("click", function (e) {
147 | if (!e.mouseToTouch && e.target === lastTarget) {
148 | preventAll(e);
149 | }
150 | if (cancelClickMove) {
151 | preventAll(e);
152 | cancelClickMove = false;
153 | }
154 | }, true);
155 |
156 |
157 | window.addEventListener("resize", function () {
158 | var touchevt = document.createEvent("Event");
159 | touchevt.initEvent("orientationchange", true, true);
160 | document.dispatchEvent(touchevt);
161 | }, false);
162 |
163 | })(af);
164 |
--------------------------------------------------------------------------------
/appframework/plugins/af.8tiles.js:
--------------------------------------------------------------------------------
1 | /**
2 | * af.8tiles - Provides a WP8 theme and handles showing the menu
3 | * Copyright 2012 - Intel
4 | * This plugin is meant to be used inside App Framework UI
5 | */
6 | /* global af*/
7 |
8 | (function($) {
9 | "use strict";
10 |
11 | if (!$) {
12 | throw "This plugin requires AFUi";
13 | }
14 |
15 | function wire8Tiles() {
16 | $.ui.isWin8 = true;
17 | if (!$.os.ie) return;
18 | if (!$.ui.isSideMenuEnabled()) return;
19 |
20 | $.ui.ready(function() {
21 |
22 | if(window.innerWidth>$.ui.handheldMinWidth) return true;
23 |
24 | if ($.ui.slideSideMenu) $.ui.slideSideMenu = false;
25 | //we need to make sure the menu button shows up in the bottom navbar
26 | $.query("#afui #navbar footer").append("•••");
27 | var tmpAnchors = $.query("#afui #navbar").find("a").not(".button");
28 | if (tmpAnchors.length > 0) {
29 | tmpAnchors.data("ignore-pressed", "true").data("resetHistory", "true");
30 | var width = parseFloat(100 / tmpAnchors.length);
31 | tmpAnchors.css("width", width + "%");
32 | }
33 | var oldUpdate = $.ui.updateNavbarElements;
34 | $.ui.updateNavbarElements = function() {
35 | oldUpdate.apply($.ui, arguments);
36 | if ($.query("#afui #navbar #metroMenu").length === 1) return;
37 | $.query("#afui #navbar footer").append("•••");
38 | };
39 | $.ui.isSideMenuOn = function() {
40 |
41 | var menu = parseInt($.getCssMatrix($("#navbar")).f,10) < 0 ? true : false;
42 | return this.isSideMenuEnabled() && menu;
43 | };
44 | $.ui.toggleRightSideMenu=function(force,callback,time) {
45 | if ((!this.isAsideMenuEnabled()) || this.togglingAsideMenu) return;
46 | var aside=true;
47 | if(!aside&&!this.isSideMenuEnabled()) return;
48 | if(!aside&&$.ui.splitview) return;
49 | var that = this;
50 | var menu=$("#menu");
51 | var asideMenu= $.query("#aside_menu");
52 | var els = $.query("#content, #header, #navbar");
53 | var panelMask = $.query(".afui_panel_mask");
54 | time = time || this.transitionTime;
55 | var open = $("#aside_menu").css("display")==="block";
56 | var toX=aside?"-"+that.sideMenuWidth:that.sideMenuWidth;
57 | // add panel mask to block when side menu is open for phone devices
58 | if(panelMask.length === 0 && window.innerWidth < $.ui.handheldMinWidth){
59 | els.append("");
60 | panelMask = $.query(".afui_panel_mask");
61 | $(".afui_panel_mask").bind("click", function(){
62 | $.ui.toggleSideMenu(false, null, null, aside);
63 | });
64 | }
65 | //Here we need to check if we are toggling the left to right, or right to left
66 | var menuPos=this.getSideMenuPosition();
67 | if(open&&!aside&&menuPos<0)
68 | open=false;
69 | else if(open&&aside&&menuPos>0)
70 | open=false;
71 |
72 |
73 | if (force === 2 || (!open && ((force !== undefined && force !== false) || force === undefined))) {
74 | this.togglingSideMenu = true;
75 | if(!aside)
76 | menu.show();
77 | else
78 | asideMenu.show();
79 | that.css3animate(els, {
80 | x: toX,
81 | time: time,
82 | complete: function(canceled) {
83 | that.togglingSideMenu = false;
84 | els.vendorCss("Transition", "");
85 | if (callback) callback(canceled);
86 | if(panelMask.length !== 0 && window.innerWidth < $.ui.handheldMinWidth){
87 | panelMask.show();
88 | }
89 | }
90 | });
91 |
92 | } else if (force === undefined || (force !== undefined && force === false)) {
93 | this.togglingSideMenu = true;
94 | that.css3animate(els, {
95 | x: "0px",
96 | time: time,
97 | complete: function(canceled) {
98 | // els.removeClass("on");
99 | els.vendorCss("Transition", "");
100 | els.vendorCss("Transform", "");
101 | that.togglingSideMenu = false;
102 | if (callback) callback(canceled);
103 | if(!$.ui.splitview)
104 | menu.hide();
105 | asideMenu.hide();
106 | if(panelMask.length !== 0 && window.innerWidth < $.ui.handheldMinWidth){
107 | panelMask.hide();
108 | }
109 | }
110 | });
111 | }
112 | };
113 | $.ui.toggleLeftSideMenu = function(force, callback) {
114 | if (!this.isSideMenuEnabled() || this.togglingSideMenu) return;
115 | this.togglingSideMenu = true;
116 | var that = this;
117 | var menu = $.query("#menu");
118 | var els = $.query("#navbar");
119 | var open = this.isSideMenuOn();
120 |
121 | if (force === 2 || (!open && ((force !== undefined && force !== false) || force === undefined))) {
122 | menu.show();
123 |
124 | that.css3animate(els, {
125 | y: "-150px",
126 | time: $.ui.transitionTime,
127 | complete: function() {
128 | that.togglingSideMenu = false;
129 |
130 | if (callback) callback(true);
131 |
132 | }
133 | });
134 | that.css3animate(menu, {
135 | y: "0px",
136 | time: $.ui.transitionTime
137 | });
138 |
139 | } else if (force === undefined || (force !== undefined && force === false)) {
140 |
141 | that.css3animate(els, {
142 | y: "0",
143 | time: $.ui.transitionTime,
144 | complete: function() {
145 | that.togglingSideMenu = false;
146 | if (callback) callback(true);
147 | menu.hide();
148 | }
149 | });
150 | that.css3animate(menu, {
151 | y: "150px",
152 | time: $.ui.transitionTime
153 | });
154 | }
155 | };
156 | });
157 | }
158 |
159 | if (!$.ui) {
160 | $(document).ready(function() {
161 | wire8Tiles();
162 | });
163 | } else {
164 | $.ui.ready(function(){
165 | wire8Tiles();
166 | });
167 | }
168 | })(af);
169 |
--------------------------------------------------------------------------------
/documentation/ListViewApp.md:
--------------------------------------------------------------------------------
1 | ListViewApp template
2 | -
3 |
4 | - [ListView with simple list](#listview-with-simple-list)
5 | - [ListView with custom list](#listview-with-custom-list)
6 | - [ListView with inset style](#listview-with-inset-style)
7 | - [ListView with icons in list](#listview-with-icons-in-list)
8 | - [ListView with pull-refresh](#listview-with-pull-refresh)
9 | - [Dynamically create ListView](#dynamically-create-listview)
10 |
11 | This template can be used for simple list view application that has a main view with scrollable list and detail view for each list item, this template can be used for creating applications similar to __Mail app__, __Messages app__ or __Twitter app__.
12 |
13 | → [__Demo__](http://htmlpreview.github.io/?https://raw.github.com/krisrak/appframework-templates/master/template-ListViewApp.html) → [Code](https://github.com/krisrak/appframework-templates/blob/master/template-ListViewApp.html)
14 |
15 | 
16 |
17 | ListView with simple list
18 | -
19 | The HTML for list view UI above looks like this:
20 | ```
21 |
28 | ```
29 | Each of the list item links to a detail view `.panel` which has an `id` specified in the `href` of each list item:
30 | ```
31 |
32 | This is detail view for Item 1
33 |
34 | ```
35 | by default the detail view opens with slide transition and a back button is created on the detail view, which will slide back to main list view when clicked.
36 |
37 | ListView with custom list
38 | -
39 | The list item can be customized to show image + text, similar to __Twitter__ or __Facebook__ apps which has an image on the left and some text next to it.
40 |
41 | The template below shows how the ListViewApp template can be customized to have an image and text within each list item.
42 |
43 | → [__Demo__](http://htmlpreview.github.io/?https://raw.github.com/krisrak/appframework-templates/master/template-ListViewApp-social.html) → [Code](https://github.com/krisrak/appframework-templates/blob/master/template-ListViewApp-social.html)
44 |
45 | ```
46 |
51 | ```
52 |
53 | ```
54 |
55 | -
56 |
57 |
58 | username1
Placeholder text for this list item 1.
59 |
60 |
61 |
62 | ```
63 |
64 | 
65 |
66 | ListView with inset style
67 | -
68 | Adding a `inset` class for the list will make the list appear like below:
69 |
70 | 
71 |
72 | ```
73 |
81 | ```
82 |
83 | ListView with icons in list
84 | -
85 | Adding a `icon` class and class for name of icon from [afui icons](https://github.com/krisrak/appframework-templates/blob/master/appframework/icons.css) for each list item will make the list appear like below:
86 |
87 | 
88 |
89 | ```
90 |
97 | ```
98 |
99 | ListView with pull-refresh
100 | -
101 | The `af.scroller.js` plugin included with the AFUI provides the functionality that allows you to update/refresh the listview with new content by pulling the listview down and releasing it. The `addPullToRefresh()` method of `$().scroller()` plugin can be used to enable pull-refresh feature and the `refresh-release` event handler can be used to make AJAX call to get data and update list or prepend the existing listview with new content.
102 |
103 | The `af.scroller.js` plugin also provides the functionality that allows you to load new content when scroll reaches the end of listview. The `addInfinite()` method of `$().scroller()` plugin can be used to enable infinite scroller and the `infinite-scroll` event handler can be used to make an AJAX call to get new data and append to the listview.
104 |
105 | → [__Demo__](http://htmlpreview.github.io/?https://raw.github.com/krisrak/appframework-templates/master/template-ListViewApp-pullRefresh.html) → [Code](https://github.com/krisrak/appframework-templates/blob/master/template-ListViewApp-pullRefresh.html)
106 |
107 | 
108 |
109 | These features are helpful when creating social apps similar to Twitter, Facebook or Instagram that loads real-time data via a RESTful API and pagination is available for data feed.
110 |
111 | Dynamically create ListView
112 | -
113 | If you are loading data into a listview via a RESTful API, then the listview and corresponding detailviews will have to be created dynamically.
114 |
115 | This can be done in JavaScript by appending list items `` to the `` using `$().append()` and the detailview panels for each list item can be created using the `$.ui.addContentDiv()` method of AFUI.
116 |
117 | Below is the code to create list item and detailview dynamically in JavaScript:
118 |
119 | ```
120 | // get data for id, title and detail from API
121 | var id, title, detail;
122 |
123 | // create list item
124 | list_html += '- '+ title +'
';
125 | $(".list").append(list_html);
126 |
127 | // create detailview panel for the list item
128 | var panel_html = ''+detail+'
';
129 | $.ui.addContentDiv(id, panel_html, "Details");
130 | ```
131 | HTML code for UI:
132 | ```
133 |
134 |
135 |
136 |
137 |
138 | ```
139 | __Things to note:__
140 | - the list item `href` is assigned a unique value `id` from API, this same `id` is used for panel id
141 | - the UI HTML contains just a panel for list view and the list is left empty
142 | - `$.ui.addContentDiv()` will dynamically create a panel and takes parameters id, panel content and title for panel.
143 |
144 | This sample below gets data from API* and dynamically creates list items and uses `$.ui.addContentDiv()` to dynamically add panels with content from API. _(In this sample, API data from Flixter is saved locally and then used for demo)_
145 |
146 | → [Code](https://github.com/krisrak/appframework-templates/blob/master/app-ListViewApp-Movies.html)
147 |
148 | 
149 |
150 |
151 | Documentation
152 | -
153 | Full documentation for AFUI are below, it explains all styled list in AFUI:
154 | - [Styled List](http://app-framework-software.intel.com/documentation.php#afui/afui_lists)
155 | - [Full Documentation](http://app-framework-software.intel.com/documentation.php#afui/afui_about)
156 |
--------------------------------------------------------------------------------
/appframework/plugins/af.popup.js:
--------------------------------------------------------------------------------
1 | /**
2 | * af.popup - a popup/alert library for html5 mobile apps
3 | * copyright Indiepath 2011 - Tim Fisher
4 | * Modifications/enhancements by Intel for App Framework
5 | *
6 | */
7 | /* EXAMPLE
8 | $.query("body").popup({
9 | title:"Alert! Alert!",
10 | message:"This is a test of the emergency alert system!! Don't PANIC!",
11 | cancelText:"Cancel me",
12 | cancelCallback: function(){console.log("cancelled");},
13 | doneText:"I'm done!",
14 | doneCallback: function(){console.log("Done for!");},
15 | cancelOnly:false,
16 | doneClass:'button',
17 | cancelClass:'button',
18 | onShow:function(){console.log("showing popup");}
19 | autoCloseDone:true, //default is true will close the popup when done is clicked.
20 | suppressTitle:false //Do not show the title if set to true
21 | });
22 |
23 | You can programatically trigger a close by dispatching a "close" event to it.
24 |
25 | $.query("body").popup({title:'Alert',id:'myTestPopup'});
26 | $("#myTestPopup").trigger("close");
27 |
28 | */
29 | /* global af */
30 | (function ($) {
31 | "use strict";
32 | $.fn.popup = function (opts) {
33 | return new popup(this[0], opts);
34 | };
35 | var queue = [];
36 | var popup = (function () {
37 | var popup = function (containerEl, opts) {
38 |
39 | if (typeof containerEl === "string" || containerEl instanceof String) {
40 | this.container = document.getElementById(containerEl);
41 | } else {
42 | this.container = containerEl;
43 | }
44 | if (!this.container) {
45 | window.alert("Error finding container for popup " + containerEl);
46 | return;
47 | }
48 |
49 | try {
50 | if (typeof (opts) === "string" || typeof (opts) === "number")
51 | opts = {
52 | message: opts,
53 | cancelOnly: "true",
54 | cancelText: "OK"
55 | };
56 | this.id = opts.id = opts.id || $.uuid(); //opts is passed by reference
57 | this.addCssClass = opts.addCssClass ? opts.addCssClass : "";
58 | this.suppressTitle = opts.suppressTitle || this.suppressTitle;
59 | this.title = opts.suppressTitle ? "" : (opts.title || "Alert");
60 | this.message = opts.message || "";
61 | this.cancelText = opts.cancelText || "Cancel";
62 | this.cancelCallback = opts.cancelCallback || function () {};
63 | this.cancelClass = opts.cancelClass || "button";
64 | this.doneText = opts.doneText || "Done";
65 | this.doneCallback = opts.doneCallback || function () {
66 | // no action by default
67 | };
68 | this.doneClass = opts.doneClass || "button";
69 | this.cancelOnly = opts.cancelOnly || false;
70 | this.onShow = opts.onShow || function () {};
71 | this.autoCloseDone = opts.autoCloseDone !== undefined ? opts.autoCloseDone : true;
72 |
73 | queue.push(this);
74 | if (queue.length === 1)
75 | this.show();
76 | } catch (e) {
77 | console.log("error adding popup " + e);
78 | }
79 |
80 | };
81 |
82 | popup.prototype = {
83 | id: null,
84 | addCssClass: null,
85 | title: null,
86 | message: null,
87 | cancelText: null,
88 | cancelCallback: null,
89 | cancelClass: null,
90 | doneText: null,
91 | doneCallback: null,
92 | doneClass: null,
93 | cancelOnly: false,
94 | onShow: null,
95 | autoCloseDone: true,
96 | suppressTitle: false,
97 | show: function () {
98 | var self = this;
99 | var markup = "";
108 |
109 | $(this.container).append($(markup));
110 | var $el = $.query("#" + this.id);
111 | $el.bind("close", function () {
112 | self.hide();
113 | });
114 |
115 | if (this.cancelOnly) {
116 | $el.find("A#action").hide();
117 | $el.find("A#cancel").addClass("center");
118 | }
119 | $el.find("A").each(function () {
120 | var button = $(this);
121 | button.bind("click", function (e) {
122 | if (button.attr("id") === "cancel") {
123 | self.cancelCallback.call(self.cancelCallback, self);
124 | self.hide();
125 | } else {
126 | self.doneCallback.call(self.doneCallback, self);
127 | if (self.autoCloseDone)
128 | self.hide();
129 | }
130 | e.preventDefault();
131 | });
132 | });
133 | self.positionPopup();
134 | $.blockUI(0.5);
135 |
136 | $el.bind("orientationchange", function () {
137 | self.positionPopup();
138 | });
139 |
140 | //force header/footer showing to fix CSS style bugs
141 | $el.find("header").show();
142 | $el.find("footer").show();
143 | setTimeout(function(){
144 | $el.removeClass("hidden");
145 | self.onShow(self);
146 | },50);
147 | },
148 |
149 | hide: function () {
150 | var self = this;
151 | $.query("#" + self.id).addClass("hidden");
152 | $.unblockUI();
153 | if(!$.os.ie&&!$.os.android){
154 | setTimeout(function () {
155 | self.remove();
156 | }, 250);
157 | }
158 | else
159 | self.remove();
160 | },
161 |
162 | remove: function () {
163 | var self = this;
164 | var $el = $.query("#" + self.id);
165 | $el.unbind("close");
166 | $el.find("BUTTON#action").unbind("click");
167 | $el.find("BUTTON#cancel").unbind("click");
168 | $el.unbind("orientationchange").remove();
169 | queue.splice(0, 1);
170 | if (queue.length > 0)
171 | queue[0].show();
172 | },
173 |
174 | positionPopup: function () {
175 | var popup = $.query("#" + this.id);
176 |
177 | popup.css("top", ((window.innerHeight / 2.5) + window.pageYOffset) - (popup[0].clientHeight / 2) + "px");
178 | popup.css("left", (window.innerWidth / 2) - (popup[0].clientWidth / 2) + "px");
179 | }
180 | };
181 |
182 | return popup;
183 | })();
184 | var uiBlocked = false;
185 | $.blockUI = function (opacity) {
186 | if (uiBlocked)
187 | return;
188 | opacity = opacity ? " style='opacity:" + opacity + ";'" : "";
189 | $.query("BODY").prepend($(""));
190 | $.query("BODY DIV#mask").bind("touchstart", function (e) {
191 | e.preventDefault();
192 | });
193 | $.query("BODY DIV#mask").bind("touchmove", function (e) {
194 | e.preventDefault();
195 | });
196 | uiBlocked = true;
197 | };
198 |
199 | $.unblockUI = function () {
200 | uiBlocked = false;
201 | $.query("BODY DIV#mask").unbind("touchstart");
202 | $.query("BODY DIV#mask").unbind("touchmove");
203 | $("BODY DIV#mask").remove();
204 | };
205 |
206 | })(af);
207 |
--------------------------------------------------------------------------------
/template-GridViewApp.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Grid View App template
5 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
24 |
25 |
26 |
34 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 | Title
63 |
64 |
65 |
66 | ![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
This is detail view for Item 1
97 |
98 |
99 |
100 | This is detail view for Item 2
101 |
102 |
103 |
104 | This is detail view for Item 3
105 |
106 |
107 |
108 | This is detail view for Item 4
109 |
110 |
111 |
112 | This is detail view for Item 5
113 |
114 |
115 |
116 | This is detail view for Item 6
117 |
118 |
119 |
120 | This is detail view for Item 7
121 |
122 |
123 |
124 | This is detail view for Item 8
125 |
126 |
127 |
128 | This is detail view for Item 9
129 |
130 |
131 |
132 | This is detail view for Item 10
133 |
134 |
135 |
136 | This is detail view for Item 11
137 |
138 |
139 |
140 | This is detail view for Item 12
141 |
142 |
143 |
144 | This is detail view for Item 13
145 |
146 |
147 |
148 | This is detail view for Item 14
149 |
150 |
151 |
152 | This is detail view for Item 15
153 |
154 |
155 |
156 | This is detail view for Item 16
157 |
158 |
159 |
160 | This is detail view for Item 17
161 |
162 |
163 |
164 | This is detail view for Item 18
165 |
166 |
167 |
168 | This is detail view for Item 19
169 |
170 |
171 |
172 | This is detail view for Item 20
173 |
174 |
175 |
176 | This is detail view for Item 11
177 |
178 |
179 |
180 | This is detail view for Item 12
181 |
182 |
183 |
184 | This is detail view for Item 13
185 |
186 |
187 |
188 | This is detail view for Item 14
189 |
190 |
191 |
192 |
193 |
194 |
--------------------------------------------------------------------------------
/appframework/plugins/af.selectBox.js:
--------------------------------------------------------------------------------
1 | /**
2 | * copyright: 2011 Intel
3 | * description: This script will replace all drop downs with friendly select controls. Users can still interact
4 | * with the old drop down box as normal with javascript, and this will be reflected
5 | */
6 |
7 | /* global af*/
8 | /* global numOnly*/
9 | (function($) {
10 | /*jshint camelcase: false,
11 | validthis:true
12 | */
13 | "use strict";
14 | function updateOption(prop, oldValue, newValue) {
15 | if (newValue === true) {
16 | if (!this.getAttribute("multiple"))
17 | $.selectBox.updateMaskValue(this.parentNode.id, this.text, this.value);
18 | this.parentNode.value = this.value;
19 | }
20 | return newValue;
21 | }
22 |
23 | function updateIndex(prop, oldValue, newValue) {
24 | if (this.options[newValue]) {
25 | if (!this.getAttribute("multiple"))
26 | $.selectBox.updateMaskValue(this.linker, this.options[newValue].value, this.options[newValue].text);
27 | this.value = this.options[newValue].value;
28 | }
29 | return newValue;
30 | }
31 |
32 | function destroy(e) {
33 | var el = e.target;
34 | $(el.linker).remove();
35 | delete el.linker;
36 | e.stopPropagation();
37 | }
38 | $.selectBox = {
39 | scroller: null,
40 | currLinker: null,
41 | getOldSelects: function(elID) {
42 | if (!$.os.android || $.os.androidICS) return;
43 | if (!$.fn.scroller) {
44 | window.alert("This library requires af.scroller");
45 | return;
46 | }
47 | var container = elID && document.getElementById(elID) ? document.getElementById(elID) : document;
48 | if (!container) {
49 | window.alert("Could not find container element for af.selectBox " + elID);
50 | return;
51 | }
52 | var sels = container.getElementsByTagName("select");
53 | var that = this;
54 | for (var i = 0; i < sels.length; i++) {
55 |
56 | var el = sels[i];
57 | el.style.display = "none";
58 | var fixer = $.create("div", {
59 | className: "afFakeSelect"
60 | });
61 | fixer.get(0).linker = sels[i];
62 | el.linker = fixer.get(0);
63 | fixer.insertAfter(sels[i]);
64 |
65 | el.watch("selectedIndex", updateIndex);
66 | for (var j = 0; j < el.options.length; j++) {
67 | el.options[j].watch("selected", updateOption);
68 | if (el.options[j].selected)
69 | fixer.html(el.options[j].text);
70 | }
71 | $(el).one("destroy", destroy);
72 | }
73 | that.createHtml();
74 | },
75 | updateDropdown: function(el) {
76 | if (!el) return;
77 | for (var j = 0; j < el.options.length; j++) {
78 | if (el.options[j].selected) el.linker.innerHTML = el.options[j].text;
79 | }
80 | el = null;
81 | },
82 | initDropDown: function(el) {
83 |
84 | if (el.disabled) return;
85 | if (!el || !el.options || el.options.length === 0) return;
86 | var foundInd = 0;
87 | var $scr = $("#afSelectBoxfix");
88 | $scr.html("
");
89 | var $list = $scr.find("ul");
90 | for (var j = 0; j < el.options.length; j++) {
91 | el.options[j].watch("selected", updateOption);
92 | var checked = (el.options[j].selected) ? "selected" : "";
93 | if (checked) foundInd = j + 1;
94 | var row = $.create("li", {
95 | html: el.options[j].text,
96 | className: checked
97 | });
98 | row.data("ind", j);
99 | $list.append(row);
100 | }
101 | $("#afModalMask").show();
102 | try {
103 | if (foundInd > 0 && el.getAttribute("multiple") !== "multiple") {
104 | var scrollToPos = 0;
105 | var scrollThreshold = numOnly($list.find("li").computedStyle("height"));
106 | var theHeight = numOnly($("#afSelectBoxContainer").computedStyle("height"));
107 | if (foundInd * scrollThreshold >= theHeight) scrollToPos = (foundInd - 1) * -scrollThreshold;
108 | this.scroller.scrollTo({
109 | x: 0,
110 | y: scrollToPos
111 | });
112 | }
113 | } catch (e) {
114 | console.log("error init dropdown" + e);
115 | }
116 |
117 | var selClose = $("#afSelectClose").css("display") === "block" ? numOnly($("#afSelectClose").height()) : 0;
118 | $("#afSelectWrapper").height((numOnly($("#afSelectBoxContainer").height()) - selClose) + "px");
119 |
120 | },
121 | updateMaskValue: function(linker, value, val2) {
122 |
123 | $(linker).html(val2);
124 | },
125 | setDropDownValue: function(el, value) {
126 |
127 | if (!el) return;
128 | var $el = $(el);
129 |
130 | value = parseInt(value, 10);
131 | if (!el.getAttribute("multiple")) {
132 | el.selectedIndex = value;
133 | $el.find("option").prop("selected", false);
134 | $el.find("option:nth-child(" + (value + 1) + ")").prop("selected", true);
135 | this.scroller.scrollTo({
136 | x: 0,
137 | y: 0
138 | });
139 | this.hideDropDown();
140 | } else {
141 | //multi select
142 |
143 | // var myEl = $el.find("option:nth-child(" + (value + 1) + ")").get(0);
144 | var myList = $("#afSelectBoxfix li:nth-child(" + (value + 1) + ")");
145 | if (myList.hasClass("selected")) {
146 | myList.removeClass("selected");
147 | // myEl.selected = false;
148 | } else {
149 | myList.addClass("selected");
150 | // myEl.selected = true;
151 | }
152 | }
153 | $(el).trigger("change");
154 | el = null;
155 | },
156 | hideDropDown: function() {
157 | $("#afModalMask").hide();
158 | $("#afSelectBoxfix").html("");
159 | },
160 | createHtml: function() {
161 | var that = this;
162 | if (document.getElementById("afSelectBoxfix")) {
163 | return;
164 | }
165 | $(document).ready(function() {
166 | $(document).on("click", ".afFakeSelect", function() {
167 | if (this.linker.disabled)
168 | return;
169 | that.currLinker = this;
170 |
171 | if (this.linker.getAttribute("multiple") === "multiple")
172 | $("#afSelectClose").show();
173 | else
174 | $("#afSelectClose").hide();
175 | that.initDropDown(this.linker);
176 |
177 | });
178 | var container = $.create("div", {
179 | id: "afSelectBoxContainer"
180 | });
181 | var modalDiv = $.create("div", {
182 | id: "afSelectBoxfix"
183 | });
184 | var modalWrapper = $.create("div", {
185 | id: "afSelectWrapper"
186 | });
187 | modalWrapper.css("position", "relative");
188 | modalWrapper.append(modalDiv);
189 | var closeDiv = $.create("div", {
190 | id: "afSelectClose",
191 | html: "Done Cancel"
192 | });
193 |
194 | var modalMask = $.create("div", {
195 | id:"afModalMask"
196 | });
197 |
198 | var $afui = $("#afui");
199 | container.prepend(closeDiv).append(modalWrapper);
200 | modalMask.append(container);
201 | if ($afui.length > 0) $afui.append(modalMask);
202 | else document.body.appendChild(modalMask.get(0));
203 | that.scroller = $.query("#afSelectBoxfix").scroller({
204 | scroller: false,
205 | verticalScroll: true,
206 | vScrollCSS: "afselectscrollBarV",
207 | hasParent:true
208 | });
209 |
210 | $("#afModalMask").on("click",function(e){
211 | var $e=$(e.target);
212 | if($e.closest("#afSelectBoxContainer").length === 0)
213 | that.hideDropDown();
214 | });
215 |
216 | $("#afSelectBoxfix").on("click", "li", function(e) {
217 | var $el = $(e.target);
218 | that.setDropDownValue(that.currLinker.linker, $el.data("ind"));
219 | });
220 | $("#afSelectBoxContainer").on("click", "a", function(e) {
221 | if (e.target.id === "afSelectCancel")
222 | return that.hideDropDown();
223 | var $sel = $(that.currLinker.linker);
224 | $sel.find("option").prop("selected", false);
225 |
226 | $("#afSelectBoxfix li").each(function() {
227 | var $el = $(this);
228 | if ($el.hasClass("selected")) {
229 | var ind = parseInt($el.data("ind"), 10);
230 | $sel.find("option:nth-child(" + (ind + 1) + ")").prop("selected", true);
231 | that.currLinker.innerHTML = $el.html();
232 | }
233 | });
234 |
235 | that.hideDropDown();
236 | e.stopPropagation();
237 | e.preventDefault();
238 | return false;
239 | });
240 |
241 | });
242 | }
243 | };
244 |
245 | //The following is based off Eli Grey's shim
246 | //https://gist.github.com/384583
247 | //We use HTMLElement to not cause problems with other objects
248 | if (!HTMLElement.prototype.watch) {
249 | HTMLElement.prototype.watch = function(prop, handler) {
250 | var oldval = this[prop],
251 | newval = oldval,
252 | getter = function() {
253 | return newval;
254 | },
255 | setter = function(val) {
256 | oldval = newval;
257 | newval = handler.call(this, prop, oldval, val);
258 | return newval;
259 | };
260 | if (delete this[prop]) { // can't watch constants
261 | if (HTMLElement.defineProperty) { // ECMAScript 5
262 | HTMLElement.defineProperty(this, prop, {
263 | get: getter,
264 | set: setter,
265 | enumerable: false,
266 | configurable: true
267 | });
268 | } else if (HTMLElement.prototype.__defineGetter__ && HTMLElement.prototype.__defineSetter__) { // legacy
269 | HTMLElement.prototype.__defineGetter__.call(this, prop, getter);
270 | HTMLElement.prototype.__defineSetter__.call(this, prop, setter);
271 | }
272 | }
273 | };
274 | }
275 | if (!HTMLElement.prototype.unwatch) {
276 | HTMLElement.prototype.unwatch = function(prop) {
277 | var val = this[prop];
278 | delete this[prop]; // remove accessors
279 | this[prop] = val;
280 | };
281 | }
282 | })(af);
283 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | HTML5 Mobile App UI templates
2 | =============================
3 |
4 | Below are basic HTML5 mobile app templates created using [Intel App Framework] (https://github.com/01org/appframework), which is a free and open source Javascript framework targeted at HTML5 Mobile browsers with a blazingly fast query selector library and Mobile UI framework for creating app with native like UI and performance.
5 |
6 | You can use Intel AppFramework to create __mobile web apps__ or create __hybrid apps__ using tools like [_Intel XDK_](http://xdk-software.intel.com/) or _Adobe Phonegap build_ to build native packaged apps.
7 |
8 | AppFramework has UI themes which look and feel similar to _iPhone_, _iPad_, _Android_, _Windows Phone_, _Blackberry 10_ and _Tizen_, the UI theme will be automatically applied by default when opened on these devices. Notice the screenshots below, the app code is same but the look and feel changes to match the device's native style.
9 |
10 | __Below are 8 basic templates to get you started with your mobile app:__
11 |
12 | - [SingleView App](#singleview-app)
13 | - [ModalView App](#modalview-app)
14 | - [FlipView App](#flipview-app)
15 | - [ListView App](#listview-app)
16 | - [GridView App](#gridview-app)
17 | - [SideMenu App](#sidemenu-app)
18 | - [TabView App](#tabview-app)
19 | - [CarouselView App](#carouselview-app)
20 | - [LoginView App](#loginview-app)
21 |
22 | These template demos are meant for mobile devices, check the demos on phone/tablet or resize the browser on computer to view, you can also use Intel XDK tool to import these template and view on different phone and tablet simulators.
23 |
24 | Template Demos
25 | --------------
26 |
27 | Try out these template demos on actual touch phone or tablet devices:
28 |
29 | | ↓ Basic | ↓ Custom → | |
30 | | --------------- | --- | --- |
31 | | [Single View App](http://htmlpreview.github.io/?https://raw.github.com/krisrak/appframework-templates/master/template-SingleViewApp.html) | [Single View App - custom header](http://htmlpreview.github.io/?https://raw.github.com/krisrak/appframework-templates/master/template-SingleViewApp-header.html) | | |
32 | | [Modal View App](http://htmlpreview.github.io/?https://raw.github.com/krisrak/appframework-templates/master/template-ModalViewApp.html) | [Modal View App - custom header](http://htmlpreview.github.io/?https://raw.github.com/krisrak/appframework-templates/master/template-ModalViewApp-custom.html) | | |
33 | | [Flip View App](http://htmlpreview.github.io/?https://raw.github.com/krisrak/appframework-templates/master/template-FlipViewApp.html) | | | |
34 | | [List View App](http://htmlpreview.github.io/?https://raw.github.com/krisrak/appframework-templates/master/template-ListViewApp.html) | [List View App - pull to refresh](http://htmlpreview.github.io/?https://raw.github.com/krisrak/appframework-templates/master/template-ListViewApp-pullToRefresh.html) | [List View App - social](http://htmlpreview.github.io/?https://raw.github.com/krisrak/appframework-templates/master/template-ListViewApp-social.html) | |
35 | | [Grid View App](http://htmlpreview.github.io/?https://raw.github.com/krisrak/appframework-templates/master/template-GridViewApp.html) | | | |
36 | | [Side Menu App - left](http://htmlpreview.github.io/?https://raw.github.com/krisrak/appframework-templates/master/template-SideMenuApp-left.html) | [Side Menu App - right](http://htmlpreview.github.io/?https://raw.github.com/krisrak/appframework-templates/master/template-SideMenuApp-right.html) | [Side Menu App - left & right](http://htmlpreview.github.io/?https://raw.github.com/krisrak/appframework-templates/master/template-SideMenuApp-both.html) |
37 | | [Tab View App](http://htmlpreview.github.io/?https://raw.github.com/krisrak/appframework-templates/master/template-TabViewApp.html) | [Tab View App - bottom button tabs](http://htmlpreview.github.io/?https://raw.github.com/krisrak/appframework-templates/master/template-TabViewApp-bottomButtonTabs.html) | [Tab View App - top button tabs](http://htmlpreview.github.io/?https://raw.github.com/krisrak/appframework-templates/master/template-TabViewApp-topButtonTabs.html) | |
38 | | [Carousel View App](http://htmlpreview.github.io/?https://raw.github.com/krisrak/appframework-templates/master/template-CarouselViewApp.html) | | | |
39 | | [Login View App](http://htmlpreview.github.io/?https://raw.github.com/krisrak/appframework-templates/master/template-LoginViewApp.html) | | | |
40 |
41 | _Feel free to send pull-requests for any bugs or enhancements for these templates_
42 |
43 | SingleView App
44 | -
45 | This template can be used for simple application that has just one view, this template can be used for creating applications similar to __Flash light__ app or __Calculator app__.
46 |
47 | → [__Demo__](http://htmlpreview.github.io/?https://raw.github.com/krisrak/appframework-templates/master/template-SingleViewApp.html) → [Code](https://github.com/krisrak/appframework-templates/blob/master/template-SingleViewApp.html) → [Documentation](https://github.com/krisrak/appframework-templates/blob/master/documentation/SingleViewApp.md)
48 |
49 | 
50 |
51 | ModalView App
52 | -
53 | This template can be used for simple utility application that has a main view and a settings view that slides up, this template can be used for creating applications similar to __Maps app__, __Weather app__ or __Clock app__.
54 |
55 | → [__Demo__](http://htmlpreview.github.io/?https://raw.github.com/krisrak/appframework-templates/master/template-ModalViewApp.html) → [Code](https://github.com/krisrak/appframework-templates/blob/master/template-ModalViewApp.html)
56 |
57 | 
58 |
59 | FlipView App
60 | -
61 | This template can be used for simple utility application that has a main view and a settings view that flips around, this template can be used for creating applications similar to __Maps app__, __Weather app__ or __Clock app__.
62 |
63 | → [__Demo__](http://htmlpreview.github.io/?https://raw.github.com/krisrak/appframework-templates/master/template-FlipViewApp.html) → [Code](https://github.com/krisrak/appframework-templates/blob/master/template-FlipViewApp.html)
64 |
65 | 
66 |
67 | ListView App
68 | -
69 | This template can be used for simple list view application that has a main view with scrollable list and detail view for each list item, this template can be used for creating applications similar to __Mail app__, __Messages app__ or __Twitter app__.
70 |
71 | → [__Demo__](http://htmlpreview.github.io/?https://raw.github.com/krisrak/appframework-templates/master/template-ListViewApp.html) → [Code](https://github.com/krisrak/appframework-templates/blob/master/template-ListViewApp.html) → [Documentation](https://github.com/krisrak/appframework-templates/blob/master/documentation/ListViewApp.md)
72 |
73 | 
74 |
75 | GridView App
76 | -
77 | This template can be used for photo app with grid view that will open detail view, this template can be used for creating applications similar to __Photo app__ or __Instagram app__.
78 |
79 | → [__Demo__](http://htmlpreview.github.io/?https://raw.github.com/krisrak/appframework-templates/master/template-GridViewApp.html) → [Code](https://github.com/krisrak/appframework-templates/blob/master/template-GridViewApp.html)
80 |
81 | 
82 |
83 | SideMenu App
84 | -
85 | This template can be used for simple app with side menu that can be opened to switch views, this template can be used for creating applications similar to __Youtube app__ or __Gmail app__.
86 |
87 | → [__Demo__](http://htmlpreview.github.io/?https://raw.github.com/krisrak/appframework-templates/master/template-SideMenuApp-left.html) → [Code](https://github.com/krisrak/appframework-templates/blob/master/template-SideMenuApp-left.html) → [Documentation](https://github.com/krisrak/appframework-templates/blob/master/documentation/SideMenuApp.md)
88 |
89 | 
90 |
91 | TabView App
92 | -
93 | This template can be used for simple tab view application that has tabs at the bottom to switch views, this template can be used for creating applications similar to __Phone app__, __Facebook app__ or __Instagram app__.
94 |
95 | → [__Demo__](http://htmlpreview.github.io/?https://raw.github.com/krisrak/appframework-templates/master/template-TabViewApp.html) → [Code](https://github.com/krisrak/appframework-templates/blob/master/template-TabViewApp.html)
96 |
97 | 
98 |
99 | _(UI theme - Same code on Android vs Windows Phone)_
100 |
101 | CarouselView App
102 | -
103 | This template can be used for simple tab view application that has a carousel in the main view to swipe, this template can be used for creating applications similar to __News app__ or __Stock app__.
104 |
105 | → [__Demo__](http://htmlpreview.github.io/?https://raw.github.com/krisrak/appframework-templates/master/template-CarouselViewApp.html) → [Code](https://github.com/krisrak/appframework-templates/blob/master/template-CarouselViewApp.html)
106 |
107 | 
108 |
109 | LoginView App
110 | -
111 | This template can be used for creating an app that requires login and registration before the app can be started, it shows option for login/register and takes you to login form view and register form view, this template can be used for creating applications similar to __Facebook app__ or __Twitter app__.
112 |
113 | → [__Demo__](http://htmlpreview.github.io/?https://raw.github.com/krisrak/appframework-templates/master/template-LoginViewApp.html) → [Code](https://github.com/krisrak/appframework-templates/blob/master/template-LoginViewApp.html)
114 |
115 | 
116 |
117 |
118 | Sample App created from templates
119 | =
120 |
121 | Below are examples of apps created using the above templates, the sample apps show how data sources can be used to populate the templates to create apps:
122 |
123 | Photo App (GridViewApp template)
124 | -
125 | This sample app is created from GridViewApp template and uses photo data from Instagram API to show photos in grid and larger photo when clicked on it. This sample gets data from API* and dynamically creates grids and uses `$.ui.addContentDiv()` to dynamically add panels with content from API. _(In this sample, API data from Instagram is saved locally and then used for demo)_
126 |
127 | → [Code](https://github.com/krisrak/appframework-templates/blob/master/app-GridViewApp-Photos.html)
128 |
129 | 
130 |
131 | Maps App (FlipViewApp template)
132 | -
133 | This sample app is created from FlipViewApp template and uses Google Maps API to show map in main view and has controls in settings view to toggle Google Map layers.
134 |
135 | → [__Demo__](http://htmlpreview.github.io/?https://raw.github.com/krisrak/appframework-templates/master/app-FlipViewApp-Maps.html) → [Code](https://github.com/krisrak/appframework-templates/blob/master/app-FlipViewApp-Maps.html)
136 |
137 | 
138 |
139 | Movies App (ListViewApp template)
140 | -
141 | This sample app is created from ListViewApp template and uses Flixter API data to show list of top movies and shows movie details when selected. This sample gets data from API* and dynamically creates list items and uses `$.ui.addContentDiv()` to dynamically add panels with content from API. _(In this sample, API data from Flixter is saved locally and then used for demo)_
142 |
143 | → [Code](https://github.com/krisrak/appframework-templates/blob/master/app-ListViewApp-Movies.html)
144 |
145 | 
146 |
147 |
148 | =
149 |
150 | _Screenshots from Intel XDK - HTML5 Development Tool which helps you to_ ___design, code, simulate, test, debug and build___ _hybrid apps for iPhone, iPad, Android, Windows Phone, Tizen and more devices. [more information on Intel XDK](http://xdk-software.intel.com/)_
151 |
--------------------------------------------------------------------------------
/appframework/icons.css:
--------------------------------------------------------------------------------
1 | /*! intel-appframework - v2.1.0 - 2014-04-07 */
2 |
3 | @font-face {
4 | font-family: 'IcoMoon';
5 | src: url(data:application/x-font-woff;charset=utf-8;base64,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) format('woff'),
6 | url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
7 | font-weight: normal;
8 | font-style: normal;
9 | }
10 | .icon:before {
11 | font-family:'IcoMoon';
12 | speak:none;
13 | font-style:normal;
14 | font-weight:normal !important;
15 | font-variant:normal;
16 | text-transform:none;
17 | line-height:1;
18 | color:inherit;
19 | position:relative;
20 | font-size:1em;
21 | left:-3px; top:2px;
22 | }
23 | li .icon:before {
24 | position:relative;
25 | width:24px; height:100%;
26 | top:2px;
27 | line-height:0 !important;
28 | margin-right:4px;
29 | }
30 |
31 | .icon.mini:before {
32 | font-size:.7em;
33 | }
34 | .icon.big:before {
35 | font-size:1.5em;
36 | }
37 | .icon.home:before {
38 | content: "\5a";
39 | }
40 | .icon.pencil:before {
41 | content: "\5b";
42 | }
43 | .icon.picture:before {
44 | content: "\5c";
45 | }
46 | .icon.camera:before {
47 | content: "\5d";
48 | }
49 | .icon.headset:before {
50 | content: "\5e";
51 | }
52 | .icon.paper:before {
53 | content: "\5f";
54 | }
55 | .icon.stack:before {
56 | content: "\61";
57 | }
58 | .icon.folder:before {
59 | content: "\60";
60 | }
61 | .icon.tag:before {
62 | content: "\62";
63 | }
64 | .icon.basket:before {
65 | content: "\63";
66 | }
67 | .icon.phone:before {
68 | content: "\64";
69 | }
70 | .icon.mail:before {
71 | content: "\65";
72 | }
73 | .icon.location:before {
74 | content: "\66";
75 | }
76 | .icon.clock:before {
77 | content: "\67";
78 | }
79 | .icon.calendar:before {
80 | content: "\68";
81 | }
82 | .icon.message:before {
83 | content: "\69";
84 | }
85 | .icon.chat:before {
86 | content: "\6a";
87 | }
88 | .icon.user:before {
89 | content: "\6b";
90 | }
91 | .icon.loading:before {
92 | content: "\6c";
93 | }
94 | .icon.refresh:before {
95 | content: "\6d";
96 | }
97 | .icon.magnifier:before {
98 | content: "\6e";
99 | }
100 | .icon.key:before {
101 | content: "\6f";
102 | }
103 | .icon.settings:before {
104 | content: "\70";
105 | }
106 | .icon.graph:before {
107 | content: "\71";
108 | }
109 | .icon.trash:before {
110 | content: "\72";
111 | }
112 | .icon.download:before {
113 | content: "\73";
114 | }
115 | .icon.upload:before {
116 | content: "\74";
117 | }
118 | .icon.star:before {
119 | content: "\75";
120 | }
121 | .icon.heart:before {
122 | content: "\76";
123 | }
124 | .icon.warning:before {
125 | content: "\77";
126 | }
127 | .icon.add:before {
128 | content: "\78";
129 | }
130 | .icon.remove:before {
131 | content: "\79";
132 | }
133 | .icon.question:before {
134 | content: "\7a";
135 | }
136 | .icon.info:before {
137 | content: "\7b";
138 | }
139 | .icon.error:before {
140 | content: "\7c";
141 | }
142 | .icon.check:before {
143 | content: "\7d";
144 | }
145 | .icon.minimize:before {
146 | content: "\7e";
147 | }
148 | .icon.close:before {
149 | content: "\e000";
150 | }
151 | .icon.up:before {
152 | content: "\e001";
153 | }
154 | .icon.right:before {
155 | content: "\e002";
156 | }
157 | .icon.down:before {
158 | content: "\e003";
159 | }
160 | .icon.left:before {
161 | content: "\e004";
162 | }
163 | .icon.html5:before {
164 | content: "\e005";
165 | }
166 | .icon.css:before {
167 | content: "\e006";
168 | }
169 | .icon.js:before {
170 | content: "\e007";
171 | }
172 | .icon.lamp:before {
173 | content: "\e008";
174 | }
175 | .icon.tools:before {
176 | content: "\e009";
177 | }
178 | .icon.new:before {
179 | content: "\e00a";
180 | }
181 | .icon.wifi:before {
182 | content: "\e00b";
183 | }
184 | .icon.mic:before {
185 | content: "\e00c";
186 | }
187 | .icon.database:before {
188 | content: "\e00d";
189 | }
190 | .icon.bug:before {
191 | content: "\e00e";
192 | }
193 | .icon.busy:before {
194 | content: "\e00f";
195 | }
196 | .icon.target:before {
197 | content: "\e010";
198 | }
199 | .icon.tv:before {
200 | content: "\e011";
201 | }
202 |
203 | .icon.cloud:before {
204 | content: "\e012";
205 | }
206 | .icon.pin:before {
207 | content: "\e013";
208 | }
--------------------------------------------------------------------------------
/appframework/plugins/af.carousel.js:
--------------------------------------------------------------------------------
1 | /**
2 | * af.web.carousel - a carousel library for App Framework apps
3 | * @copyright 2011 - Intel
4 | *
5 | */
6 | (function($) {
7 | var cache = [];
8 | var objId=function(obj){
9 | if(!obj.afmCarouselId) obj.afmCarouselId=$.uuid();
10 | return obj.afmCarouselId;
11 | }
12 | $.fn.carousel = function(opts) {
13 | var tmp, id;
14 | for (var i = 0; i < this.length; i++) {
15 | //cache system
16 | id = objId(this[i]);
17 | if(!cache[id]){
18 | tmp = new carousel(this[i], opts);
19 | cache[id] = tmp;
20 | } else {
21 | tmp = cache[id];
22 | }
23 | }
24 | return this.length == 1 ? tmp : this;
25 | };
26 |
27 | var carousel = (function() {
28 | var translateOpen =$.feat.cssTransformStart;
29 | var translateClose = $.feat.cssTransformEnd;
30 |
31 | var carousel = function(containerEl, opts) {
32 | if (typeof containerEl === "string" || containerEl instanceof String) {
33 | this.container = document.getElementById(containerEl);
34 | } else {
35 | this.container = containerEl;
36 | }
37 | if (!this.container) {
38 | alert("Error finding container for carousel " + containerEl);
39 | return;
40 | }
41 | if (this instanceof carousel) {
42 | for (var j in opts) {
43 | if (opts.hasOwnProperty(j)) {
44 | this[j] = opts[j];
45 | }
46 | }
47 | } else {
48 |
49 | return new carousel(containerEl, opts);
50 | }
51 |
52 |
53 | var that = this;
54 | af(this.container).bind('destroy', function(e){
55 | var id = that.container.afmCarouselId;
56 | //window event need to be cleaned up manually, remaining binds are automatically killed in the dom cleanup process
57 | window.removeEventListener("orientationchange", that.orientationHandler, false);
58 | if(cache[id]) delete cache[id];
59 | e.stopPropagation();
60 | });
61 |
62 | this.pagingDiv = this.pagingDiv ? document.getElementById(this.pagingDiv) : null;
63 |
64 |
65 | // initial setup
66 | this.container.style.overflow = "hidden";
67 | if (this.vertical) {
68 | this.horizontal = false;
69 | }
70 |
71 | var el = document.createElement("div");
72 | this.container.appendChild(el);
73 | var $el=$(el);
74 | var $container=$(this.container);
75 | var data = Array.prototype.slice.call(this.container.childNodes);
76 | while(data.length>0)
77 | {
78 | var myEl=data.splice(0,1);
79 | myEl=$container.find(myEl);
80 | if(myEl.get(0)==el)
81 | continue;
82 | $el.append(myEl.get(0));
83 | }
84 | if (this.horizontal) {
85 | el.style.display = "block";
86 | el.style['float']="left";
87 | }
88 | else {
89 | el.style.display = "block";
90 | }
91 |
92 | this.el = el;
93 | this.refreshItems();
94 | var afEl = af(el);
95 | afEl.bind('touchmove', function(e) {that.touchMove(e);});
96 | afEl.bind('touchend', function(e) {that.touchEnd(e);});
97 | afEl.bind('touchstart', function(e) {that.touchStart(e);});
98 | this.orientationHandler = function() {that.onMoveIndex(that.carouselIndex,0);};
99 | window.addEventListener("orientationchange", this.orientationHandler, false);
100 |
101 | };
102 |
103 | carousel.prototype = {
104 | wrap:true,
105 | startX: 0,
106 | startY: 0,
107 | dx: 0,
108 | dy: 0,
109 | glue: false,
110 | myDivWidth: 0,
111 | myDivHeight: 0,
112 | cssMoveStart: 0,
113 | childrenCount: 0,
114 | carouselIndex: 0,
115 | vertical: false,
116 | horizontal: true,
117 | el: null,
118 | movingElement: false,
119 | container: null,
120 | pagingDiv: null,
121 | pagingCssName: "carousel_paging",
122 | pagingCssNameSelected: "carousel_paging_selected",
123 | pagingFunction: null,
124 | lockMove:false,
125 | okToMove: false,
126 |
127 | // handle the moving function
128 | touchStart: function(e) {
129 | this.okToMove = false;
130 | this.myDivWidth = numOnly(this.container.clientWidth);
131 | this.myDivHeight = numOnly(this.container.clientHeight);
132 | this.lockMove=false;
133 | if (e.touches[0].target && e.touches[0].target.type !== undefined) {
134 | var tagname = e.touches[0].target.tagName.toLowerCase();
135 | if (tagname === "select" || tagname === "input" || tagname === "button") // stuff we need to allow
136 | {
137 | return;
138 | }
139 | }
140 | if (e.touches.length === 1) {
141 |
142 | this.movingElement = true;
143 | this.startY = e.touches[0].pageY;
144 | this.startX = e.touches[0].pageX;
145 | var cssMatrix=$.getCssMatrix(this.el);
146 |
147 | if (this.vertical) {
148 | try {
149 | this.cssMoveStart = numOnly(cssMatrix.f);
150 | } catch (ex1) {
151 | this.cssMoveStart = 0;
152 | }
153 | } else {
154 | try {
155 | this.cssMoveStart = numOnly(cssMatrix.e);
156 | } catch (ex1) {
157 | this.cssMoveStart = 0;
158 | }
159 | }
160 | }
161 | },
162 | touchMove: function(e) {
163 | if(!this.movingElement)
164 | return;
165 | if (e.touches.length > 1) {
166 | return this.touchEnd(e);
167 | }
168 |
169 | var rawDelta = {
170 | x: e.touches[0].pageX - this.startX,
171 | y: e.touches[0].pageY - this.startY
172 | };
173 |
174 | if (this.vertical) {
175 | var movePos = { x: 0, y: 0 };
176 | this.dy = e.touches[0].pageY - this.startY;
177 |
178 | this.dy += this.cssMoveStart;
179 | movePos.y = this.dy;
180 |
181 | e.preventDefault();
182 | //e.stopPropagation();
183 | } else {
184 | if ((!this.lockMove&&isHorizontalSwipe(rawDelta.x, rawDelta.y))||Math.abs(this.dx)>5) {
185 |
186 | var movePos = {x: 0,y: 0};
187 | this.dx = e.touches[0].pageX - this.startX;
188 | this.dx += this.cssMoveStart;
189 | e.preventDefault();
190 | // e.stopPropagation();
191 | movePos.x = this.dx;
192 | }
193 | else
194 | return this.lockMove=true;
195 | }
196 |
197 | var totalMoved = this.vertical ? ((this.dy % this.myDivHeight) / this.myDivHeight * 100) * -1 : ((this.dx % this.myDivWidth) / this.myDivWidth * 100) * -1; // get a percentage of movement.
198 |
199 | if (!this.okToMove) {
200 | oldStateOkToMove= this.okToMove;
201 | this.okToMove = this.glue ? Math.abs(totalMoved) > this.glue && Math.abs(totalMoved) < (100 - this.glue) : true;
202 | if (this.okToMove && !oldStateOkToMove) {
203 | $.trigger(this,"movestart",[this.el]);
204 | }
205 | }
206 |
207 | if (this.okToMove && movePos)
208 | this.moveCSS3(this.el, movePos);
209 |
210 | },
211 | touchEnd: function(e) {
212 | if (!this.movingElement) {
213 | return;
214 | }
215 | $.trigger(this,"movestop",[this.el]);
216 | // e.preventDefault();
217 | // e.stopPropagation();
218 | var runFinal = false;
219 | // try {
220 | var cssMatrix=$.getCssMatrix(this.el);
221 | var endPos = this.vertical ? numOnly(cssMatrix.f) : numOnly(cssMatrix.e);
222 |
223 | if (1==2&&endPos > 0) {
224 | this.moveCSS3(this.el, {
225 | x: 0,
226 | y: 0
227 | }, "300");
228 | } else {
229 | var totalMoved = this.vertical ? ((this.dy % this.myDivHeight) / this.myDivHeight * 100) * -1 : ((this.dx % this.myDivWidth) / this.myDivWidth * 100) * -1; // get a percentage of movement.
230 | // Only need
231 | // to drag 3% to trigger an event
232 | var currInd = this.carouselIndex;
233 | if (endPos < this.cssMoveStart && totalMoved > 3) {
234 | currInd++; // move right/down
235 | } else if ((endPos > this.cssMoveStart && totalMoved < 97)) {
236 | currInd--; // move left/up
237 | }
238 | var toMove=currInd;
239 | //Checks for infinite - moves to placeholders
240 | if(this.wrap){
241 | if (currInd > (this.childrenCount - 1)) {
242 | currInd = 0;
243 | toMove=this.childrenCount;
244 | }
245 | if (currInd < 0) {
246 | currInd = this.childrenCount-1;
247 | toMove=-1;
248 | }
249 | }
250 | else {
251 | if(currInd<0)
252 | currInd=0;
253 | if(currInd>this.childrenCount-1)
254 | currInd=this.childrenCount-1;
255 | toMove=currInd;
256 | }
257 |
258 | var movePos = {
259 | x: 0,
260 | y: 0
261 | };
262 | if (this.vertical) {
263 | movePos.y = (toMove * this.myDivHeight * -1);
264 | }
265 | else {
266 | movePos.x = (toMove * this.myDivWidth * -1);
267 | }
268 |
269 | this.moveCSS3(this.el, movePos, "150");
270 |
271 | if (this.pagingDiv && this.carouselIndex !== currInd) {
272 | document.getElementById(this.container.id + "_" + this.carouselIndex).className = this.pagingCssName;
273 | document.getElementById(this.container.id + "_" + currInd).className = this.pagingCssNameSelected;
274 | }
275 | if (this.carouselIndex != currInd)
276 | runFinal = true;
277 | this.carouselIndex = currInd;
278 |
279 | //This is for the infinite ends - will move to the correct position after animation
280 | if(this.wrap){
281 | if(toMove!=currInd){
282 | var that=this;
283 | window.setTimeout(function(){
284 | that.onMoveIndex(currInd,"1ms");
285 | },155);
286 | }
287 | }
288 | }
289 | //} catch (e) {
290 | // console.log(e);
291 | // }
292 | this.dx = 0;
293 | this.movingElement = false;
294 | this.startX = 0;
295 | this.dy = 0;
296 | this.startY = 0;
297 | if (runFinal && this.pagingFunction && typeof this.pagingFunction == "function")
298 | this.pagingFunction(this.carouselIndex);
299 | },
300 | onMoveIndex: function(newInd,transitionTime) {
301 |
302 | this.myDivWidth = numOnly(this.container.clientWidth);
303 | this.myDivHeight = numOnly(this.container.clientHeight);
304 | var runFinal = false;
305 |
306 | if(document.getElementById(this.container.id + "_" + this.carouselIndex))
307 | document.getElementById(this.container.id + "_" + this.carouselIndex).className = this.pagingCssName;
308 |
309 | var newTime = Math.abs(newInd - this.carouselIndex);
310 |
311 | var ind = newInd;
312 | if (ind < 0)
313 | ind = 0;
314 | if (ind > this.childrenCount - 1) {
315 | ind = this.childrenCount - 1;
316 | }
317 | var movePos = {
318 | x: 0,
319 | y: 0
320 | };
321 | if (this.vertical) {
322 | movePos.y = (ind * this.myDivHeight * -1);
323 | }
324 | else {
325 | movePos.x = (ind * this.myDivWidth * -1);
326 | }
327 |
328 | var time =transitionTime?transitionTime: 50 + parseInt((newTime * 20));
329 | this.moveCSS3(this.el, movePos, time);
330 | if (this.carouselIndex != ind)
331 | runFinal = true;
332 | this.carouselIndex = ind;
333 | if (this.pagingDiv) {
334 | var tmpEl = document.getElementById(this.container.id + "_" + this.carouselIndex);
335 | if(tmpEl) tmpEl.className = this.pagingCssNameSelected;
336 | }
337 |
338 | if (runFinal && this.pagingFunction && typeof this.pagingFunction == "function")
339 | this.pagingFunction(currInd);
340 | },
341 |
342 | moveCSS3: function(el, distanceToMove, time, timingFunction) {
343 | if (!time)
344 | time = 0;
345 | else
346 | time = parseInt(time);
347 | if (!timingFunction)
348 | timingFunction = "linear";
349 | el.style[$.feat.cssPrefix+"Transform"] = "translate" + translateOpen + distanceToMove.x + "px," + distanceToMove.y + "px" + translateClose;
350 | el.style[$.feat.cssPrefix+"TransitionDuration"] = time + "ms";
351 | el.style[$.feat.cssPrefix+"BackfaceVisibility"] = "hidden";
352 | el.style[$.feat.cssPrefix+"TransitionTimingFunction"] = timingFunction;
353 | },
354 |
355 | addItem: function(el) {
356 | if (el && el.nodeType) {
357 |
358 | this.container.childNodes[0].appendChild(el);
359 | this.refreshItems();
360 | }
361 | },
362 | refreshItems: function() {
363 | var childrenCounter = 0;
364 | var that = this;
365 | var el = this.el;
366 | $(el).children().find(".prevBuffer").remove();
367 | $(el).children().find(".nextBuffer").remove();
368 | n = el.childNodes[0];
369 | var widthParam;
370 | var heightParam = "100%";
371 | var elems = [];
372 |
373 | for (; n; n = n.nextSibling) {
374 | if (n.nodeType === 1) {
375 | elems.push(n);
376 | childrenCounter++;
377 | }
378 | }
379 | //Let's put the buffers at the start/end
380 | if(this.wrap){
381 | var prep=$(elems[elems.length-1]).clone().get(0);
382 | $(el).prepend(prep);
383 | var tmp=$(elems[0]).clone().get(0);
384 | $(el).append(tmp);
385 | elems.push(tmp);
386 | elems.unshift(prep);
387 | tmp.style.position="absolute";
388 | prep.style.position="absolute";
389 | }
390 |
391 | var param = (100 / childrenCounter) + "%";
392 | this.childrenCount = childrenCounter;
393 | widthParam = parseFloat(100 / childrenCounter) + "%";
394 |
395 | for (var i = 0; i < elems.length; i++) {
396 | if (this.horizontal) {
397 | elems[i].style.width = widthParam;
398 | elems[i].style.height = "100%";
399 | elems[i].style['float']="left";
400 | }
401 | else {
402 | elems[i].style.height = widthParam;
403 | elems[i].style.width = "100%";
404 | elems[i].style.display = "block";
405 | }
406 | }
407 | //Clone the first and put it at the end
408 |
409 |
410 | this.moveCSS3(el, {
411 | x: 0,
412 | y: 0
413 | });
414 | if (this.horizontal) {
415 | el.style.width = Math.ceil((this.childrenCount) * 100) + "%";
416 | el.style.height = "100%";
417 | el.style['min-height'] = "100%"
418 | if(this.wrap){
419 | prep.style.left="-"+widthParam;
420 | tmp.style.left="100%";
421 | }
422 | }
423 | else {
424 | el.style.width = "100%";
425 | el.style.height = Math.ceil((this.childrenCount) * 100) + "%";
426 | el.style['min-height'] = Math.ceil((this.childrenCount) * 100) + "%";
427 | if(this.wrap){
428 | prep.style.top="-"+widthParam;
429 | tmp.style.top="100%";
430 | }
431 | }
432 | // Create the paging dots
433 | if (this.pagingDiv) {
434 | this.pagingDiv.innerHTML = ""
435 | for (i = 0; i < this.childrenCount; i++) {
436 |
437 | var pagingEl = document.createElement("div");
438 | pagingEl.id = this.container.id + "_" + i;
439 | pagingEl.pageId = i;
440 | if (i !== this.carouselIndex) {
441 | pagingEl.className = this.pagingCssName;
442 | }
443 | else {
444 | pagingEl.className = this.pagingCssNameSelected;
445 | }
446 | pagingEl.onclick = function() {
447 | that.onMoveIndex(this.pageId);
448 | };
449 | var spacerEl = document.createElement("div");
450 |
451 | spacerEl.style.width = "20px";
452 | if(this.horizontal){
453 | spacerEl.style.display = "inline-block";
454 | spacerEl.innerHTML = " ";
455 | }
456 | else{
457 | spacerEl.innerHTML=" ";
458 | spacerEl.style.display="block";
459 | }
460 |
461 | this.pagingDiv.appendChild(pagingEl);
462 | if (i + 1 < (this.childrenCount))
463 | this.pagingDiv.appendChild(spacerEl);
464 | pagingEl = null;
465 | spacerEl = null;
466 | }
467 | if(this.horizontal){
468 | this.pagingDiv.style.width = (this.childrenCount) * 50 + "px";
469 | this.pagingDiv.style.height = "25px";
470 | }
471 | else {
472 | this.pagingDiv.style.height = (this.childrenCount) * 50 + "px";
473 | this.pagingDiv.style.width = "25px";
474 | }
475 | }
476 | this.onMoveIndex(this.carouselIndex);
477 |
478 | }
479 |
480 | };
481 | return carousel;
482 | })();
483 |
484 | function isHorizontalSwipe(xAxis, yAxis) {
485 | var X = xAxis;
486 | var Y = yAxis;
487 | var Z = Math.round(Math.sqrt(Math.pow(X,2)+Math.pow(Y,2))); //the distance - rounded - in pixels
488 | var r = Math.atan2(Y,X); //angle in radians
489 | var swipeAngle = Math.round(r*180/Math.PI); //angle in degrees
490 | if ( swipeAngle < 0 ) { swipeAngle = 360 - Math.abs(swipeAngle); } // for negative degree values
491 | if (((swipeAngle <= 215) && (swipeAngle >= 155)) || ((swipeAngle <= 45) && (swipeAngle >= 0)) || ((swipeAngle <= 360) && (swipeAngle >= 315))) // horizontal angles with threshold
492 | {return true; }
493 | else {return false}
494 | }
495 |
496 | })(af);
497 |
--------------------------------------------------------------------------------
New Title
39 | 40 | Setup 41 |This is a Single View App template
43 |
57 |
58 |
59 |
63 |
64 |
71 | ```
72 | Documentation
73 | -
74 | Full documentation for AFUI are below, it explains all the attributes for `.panel` and also javascript properties and methods for manupilating UI:
75 | - [Page Layout](http://app-framework-software.intel.com/documentation.php#afui/afui_layout)
76 | - [Panel properties](http://app-framework-software.intel.com/documentation.php#afui/afui_panels)
77 | - [Full Documentation](http://app-framework-software.intel.com/documentation.php#afui/afui_about)
78 |
79 |
--------------------------------------------------------------------------------
/template-ListViewApp-social.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | New Title
60 | 61 | Setup 62 |
65 |
69 |
70 |
66 |
68 | This is a Single View App template
67 |
44 |
95 |
96 |
--------------------------------------------------------------------------------
/appframework/plugins/af.scrollScreen.js:
--------------------------------------------------------------------------------
1 | /**
2 | * af.scrollScreen - Widget to hide the header/footer when scrolling to go "full screen"
3 | * Copyright 2013 - Intel
4 | */
5 | /* global af*/
6 | (function($) {
7 | "use strict";
8 |
9 | if (!$||!$.ui) {
10 | throw "This plugin requires App Framework UI";
11 | }
12 |
13 | $.extend($.ui,{
14 | _hideHeaderOnScroll:false,
15 | _hideFooterOnScroll:false,
16 | hideHeaderOnScroll:function(){
17 | console.log(this);
18 | this._hideHeaderOnScroll=true;
19 | this.setupScrollStart();
20 | },
21 | hideFooterOnScroll:function(){
22 | this._hideFooterOnScroll=true;
23 | this.setupScrollStart();
24 | }
25 | });
26 |
27 |
28 | $.ui.ready(function(){
29 |
30 | var headerShown=false;
31 | var footerShown=false;
32 | var startY=0;
33 | var prevY=0;
34 | var hdrHeight;
35 | var ftrHeight;
36 | var scrollSetup=false;
37 |
38 | for(var j in $.ui.scrollingDivs){
39 | $.ui.scrollingDivs[j].initScrollProgress=true;
40 | $.ui.scrollingDivs[j].lockBounce=false;
41 | }
42 |
43 | var oldAddDiv=$.ui.addDivAndScroll;
44 |
45 | $.ui.addDivAndScroll=function(){
46 | var id=oldAddDiv.apply($.ui,arguments);
47 | $.ui.scrollingDivs[id].initScrollProgress=(headerShown||footerShown);
48 | $.ui.scrollingDivs[id].lockBounce=false;
49 | };
50 |
51 | $.ui.setupScrollStart=function(){
52 | if(scrollSetup) return;
53 | $.bind($.touchLayer,"scrollstart",initScrollStart);
54 | $.bind($.touchLayer,"scroll",trackScroll);
55 | scrollSetup=true;
56 | };
57 | $.ui.removeScrollStart=function(){
58 | $.unbind($.touchLayer,"scrollstart",trackScroll);
59 | };
60 |
61 | var initScrollStart = function(){
62 | startY=null;
63 | prevY=0;
64 | };
65 | var trackScroll=function(pos){
66 |
67 | if(!startY) startY=pos.y;
68 |
69 | //scrolling down
70 | var hdr,ftr;
71 | if(pos.y
45 |
46 |
47 |
94 |
48 |
75 |
76 |
77 | -
49 |
-
50 |
51 |
52 | username153 | 54 |
Placeholder text for this list item 1. This sections can modified for your need.
55 | -
56 |
57 |
58 | username259 | 60 |
Placeholder text for this list item 2. This sections can modified for your need.
61 | -
62 |
63 |
64 | username365 | 66 |
Placeholder text for this list item 3. This sections can modified for your need.
67 | -
68 |
69 |
70 | username471 | 72 |
Placeholder text for this list item 4. This sections can modified for your need.
73 |
78 |
80 |
81 | This is detail view for Item 1
79 |
82 |
84 |
85 | This is detail view for Item 2
83 |
86 |
88 |
89 | This is detail view for Item 3
87 |
90 |
92 |
93 | This is detail view for Item 4
91 |
37 |
108 |
109 |
--------------------------------------------------------------------------------
/app-GridViewApp-Photos.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
38 |
39 |
40 |
107 |
41 |
55 |
56 |
57 |
58 |
59 |
61 |
62 | This is detail view for Item 1
60 |
63 |
65 |
66 | This is detail view for Item 2
64 |
67 |
69 |
70 | This is detail view for Item 3
68 |
71 |
73 |
74 | This is detail view for Item 4
72 |
75 |
77 |
78 | This is detail view for Item 5
76 |
79 |
81 |
82 | This is detail view for Item 6
80 |
83 |
85 |
86 | This is detail view for Item 7
84 |
87 |
89 |
90 | This is detail view for Item 8
88 |
91 |
93 |
94 | This is detail view for Item 9
92 |
95 |
97 |
98 | This is detail view for Item 10
96 |
99 |
101 |
102 | This is detail view for Item 11
100 |
103 |
105 |
106 | This is detail view for Item 12
104 |
95 |
117 |
118 |
--------------------------------------------------------------------------------
/template-CarouselViewApp.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
96 |
97 |
98 |
108 |
109 |
110 |
115 |
116 |
104 |
105 |
131 |
132 |
--------------------------------------------------------------------------------
/template-ListViewApp-pullRefresh.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
106 |
107 |
108 |
130 |
109 |
129 |
110 |
127 |
128 |
111 |
114 | Page One
112 |Text and images for Page One goes here. Swipe to go to the next page.
113 |
115 |
118 | Page Two
116 |Text and images for Page Two goes here. Swipe to go to the next page.
117 |
119 |
122 | Page Three
120 |Text and images for Page Three goes here. Swipe to go to the next page.
121 |
123 |
126 | Page Four
124 |Text and images for Page Four goes here. Swipe to go to the next page.
125 |
73 |
100 |
101 |
102 |
--------------------------------------------------------------------------------
/template-LoginViewApp.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
68 |
69 |
130 |
131 |
--------------------------------------------------------------------------------
/data/male_user_icon.svg:
--------------------------------------------------------------------------------
1 |
2 |
62 |
--------------------------------------------------------------------------------
/app-FlipViewApp-Maps.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
70 |
71 |
72 |
73 |
74 |
128 |
129 |
75 |
90 |
91 |
92 |
76 |
77 |
78 |
80 |
81 |
83 |
84 |
85 |
89 | 77 |
78 |
Welcome
79 |80 |
81 |
This is space for welcome message
82 |83 |
84 |
93 |
104 |
105 |
106 |
94 |
95 |
96 |
98 |
99 |
100 |
101 |
102 | Login
103 | 95 |
96 |
This is space for login message
97 |98 |
99 |
107 |
121 |
122 |
123 |
108 |
109 |
110 |
112 |
113 |
114 |
115 |
116 |
117 |
118 |
119 | Register
120 | 109 |
110 |
This is space for register message
111 |112 |
113 |
124 |
126 |
127 | This is App page after user has signed in...
125 |
88 |
124 |
125 |
126 |
127 |
--------------------------------------------------------------------------------
/documentation/SideMenuApp.md:
--------------------------------------------------------------------------------
1 | SideMenu App
2 | -
3 |
4 | - [Left-Side Menu Template](#left-side-menu-template)
5 | - [Right-Side Menu Template](#right-side-menu-template)
6 | - [Both-Side Menu Template](#both-side-menu-template)
7 | - [Side Menu with header](#side-menu-with-header)
8 |
9 |
10 | This template can be used for simple app with side menu that can be opened to switch views, this template can be used for creating applications similar to __Youtube app__ or __Gmail app__. This template can also be used for chat app with right side menu that can be opened to select items, this template can be used for creating applications similar to __Facebook Chat app__.
11 |
12 | 
13 |
14 | Left-Side Menu Template
15 | -
16 | The left side menu can be created by adding `` element in the main `afui` DIV:
17 | ```
18 |
19 |
26 |
27 | ...
28 |
29 |
30 | ```
31 |
32 | → [__Demo__](http://htmlpreview.github.io/?https://raw.github.com/krisrak/appframework-templates/master/template-SideMenuApp-left.html) → [Code](https://github.com/krisrak/appframework-templates/blob/master/template-SideMenuApp-left.html)
33 |
34 | The left side menu can be toggled by using the method `$.ui.toggleLeftSideMenu()`
35 |
36 | The left side menu width can be set by using the method `$.ui.setLeftSideMenuWidth(WIDTH);`
37 |
38 | Right-Side Menu Template
39 | -
40 | The right side menu can be created by adding `` element in the main `afui` DIV:
41 | ```
42 |
43 |
50 |
51 | ...
52 |
53 |
54 | ```
55 | → [__Demo__](http://htmlpreview.github.io/?https://raw.github.com/krisrak/appframework-templates/master/template-SideMenuApp-right.html) → [Code](https://github.com/krisrak/appframework-templates/blob/master/template-SideMenuApp-right.html)
56 |
57 | The right side menu can be toggled by using the method `$.ui.toggleRightSideMenu()`
58 |
59 | The left side menu width can be set by using the method `$.ui.setRightSideMenuWidth(WIDTH);`
60 |
61 | Both-Side Menu Template
62 | -
63 | The left and right side menu can be created by adding `` and `` elements in the main `afui` DIV:
64 | ```
65 |
66 |
73 |
80 |
81 | ...
82 |
83 |
84 | ```
85 | → [__Demo__](http://htmlpreview.github.io/?https://raw.github.com/krisrak/appframework-templates/master/template-SideMenuApp-both.html) → [Code](https://github.com/krisrak/appframework-templates/blob/master/template-SideMenuApp-both.html)
86 |
87 | The left and right side menu can be toggled by using the methods `$.ui.toggleLeftSideMenu()` and `$.ui.toggleRightSideMenu()`
88 |
89 | The left and right side menu width can be set by using the methods `$.ui.setLeftSideMenuWidth(WIDTH);` and `$.ui.setRightSideMenuWidth(WIDTH);`
90 |
91 | Side Menu with header
92 | -
93 | A header similar to the header in main pages can be created in Side Menu by setting `title` attribute. This will created a header in side menu and add the value of `title` attribute as the title:
94 | ```
95 |
98 |
99 |
102 | ```
103 | 
104 |
105 | If you want to create the Side Menu header with custom buttons, then you can create a header manually like this:
106 | ```
107 |
113 | ```
114 | 
115 |
116 |
117 | Documentation
118 | -
119 | Full documentation for AFUI are below, it explains all styled list in AFUI:
120 | - [Side Menu](http://app-framework-software.intel.com/documentation.php#afui/afui_side)
121 | - [Full Documentation](http://app-framework-software.intel.com/documentation.php#afui/afui_about)
122 |
--------------------------------------------------------------------------------
/appframework/plugins/af.actionsheet.js:
--------------------------------------------------------------------------------
1 | /**
2 | * af.actionsheet - an actionsheet for html5 mobile apps
3 | * Copyright 2012 - 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 | /* global af*/
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() {
49 | var actionsheet = function(elID, opts) {
50 | if (typeof elID === "string" || elID instanceof String) {
51 | this.el = document.getElementById(elID);
52 | } else {
53 | this.el = elID;
54 | }
55 | if (!this.el) {
56 | window.alert("Could not find element for actionsheet " + elID);
57 | return;
58 | }
59 |
60 | if (this instanceof actionsheet) {
61 | if (typeof(opts) === "object") {
62 | for (var j in opts) {
63 | this[j] = opts[j];
64 | }
65 | }
66 | } else {
67 | return new actionsheet(elID, opts);
68 | }
69 |
70 | // try {
71 | var that = this;
72 | var markStart = "";
73 | var markEnd = "
32 |
34 | ```
35 | by default the detail view opens with slide transition and a back button is created on the detail view, which will slide back to main list view when clicked.
36 |
37 | ListView with custom list
38 | -
39 | The list item can be customized to show image + text, similar to __Twitter__ or __Facebook__ apps which has an image on the left and some text next to it.
40 |
41 | The template below shows how the ListViewApp template can be customized to have an image and text within each list item.
42 |
43 | → [__Demo__](http://htmlpreview.github.io/?https://raw.github.com/krisrak/appframework-templates/master/template-ListViewApp-social.html) → [Code](https://github.com/krisrak/appframework-templates/blob/master/template-ListViewApp-social.html)
44 |
45 | ```
46 |
51 | ```
52 |
53 | ```
54 | This is detail view for Item 1
33 |-
55 |
-
56 |
57 |
58 | username159 | 60 |
Placeholder text for this list item 1.
61 |
- ` using `$().append()` and the detailview panels for each list item can be created using the `$.ui.addContentDiv()` method of AFUI.
116 |
117 | Below is the code to create list item and detailview dynamically in JavaScript:
118 |
119 | ```
120 | // get data for id, title and detail from API
121 | var id, title, detail;
122 |
123 | // create list item
124 | list_html += '
- '+ title +' '; 125 | $(".list").append(list_html); 126 | 127 | // create detailview panel for the list item 128 | var panel_html = '
'+detail+'
'; 129 | $.ui.addContentDiv(id, panel_html, "Details"); 130 | ``` 131 | HTML code for UI: 132 | ``` 133 |
134 |
138 | ```
139 | __Things to note:__
140 | - the list item `href` is assigned a unique value `id` from API, this same `id` is used for panel id
141 | - the UI HTML contains just a panel for list view and the list is left empty
142 | - `$.ui.addContentDiv()` will dynamically create a panel and takes parameters id, panel content and title for panel.
143 |
144 | This sample below gets data from API* and dynamically creates list items and uses `$.ui.addContentDiv()` to dynamically add panels with content from API. _(In this sample, API data from Flixter is saved locally and then used for demo)_
145 |
146 | → [Code](https://github.com/krisrak/appframework-templates/blob/master/app-ListViewApp-Movies.html)
147 |
148 | 
149 |
150 |
151 | Documentation
152 | -
153 | Full documentation for AFUI are below, it explains all styled list in AFUI:
154 | - [Styled List](http://app-framework-software.intel.com/documentation.php#afui/afui_lists)
155 | - [Full Documentation](http://app-framework-software.intel.com/documentation.php#afui/afui_about)
156 |
--------------------------------------------------------------------------------
/appframework/plugins/af.popup.js:
--------------------------------------------------------------------------------
1 | /**
2 | * af.popup - a popup/alert library for html5 mobile apps
3 | * copyright Indiepath 2011 - Tim Fisher
4 | * Modifications/enhancements by Intel for App Framework
5 | *
6 | */
7 | /* EXAMPLE
8 | $.query("body").popup({
9 | title:"Alert! Alert!",
10 | message:"This is a test of the emergency alert system!! Don't PANIC!",
11 | cancelText:"Cancel me",
12 | cancelCallback: function(){console.log("cancelled");},
13 | doneText:"I'm done!",
14 | doneCallback: function(){console.log("Done for!");},
15 | cancelOnly:false,
16 | doneClass:'button',
17 | cancelClass:'button',
18 | onShow:function(){console.log("showing popup");}
19 | autoCloseDone:true, //default is true will close the popup when done is clicked.
20 | suppressTitle:false //Do not show the title if set to true
21 | });
22 |
23 | You can programatically trigger a close by dispatching a "close" event to it.
24 |
25 | $.query("body").popup({title:'Alert',id:'myTestPopup'});
26 | $("#myTestPopup").trigger("close");
27 |
28 | */
29 | /* global af */
30 | (function ($) {
31 | "use strict";
32 | $.fn.popup = function (opts) {
33 | return new popup(this[0], opts);
34 | };
35 | var queue = [];
36 | var popup = (function () {
37 | var popup = function (containerEl, opts) {
38 |
39 | if (typeof containerEl === "string" || containerEl instanceof String) {
40 | this.container = document.getElementById(containerEl);
41 | } else {
42 | this.container = containerEl;
43 | }
44 | if (!this.container) {
45 | window.alert("Error finding container for popup " + containerEl);
46 | return;
47 | }
48 |
49 | try {
50 | if (typeof (opts) === "string" || typeof (opts) === "number")
51 | opts = {
52 | message: opts,
53 | cancelOnly: "true",
54 | cancelText: "OK"
55 | };
56 | this.id = opts.id = opts.id || $.uuid(); //opts is passed by reference
57 | this.addCssClass = opts.addCssClass ? opts.addCssClass : "";
58 | this.suppressTitle = opts.suppressTitle || this.suppressTitle;
59 | this.title = opts.suppressTitle ? "" : (opts.title || "Alert");
60 | this.message = opts.message || "";
61 | this.cancelText = opts.cancelText || "Cancel";
62 | this.cancelCallback = opts.cancelCallback || function () {};
63 | this.cancelClass = opts.cancelClass || "button";
64 | this.doneText = opts.doneText || "Done";
65 | this.doneCallback = opts.doneCallback || function () {
66 | // no action by default
67 | };
68 | this.doneClass = opts.doneClass || "button";
69 | this.cancelOnly = opts.cancelOnly || false;
70 | this.onShow = opts.onShow || function () {};
71 | this.autoCloseDone = opts.autoCloseDone !== undefined ? opts.autoCloseDone : true;
72 |
73 | queue.push(this);
74 | if (queue.length === 1)
75 | this.show();
76 | } catch (e) {
77 | console.log("error adding popup " + e);
78 | }
79 |
80 | };
81 |
82 | popup.prototype = {
83 | id: null,
84 | addCssClass: null,
85 | title: null,
86 | message: null,
87 | cancelText: null,
88 | cancelCallback: null,
89 | cancelClass: null,
90 | doneText: null,
91 | doneCallback: null,
92 | doneClass: null,
93 | cancelOnly: false,
94 | onShow: null,
95 | autoCloseDone: true,
96 | suppressTitle: false,
97 | show: function () {
98 | var self = this;
99 | var markup = "";
108 |
109 | $(this.container).append($(markup));
110 | var $el = $.query("#" + this.id);
111 | $el.bind("close", function () {
112 | self.hide();
113 | });
114 |
115 | if (this.cancelOnly) {
116 | $el.find("A#action").hide();
117 | $el.find("A#cancel").addClass("center");
118 | }
119 | $el.find("A").each(function () {
120 | var button = $(this);
121 | button.bind("click", function (e) {
122 | if (button.attr("id") === "cancel") {
123 | self.cancelCallback.call(self.cancelCallback, self);
124 | self.hide();
125 | } else {
126 | self.doneCallback.call(self.doneCallback, self);
127 | if (self.autoCloseDone)
128 | self.hide();
129 | }
130 | e.preventDefault();
131 | });
132 | });
133 | self.positionPopup();
134 | $.blockUI(0.5);
135 |
136 | $el.bind("orientationchange", function () {
137 | self.positionPopup();
138 | });
139 |
140 | //force header/footer showing to fix CSS style bugs
141 | $el.find("header").show();
142 | $el.find("footer").show();
143 | setTimeout(function(){
144 | $el.removeClass("hidden");
145 | self.onShow(self);
146 | },50);
147 | },
148 |
149 | hide: function () {
150 | var self = this;
151 | $.query("#" + self.id).addClass("hidden");
152 | $.unblockUI();
153 | if(!$.os.ie&&!$.os.android){
154 | setTimeout(function () {
155 | self.remove();
156 | }, 250);
157 | }
158 | else
159 | self.remove();
160 | },
161 |
162 | remove: function () {
163 | var self = this;
164 | var $el = $.query("#" + self.id);
165 | $el.unbind("close");
166 | $el.find("BUTTON#action").unbind("click");
167 | $el.find("BUTTON#cancel").unbind("click");
168 | $el.unbind("orientationchange").remove();
169 | queue.splice(0, 1);
170 | if (queue.length > 0)
171 | queue[0].show();
172 | },
173 |
174 | positionPopup: function () {
175 | var popup = $.query("#" + this.id);
176 |
177 | popup.css("top", ((window.innerHeight / 2.5) + window.pageYOffset) - (popup[0].clientHeight / 2) + "px");
178 | popup.css("left", (window.innerWidth / 2) - (popup[0].clientWidth / 2) + "px");
179 | }
180 | };
181 |
182 | return popup;
183 | })();
184 | var uiBlocked = false;
185 | $.blockUI = function (opacity) {
186 | if (uiBlocked)
187 | return;
188 | opacity = opacity ? " style='opacity:" + opacity + ";'" : "";
189 | $.query("BODY").prepend($(""));
190 | $.query("BODY DIV#mask").bind("touchstart", function (e) {
191 | e.preventDefault();
192 | });
193 | $.query("BODY DIV#mask").bind("touchmove", function (e) {
194 | e.preventDefault();
195 | });
196 | uiBlocked = true;
197 | };
198 |
199 | $.unblockUI = function () {
200 | uiBlocked = false;
201 | $.query("BODY DIV#mask").unbind("touchstart");
202 | $.query("BODY DIV#mask").unbind("touchmove");
203 | $("BODY DIV#mask").remove();
204 | };
205 |
206 | })(af);
207 |
--------------------------------------------------------------------------------
/template-GridViewApp.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
135 |
137 |
57 |
193 |
194 |
--------------------------------------------------------------------------------
/appframework/plugins/af.selectBox.js:
--------------------------------------------------------------------------------
1 | /**
2 | * copyright: 2011 Intel
3 | * description: This script will replace all drop downs with friendly select controls. Users can still interact
4 | * with the old drop down box as normal with javascript, and this will be reflected
5 | */
6 |
7 | /* global af*/
8 | /* global numOnly*/
9 | (function($) {
10 | /*jshint camelcase: false,
11 | validthis:true
12 | */
13 | "use strict";
14 | function updateOption(prop, oldValue, newValue) {
15 | if (newValue === true) {
16 | if (!this.getAttribute("multiple"))
17 | $.selectBox.updateMaskValue(this.parentNode.id, this.text, this.value);
18 | this.parentNode.value = this.value;
19 | }
20 | return newValue;
21 | }
22 |
23 | function updateIndex(prop, oldValue, newValue) {
24 | if (this.options[newValue]) {
25 | if (!this.getAttribute("multiple"))
26 | $.selectBox.updateMaskValue(this.linker, this.options[newValue].value, this.options[newValue].text);
27 | this.value = this.options[newValue].value;
28 | }
29 | return newValue;
30 | }
31 |
32 | function destroy(e) {
33 | var el = e.target;
34 | $(el.linker).remove();
35 | delete el.linker;
36 | e.stopPropagation();
37 | }
38 | $.selectBox = {
39 | scroller: null,
40 | currLinker: null,
41 | getOldSelects: function(elID) {
42 | if (!$.os.android || $.os.androidICS) return;
43 | if (!$.fn.scroller) {
44 | window.alert("This library requires af.scroller");
45 | return;
46 | }
47 | var container = elID && document.getElementById(elID) ? document.getElementById(elID) : document;
48 | if (!container) {
49 | window.alert("Could not find container element for af.selectBox " + elID);
50 | return;
51 | }
52 | var sels = container.getElementsByTagName("select");
53 | var that = this;
54 | for (var i = 0; i < sels.length; i++) {
55 |
56 | var el = sels[i];
57 | el.style.display = "none";
58 | var fixer = $.create("div", {
59 | className: "afFakeSelect"
60 | });
61 | fixer.get(0).linker = sels[i];
62 | el.linker = fixer.get(0);
63 | fixer.insertAfter(sels[i]);
64 |
65 | el.watch("selectedIndex", updateIndex);
66 | for (var j = 0; j < el.options.length; j++) {
67 | el.options[j].watch("selected", updateOption);
68 | if (el.options[j].selected)
69 | fixer.html(el.options[j].text);
70 | }
71 | $(el).one("destroy", destroy);
72 | }
73 | that.createHtml();
74 | },
75 | updateDropdown: function(el) {
76 | if (!el) return;
77 | for (var j = 0; j < el.options.length; j++) {
78 | if (el.options[j].selected) el.linker.innerHTML = el.options[j].text;
79 | }
80 | el = null;
81 | },
82 | initDropDown: function(el) {
83 |
84 | if (el.disabled) return;
85 | if (!el || !el.options || el.options.length === 0) return;
86 | var foundInd = 0;
87 | var $scr = $("#afSelectBoxfix");
88 | $scr.html("
58 |
59 |
60 |
192 |
61 |
62 |
65 |
93 |
94 |
95 | Title
63 | 64 |
66 |
91 | Load More
92 |
96 |
98 |
99 | This is detail view for Item 1
97 |
100 |
102 |
103 | This is detail view for Item 2
101 |
104 |
106 |
107 | This is detail view for Item 3
105 |
108 |
110 |
111 | This is detail view for Item 4
109 |
112 |
114 |
115 | This is detail view for Item 5
113 |
116 |
118 |
119 | This is detail view for Item 6
117 |
120 |
122 |
123 | This is detail view for Item 7
121 |
124 |
126 |
127 | This is detail view for Item 8
125 |
128 |
130 |
131 | This is detail view for Item 9
129 |
132 |
134 |
135 | This is detail view for Item 10
133 |
136 |
138 |
139 | This is detail view for Item 11
137 |
140 |
142 |
143 | This is detail view for Item 12
141 |
144 |
146 |
147 | This is detail view for Item 13
145 |
148 |
150 |
151 | This is detail view for Item 14
149 |
152 |
154 |
155 | This is detail view for Item 15
153 |
156 |
158 |
159 | This is detail view for Item 16
157 |
160 |
162 |
163 | This is detail view for Item 17
161 |
164 |
166 |
167 | This is detail view for Item 18
165 |
168 |
170 |
171 | This is detail view for Item 19
169 |
172 |
174 |
175 | This is detail view for Item 20
173 |
176 |
178 |
179 | This is detail view for Item 11
177 |
180 |
182 |
183 | This is detail view for Item 12
181 |
184 |
186 |
187 | This is detail view for Item 13
185 |
188 |
190 |
191 | This is detail view for Item 14
189 |