","\n```\n\n##Example\n\n```\n").
75 | replace(" ","\n```\n").
76 | replace(//g,"\n").
78 | replace(/```js/g,"```").
79 | replace(/ /g,"");
80 | summary=stripTags(summary);
81 | var paramsTxt="";
82 | var returnTxt=rPad(returnObj.types," ",30)+returnObj.desc;
83 | Object.keys(params).forEach(function(key){
84 | paramsTxt+=rPad(key," ",30)+params[key].join("|")+"\n";
85 | });
86 | var extra="";
87 | var extraName=title.replace(";","");
88 | if(extraName.indexOf("(")!==-1)
89 | extraName=extraName.substr(0,extraName.indexOf("("));
90 |
91 | try {
92 | if(fs.statSync("./detail/"+extraName+".md"))
93 | {
94 | extra=fs.readFileSync("./detail/"+extraName+".md").toString();
95 | extra=extra.replace(/```js/g,"```");
96 | extra=extra.replace(/```html/g,"```");
97 | extra="##Detail\n\n"+extra;
98 | }
99 | }
100 | catch(e){
101 | }
102 | var md=makeMD(title,summary,paramsTxt,returnTxt,extra);
103 | fs.writeFileSync("./"+name+"/"+extraName+".md",md);
104 | });
105 | }
106 | });
107 |
108 |
--------------------------------------------------------------------------------
/docs/plugins/af.actionsheet.md:
--------------------------------------------------------------------------------
1 | #actionsheet
2 |
3 | The actionsheet plugin enables developers create an action sheet for the user to interact with. We always add a last "Cancel" option to the actionsheet.
4 |
5 | ```
6 | $.afui.actionsheet(options)
7 | ```
8 |
9 | ## Properties
10 |
11 | #### Attributes
12 | You can pass in a string of anchors that will be rendered or an array of objects. Below are for each object in the array.
13 |
14 | ```
15 | text (string) Text to show for actionsheet element
16 | cssClass (string) CSS class actionsheet element
17 | ```
18 |
19 | #### Functions
20 |
21 | ```
22 | click(function) Function to execute for the item selected
23 | ```
24 |
25 |
26 | ## Methods
27 | ```
28 | hideSheet() Dismiss the actionsheet.
29 | ```
30 |
31 | ## Events
32 | ```
33 | none
34 | ```
35 |
36 | ## CSS/Customize
37 |
38 | Below is an example used by App Framework's iOS7 theme to customize the look and feel of the popup
39 |
40 | ```
41 | /* The main container*/
42 | .ios7 #af_actionsheet {
43 | background-color:transparent;
44 | color:black;
45 | padding-left:10px;
46 | padding-right:10px;
47 | border-top: transparent 1px solid;
48 | box-shadow: 0px -1px 2px rgba(0,0,0,0);
49 | }
50 |
51 | /* Styling for each anchor*/
52 | .ios7 #af_actionsheet a{
53 | background-image:none;
54 | text-shadow:none;
55 | box-shadow:none;
56 | font-weight:normal;
57 | border-radius: 0;
58 | border:none;
59 | -webkit-box-shadow:none;
60 | color:rgba(82,155,234,255);
61 | background-color:white;
62 | cursor:pointer;
63 | border-radius:0px;
64 | line-height: 40px;
65 | font-size: 20px;
66 | margin-bottom: 1px;
67 | }
68 |
69 | /* Custom styles for the first anchor */
70 | .ios7 #af_actionsheet a:first-child{
71 | border-top-left-radius:5px;
72 | border-top-right-radius:5px;
73 | }
74 |
75 | /* Custom style for the last anchor */
76 | .ios7 #af_actionsheet a:nth-last-child(2){
77 | border-bottom-left-radius:5px;
78 | border-bottom-right-radius:5px;
79 | }
80 |
81 | /* Special styles for the cancel anchor*/
82 | .ios7 #af_actionsheet a.cancel{
83 | font-weight:bold;
84 | margin: 9px 0;
85 | border-radius:5px;
86 | }
87 |
88 | ```
89 |
90 |
91 | ## Examples
92 |
93 | Here is a basic alert style popup. You can pass in a string instead of an object. Any clicks, events, etc are available to the anchors.
94 |
95 | ```
96 | $(document.body).actionsheet('Hi Goodbye ');
97 | ```
98 |
99 | Below is an example using an array of objects. We can specify custom CSS classes and click handlers for each anchor
100 |
101 | ```
102 | $.afui.actionsheet(
103 | [{
104 | text: 'back',
105 | cssClasses: 'red',
106 | click: function () {
107 | alert("Clicked Back")
108 | }
109 | }, {
110 | text: 'Alert Hi',
111 | cssClasses: 'blue',
112 | click: function () {
113 | alert("Hi");
114 | }
115 | }, {
116 | text: 'Alert Goodbye',
117 | cssClasses: '',
118 | click: function () {
119 | alert("Goodbye");
120 | }
121 | }]
122 | );
123 | ```
124 |
125 | Here we will dismiss the actionsheet in 5 seconds if there is no response from the user
126 |
127 | ```
128 | var sheet=$.afui.actionsheet('Hi Goodbye ');
129 | setTimeout(function(){
130 | sheet.hideSheet();
131 | },5000);
132 | ```
--------------------------------------------------------------------------------
/docs/plugins/af.animateheader.md:
--------------------------------------------------------------------------------
1 | #animateheader
2 |
3 | This plugin will animate headers during transitions. Simply include the script to enable header animations during panel transitions.
4 |
5 |
--------------------------------------------------------------------------------
/docs/plugins/af.animation.md:
--------------------------------------------------------------------------------
1 | #animation
2 |
3 | This plugin lets you run class based animations and keep the class, reverse them, run a function after it's finished, etc.
4 |
5 |
6 | ```
7 | $(selector).animator()
8 | ```
9 |
10 | ## Properties
11 |
12 | #### Attributes
13 | An animator object is return that you act upon
14 |
15 | ```
16 | none
17 | ```
18 |
19 | #### Functions
20 |
21 | ```
22 | none
23 | ```
24 |
25 |
26 | ## Methods
27 | ```
28 | keep (boolean) Keep the class after animation has completed
29 | remove (string) Remove class from classlist
30 | reverse (string) Run the animation in reverse
31 | end (function) Function to execute after animation has completed
32 | run (string) Run the animation with the given class
33 | reRun(string) Run the animation again.
34 | ```
35 |
36 | ## Events
37 | ```
38 | none
39 | ```
40 |
41 |
42 | ## Examples
43 |
44 | Here is a basic example to run the animation
45 |
46 | ```
47 | $("#one").animation().run("slide-in");
48 |
49 | ```
50 |
51 | Now we will execute a function after it's completed
52 |
53 |
54 | ```
55 | $("#one").animation().end(function(){console.log('completed')}).run("slide-in");
56 | ```
57 |
58 | Run the animation in reverse and make sure the class was removed
59 |
60 |
61 | ```
62 | $("#one").animation().remove("slide-out").reverse().end(function(){
63 | this.classList.add("active");
64 | }).run("slide-out");
65 | ```
--------------------------------------------------------------------------------
/docs/plugins/af.drawer.md:
--------------------------------------------------------------------------------
1 | #drawer
2 |
3 | This plugin enables drawers (side menus) in your application. The drawers must be <nav> items in the same view.
4 |
5 |
6 | ```
7 | $.afui.drawer Reference to a drawer object
8 | ```
9 |
10 | ## Properties
11 |
12 |
13 | ```
14 | none
15 | ```
16 |
17 | #### Functions
18 |
19 | ```
20 | none
21 | ```
22 |
23 |
24 | ## Methods
25 | ```
26 | show (id, position, string) Show a drawer based of the id, position and transition
27 | hide (string,string) Hide a drawer based off the id and position
28 |
29 | ```
30 |
31 | ## Positions
32 | ```
33 | left Show the drawer on the left side
34 | right Show the drawer on the right side
35 | ```
36 |
37 | ## Transitions
38 | ```
39 | cover The menu will cover the main area
40 | reveal The main area will slide out and reveal the menu
41 | push The menu will push the main area to the side
42 | ```
43 |
44 | ## Events
45 | ```
46 | none
47 | ```
48 |
49 | ## Data Directive
50 | ```
51 | data-left-menu Show the menu on the left side
52 | data-right-menu Show the menu on the right side
53 | data-transition Transition to run
54 | data-menu-close Close the active menu
55 |
56 |
57 | Left Cover
58 | Close Menu
59 | ```
60 |
61 |
62 | ## Examples
63 |
64 |
65 | Here is a basic example to show the drawer with id "left", on the left side with a reveal transition.
66 |
67 | ```
68 | $.afui.drawer.show("#left","left","reveal");
69 |
70 | ```
71 |
72 | We can hide the drawer in two ways. One is calling hide, which hides the active drawer. The other is specifying the exact drawer to hide.
73 |
74 | ```
75 | $.afui.drawer.hide();
76 |
77 | $.afui.drawer.hide("#left","left");
78 | ```
79 |
80 |
--------------------------------------------------------------------------------
/docs/plugins/af.lockscreen.md:
--------------------------------------------------------------------------------
1 | #Lockscreen
2 |
3 | The lockscreen enables developers of hybrid apps to present a lock screen to users.
4 | Users are required to enter a 4 digit pin to unlock it. This can easily be bypassed
5 | on web browsers
6 |
7 | ```
8 | $(document.body).lockScreen(opts)
9 | ```
10 |
11 | ## Properties
12 |
13 | #### Attributes
14 | You can object of options
15 |
16 | ```
17 | logo (string) image to show above password box
18 | roundKeyboard (boolean) When set to true, rounded keys are shown
19 |
20 |
21 | ```
22 |
23 | #### Functions
24 |
25 | ```
26 | renderKeyboard(function) Function to render the keyboard. This returns a string
27 | validatePassword(function) Function to validate the password. It accepts a string and returns a boolean
28 |
29 |
30 | ```
31 |
32 |
33 | ## Methods
34 | ```
35 | show () Show the lockscreen
36 | hide () Hide the lockscreen
37 | ```
38 |
39 | ## Events
40 | ```
41 | none
42 | ```
43 |
44 | ## Examples
45 |
46 | Here are two examples. The first shows the lock screen. The second uses the cordova device pause/resume events to show it
47 |
48 | ```
49 | var lock=$(document.body).lockScreen();
50 | lock.validatePassword=function(pass){
51 | pass=parseInt(pass,10);
52 | return pass==1111;
53 | }
54 | lock.show();
55 | ```
56 |
57 | Now we force showing on the cordova device pause/resume events
58 |
59 | ```
60 |
61 | function showLockScreen(){
62 | var lock=$(document.body).lockScreen();
63 | lock.validatePassword=function(pass){
64 | pass=parseInt(pass,10);
65 | return pass==1111;
66 | }
67 | lock.show();
68 | }
69 |
70 | $(document).on("pause resume",showLockScreen,false);
71 |
72 | ```
--------------------------------------------------------------------------------
/docs/plugins/af.popup.md:
--------------------------------------------------------------------------------
1 | #Popup
2 |
3 | The popup plugin allows you to creat your own stylized popup with App Framework. It is non-blocking and allows more flexibility then native dialogs. You can use this plugin to show messages, options, or even login forms.
4 |
5 | ```
6 | $.afui.popup(options) // returns a reference to the popup object
7 | ```
8 |
9 | ## Properties
10 |
11 | #### Attributes
12 |
13 | You can pass in a string or an object to the popup function. If you pass in a string, it will emulate an alert box.
14 |
15 | ```
16 | id (string) ID of DOM element for the popup container
17 | title (string) Title to show for the popup
18 | message (string) Text to display in the popup
19 | cancelText (string) Text to display for the cancel button
20 | doneText (string) Text to display for the done button
21 | cancelOnly (bool/false) When true, only the cancel button will show
22 | cancelClass (string) CSS class for the cancel button
23 | doneClass (string) CSS Class for the done button
24 | autoCloseDone (bool/false) When true, the popup will auto hide when the done button is pressed
25 | suppressTitle (bool/false) When true, the title will not be shown in the popup
26 |
27 | ```
28 |
29 | #### Functions
30 |
31 | ```
32 | cancelCallback(function) Function to execute when the cancel button is clicked
33 | doneCallback(function) Function to execute when the done button is clicked
34 | onShow(function) Function to execute when the popup is displayed to the user
35 | ```
36 |
37 |
38 | ## Methods
39 |
40 | ```
41 | show() Call to present the popup to the user
42 | hide() Call to dismiss the popup from the user
43 | ```
44 |
45 | ## Events
46 | ```
47 | close When dispatched, this event will close the popup window programatically
48 | ```
49 |
50 |
51 | ## CSS/Customize
52 |
53 | Below is an example used by App Framework's iOS7 theme to customize the look and feel of the popup
54 |
55 | ```
56 | /* The main container/*
57 | .ios7 .afPopup {
58 | display: block;
59 | border:1px solid rgba(158,158,158,255);
60 | border-radius:10px;
61 | padding:0;
62 | text-align: center;
63 | width:280px;
64 | position: absolute;
65 | z-index: 1000000;
66 | top: 50%;
67 | color:inherit;
68 | background:rgba(249,249,249,1);
69 | text-align:center;
70 | }
71 |
72 | /* The title/*
73 | .ios7 .afPopup>HEADER{
74 | padding:10px 0;
75 | }
76 |
77 | /* The content area/*
78 | .ios7 .afPopup>DIV{
79 | font-size:14px;
80 | padding-bottom:10px;
81 | }
82 |
83 | /* The bottom where the buttons are displayed/*
84 |
85 | .ios7 .afPopup>FOOTER{
86 | border-top:1px solid #aaa;
87 | }
88 |
89 |
90 | /* The cancel/done buttons/*
91 | .ios7 .afPopup .button {
92 | border: none;
93 | width: 50%;
94 | margin: 0;
95 | background: transparent;
96 | color:rgba(82,155,234,255);
97 | padding:12px 0;
98 | }
99 |
100 | .ios7 .afPopup .button.pressed {
101 | background: none;
102 | }
103 |
104 | .ios7 .button.pressed {
105 | font-weight:bold;
106 | background: white;
107 | }
108 |
109 | .ios7 .afPopup a:not(:first-of-type) {
110 | border-left:1px solid rgba(158,158,158,255);
111 | }
112 | ```
113 |
114 | ## Data Directive
115 | ```
116 | data-popup Declare the popup
117 | data-message Message parameter
118 |
119 | Hi
120 | ```
121 |
122 |
123 | ## Examples
124 |
125 | Here is a basic alert style popup. You can pass in a string instead of an object
126 |
127 | ```
128 | $.afui.popup("I'm replacing an alert box");
129 | ```
130 |
131 | Below shows a more advanced example setting properties
132 |
133 | ```
134 | $.afui.popup({
135 | title: "Alert! Alert!",
136 | message: "This is a test of the emergency alert system!! Don't PANIC!",
137 | cancelText: "Cancel me",
138 | cancelCallback: function () {
139 | console.log("cancelled");
140 | },
141 | doneText: "I'm done!",
142 | doneCallback: function () {
143 | console.log("Done for!");
144 | },
145 | cancelOnly: false
146 | });
147 | ```
148 |
149 | Here we will show a login prompt for the user
150 |
151 | ```
152 | $.afui.popup({
153 | title: "Login",
154 | message: "Username: Hello
193 | ```
194 |
--------------------------------------------------------------------------------
/docs/plugins/af.splashscreen.md:
--------------------------------------------------------------------------------
1 | #Splashscreen
2 |
3 | This plugin will hide a splashscreen when the $.afui.ready has triggered. Simply include the script and it will remove the div with id="splashscreen"
4 |
5 | ```
6 |
7 |
8 | App Framework
9 |
Starting app
13 |
14 |
15 | ```
16 |
17 |
--------------------------------------------------------------------------------
/docs/plugins/af.swipereveal.md:
--------------------------------------------------------------------------------
1 | #swipe to reveal
2 |
3 | The swipe to reveal allows you to swipe an object and reveal another. This is useful for "swipe to delete" implementations
4 |
5 | To use this, simply include the js plugin and css file.
6 |
7 |
8 |
9 | ##Using
10 |
11 | To use the plugin, add the class "swipe-reveal" to your container DOM node. Inside the container should be two elements, the first with the content you want to show with class "swipe-content". The second is the content to reveal with class "swipe-hidden"
12 |
13 | ```
14 |
15 | Swipe to reveal with some options
16 |
20 |
21 | ```
--------------------------------------------------------------------------------
/docs/plugins/af.toast.md:
--------------------------------------------------------------------------------
1 | #Toast
2 |
3 | The toast plugin enables developers to deliver toast style messages to users
4 |
5 | ```
6 | $.afui.toast(options)
7 | ```
8 |
9 | ## Properties
10 |
11 | #### Attributes
12 | You can pass in a string that will display a message, or an object of options
13 |
14 | ```
15 | message (string) Text to show for toast message
16 | position (string) possitions the message will be in
17 | tr - top right, tl - top left
18 | br - bottom right, br - bottom left
19 | tc - top center, bc - bottom center
20 |
21 | delay (ms) Delay in milliseconds for auto-hiding the message
22 |
23 | autoClose (boolean) Autoclose the toast from the delay
24 | type (string) Type/css class for the message
25 | success - green
26 | error - red
27 | warning - yellow
28 |
29 | addCssClass (string) CSS class to addd to the toast
30 | ```
31 |
32 | #### Functions
33 |
34 | ```
35 | none
36 | ```
37 |
38 |
39 | ## Methods
40 | ```
41 | none
42 | ```
43 |
44 | ## Events
45 | ```
46 | none
47 | ```
48 |
49 | ## Data Directive (maps to option parameters)
50 | ```
51 | data-toast Declare the data-toast element
52 | data-message message parameter
53 | data-position position parameter
54 | data-type type parameter
55 | data-auto-close autoClose parameter
56 | data-delay delay parameter
57 |
58 |
59 | Toast
60 | ```
61 |
62 |
63 | ## Examples
64 |
65 | Here are three examples. Two uses JavaScript to display the toasts and another uses data attributes on the anchor
66 |
67 | ```
68 | $.afui.toast({
69 | message:"Top Right",
70 | position:"tr",
71 | autoClose:false, //have to click the message to close
72 | type:"success"
73 | });
74 | ```
75 |
76 | Just display a message
77 |
78 | ```
79 | $.afui.toast("Hello World");
80 | ```
81 |
82 | ###Directive example
83 |
84 | Here we will dismiss the actionsheet in 5 seconds if there is no response from the user
85 |
86 | ```
87 | Toast1
88 |
89 | Toast2
90 | ```
--------------------------------------------------------------------------------
/docs/plugins/af.touchevents.md:
--------------------------------------------------------------------------------
1 | #Touch Events
2 |
3 | This plugin adds additional touch events that you can register to listen for. Simply include the plugin and it will do the rest. We do not call preventDefault or stopPropagation on any events.
4 |
5 | ##NOTE
6 |
7 |
8 | ##Events
9 |
10 | ```
11 | tap Tap on the element
12 | singleTap Single tap on the elem (250ms delay after tap is triggered)
13 | doubleTap Double tap (quick) on the element
14 | longTap Long press on the element
15 | swipe The element was swiped (30px threshold)
16 | swipeLeft The element was swiped left
17 | swipeRight The element was swiped right
18 | swipeUp The element was swiped up
19 | swipeDown The element was swiped down
20 | swipeLeftStart A swipe left has been started
21 | swipeRightStart A swipe right has been started
22 | swipeUpStart A swipe up has been started
23 | swipeDownStart A swipe down has been started
24 | ```
25 |
26 | ##Listening
27 |
28 | You can listen for any of the events like any other event
29 |
30 | ```
31 | $("#element").bind("doubleTap",function(){});
32 | ```
--------------------------------------------------------------------------------
/docs/plugins/af.transform.md:
--------------------------------------------------------------------------------
1 | #transform
2 |
3 | This plugin lets you run transition based animations via css3 transforms.
4 |
5 | ```
6 | $(selector).transition()
7 | ```
8 |
9 | ## Properties
10 |
11 | #### Attributes
12 | An animator object is return that you act upon
13 |
14 | ```
15 | none
16 | ```
17 |
18 | #### Functions
19 |
20 | ```
21 | none
22 | ```
23 |
24 |
25 | ## Methods
26 | ```
27 | keep (boolean) Keep the class after animation has completed
28 | end (function) Function to execute after animation has completed
29 | run (transform,duration) CSS3 transform to run and duration
30 | ```
31 |
32 | ## Events
33 | ```
34 | none
35 | ```
36 |
37 |
38 | ## Examples
39 |
40 | Here is a basic example to run the animation
41 |
42 | ```
43 | $("#one").transition().run("translate3d(-100px,-100px,0)","500ms");
44 |
45 | ```
46 |
47 | Now we will execute a function after it's completed
48 |
49 |
50 | ```
51 | $("#one").animation().end(function(){console.log('completed')}).run("translate3d(-100px,-100px,0)","500ms");
52 | ```
--------------------------------------------------------------------------------
/jquery-widgets/af.lockscreen.css:
--------------------------------------------------------------------------------
1 | #lockScreen * {
2 | padding:0;
3 | margin:0;
4 | box-sizing:border-box;
5 | -webkit-tap-highlight-color: rgba(0,0,0,0);
6 | -webkit-user-select: none;
7 | }
8 |
9 | #lockScreen {
10 | position: absolute;
11 | top:0px;
12 | bottom:0px;
13 | width:100%;
14 | height:100%;
15 | left:0px;
16 | z-index:99999999999999;
17 | background: #ccc;
18 | }
19 |
20 | #lockScreen .flexContainer {
21 | display: -webkit-box;
22 | display: -moz-box;
23 | display: box;
24 |
25 | -webkit-box-orient: vertical;
26 | -moz-box-orient: vertical;
27 | box-orient: vertical;
28 |
29 | -webkit-box-align: center;
30 | -moz-box-align: center;
31 | box-align: center;
32 | -webkit-box-pack: center;
33 | -moz-box-pack: center;
34 | box-pack: center;
35 | }
36 |
37 | #lockScreen .keyboard {
38 | width:100%;
39 | position:absolute;
40 | bottom:0px;
41 | }
42 |
43 | #lockScreen .content {
44 | position:absolute;
45 | top:0px;
46 | bottom:170px;
47 | width:100%;
48 | text-align:center;
49 | -moz-box-flex: 0;
50 | -webkit-box-flex: 0;
51 | -ms-box-flex: 0;
52 | box-flex: 0;
53 | -moz-box-ordinal-group: 1;
54 | -webkit-box-ordinal-group: 1;
55 | -ms-box-ordinal-group: 1;
56 | box-ordinal-group: 1;
57 | align-items: center;
58 | justify-content: center;
59 | }
60 |
61 | #lockScreen .keyboard .row {
62 | display: block;
63 | width:100%;
64 | text-align: center;
65 | height:50px;
66 | line-height:50px;
67 | font-size:1.3em;
68 | font-weight: bold;
69 |
70 | }
71 |
72 | #lockScreen .keyboard .row div {
73 | display: block;
74 | width:33.33%;
75 | float:left;
76 | border:1px solid #000;
77 | justify-content: center;
78 | text-align: center;
79 | }
80 |
81 | #lockScreen .keyboard .row div.grey {
82 | background:white;
83 | }
84 |
85 | #lockScreen .touched {
86 | background-color: white;
87 | }
88 |
89 | #lockScreen input[type="password"] {
90 | height:50px;
91 | font-size:40px;
92 | width:200px;
93 | text-align: center;
94 |
95 | }
96 |
97 | #lockScreen .icon {
98 | font-size:50px;
99 | color:white;
100 | margin-bottom: 10px;
101 |
102 | }
103 | #lockScreen .error {
104 | padding-top:10px;
105 | visibility: hidden;
106 | color:red;
107 | font-weight:bold;
108 | font-size:1.3em;
109 | }
110 |
111 | #lockScreen.round .keyboard{
112 | bottom:10px;
113 | }
114 |
115 | #lockScreen.round .keyboard .row {
116 | display: -webkit-box;
117 | display: -moz-box;
118 | display: box;
119 |
120 | -webkit-box-align: center;
121 | -moz-box-align: center;
122 | box-align: center;
123 |
124 | -webkit-box-pack: center;
125 | -moz-box-pack: center;
126 | box-pack: center;
127 | margin-bottom:20px;
128 |
129 | }
130 |
131 | #lockScreen.round .keyboard .row div {
132 | -moz-box-flex: 0;
133 | -webkit-box-flex: 0;
134 | -ms-box-flex: 0;
135 | box-flex: 0;
136 | -moz-box-ordinal-group: 1;
137 | -webkit-box-ordinal-group: 1;
138 | -ms-box-ordinal-group: 1;
139 | box-ordinal-group: 1;
140 | float:none;
141 | width:60px;
142 | height:60px;
143 | border-radius:60px;
144 | line-height:60px;
145 | margin:10px;
146 | cursor:pointer;
147 |
148 | }
149 |
150 | #lockScreen.round input[type="password"] {
151 | height:50px;
152 | font-size:40px;
153 | width:200px;
154 | text-align: center;
155 | background: transparent;
156 | color:white;
157 | }
158 |
159 | #lockScreen.round input[type="password"]::-webkit-input-placeholder {
160 | color: white;
161 | }
162 |
163 |
164 | #lockScreen.round input[type="password"]::-moz-placeholder { /* Firefox 19+ */
165 | color: white;
166 | }
167 |
168 | #lockScreen.round input[type="password"]:-ms-input-placeholder {
169 | color: white;
170 | }
171 |
172 | #lockScreen.round .keyboard .row div.grey {
173 | background:transparent;
174 | border:none;
175 | }
--------------------------------------------------------------------------------
/jquery-widgets/af.lockscreen.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | App Framework Kitchen Sink
8 | Test
52 |
53 |
54 |
55 |
--------------------------------------------------------------------------------
/jquery-widgets/af.lockscreen.js:
--------------------------------------------------------------------------------
1 | //onShow = open
2 | //cancelCallback = cancel
3 | //doneCallback = done
4 | //removed id property
5 | // added this.lockscreen = $el;
6 |
7 | (function($){
8 | "use strict";
9 |
10 | $.widget("afui.lockscreen",{
11 | options:{
12 | logo:"
",
13 | roundKeyboard:false,
14 | validatePassword:function(){},
15 | renderKeyboard:function(){
16 | var html="";
17 | for(var i=0;i<8;i=i+3){
18 | html+="";
19 | for(var j=1;j<=3;j++){
20 | var num=i+j;
21 | html+="
"+num+"
";
22 | }
23 | html+="
"+this.options.renderKeyboard()+"
";
44 | var item=$("
");
45 | item.html(container);
46 | if(this.options.roundKeyboard){
47 | item.addClass("round");
48 | item.find("input[type='password']").attr("placeholder",("◌◌◌◌"));
49 | }
50 | this.lockscreen=item;
51 | $(document.body).append(item);
52 | var pass=$("#lockScreen input[type='password']");
53 | var self=this;
54 | $(item).on("click",function(evt){
55 | var target=$(evt.target);
56 | if(target.length===0) return;
57 | var key=target.attr("data-key");
58 | if(!key) return;
59 | if(key==="delete"){
60 | pass.val(pass.val().substring(0,pass.val().length-1));
61 | return;
62 | }
63 | var len=pass.val().length;
64 |
65 | if(len<4)
66 | pass.val(pass.val()+key);
67 | if(pass.val().length===4){
68 | if(self.options.validatePassword(pass.val()))
69 | self.hide();
70 | else {
71 | self.lockscreen.find(".error").css("visibility","visible");
72 | setTimeout(function(){
73 | self.lockscreen.find(".error").css("visibility","hidden");
74 | pass.val("");
75 | },1000);
76 | }
77 | }
78 | });
79 | $(item).on("touchstart",function(evt){
80 | $(evt.target).addClass("touched");
81 | }).on("touchend",function(evt){
82 | $(evt.target).removeClass("touched");
83 | });
84 | },
85 | hide:function(){
86 | this.lockscreen.remove();
87 | }
88 |
89 | });
90 | })(jQuery);
91 |
--------------------------------------------------------------------------------
/jquery-widgets/af.popup.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | App Framework Kitchen Sink
8 | Test
48 |
49 |
50 |
51 |
--------------------------------------------------------------------------------
/jquery-widgets/af.popup.js:
--------------------------------------------------------------------------------
1 | //onShow = open
2 | //cancelCallback = cancel
3 | //doneCallback = done
4 | //removed id property
5 | // added this.popup = $el;
6 |
7 | (function($){
8 | "use strict";
9 | var queue=[];
10 | $.widget("afui.popup",{
11 | options:{
12 | addCssClass: "",
13 | title: "Alert",
14 | message: "",
15 | cancelText: "Cancel",
16 | cancel: null,
17 | cancelClass: "",
18 | doneText: "",
19 | done:null,
20 | doneClass: "",
21 | cancelOnly: false,
22 | open:null,
23 | autoCloseDone: true,
24 | suppressTitle: false
25 | },
26 | _create:function(){
27 | },
28 | _init:function(){
29 | queue.push(this);
30 | if (queue.length === 1)
31 | this.show();
32 | },
33 | widget:function(){
34 | return this.popup;
35 | },
36 | show: function () {
37 | var markup = "";
46 |
47 | var $el=$(markup);
48 | this.element.append($el);
49 | this.popup=$el;
50 | this._on($el,{close:"hide"});
51 |
52 | if (this.options.cancelOnly) {
53 | $el.find("A#action").hide();
54 | $el.find("A#cancel").addClass("center");
55 | }
56 |
57 | //@TODO Change to event
58 | this._on($el,{"click a":function(event){
59 | var button = $(event.target);
60 | console.log(button);
61 | if (button.attr("id") === "cancel") {
62 | this._trigger("cancel",event);
63 | //this.options.cancelCallback.call(this.options.cancelCallback, this);
64 | this.hide();
65 | } else {
66 | this._trigger("done",event);
67 | //this.options.doneCallback.call(this.options.doneCallback, this);
68 | if (this.options.autoCloseDone)
69 | this.hide();
70 | }
71 | event.preventDefault();
72 | }});
73 |
74 | this.positionPopup();
75 | $.blockUI(0.5);
76 |
77 | this._on({orientationchange:"positionPopup"});
78 |
79 | //force header/footer showing to fix CSS style bugs
80 | this.popup.find("header,footer").show();
81 | this._delay(function(){
82 | this.popup.removeClass("hidden").addClass("show");
83 | //this.options.onShow(this);
84 | this._trigger("open");
85 | },50);
86 | },
87 |
88 | hide: function () {
89 | this.popup.addClass("hidden");
90 | $.unblockUI();
91 | if(1==1){//!$.os.ie&&!$.os.android){
92 | this._delay("remove",250);
93 | }
94 | else
95 | this.remove();
96 | },
97 |
98 | remove: function () {
99 | this._off(this.element,"orientationchange");
100 | this.popup.remove();
101 | queue.splice(0, 1);
102 | if (queue.length > 0)
103 | queue[0].show();
104 | },
105 |
106 | positionPopup: function () {
107 | this.popup.css({
108 | "top":((window.innerHeight / 2.5) + window.pageYOffset) - (this.popup[0].clientHeight / 2),
109 | "left":(window.innerWidth / 2) - (this.popup[0].clientWidth / 2)
110 | });
111 | }
112 | });
113 | var uiBlocked = false;
114 | $.blockUI = function (opacity) {
115 | if (uiBlocked)
116 | return;
117 | opacity = opacity ? " style='opacity:" + opacity + ";'" : "";
118 | $("BODY").prepend($("
"));
119 | $("BODY DIV#mask").bind("touchstart", function (e) {
120 | e.preventDefault();
121 | });
122 | $("BODY DIV#mask").bind("touchmove", function (e) {
123 | e.preventDefault();
124 | });
125 | uiBlocked = true;
126 | };
127 |
128 | $.unblockUI = function () {
129 | uiBlocked = false;
130 | $("BODY DIV#mask").unbind("touchstart");
131 | $("BODY DIV#mask").unbind("touchmove");
132 | $("BODY DIV#mask").remove();
133 | };
134 | $.afui.registerDataDirective("[data-alert]",function(item){
135 | var $item=$(item);
136 | var message=$item.attr("data-message");
137 | if(message.length===0) return;
138 | $(document.body).popup({message:message,cancelOnly:true});
139 | });
140 |
141 | $.afui.popup=function(opts){
142 | return $(document.body).popup(opts);
143 | };
144 | })(jQuery);
145 |
--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
1 | module.exports = function (karma) {
2 | karma.set({
3 |
4 | // base path, that will be used to resolve files and exclude
5 | basePath: './',
6 |
7 | frameworks: ['mocha'],
8 | preprocessors: {
9 | 'test/fixtures/*.html': ['html2js'],
10 | '**/src/*.js': 'coverage'
11 | },
12 |
13 | // list of files / patterns to load in the browser
14 | files: [
15 | {pattern: 'node_modules/chai/chai.js', include: true},
16 | {pattern: '3rdparty/jquery.min.js', served: true, included: true},
17 | {pattern: 'build/appframework.ui.js',served: true, included: true},
18 | {pattern: 'test/chai.helper.js', include: true},
19 | 'build/af.ui.css',
20 | 'test/fixtures/*.html',
21 | 'test/*.test.js'
22 | /*'test/drawer.test.js'*/
23 |
24 | ],
25 |
26 | // list of files to exclude
27 | exclude: [
28 | 'karma.conf.js'
29 | ],
30 |
31 | // use dots reporter, as travis terminal does not support escaping sequences
32 | // possible values: 'dots', 'progress', 'junit', 'teamcity'
33 | // CLI --reporters progress
34 | reporters: ['progress', 'coverage'],
35 |
36 | //Code Coverage options. report type available:
37 | //- html (default)
38 | //- lcov (lcov and html)
39 | //- lcovonly
40 | //- text (standard output)
41 | //- text-summary (standard output)
42 | //- cobertura (xml format supported by Jenkins)
43 | coverageReporter: {
44 | // cf. http://gotwarlost.github.com/istanbul/public/apidocs/
45 | type: 'html',
46 | dir: 'coverage/'
47 | },
48 |
49 |
50 | // web server port
51 | port: 9876,
52 |
53 |
54 | // cli runner port
55 | runnerPort: 9100,
56 |
57 |
58 | // enable / disable colors in the output (reporters and logs)
59 | colors: true,
60 |
61 |
62 | // level of logging
63 | // possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG
64 | //logLevel: LOG_DEBUG,
65 |
66 |
67 | // enable / disable watching file and executing tests whenever any file changes
68 | autoWatch: false,
69 |
70 |
71 | // Start these browsers, currently available:
72 | // - Chrome
73 | // - ChromeCanary
74 | // - Firefox
75 | // - Opera
76 | // - Safari (only Mac)
77 | // - PhantomJS
78 | // - IE (only Windows)
79 | // CLI --browsers Chrome,Firefox,Safari
80 | browsers: ['Chrome'],
81 |
82 |
83 | // If browser does not capture in given timeout [ms], kill it
84 | captureTimeout: 6000,
85 |
86 |
87 | // Continuous Integration mode
88 | // if true, it capture browsers, run tests and exit
89 | singleRun: true,
90 |
91 |
92 | plugins: [
93 | 'karma-mocha',
94 | 'karma-chrome-launcher',
95 | 'karma-coverage',
96 | 'karma-htmlfile-reporter',
97 | 'karma-html2js-preprocessor'
98 | ]
99 | });
100 | }
--------------------------------------------------------------------------------
/lancaster/images/chalkboard.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/intel/appframework/724d7e9ea4bcb79f65fdd7ad21ddcd42a2f1c83c/lancaster/images/chalkboard.jpg
--------------------------------------------------------------------------------
/lancaster/images/circle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/intel/appframework/724d7e9ea4bcb79f65fdd7ad21ddcd42a2f1c83c/lancaster/images/circle.png
--------------------------------------------------------------------------------
/lancaster/images/divide2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/intel/appframework/724d7e9ea4bcb79f65fdd7ad21ddcd42a2f1c83c/lancaster/images/divide2.png
--------------------------------------------------------------------------------
/lancaster/images/home60.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/intel/appframework/724d7e9ea4bcb79f65fdd7ad21ddcd42a2f1c83c/lancaster/images/home60.png
--------------------------------------------------------------------------------
/lancaster/images/minus.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/intel/appframework/724d7e9ea4bcb79f65fdd7ad21ddcd42a2f1c83c/lancaster/images/minus.png
--------------------------------------------------------------------------------
/lancaster/images/multiply2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/intel/appframework/724d7e9ea4bcb79f65fdd7ad21ddcd42a2f1c83c/lancaster/images/multiply2.png
--------------------------------------------------------------------------------
/lancaster/images/plus.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/intel/appframework/724d7e9ea4bcb79f65fdd7ad21ddcd42a2f1c83c/lancaster/images/plus.png
--------------------------------------------------------------------------------
/lancaster/images/triangle_stroked.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/intel/appframework/724d7e9ea4bcb79f65fdd7ad21ddcd42a2f1c83c/lancaster/images/triangle_stroked.png
--------------------------------------------------------------------------------
/lancaster/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Lancaster
8 |
38 |
45 |
46 |
47 | Andrew Student: 0 Points
48 |
49 |
50 |
51 |
52 |
53 |
54 | Addition
55 |
56 |
57 |
58 |
59 | Subtraction
60 |
61 |
62 |
63 |
64 | Multiplication
65 |
66 |
67 |
68 |
69 |
70 |
71 | Division
72 |
73 |
74 |
85 |
86 |
87 |
88 |
90 |
91 |
92 |
93 |
Your Profile
94 |
95 |
96 |
97 |
98 |
99 |
Avatar
100 |
101 | Pick your avatar
102 |
103 |
104 |
105 |
106 |
107 | Sign Out
108 |
109 |
110 |
111 |
114 |
115 |
116 |
117 |
118 |
119 |
Quiz content stuff
120 |
✓
121 |
(0/0)
122 |
123 |
What is 0+1?
124 |
125 |
126 | One
127 | Three
128 | Two
129 | Four
130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 |
140 |
141 |
3 |
4 | Permission is hereby granted, free of charge, to any person obtaining a copy
5 | of this software and associated documentation files (the "Software"), to deal
6 | in the Software without restriction, including without limitation the rights
7 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
8 | copies of the Software, and to permit persons to whom the Software is
9 | furnished to do so, subject to the following conditions:
10 |
11 | The above copyright notice and this permission notice shall be included in
12 | all copies or substantial portions of the Software.
13 |
14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
15 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
16 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
17 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
18 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
19 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
20 | THE SOFTWARE.
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "intel-appframework",
3 | "version": "3.0.0",
4 | "description": "App Framework is a Javascript framework targeted at HTML5 browsers with a blazingly fast query selector library that supports W3C queries.",
5 | "main": "build/appframework.ui.min.js",
6 | "repository": {
7 | "type": "git",
8 | "url": "git://github.com/01org/appframework.git"
9 | },
10 | "authors": [
11 | {
12 | "name": "Ian Maffett",
13 | "email": "ian.maffett@intel.com"
14 | }
15 | ],
16 | "engines": {
17 | "node": ">=0.8.14 <0.11"
18 | },
19 | "license": "MIT",
20 | "bugs": {
21 | "url": "https://github.com/01org/appframework/issues"
22 | },
23 | "keywords": [
24 | "mobile",
25 | "app",
26 | "html5",
27 | "hybrid",
28 | "cordova",
29 | "phonegap",
30 | "tablet",
31 | "touch"
32 | ],
33 | "devDependencies": {
34 | "blanket": "~1.1.5",
35 | "chai": "~1.7.2",
36 | "express": "~3.3.7",
37 | "grunt": "~0.4.1",
38 | "grunt-banner": "~0.2.0",
39 | "grunt-cli": "~0.1.9",
40 | "grunt-closure-compiler": "~0.0.21",
41 | "grunt-contrib-clean": "~0.5.0",
42 | "grunt-contrib-concat": "~0.3.0",
43 | "grunt-contrib-cssmin": "~0.4.1",
44 | "grunt-contrib-jshint": "~0.6.2",
45 | "grunt-contrib-uglify": "~0.2.2",
46 | "grunt-karma": "^0.8.3",
47 | "grunt-mochaccino": "~0.1.7",
48 | "karma": "^0.12.17",
49 | "karma-chai": "^0.1.0",
50 | "karma-chrome-launcher": "^0.1.4",
51 | "karma-coverage": "^0.2.4",
52 | "karma-html2js-preprocessor": "^0.1.0",
53 | "karma-htmlfile-reporter": "^0.1.2",
54 | "karma-mocha": "^0.1.6",
55 | "mocha": "^1.20.1",
56 | "grunt-contrib-less": "latest",
57 | "grunt-contrib-watch": "latest"
58 | }
59 | }
--------------------------------------------------------------------------------
/partials/actionsheet.html:
--------------------------------------------------------------------------------
1 |
29 | This creates a slide in action sheet from the bottom.
30 | Show Custom Html Sheet
33 | Show Custom Json Sheet
--------------------------------------------------------------------------------
/partials/forms.html:
--------------------------------------------------------------------------------
1 | Standard
2 |
8 |
9 | Grouping
10 |
17 | Labeled
18 |
26 |
38 |
39 | Radios
40 |
53 | Checkbox and Button
54 |
67 |
68 | Toggle Switches
69 |
84 |
--------------------------------------------------------------------------------
/partials/leftnav.html:
--------------------------------------------------------------------------------
1 |
2 |
5 |
6 |
7 | Foobar stuff goes here
8 |
9 |
10 |
Close
11 |
12 |
15 |
16 |
20 |
Show Lock Screen
20 | Show Lock Screen (rounded)
22 | Alert style diaglog
36 | Detailed ineraction
38 | HTML markup
40 | Toast1
5 | Toast2
8 | Toast3
11 | Toast4
--------------------------------------------------------------------------------
/partials/touch.html:
--------------------------------------------------------------------------------
1 |
2 |
29 | Touch Events
30 | Back
31 |
32 |
46 |
--------------------------------------------------------------------------------
/samples/angular/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | AF/Angular
8 |
27 | App Framework
28 |
Starting app
32 |
33 |
34 |
35 |
38 |
39 |
40 |
41 |
42 | This basic demo shows how to use Angular and App Framework UI together.
43 |
44 |
45 |
49 |
Todo
2 |
3 | Add
4 |
7 |
8 | {{todo.title}}
9 |
10 |
--------------------------------------------------------------------------------
/samples/angular/readme.md:
--------------------------------------------------------------------------------
1 | #sample
2 |
3 | This sample is to show basic usage of Angular and App Framework UI. This does not go into more advanced features, such as page routing/navigation. The key takeway is delaying the loading of Angular until App Framework UI has been dispatched for loading the "partials" in App Framework UI. This also shows using a directive for the "longTap" event App Framework UI dispatches.
--------------------------------------------------------------------------------
/samples/backbone/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | AF/Angular
8 |
28 | App Framework
29 |
Starting app
33 |
34 |
35 |
36 |
39 |
40 |
41 |
Todo
42 |
43 |
Add
44 |
45 |
46 |
48 |
49 |
50 | This basic demo shows how to use Backbone and App Framework UI together.
51 |
52 |
53 |
57 |
AF/React
8 |
28 | App Framework
29 |
Starting app
33 |
34 |
35 |
36 |
39 |
40 |
41 |
42 |
Todo
43 |
44 |
45 |
Long press to delete
46 |
47 |
48 |
49 | This basic demo shows how to use React and App Framework UI together.
50 |
51 |
52 |
56 |
{this.props.name}
9 | );
10 | },
11 | componentDidMount:function(){
12 | $(this.getDOMNode()).on("longTap",function(e){
13 | var cf=confirm("Are you sure you want to delete this item?")
14 | if(!cf) return;
15 | var item=e.target;
16 | React.unmountComponentAtNode(item);
17 | $(item).remove();
18 | _todoList.splice(_todoList.indexOf(item.innerHTML));
19 | });
20 | },
21 | componentWillUnmount:function(){
22 | console.log("remove test");
23 | }
24 | });
25 |
26 |
27 |
28 | var todolist = React.createClass({
29 | render: function() {
30 | var items=_todoList.map(function(item){
31 | return (
32 |
33 | );
34 | });
35 | return (
36 |
37 | );
38 | }
39 | });
40 |
41 |
42 |
43 | /** @jsx React.DOM */
44 | var todoform = React.createClass({
45 | handleSubmit: function(e) {
46 | e.preventDefault();
47 | var val=this.refs.todoVal.getDOMNode().value.trim();
48 | if(val.length<2)
49 | return;
50 | _todoList.push(val);
51 | this.refs.todoVal.getDOMNode().value=null;
52 | renderTodos();
53 | return;
54 | },
55 | render: function() {
56 | return (
57 |
59 | );
60 | }
61 | });
62 | React.renderComponent(
63 | Back Show Alert 3 Show Alert 4 ');
9 |
10 | You can also use an arra of objects to show each item. There are three propertyes
11 | text - the text to display
12 | cssClasses - extra css classes
13 | handler - click handler function
14 |
15 | $(document.body).actionsheet(
16 | [{
17 | text: 'back',
18 | cssClasses: 'red',
19 | handler: function () {
20 | $.ui.goBack();
21 | }
22 | }, {
23 | text: 'show alert 5',
24 | cssClasses: 'blue',
25 | handler: function () {
26 | alert("hi");
27 | }
28 | }, {
29 | text: 'show alert 6',
30 | cssClasses: '',
31 | handler: function () {
32 | alert("goodbye");
33 | }
34 | }]
35 | );
36 |
37 | */
38 |
39 | (function($) {
40 | "use strict";
41 | $.fn.actionsheet = function(opts) {
42 | var tmp;
43 | for (var i = 0; i < this.length; i++) {
44 | tmp = new actionsheet(this[i], opts);
45 | }
46 | return this.length === 1 ? tmp : this;
47 | };
48 | var actionsheet = function(elID, opts) {
49 | if (typeof elID === "string" || elID instanceof String) {
50 | this.el = document.getElementById(elID);
51 | } else {
52 | this.el = elID;
53 | }
54 | if (!this.el) {
55 | window.alert("Could not find element for actionsheet " + elID);
56 | return;
57 | }
58 |
59 | if (this instanceof actionsheet) {
60 | if (typeof(opts) === "object") {
61 | for (var j in opts) {
62 | this[j] = opts[j];
63 | }
64 | }
65 | } else {
66 | return new actionsheet(elID, opts);
67 | }
68 |
69 | var markStart = "";
71 | var markup;
72 | var noop=function(){};
73 | if (typeof opts === "string") {
74 | markup = $(markStart + opts + "Cancel " + markEnd);
75 | } else if (typeof opts === "object") {
76 | markup = $(markStart + markEnd);
77 | var container = $(markup.children().get(0));
78 | opts.push({
79 | text: "Cancel",
80 | cssClasses: "cancel"
81 | });
82 | for (var i = 0; i < opts.length; i++) {
83 | var item = $("" + (opts[i].text || "TEXT NOT ENTERED") + " ");
84 | item[0].onclick = (opts[i].handler || noop);
85 | if (opts[i].cssClasses && opts[i].cssClasses.length > 0)
86 | item.addClass(opts[i].cssClasses);
87 | container.append(item);
88 | }
89 | }
90 | $(elID).find("#af_actionsheet").remove();
91 | $(elID).find("#af_action_mask").remove();
92 | $(elID).append(markup);
93 |
94 | markup.vendorCss("Transition", "all 0ms");
95 | this.el.style.overflow = "hidden";
96 | markup.on("click", "a", this.sheetClickHandler.bind(this));
97 | this.activeSheet = markup;
98 | markup.cssTranslate("0," + ((markup.height())) + "px");
99 | $(elID).append("
");
100 | setTimeout(function() {
101 | markup.vendorCss("Transition", "all 300ms");
102 | markup.cssTranslate("0,0");
103 | }, 10);
104 | $("#af_action_mask").bind("touchstart touchmove touchend click",function(e){
105 | e.preventDefault();
106 | e.stopPropagation();
107 | });
108 |
109 | };
110 | actionsheet.prototype = {
111 | activeSheet: null,
112 | sheetClickHandler:function(){
113 | this.hideSheet();
114 | return false;
115 | },
116 | hideSheet: function() {
117 | this.activeSheet.off("click", "a", this.sheetClickHandler);
118 | $(this.el).find("#af_action_mask").unbind("click").remove();
119 | this.activeSheet.vendorCss("Transition", "all 0ms");
120 | var markup = this.activeSheet;
121 | var theEl = this.el;
122 | setTimeout(function() {
123 | markup.vendorCss("Transition", "all 300ms");
124 | markup.cssTranslate("0,"+(markup.height()+60)+"px");
125 | setTimeout(function() {
126 | markup.remove();
127 | markup = null;
128 | theEl.style.overflow = "none";
129 | }, 350);
130 | }, 10);
131 | }
132 | };
133 | $.afui.actionsheet=function(opts){
134 | return $(document.body).actionsheet(opts);
135 | };
136 | })(jQuery);
137 |
--------------------------------------------------------------------------------
/src/af.animateheader.js:
--------------------------------------------------------------------------------
1 | /**
2 | * af.animateheader
3 | * @copyright Intel 2014
4 | *
5 | */
6 |
7 | (function($){
8 | "use strict";
9 | //animate the headers on transtion
10 | var oldTitle=$.afui.setTitle;
11 | $.afui.animateHeader=function(what){
12 | if(what!==false){
13 | $.afui.setTitle=function(item,view,back,newView){
14 |
15 | var title;
16 | if(typeof(item)==="string"){
17 | title=item;
18 | }
19 | else if($(item).attr("data-title"))
20 | title=$(item).attr("data-title");
21 | else if($(item).attr("title"))
22 | title=$(item).attr("title");
23 |
24 | if(!title||title.length===0) return;
25 |
26 | var header=$(this.activeDiv).closest(".view").children("header").eq(0);
27 | var cssClass=back?"header-unload":"header-load";
28 |
29 | var old=header.find("h1").eq(0).html();
30 |
31 | //update the current header h1 so we keep the DOM node for events, etc
32 | header.find("h1").eq(0).html(title).removeClass("header-unload header-load");
33 | if(newView) return;
34 | header.find("h1").animation().run(cssClass+"-to");
35 |
36 | //append a second for animation
37 | var second=$(""+old+" ");
38 | header.append(second);
39 | second.animation().end(function(){
40 | $(this).remove();
41 | }).run(cssClass);
42 | };
43 | }
44 | else{
45 | $.afui.setTitle=oldTitle;
46 | }
47 | };
48 |
49 | })(jQuery);
--------------------------------------------------------------------------------
/src/af.animation.js:
--------------------------------------------------------------------------------
1 | /**
2 | * af.animation
3 | * @copyright Intel 2014
4 | *
5 | */
6 | /* jshint strict:false*/
7 | (function ($) {
8 |
9 | $.fn.animation = function () {
10 | var item = this;
11 | this.each(function () {
12 | item = new Animator(this);
13 | });
14 | return item;
15 | };
16 |
17 | function Animator(element) {
18 | this.element = element;
19 | this.element.classList.remove("animation-reverse");
20 | this.keepClass = false;
21 | }
22 |
23 | var animEnd = function (evt) {
24 | this.element.removeEventListener("webkitAnimationEnd", this.endCBCache, false);
25 | this.element.removeEventListener("animationend", this.endCBCache, false);
26 | this.element.removeEventListener("MSAnimationEnd", this.endCBCache, false);
27 | if (this.endcb)
28 | this.endcb.call(this.element, evt);
29 | this.element.classList.remove("animation-reverse");
30 | this.element.classList.remove("animation-active");
31 | if (!this.keepClass)
32 | this.element.classList.remove(this.animClass);
33 | };
34 | Animator.prototype = {
35 | element: null,
36 | animClass: null,
37 | runEnd: false,
38 | keepClass: false,
39 | keep: function () {
40 | this.keepClass = true;
41 | return this;
42 | },
43 | remove: function (item) {
44 | this.element.classList.remove(item);
45 | this.element.offsetWidth = this.element.offsetWidth;
46 | return this;
47 | },
48 | endCBCache: null,
49 | run: function (item, duration) {
50 | this.runEnd = false;
51 | this.element.classList.add("animation-active");
52 | //Hack to trigger reflow
53 | this.element.offsetWidth = this.element.offsetWidth;
54 | this.element.classList.add(item);
55 | this.animClass = item;
56 | //check if it exists..if not trigger end
57 | var computedStyle = window.getComputedStyle(this.element, null);
58 | var time = computedStyle.animation - duration;
59 | if (!time)
60 | time = computedStyle.animationDuration;
61 | if (!time)
62 | time = computedStyle.MozAnimationDuration;
63 | if (!time)
64 | time = computedStyle.webkitAnimationDuration;
65 | time = parseFloat(time);
66 | if (time <= 0.01 || isNaN(time))
67 | this.runEnd = true;
68 |
69 | //Due to calling .bind, we need to cache a reference to the function to remove it
70 | this.endCBCache = animEnd.bind(this);
71 |
72 | if (this.runEnd) {
73 | this.endCBCache();
74 | return this;
75 | }
76 | this.element.addEventListener("webkitAnimationEnd", this.endCBCache, false);
77 | this.element.addEventListener("animationend", this.endCBCache, false);
78 | this.element.addEventListener("MSAnimationEnd", this.endCBCache, false);
79 | return this;
80 | },
81 | reverse: function () {
82 | this.element.classList.add("animation-reverse");
83 | return this;
84 | },
85 | reRun: function (item) {
86 | this.remove(item);
87 | return this.run(item);
88 | },
89 | endcb: function () {},
90 | end: function (cb) {
91 | this.endcb = cb;
92 | return this;
93 | }
94 | };
95 |
96 |
97 | $.fn.transition = function () {
98 | var item = this;
99 | this.each(function () {
100 | item = new Transition(this);
101 | });
102 | return item;
103 | };
104 |
105 | function Transition(element) {
106 | this.element = element;
107 | this.element;
108 | }
109 |
110 | var transitionEnd = function (evt) {
111 |
112 | clearTimeout(this.timer);
113 | this.element.removeEventListener("webkitTransitionEnd", this.endCBCache, false);
114 | this.element.removeEventListener("transitionend", this.endCBCache, false);
115 | this.element.removeEventListener("MSTransitionEnd", this.endCBCache, false);
116 | if (this.endcb)
117 | this.endcb.call(this.element, evt);
118 | if (!this.keepEnd) {
119 | $(this.element).vendorCss("TransitionDuration", "");
120 | $(this.element).vendorCss("Transform", "");
121 | }
122 |
123 | };
124 | Transition.prototype = {
125 | element: null,
126 | runEnd: false,
127 | keepEnd: false,
128 | keep: function () {
129 | this.keepEnd = true;
130 | return this;
131 | },
132 | endCBCache: null,
133 | timer: null,
134 | run: function (trans, duration) {
135 |
136 | this.endCBCache = transitionEnd.bind(this);
137 | this.element.addEventListener("webkitTransitionEnd", this.endCBCache, false);
138 | this.element.addEventListener("transitionend", this.endCBCache, false);
139 | this.element.addEventListener("MSTransitionEnd", this.endCBCache, false);
140 | //$(this.element).vendorCss("TransitionProperty","all");
141 | $(this.element).vendorCss("TransitionDuration", duration);
142 | $(this.element).vendorCss("Transform", trans);
143 | this.timer = setTimeout(function () {
144 | this.endCBCache();
145 | }.bind(this), parseInt(duration,10) + 50);
146 | return this;
147 | },
148 | endcb: function () {},
149 | end: function (cb) {
150 | this.endcb = cb;
151 | return this;
152 | }
153 | };
154 | })(jQuery);
--------------------------------------------------------------------------------
/src/af.grower.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This plugin creates a "grow" transition using scaling and transforms
3 | * @author Ian Maffett
4 | * @copyright 2014 Intel
5 | */
6 |
7 |
8 | (function($){
9 | "use strict";
10 |
11 |
12 | $.afui.registerDataDirective("[data-grower]",function(item,e){
13 | var $el=$(item).closest("[data-grower]");
14 | var items=$el.offset();
15 | var view=$el.closest(".view");
16 | var toPanel=e.target.hash||$el.attr("data-grower");
17 | view.css("zIndex","1");
18 | var growView=$(toPanel).closest(".view");
19 |
20 | var scaleX=($el.width()/window.innerWidth);
21 | var scaleY=($el.height()/window.innerHeight);
22 |
23 | var transProps={
24 | left:items.left,
25 | top:items.top,
26 | x:scaleX,
27 | y:scaleY
28 | };
29 | $(toPanel).trigger("panelgrowstart",[$el.get(0)]);
30 | growView.addClass("active").css("zIndex","10");
31 | growView.vendorCss("TransformOrigin","0 0");
32 | growView.data("growTransProps",transProps);
33 | growView.vendorCss("TransitionDuration","0");
34 | growView.vendorCss("Transform","translate3d("+items.left+"px,"+items.top+"px,0) scale("+scaleX+","+scaleY+")");
35 | growView.data("growTarget",$el.closest(".panel"));
36 | growView.data("growFrom",$(toPanel).attr("id"));
37 | $.afui.loadContent(toPanel,view,false,"stretch");
38 | $(toPanel).one("panelload",function(){
39 | growView.vendorCss("Transform","");
40 | $(toPanel).trigger("panelgrowcomplete",[$el.get(0)]);
41 | });
42 | });
43 |
44 | $.afui.registerDataDirective("[data-grower-back]",function(item){
45 |
46 | var growView=$(item).closest(".view");
47 | var fromPanel=$("#"+growView.data("growFrom"));
48 | fromPanel.trigger("panelgrowendstart");
49 | var trans=growView.data("growTransProps");
50 | var toPanel="#"+growView.data("growTarget").prop("id");
51 | $(toPanel).closest(".view").addClass("active");
52 | growView.addClass("animation-active");
53 |
54 | growView.transition().end(function(){
55 | growView.removeClass("active");
56 | fromPanel.trigger("panelgrowendstart");
57 | $.afui.loadContent(toPanel,false,false,"none");
58 | }).run("translate3d("+trans.left+"px,"+trans.top+"px,0) scale("+trans.x+","+trans.y+")","300ms");
59 | });
60 | })(jQuery);
--------------------------------------------------------------------------------
/src/af.lockscreen.js:
--------------------------------------------------------------------------------
1 | /**
2 | * af.lockscreen - a lockscreen for html5 mobile apps
3 | * Copyright 2015 - Intel
4 | */
5 |
6 | /** global FastClick **/
7 |
8 | /** jshint camelcase:false **/
9 |
10 |
11 | (function($){
12 | "use strict";
13 |
14 | $.fn.lockScreen = function(opts) {
15 | var tmp;
16 | for (var i = 0; i < this.length; i++) {
17 | tmp = new LockScreen(this[i], opts);
18 | }
19 | return this.length === 1 ? tmp : this;
20 | };
21 |
22 | var LockScreen = function (containerEl, opts) {
23 | if (typeof(opts) === "object") {
24 | for (var j in opts) {
25 | this[j] = opts[j];
26 | }
27 | }
28 | };
29 | LockScreen.prototype= {
30 | logo:"
",
31 | roundKeyboard:false,
32 | validatePassword:function(){},
33 | renderKeyboard:function(){
34 | var html="";
35 | for(var i=0;i<8;i=i+3){
36 | html+="";
37 | for(var j=1;j<=3;j++){
38 | var num=i+j;
39 | html+="
"+num+"
";
40 | }
41 | html+="
"+this.renderKeyboard()+"
";
51 | var item=$("
");
52 | item.html(container);
53 | if(this.roundKeyboard){
54 | item.addClass("round");
55 | item.find("input[type='password']").attr("placeholder",("◌◌◌◌"));
56 | }
57 | this.lockscreen=item;
58 | $(document.body).append(item);
59 | var pass=$("#lockScreen input[type='password']");
60 | var self=this;
61 | $(item).on("click",function(evt){
62 | var target=$(evt.target);
63 | if(target.length===0) return;
64 | var key=target.attr("data-key");
65 | if(!key) return;
66 | if(key==="delete"){
67 | pass.val(pass.val().substring(0,pass.val().length-1));
68 | return;
69 | }
70 | var len=pass.val().length;
71 |
72 | if(len<4)
73 | pass.val(pass.val()+key);
74 | if(pass.val().length===4){
75 | if(self.validatePassword(pass.val()))
76 | self.hide();
77 | else {
78 | self.lockscreen.find(".error").css("visibility","visible");
79 | setTimeout(function(){
80 | self.lockscreen.find(".error").css("visibility","hidden");
81 | pass.val("");
82 | },1000);
83 | }
84 | }
85 | });
86 | $(item).on("touchstart",function(evt){
87 | $(evt.target).addClass("touched");
88 | }).on("touchend",function(evt){
89 | $(evt.target).removeClass("touched");
90 | });
91 | },
92 | hide:function(){
93 | if(this.lockscreen)
94 | this.lockscreen.remove();
95 | }
96 | };
97 | })(jQuery);
98 |
--------------------------------------------------------------------------------
/src/af.splashscreen.js:
--------------------------------------------------------------------------------
1 |
2 | /**
3 | * af.splashscreen
4 | * @copyright Intel 2014
5 | *
6 | */
7 | (function($){
8 | "use strict";
9 | $.afui.ready(function(){
10 | //delay to hide the splashscreen
11 | setTimeout(function(){
12 | $("#splashscreen").remove();
13 | },250);
14 | });
15 | })(jQuery);
--------------------------------------------------------------------------------
/src/af.swipereveal.js:
--------------------------------------------------------------------------------
1 | /**
2 | * af.swipereveal
3 | * @copyright Intel 2014
4 | *
5 | */
6 | (function($){
7 | "use strict";
8 |
9 | //Register the handler for opening
10 | var target;
11 | var pos=0;
12 | var end;
13 | var width;
14 | $.afui.swipeThreshold=0.3;
15 | $(document).on("swipeStartLeft",".swipe-reveal",function(e,touch,originalE){
16 |
17 | originalE.preventDefault();
18 | target=$(e.target).closest(".swipe-content");
19 | pos=touch.x2;
20 | width=target.closest(".swipe-reveal").find(".swipe-hidden").width();
21 | if($.getCssMatrix(e.target).e!==0)
22 | return ;
23 |
24 | target.bind("touchmove",tracker);
25 | target.one("touchend",function(){
26 | target.unbind("touchmove",tracker);
27 | if(Math.abs(end)/width<$.afui.swipeThreshold)
28 | {
29 | width=0;
30 | }
31 | target.transition().keep().end(function(){
32 | width=null;
33 | target=null;
34 | }).run("translate3d("+(-width)+"px,0px,0)","100ms");
35 | });
36 | });
37 |
38 | $(document).on("swipeStartRight",".swipe-reveal",function(e,touch,originalE){
39 | originalE.preventDefault();
40 | target=$(e.target).closest(".swipe-content");
41 |
42 | width=target.closest(".swipe-reveal").find(".swipe-hidden").width();
43 | if ($(e.target).parents(".swipe-content").length===0) {
44 | if($.getCssMatrix(e.target).e===0)
45 | return ;
46 | }
47 | pos=touch.x2+width;
48 | target.bind("touchmove",tracker);
49 | target.one("touchend",function(){
50 | target.unbind("touchmove",tracker);
51 | if((1-Math.abs(end)/width)>$.afui.swipeThreshold)
52 | {
53 | width=0;
54 | }
55 | target.transition().keep().end(function(){
56 | width=null;
57 | target=null;
58 | }).run("translate3d("+(-width)+"px,0px,0)","100ms");
59 | });
60 | });
61 |
62 |
63 | var tracker=function(e){
64 | var to=-(pos-(e.touches[0].pageX));
65 | if((to)<-width)
66 | to="-"+width;
67 | else if(to>0)
68 | to=0;
69 | end=to;
70 |
71 | target.cssTranslate(to+"px,0");
72 | };
73 |
74 | })(jQuery);
--------------------------------------------------------------------------------
/src/af.toast.js:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | (function ($) {
6 | "use strict";
7 | $.fn.toast = function (opts) {
8 | return new Toast(this[0], opts);
9 | };
10 | var Toast = (function () {
11 | var Toast = function (containerEl, opts) {
12 |
13 | if (typeof containerEl === "string" || containerEl instanceof String) {
14 | this.container = document.getElementById(containerEl);
15 | } else {
16 | this.container = containerEl;
17 | }
18 | if (!this.container) {
19 | window.alert("Error finding container for toast " + containerEl);
20 | return;
21 | }
22 | if (typeof (opts) === "string" || typeof (opts) === "number") {
23 | opts = {
24 | message: opts
25 | };
26 | }
27 | this.addCssClass = opts.addCssClass ? opts.addCssClass : "";
28 | this.message = opts.message || "";
29 | this.delay=opts.delay||this.delay;
30 | this.position=opts.position||"";
31 | this.addCssClass+=" "+this.position;
32 | this.type=opts.type||"";
33 | //Check if the container exists
34 | this.container=$(this.container);
35 | if(this.container.find(".afToastContainer").length===0)
36 | {
37 | this.container.append("
");
38 | }
39 | this.container=this.container.find(".afToastContainer");
40 | this.container.removeClass("tr br tl bl tc bc").addClass(this.addCssClass);
41 | if(opts.autoClose===false)
42 | this.autoClose=false;
43 | this.show();
44 | };
45 |
46 | Toast.prototype = {
47 | addCssClass: null,
48 | message: null,
49 | delay:5000,
50 | el:null,
51 | container:null,
52 | timer:null,
53 | autoClose:true,
54 | show: function () {
55 | var self = this;
56 | var markup = ""+
57 | "
" + this.message + "
"+
58 | "
App Framework Kitchen Sink
8 |
30 | App Framework
31 |
Starting app
35 |
36 |
37 |
38 |
42 |
43 |
44 | Splitview Demo
45 |
46 |
47 |
48 |
49 | Foobar stuff goes here
50 |
51 |
52 |
53 |
57 |
58 |
59 |
60 |
63 |
64 |
65 | Splitview page 1
66 |
Page 2
67 |
68 |
69 | Splitview Page 2
70 |
71 |
72 |
76 |
79 |
80 |
List View Template
8 |
28 | App Framework - List View
29 |
Starting app
33 |
34 |
35 |
36 |
37 | List View Example
38 |
39 |
40 |
41 |
42 |
43 |
59 |
60 |
61 |
62 |
This is detail view for Item 1
63 |
64 |
65 |
66 |
This is detail view for Item 2
67 |
68 |
69 |
70 |
This is detail view for Item 3
71 |
72 |
73 |
74 |
This is detail view for Item 4
75 |
76 |
77 |
78 |
This is detail view for Item 5
79 |
80 |
81 |
82 |
This is detail view for Item 6
83 |
84 |
85 |
86 |
This is detail view for Item 7
87 |
88 |
89 |
90 |
This is detail view for Item 8
91 |
92 |
93 |
94 |
This is detail view for Item 9
95 |
96 |
97 |
98 |
This is detail view for Item 10
99 |
100 |
101 |
102 |
This is detail view for Item 11
103 |
104 |
105 |
106 |
This is detail view for Item 12
107 |
108 |
109 |
110 |
111 |
112 |
115 |
Tab View Template
8 |
26 | App Framework - Tab View
27 |
Starting app
31 |
32 |
33 |
34 |
37 |
38 |
39 |
40 |
41 |
42 | This is view for first Tab
43 |
44 |
45 |
46 | This is view for second Tab
47 |
48 |
49 |
About
50 |
51 |
52 |
53 | This is view for third Tab
54 |
55 |
56 |
57 | This is view for fourth Tab
58 |
59 |
60 |
61 |
62 |
68 |
Back Show Alert 3 Show Alert 4 ');
7 | $("#af_actionsheet").css("display").should.eql("block");
8 | setTimeout(function(){
9 | $("#af_actionsheet a").length.should.eql(4);
10 | sheet.hideSheet();
11 | setTimeout(function(){
12 | $("#af_actionsheet").length.should.eql(0);
13 | done();
14 | },400);
15 | },400);
16 | });
17 | it("should display the action sheet from an array of objects",function(done){
18 | var sheet=$(document.body).actionsheet(
19 | [{
20 | text: 'back',
21 | cssClasses: 'red',
22 | handler: function () {
23 | $.ui.goBack();
24 | }
25 | }, {
26 | text: 'show alert 6',
27 | cssClasses: '',
28 | handler: function () {
29 | alert("goodbye");
30 | }
31 | }]);
32 | $("#af_actionsheet").css("display").should.eql("block");
33 | setTimeout(function(){
34 | $("#af_actionsheet a").length.should.eql(3);
35 | sheet.hideSheet();
36 | setTimeout(function(){
37 | $("#af_actionsheet").length.should.eql(0);
38 | done();
39 | },400);
40 | },400);
41 | });
42 | it("should dismiss the action sheet from an item click",function(done){
43 | var sheet=$(document.body).actionsheet(
44 | [{
45 | text: 'back',
46 | cssClasses: 'red',
47 | handler: function () {
48 | done();
49 | }
50 | }, {
51 | text: 'show alert 6',
52 | cssClasses: ''
53 | }]);
54 | $("#af_actionsheet").css("display").should.eql("block");
55 | setTimeout(function(){
56 | $("#af_action_mask").trigger("click");
57 | $("#af_actionsheet a").eq(0).trigger("click");
58 | //trigger a click on the mask
59 | },400);
60 | });
61 | });
62 |
--------------------------------------------------------------------------------
/test/animation.test.js:
--------------------------------------------------------------------------------
1 | describe("animation", function () {
2 |
3 | beforeEach(function () {
4 | $("#animmator").remove();
5 | $(document.body).append("
");
6 | });
7 |
8 | it("should be an object",function(){
9 | var foo=$("#animmator").animation();
10 | expect($.isObject(foo)).to.be.true;
11 | });
12 |
13 | it("should run an animation",function(done){
14 | $("#animmator").animation().end(function(){
15 | done();
16 | }).run('asdf');
17 | });
18 | it("should run an animation with no callback",function(done){
19 | $("#animmator").animation().run('asdf');
20 | done();
21 | });
22 | it("should keep the class",function(done){
23 | $("#animmator").animation().keep().end(function(){
24 | expect(this.classList.contains("asdf")).to.be.true;
25 | done();
26 | }).run('asdf');
27 | });
28 | it("should keep the class",function(done){
29 | $("#animmator").animation().keep().end(function(){
30 | expect(this.classList.contains("asdf")).to.be.true;
31 | done();
32 | }).run('asdf');
33 | });
34 |
35 | it("should rerun the animation",function(done){
36 | $("#animmator").animation().end(function(){
37 | done();
38 | }).reRun('asdf');
39 | });
40 |
41 | it("should run the animation in reverse",function(done){
42 | $("#animmator").animation().reverse().end(function(){
43 | done();
44 | }).run('asdf');
45 | });
46 |
47 | it("should run the slide-in animation",function(done){
48 | $("#animmator").animation().end(function(){
49 | done();
50 | }).run('slide-in');
51 | });
52 |
53 | });
54 |
55 |
56 |
--------------------------------------------------------------------------------
/test/chai.helper.js:
--------------------------------------------------------------------------------
1 | // turn on stack traces for errors thrown during chai assertions
2 | chai.Assertion.includeStack = true;
3 |
4 | // make API globally available
5 | var should = chai.should();
6 | var expect = chai.expect;
7 | beforeEach(function() {
8 | $.afui.autoLaunch=false;
9 | $("#moo").remove();
10 | });
11 |
12 | $.afui.autoLaunch=false;
13 |
--------------------------------------------------------------------------------
/test/cssTranslate.test.js:
--------------------------------------------------------------------------------
1 | describe("cssTranslate", function () {
2 | var stubMatrix = { a: 1, b: 1, c: 1, d: 1, e: 1, f: 1 };
3 |
4 | beforeEach(function () {
5 | $(document.body).append("
");
6 |
7 |
8 | });
9 |
10 | it("should set the webkit css value", function () {
11 | $.feat.cssPrefix ="Webkit";
12 | var el=document.getElementById("moo");
13 | var time="100ms";
14 | $(el).cssTranslate("100px,0");
15 | var style=el.style["WebkitTransform"];
16 | expect(style==="translate3d(100px, 0px, 0px)").is.true;
17 |
18 | });
19 |
20 | it("should set the proper x/y coords", function () {
21 | $.feat.cssPrefix ="Webkit";
22 | var el=document.getElementById("moo");
23 | var time="100ms";
24 | $(el).cssTranslate("100px,100px");
25 | var style=el.style["WebkitTransform"];
26 | expect(style==="translate3d(100px, 100px, 0px)").is.true;
27 | });
28 |
29 |
30 |
31 |
32 |
33 | });
34 |
--------------------------------------------------------------------------------
/test/desktopbrowsers.test.js:
--------------------------------------------------------------------------------
1 | describe("desktopbrowsers",function(){
2 |
3 | var $item;
4 | var item;
5 | before(function(){
6 | $(document.body).append("
");
7 | $item=$("#desktopbrowsers");
8 | item=$item.get(0);
9 | });
10 |
11 | function fakeMouseEvent(evt,target,x,y){
12 | var mousedownEvent = document.createEvent ("MouseEvent");
13 | mousedownEvent.initMouseEvent (evt, true, true, window, 0,
14 | x,y,x,y,
15 | 0,0,0,0,
16 | 0, null);
17 | target.dispatchEvent (mousedownEvent);
18 | }
19 |
20 | after(function(){
21 | $("#desktopbrowsers").remove();
22 | })
23 |
24 | it("mouse click should trigger a touchstart",function(done){
25 | $item.one("touchstart",function(){done();});
26 | fakeMouseEvent("mousedown",item,1,1);
27 |
28 | });
29 | it("should trigger touchmove from mousemove",function(done){
30 | $item.one("touchmove",function(){
31 | done();
32 | });
33 | fakeMouseEvent("mousemove",item,2,2);
34 | });
35 | it("should NOT trigger touchmove from mousemove with no movement",function(done){
36 | var bad=true;
37 | $item.one("touchmove",function(){
38 | bad=false;
39 | });
40 | setTimeout(function(){
41 | expect(bad).to.be.true
42 | done();
43 | },100);
44 | fakeMouseEvent("mousemove",item,1,1);
45 | });
46 | it("should trigger touchend from mouseup event",function(done){
47 | $item.one("touchend",function(){done();});
48 | fakeMouseEvent("mouseup",item,1,1);
49 | });
50 | it("should NOT trigger touchmove from mousemove with no mousedown",function(done){
51 | var bad=true;
52 | $item.one("touchmove",function(){
53 | bad=false;
54 | });
55 | setTimeout(function(){
56 | expect(bad).to.be.true
57 | done();
58 | },100);
59 | fakeMouseEvent("mousemove",item,1,1);
60 | });
61 |
62 |
63 | });
--------------------------------------------------------------------------------
/test/drawer.test.js:
--------------------------------------------------------------------------------
1 | describe("drawerTests",function(){
2 |
3 | before(function(){
4 | $.afui.hasLaunched=false;
5 | $("#drawertest").remove();
6 | $(document.body).append("
");
7 |
8 | $("#drawertest").append(__html__['test/fixtures/drawer.html']);
9 | $.afui.isLaunching=false;
10 | $.afui.hasLaunched=true;
11 | $.afui.launchCompleted=false;
12 | $.afui.defaultPanel=null;
13 | $.afui.activeDiv=null;
14 | $.afui.launch();
15 |
16 | });
17 |
18 | after(function(){
19 | $("#drawertest").remove();
20 | });
21 | it("should wait for afui read",function(done){
22 | $.afui.ready(function(){
23 | done();
24 | });
25 | });
26 |
27 | it("should show left menu by cover js call",function(done){
28 | //$("#leftcover").trigger("click");
29 | $.afui.drawer.show("#left","left","cover");
30 | setTimeout(function(){
31 |
32 | expect($("#left").hasClass("active")).to.be.true;
33 | done();
34 | },500);
35 | });
36 |
37 | it("should close the left menu",function(done){
38 | $.afui.drawer.hide('#left');
39 | setTimeout(function(){
40 | expect($("#left").hasClass("active")).to.be.false;
41 | done();
42 | },500);
43 | });
44 | it("should show left menu by push data directive",function(done){
45 | $("#leftpush").trigger("click");
46 | setTimeout(function(){
47 | expect($("#left").hasClass("active")).to.be.true;
48 | expect($($.afui.activeDiv).closest('.view').find('.slide-left-out').length===3).to.be.true
49 | done();
50 | },500);
51 | });
52 |
53 | it("should close the left menu by data directive",function(done){
54 | $("#hideactive").trigger("click");
55 | setTimeout(function(){
56 | expect($("#left").hasClass("active")).to.be.false;
57 | done();
58 | },500);
59 | });
60 |
61 | it("should show right menu by cover js call",function(done){
62 | //$("#leftcover").trigger("click");
63 | $.afui.drawer.show("#right","right","reveal");
64 | setTimeout(function(){
65 | expect($("#right").hasClass("active")).to.be.true;
66 | expect($($.afui.activeDiv).closest('.view').find('.slide-right-out').length===3).to.be.true
67 | done();
68 | },500);
69 | });
70 |
71 | it("should close the right menu",function(done){
72 | $("#hideright").trigger("click");
73 | setTimeout(function(){
74 | expect($("#right").hasClass("active")).to.be.false;
75 | done();
76 | },500);
77 | });
78 |
79 | it("should show left menu and auto hide",function(done){
80 | //$("#leftcover").trigger("click");
81 | $.afui.drawer.show("#left","left","reveal");
82 | setTimeout(function(){
83 | expect($("#left").hasClass("active")).to.be.true;
84 | $.afui.drawer.hide();
85 | setTimeout(function(){
86 | expect($("#left").hasClass("active")).to.be.false;
87 | done();
88 | },500);
89 | },500);
90 | });
91 |
92 | it("should show left",function(done){
93 | //$("#leftcover").trigger("click");
94 | $.afui.drawer.show("#left","left","reveal");
95 | setTimeout(function(){
96 | done();
97 | },500);
98 | });
99 | it("should hide left when showing right",function(done){
100 | //$("#leftcover").trigger("click");
101 | expect($("#left").hasClass("active")).to.be.true;
102 | $.afui.drawer.show("#right","right","reveal");
103 | setTimeout(function(){
104 | expect($("#right").hasClass("active")).to.be.true;
105 | expect($("#left").hasClass("active")).to.be.false;
106 | done();
107 | },500);
108 | });
109 |
110 | it("should do nothing when already shown",function(done){
111 | //$("#leftcover").trigger("click");
112 | $.afui.drawer.show("#left","left","reveal");
113 | setTimeout(function(){
114 | $.afui.drawer.show("#left","left","reveal");
115 | done();
116 | },500);
117 | });
118 | });
--------------------------------------------------------------------------------
/test/fixtures/afui-view.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | View Trans
5 |
6 |
7 |
3 |
4 |
5 |
6 | Hello world
7 |
8 |
9 | Foobar
10 |
11 |
16 |
3
17 |
18 |
19 |
24 |
26 |
27 |
28 |
29 | View Trans
30 |
31 |
32 |
33 |
37 |
3 |
4 |
5 |
6 | Hello world
7 |
8 |
9 |
10 |
11 |
15 |
16 |
40 |
41 |
42 |
43 |
46 |
47 |
48 |
49 | This is the right nav
50 |
51 |
52 |
54 |
");
8 |
9 | });
10 | afterEach(function(){
11 | window.WebKitCSSMatrix=oldWK;
12 | window.MSCSSMatrix=oldMS;
13 | })
14 |
15 | it("should return a default matrix if no element argument passed and no matrix function", function () {
16 | window.WebKitCSSMatrix=null;
17 | var matrix = $.getCssMatrix();
18 | var expected = { a: 0, b: 0, c: 0, d: 0, e: 0, f: 0 };
19 | matrix.should.eql(expected);
20 | });
21 |
22 | it("should return a matrix from a *Matrix function if present and no element", function () {
23 | var matrix = $.getCssMatrix();
24 | matrix.should.eql(new WebKitCSSMatrix());
25 | });
26 |
27 |
28 | it("should use the MSCSSMatrix function if present", function () {
29 | var elt = document.getElementById("moo");
30 |
31 | var matrix = $.getCssMatrix(elt);
32 | var computedStyle = window.getComputedStyle(elt);
33 |
34 | var transform = computedStyle.webkitTransform ||
35 | computedStyle.transform ||
36 | computedStyle[$.feat.cssPrefix + "Transform"];
37 |
38 |
39 | matrix.should.eql(new WebKitCSSMatrix(transform));
40 | });
41 |
42 |
43 | it("should return a matrix hacked from the stylesheet", function () {
44 | window.WebKitCSSMatrix=null;
45 | $("#moo").cssTranslate("1px,1px");
46 | var ele=document.getElementById("moo");
47 | var matrix=$.getCssMatrix(ele);
48 | var expected = { a: 1, b: 0, c: 0, d: 1, e: 1, f: 1 };
49 | matrix.should.eql(expected);
50 |
51 | var matrix=$.getCssMatrix();
52 | var expected = { a: 0, b: 0, c: 0, d: 0, e: 0, f: 0};
53 | matrix.should.eql(expected);
54 | });
55 |
56 |
57 | });
58 |
--------------------------------------------------------------------------------
/test/grower.test.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/intel/appframework/724d7e9ea4bcb79f65fdd7ad21ddcd42a2f1c83c/test/grower.test.js
--------------------------------------------------------------------------------
/test/popup.test.js:
--------------------------------------------------------------------------------
1 | describe("popup",function(){
2 | before(function(){
3 | $("#popuptest").remove();
4 | $(document.body).append("");
5 | $("#popuptest").append(__html__['test/fixtures/popup.html']);
6 | $.afui.isLaunching=false;
7 | $.afui.hasLaunched=true;
8 | $.afui.launchCompleted=false;
9 | $.afui.defaultPanel=null;
10 | $.afui.activeDiv=null;
11 | $.afui.launch();
12 | });
13 |
14 | after(function(){
15 | $("#popuptest").remove();
16 | });
17 |
18 |
19 | it("should display a popup and dismiss it",function(done){
20 |
21 | var msg="Hello 1";
22 | $(document.body).popup({title:'Alert',id:'myTestPopup'});
23 | setTimeout(function(){
24 | $('#myTestPopup').length.should.eql(1);
25 | $("#myTestPopup").trigger("close");
26 | setTimeout(function(){
27 | $('#myTestPopup').length.should.eql(0);
28 | done();
29 | },300);
30 |
31 | },200);
32 | });
33 |
34 | it("should display a popup execute the done callback",function(done){
35 |
36 | var msg="Hello 1";
37 | var what=false;
38 | $(document.body).popup({
39 | id:"myTestPopup",
40 | title:"Alert! Alert!",
41 | message:"This is a test of the emergency alert system!! Don't PANIC!",
42 | cancelText:"Cancel me",
43 | cancelCallback: function(){console.log("cancelled");},
44 | doneText:"I'm done!",
45 | doneCallback: function(){what=true;},
46 | cancelOnly:false,
47 | doneClass:'button',
48 | cancelClass:'button',
49 | onShow:function(){},
50 | autoCloseDone:true, //default is true will close the popup when done is clicked.
51 | suppressTitle:false //Do not show the title if set to true
52 | });
53 | setTimeout(function(){
54 | $('#myTestPopup').length.should.eql(1);
55 | $("#myTestPopup #action").trigger("click");
56 | setTimeout(function(){
57 | $('#myTestPopup').length.should.eql(0);
58 | expect(what).to.be.true;
59 | done();
60 | },300);
61 |
62 | },200);
63 | });
64 |
65 | it("should display a popup execute the cancel callback",function(done){
66 |
67 | var msg="Hello 1";
68 | var what=false;
69 | $(document.body).popup({
70 | id:"myTestPopup",
71 | title:"Alert! Alert!",
72 | message:"This is a test of the emergency alert system!! Don't PANIC!",
73 | cancelText:"Cancel me",
74 | cancelOnly:true,
75 | cancelCallback: function(){what=true;},
76 | doneText:"I'm done!",
77 | doneCallback: function(){what=false;},
78 | cancelOnly:false,
79 | doneClass:'button',
80 | cancelClass:'button',
81 | onShow:function(){},
82 | autoCloseDone:true, //default is true will close the popup when done is clicked.
83 | suppressTitle:false //Do not show the title if set to true
84 | });
85 | setTimeout(function(){
86 | $('#myTestPopup').length.should.eql(1);
87 | $("#myTestPopup #cancel").trigger("click");
88 | setTimeout(function(){
89 | $('#myTestPopup').length.should.eql(0);
90 | expect(what).to.be.true;
91 | done();
92 | },300);
93 |
94 | },200);
95 | });
96 |
97 | it("should display a popup and dismiss it",function(done){
98 |
99 | var msg="Hello 1";
100 | $(document.body).popup({title:'Alert',id:'myTestPopup'});
101 | setTimeout(function(){
102 | $('#myTestPopup').length.should.eql(1);
103 | $("#myTestPopup").trigger("close");
104 | setTimeout(function(){
105 | $('#myTestPopup').length.should.eql(0);
106 | done();
107 | },300);
108 |
109 | },200);
110 | });
111 |
112 | it("should launch and dispatch ready function",function(done){
113 |
114 | $.afui.ready(function(){
115 | done();
116 | });
117 | $.afui.launch();
118 |
119 | });
120 |
121 | /// data directives
122 | /*
123 | it("should display a data directive popup and dismiss it",function(done){
124 |
125 | $("#popuptest a").trigger("click");
126 | setTimeout(function(){
127 | $('.afPopup').length.should.eql(1);
128 | $(".afPopup").trigger("close");
129 | setTimeout(function(){
130 | $('.afPopup').length.should.eql(0);
131 | done();
132 | },300);
133 |
134 | },200);
135 | });
136 | */
137 | });
--------------------------------------------------------------------------------
/test/replaceClass.test.js:
--------------------------------------------------------------------------------
1 | describe("replaceClass", function () {
2 | var stubMatrix = { a: 1, b: 1, c: 1, d: 1, e: 1, f: 1 };
3 |
4 | beforeEach(function () {
5 | $(document.body).append("
");
6 |
7 |
8 | });
9 |
10 | it("should replace a css class", function () {
11 | var el=document.getElementById("moo");
12 | el.className="foobar";
13 |
14 | $(el).replaceClass("foobar","bar");
15 |
16 | expect($(el).hasClass("bar")).to.be.true;
17 | expect($(el).hasClass("foobar")).to.be.false;
18 | });
19 |
20 | it("should do nothing to the classes", function () {
21 | var el=document.getElementById("moo");
22 | el.className="foobar";
23 |
24 | $(el).replaceClass();
25 |
26 | expect($(el).hasClass("bar")).to.be.false;
27 | expect($(el).hasClass("foobar")).to.be.true;
28 | });
29 | it("Should add the class",function(){
30 | var el=document.getElementById("moo");
31 | el.className="foobar";
32 |
33 | $(el).replaceClass("","bar");
34 |
35 | expect($(el).hasClass("bar")).to.be.true;
36 | expect($(el).hasClass("foobar")).to.be.true;
37 | });
38 | it("should replace a css class when multiple classes exist", function () {
39 | var el=document.getElementById("moo");
40 | el.className="foobar temp stuff";
41 |
42 | $(el).replaceClass("foobar","bar");
43 | expect($(el).hasClass("bar")).to.be.true;
44 | expect($(el).hasClass("temp")).to.be.true;
45 | expect($(el).hasClass("stuff")).to.be.true;
46 | expect($(el).hasClass("foobar")).to.be.false;
47 | });
48 |
49 | it("should replace multiple classess", function () {
50 | var el=document.getElementById("moo");
51 | el.className="foobar temp";
52 |
53 | $(el).replaceClass("foobar temp","bar has");
54 | expect($(el).hasClass("bar")).to.be.true;
55 | expect($(el).hasClass("has")).to.be.true;
56 | expect($(el).hasClass("foobar")).to.be.false;
57 | expect($(el).hasClass("temp")).to.be.false;
58 | });
59 |
60 | });
61 |
--------------------------------------------------------------------------------
/test/shim.test.js:
--------------------------------------------------------------------------------
1 |
2 | describe("shimTest", function () {
3 |
4 | beforeEach(function () {
5 |
6 | $(document.body).append("
");
7 |
8 | });
9 |
10 | it("should $.query find the dom node", function () {
11 | var el=document.getElementById("moo");
12 | $("#moo").length.should.eql(1);
13 | });
14 |
15 | it("should fail on the $.query selector",function(){
16 | var foo=$.query("@#$!#");
17 | foo.length.should.eql(0);
18 | })
19 |
20 | it("should $.create create dom nodes",function(){
21 |
22 | var tmp=$.create("div",{html:"foobar"});
23 | tmp.get(0).nodeName.toLowerCase().should.eql("div");
24 | tmp.get(0).innerHTML.should.eql("foobar");
25 |
26 | var tmp=$.create("foobar
");
27 | tmp.get(0).nodeName.toLowerCase().should.eql("div");
28 | tmp.get(0).innerHTML.should.eql("foobar");
29 |
30 | });
31 |
32 | it("should be an object", function(){
33 |
34 | var obj={};
35 | expect($.isObject(obj)).to.be.true;
36 | });
37 |
38 | it("should be a jQuery Object", function(){
39 |
40 | var obj=$();
41 | expect($.is$(obj)).to.be.true;
42 | });
43 |
44 | it("should create a touchlist",function(){
45 | var tl=new $.feat.TouchList();
46 | tl.length.should.eql(0);
47 | });
48 |
49 | it("should create a touch item",function(){
50 |
51 | var touch=new $.feat.Touch();
52 | expect(touch.identifier>=1000).to.be.true;
53 |
54 | });
55 |
56 | it("should have a touch list with one item",function(){
57 | var tl=new $.feat.TouchList();
58 | var touch=new $.feat.Touch();
59 | tl._add(touch);
60 | tl.length.should.eql(1);
61 | touch.should.eql(tl.item(0));
62 | });
63 |
64 | it("should get the computed style",function(){
65 | var ele=document.getElementById("moo");
66 | moo.style.width="30px";
67 | $("#moo").computedStyle("width").should.eql("30px");
68 | })
69 | it("should return the object if nothing is passed to computed style",function(){
70 | var ele=document.getElementById("moo");
71 | moo.style.width="30px";
72 | expect($("#moo3").computedStyle()===undefined).to.be.true;
73 | });
74 |
75 | it("should have a length of 36 for $.uuid",function(){
76 | $.uuid().length.should.eql(36);
77 | })
78 | });
79 |
--------------------------------------------------------------------------------
/test/swipereveal.test.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/intel/appframework/724d7e9ea4bcb79f65fdd7ad21ddcd42a2f1c83c/test/swipereveal.test.js
--------------------------------------------------------------------------------
/test/toasts.test.js:
--------------------------------------------------------------------------------
1 | describe("toast",function(){
2 | before(function(){
3 | $("#toasttest").remove();
4 | $(document.body).append("
");
5 | $("#toasttest").append(__html__['test/fixtures/toast.html']);
6 | $.afui.isLaunching=false;
7 | $.afui.hasLaunched=true;
8 | $.afui.launchCompleted=false;
9 | $.afui.defaultPanel=null;
10 | $.afui.activeDiv=null;
11 | $.afui.launch();
12 | });
13 |
14 | after(function(){
15 | $("#toasttest").remove();
16 | });
17 |
18 |
19 | it("should display a toast and auto hide",function(done){
20 |
21 | var msg="Hello 1";
22 | $(document.body).toast({message:msg,delay:100});
23 | setTimeout(function(){
24 | $('.afToastContainer').find(".afToast div").html().should.eql(msg);
25 | setTimeout(function(){
26 | expect( $('.afToastContainer').find(".afToast").length===0).to.be.true;
27 | done();
28 | },500);
29 | },50);
30 | });
31 | it("should display a toast and stay open",function(done){
32 |
33 | var msg="Hello 2";
34 | $(document.body).toast({message:msg,autoClose:false});
35 | setTimeout(function(){
36 | $('.afToastContainer').find(".afToast div").html().should.eql(msg);
37 | setTimeout(function(){
38 | expect( $('.afToastContainer').find(".afToast").length===1).to.be.true;
39 | done();
40 | },500);
41 | },50);
42 | });
43 |
44 | it("should close a toast by clicking it",function(done){
45 | expect( $('.afToastContainer').find(".afToast").length===1).to.be.true;
46 | $('.afToastContainer').find(".afToast").trigger("click");
47 | setTimeout(function(){
48 | expect( $('.afToastContainer').find(".afToast").length===0).to.be.true;
49 | done();
50 | },350);
51 | });
52 | it("should not animate hiding",function(done){
53 | var msg="Hello 2";
54 | $.os.android=true;
55 | $(document.body).toast({message:msg,autoClose:true,delay:100});
56 | setTimeout(function(){
57 | $('.afToastContainer').find(".afToast div").html().should.eql(msg);
58 | setTimeout(function(){
59 | expect( $('.afToastContainer').find(".afToast").length===0).to.be.true;
60 | $.os.android=false;
61 | done();
62 | },300);
63 | },50);
64 | });
65 |
66 | it("should be bottom center with warning class",function(done){
67 | var msg="Hello 6";
68 | $(document.body).toast({message:msg,autoClose:true,delay:100,position:"bc",type:"warning"});
69 | setTimeout(function(){
70 | var elem=$('.afToastContainer').find(".afToast");
71 | expect(elem.hasClass("warning")).to.be.true;
72 | expect(elem.parent().hasClass("bc")).to.be.true;
73 | setTimeout(function(){
74 | expect( $('.afToastContainer').find(".afToast").length===0).to.be.true;
75 | done();
76 | },500);
77 | },50);
78 | });
79 |
80 | it("should launch and dispatch ready function",function(done){
81 |
82 | $.afui.ready(function(){
83 | done();
84 | });
85 | $.afui.launch();
86 |
87 | });
88 | it("should use the data directive for a toast",function(done){
89 | var item=$("#toasttest").find("a").eq(1);
90 | item.trigger("click");
91 |
92 | setTimeout(function(){
93 | $('.afToastContainer').find(".afToast div").html().should.eql(item.attr("data-message"));
94 | var elem=$('.afToastContainer').find(".afToast");
95 | expect(elem.hasClass(item.attr("data-type"))).to.be.true;
96 | expect(elem.parent().hasClass(item.attr("data-position"))).to.be.true;
97 | $('.afToastContainer').find(".afToast div").trigger("click");
98 | setTimeout(function(){
99 | expect( $('.afToastContainer').find(".afToast").length===0).to.be.true;
100 | done();
101 | },500);
102 | },50);
103 | })
104 |
105 | });
--------------------------------------------------------------------------------
/test/transition.test.js:
--------------------------------------------------------------------------------
1 | describe("transition", function () {
2 |
3 | beforeEach(function () {
4 | $(document.body).remove("#transitioner");
5 | $(document.body).append("
");
6 | });
7 |
8 | it("should be an object",function(){
9 | var foo=$("#transitioner").transition();
10 | expect($.isObject(foo)).to.be.true;
11 | });
12 |
13 | it("should run a transition with a callback but not keep the transition",function(done){
14 | $("#transitioner").transition().end(function(){
15 | var matrix=($.getCssMatrix(this));
16 | matrix.m22.should.eql(1.2);
17 | }).run('scale(1.2)',"200ms");
18 | setTimeout(function(){
19 | var matrix=($.getCssMatrix($("#transitioner").get(0)));
20 | matrix.m22.should.eql(1);
21 | done();
22 | },300);
23 | });
24 | it("should run a transition with no callback",function(done){
25 | $("#transitioner").transition().run('scale(1.2)',"200ms");
26 | setTimeout(function(){
27 | var matrix=($.getCssMatrix($("#transitioner").get(0)));
28 | matrix.m22.should.eql(1);
29 | done();
30 | },300);
31 | });
32 |
33 | it("should keep the transition",function(done){
34 | $("#transitioner").transition().keep().run('scale(1.2)',"200ms");
35 | setTimeout(function(){
36 | var matrix=($.getCssMatrix($("#transitioner").get(0)));
37 | matrix.m22.should.eql(1.2);
38 | done();
39 | },300);
40 | });
41 |
42 | });
43 |
44 |
45 |
--------------------------------------------------------------------------------
/test/vendorCss.test.js:
--------------------------------------------------------------------------------
1 |
2 | describe("vendorCss", function () {
3 | var stubMatrix = { a: 1, b: 1, c: 1, d: 1, e: 1, f: 1 };
4 |
5 | beforeEach(function () {
6 | $(document.body).append("
");
7 | });
8 |
9 | it("should set the webkit css value", function () {
10 | $.feat.cssPrefix ="Webkit";
11 | var el=document.getElementById("moo");
12 | var time="100ms";
13 | $(el).vendorCss("TransitionDuration",time);
14 | var val=el.style['WebkitTransitionDuration'];
15 | val.should.eql(time);
16 | });
17 |
18 | it("should set the vendor neutral css value", function () {
19 | $.feat.cssPrefix ="Webkit";
20 | var el=document.getElementById("moo");
21 | var time="100ms";
22 | $(el).vendorCss("TransitionDuration",time);
23 | var val=el.style['transitionduration'];
24 | val.should.eql(time);
25 | });
26 |
27 | it("should not set the another vendor css value", function () {
28 | var el=document.getElementById("moo");
29 | var time="100ms";
30 | $(el).vendorCss("TransitionDuration",time);
31 | var val=el.style['MozTransitionDuration'];
32 | expect(val).to.be.undefined;
33 | });
34 |
35 |
36 | });
37 |
--------------------------------------------------------------------------------