├── README.md
├── autotoolsfunctions.js
├── autotoolsfunctions.js.bak
├── autotoolsstyle.css
└── demos
    ├── bubble
        ├── instructions.html
        └── page.html
    ├── cardlist
        └── cardlist.html
    ├── functions
        └── functiondemo.html
    ├── input
        └── page.html
    ├── loading
        ├── bounce.css
        ├── bounce.html
        ├── chasingdots.css
        ├── chasingdots.html
        ├── circle.css
        ├── circle.html
        ├── colorcircles.css
        ├── colorcircles.html
        ├── cubegrid.css
        ├── cubegrid.html
        ├── doublebounce.css
        ├── doublebounce.html
        ├── fadingcircle.css
        ├── fadingcircle.html
        ├── foldingcube.css
        ├── foldingcube.html
        ├── googlematerialbounce.css
        ├── googlematerialbounce.html
        ├── googlematerialpreloader.css
        ├── googlematerialpreloader.html
        ├── instructions.html
        ├── pacman.css
        ├── pacman.html
        ├── page.html
        ├── pulse.css
        ├── pulse.html
        ├── redvortex.css
        ├── redvortex.html
        ├── rotatingplane.css
        ├── rotatingplane.html
        ├── shrinkinghexagon.css
        ├── shrinkinghexagon.html
        ├── simpledots.css
        ├── simpledots.html
        ├── spinningflower.css
        ├── spinningflower.html
        ├── stairs.css
        ├── stairs.html
        ├── test.html
        ├── threebounce.css
        ├── threebounce.html
        ├── uphill.css
        ├── uphill.html
        ├── wanderingcubes.css
        ├── wanderingcubes.html
        ├── wave.css
        └── wave.html
    └── updating
        └── page.html


/README.md:
--------------------------------------------------------------------------------
 1 | # AutoToolsWebScreens
 2 | Stuff injected into every AutoTools web Screens that you can use in your own Web Screen presets
 3 | 
 4 | # Quick Start
 5 | Look at [this](demos/input/page.html) example on how to create a simple Web Screen with an input field.
 6 | You'll learn how to make a Web Screen send out an AutoApps command and what a basic page structure looks like.
 7 | You can even use the [direct link](https://raw.githubusercontent.com/joaomgcd/AutoToolsWebScreens/master/demos/input/page.html) of the file as the **Source** in the AutoTools Web Screen action and see it action on your Android device.
 8 | 
 9 | # Full Tutorial
10 | If you want a step by step tutorial on how to create your own Web Screen check [here](http://forum.joaoapps.com/index.php?resources/full-overview-on-creating-an-autotools-web-screen.284/). 
11 | 
12 | # How To Use
13 | Look into each file and stuff will be documented :)
14 | 
15 | If you want to try out the demos you can do so by using the direct raw Github URL as the Source in the **AutoTools Web Screen** action. For example, to use the card list demo, use [this](https://raw.githubusercontent.com/joaomgcd/AutoToolsWebScreens/master/demos/cardlist/cardlist.html) as the source.
16 | 
17 | # Web Screen Variables
18 | You can create custom variables for a page used as an AutoTools Web Screen.
19 | 
20 | To do this include a special <meta> tag in the pages head section with the following format:
21 | 
22 | **&lt;meta name="autotoolswebscreen" type="variablejs" group="Title" id="titleFromTasker" label="Title" description="Title to show at the top."  hint="YouTube" /&gt;**
23 | 
24 | Let's break it down:
25 | 
26 | *   **name** - is always **autotoolswebscreen**
27 | *   **type** - can be **variablejs** (will create a JavaScript variable) or **variablehtml** (will replace an html element with the specified ID)
28 | *   **group** - is used to group variables together in the AutoTools Web Screen Tasker configuration screen
29 | *   **id** - the name of the JavaScript variable or HTML element to create/replace
30 | *   **label** - title of the option in the configuration screen
31 | *   **description** - summary of the option in the configuration screen
32 | *   **hint** - placeholder text of the option in the configuration screen
33 | 
34 | Here are other possible fields for this ***&lt;meta&gt;** tag
35 | 
36 | *   **subtype** - can be **boolean** to make the option in Tasker a switch instead of a text input. In JavaScript will create a variable with either true or false
37 | *   **defaultValue** - pre-filled value for the field
38 | *   **options** - If set, will create an options field in the AutoTools Web Screen Tasker configuration screen instead of a direct text input field. Set to a comma separated list of values.
39 | *   **isIcon** - if **true** then the input field in the AutoTools Web Screen Tasker configuration screen will prompt the user to browse for an icon
40 | *   **isIcons** - same as above but supports multiple icons
41 | *   **isImage** and **isImages** - same as above but for generic images
42 | *   **isColor** - same as above but to browse for a color
43 | *   **isFile** - same as above but to browse for a file of any type
44 | *   **attribute (HTML Variable Only)** - allows you to specify an attribute to set instead of setting the inner HTML of an element (for example, setting the **href** of an **a** element)
45 | 
46 | [Here](demos/cardlist/cardlist.html)'s an example of a screen where multiple variables are used. Take a look at the source code of the page for some examples.
47 | 
48 | # Web Screen Functions
49 | AutoTools automatically creates some convenience JavaScript functions for you so it's easier to do certain things with the data from Web Screen Variables. 
50 | 
51 | You can check out all of the functions [here](autotoolsfunctions.js).
52 | 
53 | Here are a few of the main ones:
54 | 
55 | *   **AutoTools.sendCommand(command, prefix, hapticFeedback)** - Allows you to send an AutoApps command. **prefix** is optional and if present will prepend **=:=** to the command. Example: **&lt;div onclick="AutoTools.sendCommand('hello!')"&gt;Say Hello&lt;/div&gt;** will send the "hello" command when clicked. If you set the third parameter to true it'll perform haptic feedback with the command.
56 | *   **AutoTools.isSet(varName)** - returns true if the Web Screen Variable with the provide name is set, false otherwise
57 | *   **AutoTools.setDefault(varName,value)** - sets the variable with name **varName** to the value **value** if it's not set from Tasker
58 | *   **AutoTools.setDefaultValues(valuesObject)** - accepts an object like **{"var1":"value1","var2":"value2"}** and calls the **AutoTools.setDefault** function for each of the names and values in the object, so you can set all your default values in one call. Check [the source of this page](demos/functions/functiondemo.html) for an example on how to use this.
59 | *   **AutoTools.hide(element)** - hides an element on the page
60 | *   **AutoTools.show(element)** - shows an element on the page
61 | *   **AutoTools.variablesToElements(variableNamesArray, rootElementsId, rootElementClass, itemTransformer)** - converts AutoTools Web Screen variables to HTML elements on a list. **itemTransformer** is optional and if present will be called for every element that's created. Check [the source of this page](demos/functions/functiondemo.html) for an example on how to use this.
62 | 
63 | # Updating Values
64 | 
65 | Instead of doing a full refresh every time AutoTools allows you to update stuff on the page. This is done by AutoTools calling the 
66 | ```
67 | autoToolsUpdateValues(values)
68 | ```
69 | function when it wants to update values so you need to declare it on the page if you want to support updating.
70 | **values** will contain an object with properties named after the Web Screen variables declared on the page. So, for example, if you declare a **title** and a **text** variable on the page, you'll get an object like
71 | 
72 | ```
73 | {
74 |   "title":"Some Title",
75 |   "text:"some text"
76 | }
77 | ```
78 | You can then update the values on the page how ever you please based on this object.
79 | 
80 | The **Update** option will only show in the Tasker configuration screen if the **autoToolsUpdateValues()** function is present on the main **Source** page.
81 | 
82 | Check out [this](demos/updating/page.html) demo for a working web screen with the updating feature.
83 | # Debugging
84 | 
85 | You can use
86 | ```
87 | console.debug("log message");
88 | ```
89 | to make logs show up in the AutoTools logs if **System Logs** are enabled in the main AutoTools app under **Logs And Alerts**.
90 | 
91 | If there's an error message in the console and the **Close On Error** option is set in Tasker the screen will close.
92 | 


--------------------------------------------------------------------------------
/autotoolsfunctions.js:
--------------------------------------------------------------------------------
  1 | /**
  2 | * These functions will automatically be injected into every page that is loaded with the AutoTools Web Screen action in Tasker.
  3 | * You can use them freely in your own web screens! :)
  4 | * If you want you can copy these to your web screen for easy testing on your PC.
  5 | * Only the functions that call AutoToolsAndroid functions will not work on your PC, like the AutoTools.say function for example.
  6 | */
  7 | 
  8 | /**
  9 |  * Create base AutoTools object that will contain everything else
 10 |  */
 11 | var AutoTools = {};
 12 | 
 13 | /**
 14 |  * Send an AutoApps command from JavaScript.
 15 |  * @param {string} command - The command you want to send
 16 |  * @param {string} [prefix] - An optional prefix that will be prepended to the command. If it exists command will have the prefix=:=command format
 17 |  * @param {boolean} [hapticFeedback] - If true, will perform a short vibration with the command
 18 |  */
 19 | AutoTools.sendCommand = function(command, prefix, hapticFeedback){
 20 |     if(!command){
 21 |         return;
 22 |     }
 23 |     if(!prefix){
 24 |         prefix = null;
 25 |     }
 26 |     console.log("Sending command: " + command+";"+prefix);
 27 |     AutoToolsAndroid.sendCommand(command, prefix, hapticFeedback);
 28 | }
 29 | 
 30 | /**
 31 |  * Easily assign a command to an HTML element
 32 |  * @param {string} selector - The CSS selector for the element. For example, to specify an element with the id "link", you should pass in "#link"
 33 |  * @param {string} command - The command you want to send
 34 |  * @param {string} [prefix] - An optional prefix that will be prepended to the command. If it exists command will have the prefix=:=command format
 35 |  */
 36 | AutoTools.commandOnClick = function(selector, command, prefix){
 37 |     document.querySelector(selector).onclick = e => AutoTools.sendCommand(command, prefix);
 38 | }
 39 | /**
 40 |  * Change a color dynamically. Got it from here: https://stackoverflow.com/questions/5560248/programmatically-lighten-or-darken-a-hex-color-or-rgb-and-blend-colors
 41 |  * Example use: Have color #ff0000 (red) and want a 30% darker shade of red, would call AutoTools.shadeBlendConvert(-0.3, "#ff0000");
 42 |  */
 43 | AutoTools.shadeBlendConvert = function(p, from, to) {
 44 |     if(typeof(p)!="number"||p<-1||p>1||typeof(from)!="string"||(from[0]!='r'&&from[0]!='#')||(typeof(to)!="string"&&typeof(to)!="undefined"))return null;
 45 |     var sbcRip=function(d){
 46 |         var l=d.length,RGB=new Object();
 47 |         if(l>9){
 48 |             d=d.split(",");
 49 |             if(d.length<3||d.length>4)return null;
 50 |             RGB[0]=i(d[0].slice(4)),RGB[1]=i(d[1]),RGB[2]=i(d[2]),RGB[3]=d[3]?parseFloat(d[3]):-1;
 51 |         }else{
 52 |             if(l==8||l==6||l<4)return null;
 53 |             if(l<6)d="#"+d[1]+d[1]+d[2]+d[2]+d[3]+d[3]+(l>4?d[4]+""+d[4]:"");
 54 |             d=i(d.slice(1),16),RGB[0]=d>>16&255,RGB[1]=d>>8&255,RGB[2]=d&255,RGB[3]=l==9||l==5?r(((d>>24&255)/255)*10000)/10000:-1;
 55 |         }
 56 |         return RGB;}
 57 |     var i=parseInt,r=Math.round,h=from.length>9,h=typeof(to)=="string"?to.length>9?true:to=="c"?!h:false:h,b=p<0,p=b?p*-1:p,to=to&&to!="c"?to:b?"#000000":"#FFFFFF",f=sbcRip(from),t=sbcRip(to);
 58 |     if(!f||!t)return null;
 59 |     if(h)return "rgb("+r((t[0]-f[0])*p+f[0])+","+r((t[1]-f[1])*p+f[1])+","+r((t[2]-f[2])*p+f[2])+(f[3]<0&&t[3]<0?")":","+(f[3]>-1&&t[3]>-1?r(((t[3]-f[3])*p+f[3])*10000)/10000:t[3]<0?f[3]:t[3])+")");
 60 |     else return "#"+(0x100000000+(f[3]>-1&&t[3]>-1?r(((t[3]-f[3])*p+f[3])*255):t[3]>-1?r(t[3]*255):f[3]>-1?r(f[3]*255):255)*0x1000000+r((t[0]-f[0])*p+f[0])*0x10000+r((t[1]-f[1])*p+f[1])*0x100+r((t[2]-f[2])*p+f[2])).toString(16).slice(f[3]>-1||t[3]>-1?1:3);
 61 | };
 62 | 
 63 | /**
 64 |  * Brighten the color of a property in a CSS rule
 65 |  * @param {Object} rule - The cssRule object you want to change
 66 |  * @param {string} propertyName - The property you want to change ("background-color" for example)
 67 |  * @param {string} percent - Value from 0 to 100 you want to change
 68 |  * @param {boolean} darken - If true will darken the color instead of brightening it
 69 |  */
 70 | AutoTools.increaseBrightnessRule = function(rule, propertyName, percent, darken){
 71 |     var originalColor = rule.style.getPropertyValue(propertyName);
 72 |     if(!originalColor){
 73 |         return;
 74 |     }
 75 |     originalColor = originalColor.trim();
 76 |     var newColor = AutoTools.shadeBlendConvert(percent/100,originalColor);
 77 |     rule.style.setProperty(propertyName, newColor);
 78 |     return newColor;
 79 | };
 80 | 
 81 | /**
 82 |  * Check if the value of a Web Screen Variable was set from Tasker
 83 |  * @param {string} value - Name of the variable you want to check
 84 |  */
 85 | AutoTools.isSet = value => {
 86 |     value = window[value];
 87 |     if(value === undefined || value === null){
 88 |         return false;
 89 |     }
 90 |     var toClass = {}.toString.call(value);
 91 |     if(toClass  == "[object Boolean]"){
 92 |         return true;
 93 |     }
 94 |     return toClass  == "[object String]";
 95 | };
 96 | /**
 97 |  * Set the value of a Web Screen variable if it hasn't been set already from Tasker
 98 |  * @param {string} variable - The name of the variable you want to set
 99 |  * @param {string} value - The value you want to set if it hasn't been set from Tasker
100 |  */
101 | AutoTools.setDefault = (variable, value) => {
102 |     if(!AutoTools.isSet(variable)){
103 |         window[variable] = value;
104 |     }
105 | };
106 | /**
107 |  * As above but for setting multiple values
108 |  * @param {Object} values - Object to set default values of.
109 |  * For example, using
110 |  * AutoTools.setDefault("title","My Title");
111 |  * AutoTools.setDefault("text","my text");
112 |  * Is the same as using
113 |  * AutoTools.setDefaultValues({
114 |     "title": "My Title",
115 |     "text":"my text"
116 |    });
117 |  */
118 | AutoTools.setDefaultValues = (values) => {
119 |     for(var varName in values){
120 |         var value = values[varName];
121 |         AutoTools.setDefault(varName, value);
122 |     }
123 | };
124 | 
125 | /**
126 |  * Will convert a list of comma separated Web Screen variables into a nice JSON object.
127 |  * @param {...string} fields - Names of the Web Screen Variables to convert
128 |  * For example if have
129 |  * - variable "title" with value = "Title1,Title2,Title3"
130 |  * - variable "text" with value = "text1,text2,text3"
131 |  * And use
132 |  * AutoTools.fieldsToObject("title","text");
133 |  * It'll return an array of objects like this:
134 | [
135 |     {
136 |         "title": "Title1",
137 |         "text": "Text1"
138 |     },
139 |     {
140 |         "title": "Title2",
141 |         "text": "text2"
142 |     },
143 |     {
144 |         "title": "Title3",
145 |         "text": "text3"
146 |     }
147 | ]
148 |  * This is much easier to use in JavaScript :)
149 |  */
150 | AutoTools.fieldsToObject = (...fields) => {
151 |     var first =  fields[0];
152 |     var result = [];
153 |     /*if(!AutoTools.isSet(first)){
154 |         return result;
155 |     }*/
156 |     var length = null;
157 |     var separator = ",";
158 |     if(AutoTools.isSet("itemSeparator")){
159 |         separator =  itemSeparator;
160 |     }
161 |     for(var field of fields){
162 |         if(!AutoTools.isSet(field)){
163 |             continue;
164 |         }
165 |         var value = window[field];
166 |         var split = value.split(separator);
167 |         if(length == null){
168 |             length = split.length;
169 |         }
170 |         for (var i = 0; i < length; i++) {
171 |             if(result.length<=i){
172 |                 result.push({});
173 |             }
174 |             var current = result[i];
175 |             current[field] = split[i];
176 |         }
177 |     }
178 |     return result;
179 | };
180 | 
181 | /**
182 |  * Will hide an element on the page
183 |  * @param {HTMLElement} element - The element you want to hide
184 | */
185 | AutoTools.hide = element => element.classList.add("hidden");
186 | 
187 | /**
188 |  * Will show an element on the page
189 |  * @param {HTMLElement} element - The element you want to show
190 | */
191 | AutoTools.show = element => element.classList.remove("hidden");
192 | 
193 | /**
194 |  * Will convert an array object into HTML elements on the page. It will map each property in the object with elements with the same class name. Check this page for a concrete example: https://www.dropbox.com/s/ia2m4quij24h13q/functiondemo.html?dl=1
195 |  * @param {string} rootElementsId - The ID of the HTML element where you want to insert the HTML elements
196 |  * @param {string} rootElementClass - The class of the HTML element that you want to clone for each item in the input array
197 |  * @param {Object[]} input - The array that contains properties that will be mapped to each replicated HTML element
198 |  * @param {Function} [itemTransformer] - Optional transformer that will be called for each element on the page
199 | */
200 | AutoTools.objectToElements = function(rootElementsId, rootElementClass, input, itemTransformer){
201 |     var setByClass = (root,className,value,prop) => {
202 |         var element = root.querySelector(`.${className}`);
203 |         if(!element){
204 |             return;
205 |         }
206 |         if(!value){
207 |             AutoTools.hide(element);
208 |             return element;
209 |         }
210 |         AutoTools.show(element);
211 |         if(!prop){
212 |             var tagName = element.tagName;
213 |             if(tagName == "IMG"){
214 |                 prop = "src";
215 |             }else if(tagName == "A"){
216 |                 prop = "href";
217 |             }else if(tagName == "INPUT"){
218 |                 if(element.type == "checkbox"){
219 |                     prop = "checked";
220 |                     value = value == "false" ? false : true;
221 |                 }
222 |             }else{
223 |                 prop = "innerHTML";
224 |             }
225 |         }
226 |         element[prop] = value;
227 |         return element;
228 |     };
229 |     var listRoot = document.querySelector("#"+rootElementsId);
230 |     var elementToClone = document.querySelector("."+rootElementClass);
231 |     AutoTools.hide(elementToClone);
232 |     var rootElement = elementToClone.cloneNode(true);
233 |     AutoTools.show(rootElement);
234 |     listRoot.innerHTML = "";
235 |     if(itemTransformer && itemTransformer.onclick){
236 |         var styleNoPointerEvents = document.createElement("style");
237 |         styleNoPointerEvents.innerHTML = `
238 |         .${rootElementClass}{
239 |             cursor: pointer;
240 |         }
241 |         .${rootElementClass} *{
242 |             pointer-events: none;
243 |         }`;
244 |         document.querySelector("head").appendChild(styleNoPointerEvents);
245 |     }
246 |     for(var item of input){
247 | 
248 |         var resultElement = rootElement.cloneNode(true);
249 |         resultElement.item = item;
250 |         var itemObject = {"parent":resultElement};
251 |         for(var prop in item){
252 |             var value = item[prop];
253 |             var setElement = setByClass(resultElement,prop,value);
254 |             itemObject[prop] = {"value":value,"element":setElement};
255 |         }
256 |         if(itemTransformer){
257 |             if(itemTransformer.item){
258 |                 itemTransformer.item(itemObject);
259 |             }
260 |             if(itemTransformer.onclick){
261 |                 resultElement.onclick = e => itemTransformer.onclick(e.target.item);
262 |             }
263 |             if(itemTransformer.events){
264 |                 for(var event of itemTransformer.events){
265 |                     var eventName = event.name;
266 |                     if(!eventName){
267 |                         continue;
268 |                     }
269 |                     var handler = event.handler;
270 |                     if(!handler){
271 |                         continue;
272 |                     }
273 |                     var cssQuery = event.query;
274 |                     var elementForEvent = resultElement;
275 |                     if(cssQuery){
276 |                         elementForEvent = resultElement.querySelector(cssQuery);
277 |                         if(!elementForEvent){
278 |                             continue;
279 |                         }
280 |                         elementForEvent.style["pointer-events"] = "auto";
281 |                     }
282 |                     elementForEvent.addEventListener(eventName,e => handler(e.target));
283 |                 }
284 |             }
285 |         }
286 |         if(itemObject.elementToAdd){
287 |             resultElement = itemObject.elementToAdd;
288 |         }
289 |         if(itemObject.elementRoot){
290 |             listRoot = itemObject.elementRoot;
291 |         }
292 |         listRoot.appendChild(resultElement);
293 |      }
294 | }
295 | /**
296 |  * Will convert Web Screen variables into HTML elements on the page. It will map each variable with elements with the same class name. Check this page for a concrete example: https://www.dropbox.com/s/ia2m4quij24h13q/functiondemo.html?dl=1
297 |  * @param {string[]} webscreenVariables - Array of variable names that you want to map to the HTML element
298 |  * @param {string} rootElementsId - The ID of the HTML element where you want to insert the HTML elements
299 |  * @param {string} rootElementClass - The class of the HTML element that you want to clone for each item in the input array
300 |  * @param {Function} [itemTransformer] - Optional transformer that will be called for each element on the page
301 |  */
302 | AutoTools.variablesToElements = function(webscreenVariables, rootElementsId, rootElementClass, itemTransformer){
303 |         var input = AutoTools.fieldsToObject(...webscreenVariables);
304 |         AutoTools.objectToElements(rootElementsId,rootElementClass, input, itemTransformer);
305 | }
306 | /**
307 |  * Will say some text out loud on your Android device
308 |  * @param {string} text - Text you want to say
309 |  * @param {string} [language] - Optional language. Will default to your device's language
310 |  */
311 | AutoTools.say = (text,language) => AutoToolsAndroid.say(text,language);
312 | /**
313 |  * Will return info about the user that's logged in to AutoTools (usually you). Try it here with the "userId" set to "me" to see what kind of output you get: https://developers.google.com/+/web/api/rest/latest/people/get
314 |  */
315 | AutoTools.getUserInfo = () => JSON.parse(AutoToolsAndroid.getUserInfo());
316 | /**
317 |  * Will make your phone vibrate with the given vibration pattern.
318 |  * @param {string} vibration - Vibration Pattern. Same as Tasker's vibrate pattern
319 |  */
320 | AutoTools.vibrate = (vibration) => AutoToolsAndroid.vibrate(vibration);
321 | /**
322 |  * Will make your phone vibrate shortly
323 |  */
324 | AutoTools.hapticFeedback = () => AutoToolsAndroid.hapticFeedback();
325 | /**
326 |  * Will change the width of the Web Screen if it's an overlay or a dialog
327 |  * @param {string} width - in dp or "fill" to fill the entire width of the screen
328 |  */
329 | AutoTools.setWidth = (width) => AutoToolsAndroid.setWidth(width);
330 | /**
331 |  * Will change the height of the Web Screen if it's an overlay or a dialog
332 |  * @param {string} height - in dp or "fill" to fill the entire height of the screen
333 |  */
334 | AutoTools.setHeight = (width) => AutoToolsAndroid.setHeight(width);
335 | /**
336 |  * Will change the size of the Web Screen if it's an overlay or a dialog
337 |  * @param {string} width - in dp or "fill" to fill the entire width of the screen
338 |  * @param {string} height - in dp or "fill" to fill the entire height of the screen
339 |  */
340 | AutoTools.setSize = (width,height) => AutoToolsAndroid.setSize(width,height);
341 | 
342 | AutoTools.GRAVITY_BOTTOM = 80;
343 | AutoTools.GRAVITY_CENTER = 17;
344 | AutoTools.GRAVITY_TOP = 48;
345 | AutoTools.GRAVITY_RIGHT = 5;
346 | AutoTools.GRAVITY_LEFT = 3;
347 | 
348 | /**
349 |  * Will change the size of the Web Screen if it's an overlay or a dialog
350 |  * @param {string} width - in dp or "fill" to fill the entire width of the screen
351 |  * @param {string} height - in dp or "fill" to fill the entire height of the screen
352 |  * @param {string} x - offset in dp
353 |  * @param {string} y - offset in dp
354 |  * @param {int} gravity - flag for gravity: combination of any of the GRAVITY flags above
355 |  */
356 | AutoTools.setLayout = (width, height, x, y, gravity) => AutoToolsAndroid.setLayout(width, height, x, y, gravity);
357 | 
358 | AutoTools.FLAG_NOT_FOCUSABLE = 8;
359 | AutoTools.FLAG_LAYOUT_NO_LIMITS = 512;
360 | AutoTools.FLAG_TURN_SCREEN_ON = 2097152;
361 | AutoTools.FLAG_ALT_FOCUSABLE_IM = 131072;
362 | AutoTools.FLAG_NOT_TOUCH_MODAL = 32;
363 | 
364 | /**
365 |  * Will set overlay flags manually. Can be used to adjust if web screen requires input at runtime
366 |  * @param {int} flags - flags to set. Check here: https://developer.android.com/reference/android/view/WindowManager.LayoutParams.html
367 |  */
368 | AutoTools.setWindowFlags = (flags) => AutoToolsAndroid.setWindowFlags(flags);
369 | 
370 | /**
371 |  * Will show a toast with the given text
372 |  * @param {string} text - text to show in the toast
373 |  */
374 | AutoTools.showToast = (text) => AutoToolsAndroid.showToast(text);
375 | 
376 | /**
377 |  * Will get the Tasker input that was used to show the screen
378 |  */
379 | AutoTools.getInput = () => JSON.parse(AutoToolsAndroid.getInput());
380 | 
381 | /**
382 |  * Will get the Tasker input that was used to show the screen
383 |  */
384 | AutoTools.getTextInput = (title,message,initialText) => AutoToolsAndroid.getTextInput(title,message,initialText);
385 | 
386 | /**
387 |  * Will open the URL on your Android device in an external app
388 |  */
389 | AutoTools.browseUrl = url => AutoToolsAndroid.browseUrl(url);
390 | 
391 | /**
392 |  * Will get the location of the overlay (as an object with two properties: x and y. Like {x:100,y:200}) f the screen is shown in overlay mode. If not, will return null.
393 |  */
394 | AutoTools.getOverlayPosition = () => {
395 |     var point = AutoToolsAndroid.getOverlayPosition();
396 |     if(!point){
397 |         return point;
398 |     }
399 |     return JSON.parse(point);
400 | }
401 | 
402 | /**
403 |  * Will create a new style element in the header of the page with the contents passed in as parameter
404 |  * @param {string} css - css text to add in a style element
405 |  */
406 | AutoTools.addStyle = (css) => {
407 |     var sheet = document.createElement('style')
408 |     sheet.innerHTML = css;
409 |     document.head.appendChild(sheet);
410 | }
411 | 
412 | /**
413 |  * Will return the input with the suffix 'px' if it's a number, otherwise will return the input
414 |  * @param {string} dimension - either a number or any other type of dimension
415 |  */
416 | AutoTools.getPixelsOrDimension = (dimension) => {
417 |     if(!isNaN(new Number(dimension))){
418 |         return dimension+"px";
419 |     }
420 |     return dimension;
421 | }
422 | 
423 | /**
424 |  * Check if a certain flag is set
425 |  * @param {int} flags - flags to check
426 |  * @param {int} flagToCheck - flag to check
427 |  */
428 | AutoTools.checkFlag = (flags, flagToCheck) => {
429 |     if ((flags & flagToCheck) == flagToCheck){
430 |         return true;
431 |     }
432 |     return false;
433 | }
434 | 
435 | 
436 | AutoTools.DRAG_LOCK_ALL = "0";
437 | AutoTools.DRAG_LOCK_HORIZONTAL = "1";
438 | AutoTools.DRAG_LOCK_VERTICAL = "2";
439 | AutoTools.DRAG_LOCK_NONE = "3";
440 | 
441 | /**
442 |  * Enable or disable vertical dragging in overlays
443 |  * @param {boolean} enable - select if you want to enable or disable it
444 |  */
445 | AutoTools.setDragInY = enable => AutoToolsAndroid.setDragInY(enable);
446 | 
447 | /**
448 |  * Enable or disable horizontal dragging in overlays
449 |  * @param {boolean} enable - select if you want to enable or disable it
450 |  */
451 | AutoTools.setDragInX = enable => AutoToolsAndroid.setDragInX(enable);
452 | 
453 | AutoTools.FLING_TO_DISMISS_NONE = "0";
454 | AutoTools.FLING_TO_DISMISS_ALL = "1";
455 | AutoTools.FLING_TO_DISMISS_UP = "2";
456 | AutoTools.FLING_TO_DISMISS_RIGHT = "3";
457 | AutoTools.FLING_TO_DISMISS_DOWN = "4";
458 | AutoTools.FLING_TO_DISMISS_LEFT = "5";
459 | AutoTools.FLING_TO_DISMISS_UP_AND_DOWN = "6";
460 | AutoTools.FLING_TO_DISMISS_LEFT_AND_RIGHT = "7";
461 | /**
462 |  * Enable or disable fling to dismiss on negative X
463 |  * @param {boolean} enable - select if you want to enable or disable it
464 |  */
465 | AutoTools.setflingOnNegativeX = enable => AutoToolsAndroid.setflingOnNegativeX(enable);
466 | 
467 | /**
468 |  * Enable or disable fling to dismiss on positive X
469 |  * @param {boolean} enable - select if you want to enable or disable it
470 |  */
471 | AutoTools.setflingOnPositiveX = enable => AutoToolsAndroid.setflingOnPositiveX(enable);
472 | 
473 | /**
474 |  * Enable or disable fling to dismiss on negative Y
475 |  * @param {boolean} enable - select if you want to enable or disable it
476 |  */
477 | AutoTools.setflingOnNegativeY = enable => AutoToolsAndroid.setflingOnNegativeY(enable);
478 | 
479 | /**
480 |  * Enable or disable fling to dismiss on positive Y
481 |  * @param {boolean} enable - select if you want to enable or disable it
482 |  */
483 | AutoTools.setflingOnPositiveY = enable => AutoToolsAndroid.setflingOnPositiveY(enable);
484 | 
485 | /**
486 |  * Check if fling to dismiss is enabled for left
487 |  * @param {string} fling - current fling to dismiss value
488 |  */
489 | AutoTools.checkFlingLeft = fling => fling == AutoTools.FLING_TO_DISMISS_LEFT || fling == AutoTools.FLING_TO_DISMISS_LEFT_AND_RIGHT || fling == AutoTools.FLING_TO_DISMISS_ALL;
490 | /**
491 |  * Check if fling to dismiss is enabled for right
492 |  * @param {string} fling - current fling to dismiss value
493 |  */
494 | AutoTools.checkFlingRight = fling => fling == AutoTools.FLING_TO_DISMISS_RIGHT || fling == AutoTools.FLING_TO_DISMISS_LEFT_AND_RIGHT || fling == AutoTools.FLING_TO_DISMISS_ALL;
495 | /**
496 |  * Check if fling to dismiss is enabled for up
497 |  * @param {string} fling - current fling to dismiss value
498 |  */
499 | AutoTools.checkFlingUp = fling => fling == AutoTools.FLING_TO_DISMISS_UP || fling == AutoTools.FLING_TO_DISMISS_UP_AND_DOWN || fling == AutoTools.FLING_TO_DISMISS_ALL;
500 | /**
501 |  * Check if fling to dismiss is enabled for down
502 |  * @param {string} fling - current fling to dismiss value
503 |  */
504 | AutoTools.checkFlingDown = fling => fling == AutoTools.FLING_TO_DISMISS_DOWN || fling == AutoTools.FLING_TO_DISMISS_UP_AND_DOWN || fling == AutoTools.FLING_TO_DISMISS_ALL;
505 | 
506 | /**
507 |  * Sleep for some time. Should be called with the await keyword
508 |  * @param {int} time - ms to wait
509 |  */
510 | AutoTools.sleep = async time => new Promise(resolve=>setTimeout(resolve,time));
511 | 
512 | /**
513 |  * Add a click and long click listener to a DOM element
514 |  * @param {HTMLElement} element - DOM element to attach listeners to
515 |  * @param {Function} callbackClick - optional function to run when element is clicked
516 |  * @param {Function} callbackLongClick - optional function to run when element is long clicked
517 |  * @param {int} longClickTime - time to wait until a long click is acknowledged
518 |  */
519 | AutoTools.onclickandlongclick = function(element, callbackClick, callbackLongClick,longClickTime){
520 |     var longpress = false;
521 |     var presstimer = null;
522 |     var longtarget = null;
523 |     if(!longClickTime)longClickTime=500;
524 | 
525 |     var cancel = function(e) {
526 |         if (presstimer !== null) {
527 |             clearTimeout(presstimer);
528 |             presstimer = null;
529 |         }
530 | 
531 |         this.classList.remove("longpress");
532 |     };
533 | 
534 |     var click = function(e) {
535 |         if (presstimer !== null) {
536 |             clearTimeout(presstimer);
537 |             presstimer = null;
538 |         }
539 | 
540 |         this.classList.remove("longpress");
541 | 
542 |         if (longpress) {
543 |             return false;
544 |         }
545 |         if(callbackClick)callbackClick(e);
546 |     };
547 | 
548 |     var start = function(e) {
549 | 
550 |         if (e.type === "click" && e.button !== 0) {
551 |             return;
552 |         }
553 | 
554 |         longpress = false;
555 | 
556 |         this.classList.add("longpress");
557 | 
558 |         presstimer = setTimeout(function() {
559 |             if(callbackLongClick)callbackLongClick(e);
560 |             longpress = true;
561 |         }, longClickTime);
562 | 
563 |         return false;
564 |     };
565 | 
566 |     element.addEventListener("mousedown", start);
567 |     element.addEventListener("touchstart", start);
568 |     element.addEventListener("click", click);
569 |     element.addEventListener("mouseout", cancel);
570 |     element.addEventListener("touchend", cancel);
571 |     element.addEventListener("touchleave", cancel);
572 |     element.addEventListener("touchcancel", cancel);
573 | }
574 | 
575 | 


--------------------------------------------------------------------------------
/autotoolsfunctions.js.bak:
--------------------------------------------------------------------------------
  1 | /**
  2 | * These functions will automatically be injected into every page that is loaded with the AutoTools Web Screen action in Tasker.
  3 | * You can use them freely in your own web screens! :)
  4 | * If you want you can copy these to your web screen for easy testing on your PC.
  5 | * Only the functions that call AutoToolsAndroid functions will not work on your PC, like the AutoTools.say function for example.
  6 | */
  7 | 
  8 | /**
  9 |  * Create base AutoTools object that will contain everything else
 10 |  */
 11 | var AutoTools = {};
 12 | 
 13 | /**
 14 |  * Send an AutoApps command from JavaScript.
 15 |  * @param {string} command - The command you want to send
 16 |  * @param {string} [prefix] - An optional prefix that will be prepended to the command. If it exists command will have the prefix=:=command format
 17 |  * @param {boolean} [hapticFeedback] - If true, will perform a short vibration with the command
 18 |  */
 19 | AutoTools.sendCommand = function(command, prefix, hapticFeedback){
 20 |     if(!command){
 21 |         return;
 22 |     }
 23 |     if(!prefix){
 24 |         prefix = null;
 25 |     }
 26 |     console.log("Sending command: " + command+";"+prefix);
 27 |     AutoToolsAndroid.sendCommand(command, prefix, hapticFeedback);
 28 | }
 29 | 
 30 | /**
 31 |  * Easily assign a command to an HTML element
 32 |  * @param {string} selector - The CSS selector for the element. For example, to specify an element with the id "link", you should pass in "#link"
 33 |  * @param {string} command - The command you want to send
 34 |  * @param {string} [prefix] - An optional prefix that will be prepended to the command. If it exists command will have the prefix=:=command format
 35 |  */
 36 | AutoTools.commandOnClick = function(selector, command, prefix){
 37 |     document.querySelector(selector).onclick = e => AutoTools.sendCommand(command, prefix);
 38 | }
 39 | /**
 40 |  * Change a color dynamically. Got it from here: https://stackoverflow.com/questions/5560248/programmatically-lighten-or-darken-a-hex-color-or-rgb-and-blend-colors
 41 |  * Example use: Have color #ff0000 (red) and want a 30% darker shade of red, would call AutoTools.shadeBlendConvert(-0.3, "#ff0000");
 42 |  */
 43 | AutoTools.shadeBlendConvert = function(p, from, to) {
 44 |     if(typeof(p)!="number"||p<-1||p>1||typeof(from)!="string"||(from[0]!='r'&&from[0]!='#')||(typeof(to)!="string"&&typeof(to)!="undefined"))return null;
 45 |     var sbcRip=function(d){
 46 |         var l=d.length,RGB=new Object();
 47 |         if(l>9){
 48 |             d=d.split(",");
 49 |             if(d.length<3||d.length>4)return null;
 50 |             RGB[0]=i(d[0].slice(4)),RGB[1]=i(d[1]),RGB[2]=i(d[2]),RGB[3]=d[3]?parseFloat(d[3]):-1;
 51 |         }else{
 52 |             if(l==8||l==6||l<4)return null;
 53 |             if(l<6)d="#"+d[1]+d[1]+d[2]+d[2]+d[3]+d[3]+(l>4?d[4]+""+d[4]:"");
 54 |             d=i(d.slice(1),16),RGB[0]=d>>16&255,RGB[1]=d>>8&255,RGB[2]=d&255,RGB[3]=l==9||l==5?r(((d>>24&255)/255)*10000)/10000:-1;
 55 |         }
 56 |         return RGB;}
 57 |     var i=parseInt,r=Math.round,h=from.length>9,h=typeof(to)=="string"?to.length>9?true:to=="c"?!h:false:h,b=p<0,p=b?p*-1:p,to=to&&to!="c"?to:b?"#000000":"#FFFFFF",f=sbcRip(from),t=sbcRip(to);
 58 |     if(!f||!t)return null;
 59 |     if(h)return "rgb("+r((t[0]-f[0])*p+f[0])+","+r((t[1]-f[1])*p+f[1])+","+r((t[2]-f[2])*p+f[2])+(f[3]<0&&t[3]<0?")":","+(f[3]>-1&&t[3]>-1?r(((t[3]-f[3])*p+f[3])*10000)/10000:t[3]<0?f[3]:t[3])+")");
 60 |     else return "#"+(0x100000000+(f[3]>-1&&t[3]>-1?r(((t[3]-f[3])*p+f[3])*255):t[3]>-1?r(t[3]*255):f[3]>-1?r(f[3]*255):255)*0x1000000+r((t[0]-f[0])*p+f[0])*0x10000+r((t[1]-f[1])*p+f[1])*0x100+r((t[2]-f[2])*p+f[2])).toString(16).slice(f[3]>-1||t[3]>-1?1:3);
 61 | };
 62 | 
 63 | /**
 64 |  * Brighten the color of a property in a CSS rule
 65 |  * @param {Object} rule - The cssRule object you want to change
 66 |  * @param {string} propertyName - The property you want to change ("background-color" for example)
 67 |  * @param {string} percent - Value from 0 to 100 you want to change
 68 |  * @param {boolean} darken - If true will darken the color instead of brightening it
 69 |  */
 70 | AutoTools.increaseBrightnessRule = function(rule, propertyName, percent, darken){
 71 |     var originalColor = rule.style.getPropertyValue(propertyName);
 72 |     if(!originalColor){
 73 |         return;
 74 |     }
 75 |     originalColor = originalColor.trim();
 76 |     var newColor = AutoTools.shadeBlendConvert(percent/100,originalColor);
 77 |     rule.style.setProperty(propertyName, newColor);
 78 |     return newColor;
 79 | };
 80 | 
 81 | /**
 82 |  * Check if the value of a Web Screen Variable was set from Tasker
 83 |  * @param {string} value - Name of the variable you want to check
 84 |  */
 85 | AutoTools.isSet = value => {
 86 |     value = window[value];
 87 |     if(value === undefined || value === null){
 88 |         return false;
 89 |     }
 90 |     var toClass = {}.toString.call(value);
 91 |     if(toClass  == "[object Boolean]"){
 92 |         return true;
 93 |     }
 94 |     return toClass  == "[object String]";
 95 | };
 96 | /**
 97 |  * Set the value of a Web Screen variable if it hasn't been set already from Tasker
 98 |  * @param {string} variable - The name of the variable you want to set
 99 |  * @param {string} value - The value you want to set if it hasn't been set from Tasker
100 |  */
101 | AutoTools.setDefault = (variable, value) => {
102 |     if(!AutoTools.isSet(variable)){
103 |         window[variable] = value;
104 |     }
105 | };
106 | /**
107 |  * As above but for setting multiple values
108 |  * @param {Object} values - Object to set default values of.
109 |  * For example, using
110 |  * AutoTools.setDefault("title","My Title");
111 |  * AutoTools.setDefault("text","my text");
112 |  * Is the same as using
113 |  * AutoTools.setDefaultValues({
114 |     "title": "My Title",
115 |     "text":"my text"
116 |    });
117 |  */
118 | AutoTools.setDefaultValues = (values) => {
119 |     for(var varName in values){
120 |         var value = values[varName];
121 |         AutoTools.setDefault(varName, value);
122 |     }
123 | };
124 | 
125 | /**
126 |  * Will convert a list of comma separated Web Screen variables into a nice JSON object.
127 |  * @param {...string} fields - Names of the Web Screen Variables to convert
128 |  * For example if have
129 |  * - variable "title" with value = "Title1,Title2,Title3"
130 |  * - variable "text" with value = "text1,text2,text3"
131 |  * And use
132 |  * AutoTools.fieldsToObject("title","text");
133 |  * It'll return an array of objects like this:
134 | [
135 |     {
136 |         "title": "Title1",
137 |         "text": "Text1"
138 |     },
139 |     {
140 |         "title": "Title2",
141 |         "text": "text2"
142 |     },
143 |     {
144 |         "title": "Title3",
145 |         "text": "text3"
146 |     }
147 | ]
148 |  * This is much easier to use in JavaScript :)
149 |  */
150 | AutoTools.fieldsToObject = (...fields) => {
151 |     var first =  fields[0];
152 |     var result = [];
153 |     /*if(!AutoTools.isSet(first)){
154 |         return result;
155 |     }*/
156 |     var length = null;
157 |     var separator = ",";
158 |     if(AutoTools.isSet("itemSeparator")){
159 |         separator =  itemSeparator;
160 |     }
161 |     for(var field of fields){
162 |         if(!AutoTools.isSet(field)){
163 |             continue;
164 |         }
165 |         var value = window[field];
166 |         var split = value.split(separator);
167 |         if(length == null){
168 |             length = split.length;
169 |         }
170 |         for (var i = 0; i < length; i++) {
171 |             if(result.length<=i){
172 |                 result.push({});
173 |             }
174 |             var current = result[i];
175 |             current[field] = split[i];
176 |         }
177 |     }
178 |     return result;
179 | };
180 | 
181 | /**
182 |  * Will hide an element on the page
183 |  * @param {HTMLElement} element - The element you want to hide
184 | */
185 | AutoTools.hide = element => element.classList.add("hidden");
186 | 
187 | /**
188 |  * Will show an element on the page
189 |  * @param {HTMLElement} element - The element you want to show
190 | */
191 | AutoTools.show = element => element.classList.remove("hidden");
192 | 
193 | /**
194 |  * Will convert an array object into HTML elements on the page. It will map each property in the object with elements with the same class name. Check this page for a concrete example: https://www.dropbox.com/s/ia2m4quij24h13q/functiondemo.html?dl=1
195 |  * @param {string} rootElementsId - The ID of the HTML element where you want to insert the HTML elements
196 |  * @param {string} rootElementClass - The class of the HTML element that you want to clone for each item in the input array
197 |  * @param {Object[]} input - The array that contains properties that will be mapped to each replicated HTML element
198 |  * @param {Function} [itemTransformer] - Optional transformer that will be called for each element on the page
199 | */
200 | AutoTools.objectToElements = function(rootElementsId, rootElementClass, input, itemTransformer){
201 |     var setByClass = (root,className,value,prop) => {
202 |         var element = root.querySelector(`.${className}`);
203 |         if(!element){
204 |             return;
205 |         }
206 |         if(!value){
207 |             AutoTools.hide(element);
208 |             return element;
209 |         }
210 |         AutoTools.show(element);
211 |         if(!prop){
212 |             var tagName = element.tagName;
213 |             if(tagName == "IMG"){
214 |                 prop = "src";
215 |             }else if(tagName == "A"){
216 |                 prop = "href";
217 |             }else if(tagName == "INPUT"){
218 |                 if(element.type == "checkbox"){
219 |                     prop = "checked";
220 |                     value = value == "false" ? false : true;
221 |                 }
222 |             }else{
223 |                 prop = "innerHTML";
224 |             }
225 |         }
226 |         element[prop] = value;
227 |         return element;
228 |     };
229 |     var listRoot = document.querySelector("#"+rootElementsId);
230 |     var elementToClone = document.querySelector("."+rootElementClass);
231 |     AutoTools.hide(elementToClone);
232 |     var rootElement = elementToClone.cloneNode(true);
233 |     AutoTools.show(rootElement);
234 |     listRoot.innerHTML = "";
235 |     if(itemTransformer && itemTransformer.onclick){
236 |         var styleNoPointerEvents = document.createElement("style");
237 |         styleNoPointerEvents.innerHTML = `
238 |         .${rootElementClass}{
239 |             cursor: pointer;
240 |         }
241 |         .${rootElementClass} *{
242 |             pointer-events: none;
243 |         }`;
244 |         document.querySelector("head").appendChild(styleNoPointerEvents);
245 |     }
246 |     for(var item of input){
247 | 
248 |         var resultElement = rootElement.cloneNode(true);
249 |         resultElement.item = item;
250 |         var itemObject = {"parent":resultElement};
251 |         for(var prop in item){
252 |             var value = item[prop];
253 |             var setElement = setByClass(resultElement,prop,value);
254 |             itemObject[prop] = {"value":value,"element":setElement};
255 |         }
256 |         if(itemTransformer){
257 |             if(itemTransformer.item){
258 |                 itemTransformer.item(itemObject);
259 |             }
260 |             if(itemTransformer.onclick){
261 |                 resultElement.onclick = e => itemTransformer.onclick(e.target.item);
262 |             }
263 |             if(itemTransformer.events){
264 |                 for(var event of itemTransformer.events){
265 |                     var eventName = event.name;
266 |                     if(!eventName){
267 |                         continue;
268 |                     }
269 |                     var handler = event.handler;
270 |                     if(!handler){
271 |                         continue;
272 |                     }
273 |                     var cssQuery = event.query;
274 |                     var elementForEvent = resultElement;
275 |                     if(cssQuery){
276 |                         elementForEvent = resultElement.querySelector(cssQuery);
277 |                         if(!elementForEvent){
278 |                             continue;
279 |                         }
280 |                         elementForEvent.style["pointer-events"] = "auto";
281 |                     }
282 |                     elementForEvent.addEventListener(eventName,e => handler(e.target));
283 |                 }
284 |             }
285 |         }
286 |         if(itemObject.elementToAdd){
287 |             resultElement = itemObject.elementToAdd;
288 |         }
289 |         if(itemObject.elementRoot){
290 |             listRoot = itemObject.elementRoot;
291 |         }
292 |         listRoot.appendChild(resultElement);
293 |      }
294 | }
295 | /**
296 |  * Will convert Web Screen variables into HTML elements on the page. It will map each variable with elements with the same class name. Check this page for a concrete example: https://www.dropbox.com/s/ia2m4quij24h13q/functiondemo.html?dl=1
297 |  * @param {string[]} webscreenVariables - Array of variable names that you want to map to the HTML element
298 |  * @param {string} rootElementsId - The ID of the HTML element where you want to insert the HTML elements
299 |  * @param {string} rootElementClass - The class of the HTML element that you want to clone for each item in the input array
300 |  * @param {Function} [itemTransformer] - Optional transformer that will be called for each element on the page
301 |  */
302 | AutoTools.variablesToElements = function(webscreenVariables, rootElementsId, rootElementClass, itemTransformer){
303 |         var input = AutoTools.fieldsToObject(...webscreenVariables);
304 |         AutoTools.objectToElements(rootElementsId,rootElementClass, input, itemTransformer);
305 | }
306 | /**
307 |  * Will say some text out loud on your Android device
308 |  * @param {string} text - Text you want to say
309 |  * @param {string} [language] - Optional language. Will default to your device's language
310 |  */
311 | AutoTools.say = (text,language) => AutoToolsAndroid.say(text,language);
312 | /**
313 |  * Will return info about the user that's logged in to AutoTools (usually you). Try it here with the "userId" set to "me" to see what kind of output you get: https://developers.google.com/+/web/api/rest/latest/people/get
314 |  */
315 | AutoTools.getUserInfo = () => JSON.parse(AutoToolsAndroid.getUserInfo());
316 | /**
317 |  * Will make your phone vibrate with the given vibration pattern.
318 |  * @param {string} vibration - Vibration Pattern. Same as Tasker's vibrate pattern
319 |  */
320 | AutoTools.vibrate = (vibration) => AutoToolsAndroid.vibrate(vibration);
321 | /**
322 |  * Will make your phone vibrate shortly
323 |  */
324 | AutoTools.hapticFeedback = () => AutoToolsAndroid.hapticFeedback();
325 | /**
326 |  * Will change the width of the Web Screen if it's an overlay or a dialog
327 |  * @param {string} width - in dp or "fill" to fill the entire width of the screen
328 |  */
329 | AutoTools.setWidth = (width) => AutoToolsAndroid.setWidth(width);
330 | /**
331 |  * Will change the height of the Web Screen if it's an overlay or a dialog
332 |  * @param {string} height - in dp or "fill" to fill the entire height of the screen
333 |  */
334 | AutoTools.setHeight = (width) => AutoToolsAndroid.setHeight(width);
335 | /**
336 |  * Will change the size of the Web Screen if it's an overlay or a dialog
337 |  * @param {string} width - in dp or "fill" to fill the entire width of the screen
338 |  * @param {string} height - in dp or "fill" to fill the entire height of the screen
339 |  */
340 | AutoTools.setSize = (width,height) => AutoToolsAndroid.setSize(width,height);
341 | 
342 | AutoTools.GRAVITY_BOTTOM = 80;
343 | AutoTools.GRAVITY_CENTER = 17;
344 | AutoTools.GRAVITY_TOP = 48;
345 | AutoTools.GRAVITY_RIGHT = 5;
346 | AutoTools.GRAVITY_LEFT = 3;
347 | 
348 | /**
349 |  * Will change the size of the Web Screen if it's an overlay or a dialog
350 |  * @param {string} width - in dp or "fill" to fill the entire width of the screen
351 |  * @param {string} height - in dp or "fill" to fill the entire height of the screen
352 |  * @param {string} x - offset in dp
353 |  * @param {string} y - offset in dp
354 |  * @param {int} gravity - flag for gravity: combination of any of the GRAVITY flags above
355 |  */
356 | AutoTools.setLayout = (width, height, x, y, gravity) => AutoToolsAndroid.setLayout(width, height, x, y, gravity);
357 | 
358 | AutoTools.FLAG_NOT_FOCUSABLE = 8;
359 | AutoTools.FLAG_LAYOUT_NO_LIMITS = 512;
360 | AutoTools.FLAG_TURN_SCREEN_ON = 2097152;
361 | AutoTools.FLAG_ALT_FOCUSABLE_IM = 131072;
362 | AutoTools.FLAG_NOT_TOUCH_MODAL = 32;
363 | 
364 | /**
365 |  * Will set overlay flags manually. Can be used to adjust if web screen requires input at runtime
366 |  * @param {int} flags - flags to set. Check here: https://developer.android.com/reference/android/view/WindowManager.LayoutParams.html
367 |  */
368 | AutoTools.setWindowFlags = (flags) => AutoToolsAndroid.setWindowFlags(flags);
369 | 
370 | /**
371 |  * Will show a toast with the given text
372 |  * @param {string} text - text to show in the toast
373 |  */
374 | AutoTools.showToast = (text) => AutoToolsAndroid.showToast(text);
375 | 
376 | /**
377 |  * Will get the Tasker input that was used to show the screen
378 |  */
379 | AutoTools.getInput = () => JSON.parse(AutoToolsAndroid.getInput());
380 | 
381 | /**
382 |  * Will get the Tasker input that was used to show the screen
383 |  */
384 | AutoTools.getTextInput = (title,message,initialText) => AutoToolsAndroid.getTextInput(title,message,initialText);
385 | 
386 | /**
387 |  * Will open the URL on your Android device in an external app
388 |  */
389 | AutoTools.browseUrl = url => AutoToolsAndroid.browseUrl(url);
390 | 
391 | /**
392 |  * Will get the location of the overlay (as an object with two properties: x and y. Like {x:100,y:200}) f the screen is shown in overlay mode. If not, will return null.
393 |  */
394 | AutoTools.getOverlayPosition = () => {
395 |     var point = AutoToolsAndroid.getOverlayPosition();
396 |     if(!point){
397 |         return point;
398 |     }
399 |     return JSON.parse(point);
400 | }
401 | 
402 | /**
403 |  * Will create a new style element in the header of the page with the contents passed in as parameter
404 |  * @param {string} css - css text to add in a style element
405 |  */
406 | AutoTools.addStyle = (css) => {
407 |     var sheet = document.createElement('style')
408 |     sheet.innerHTML = css;
409 |     document.head.appendChild(sheet);
410 | }
411 | 
412 | /**
413 |  * Will return the input with the suffix 'px' if it's a number, otherwise will return the input
414 |  * @param {string} dimension - either a number or any other type of dimension
415 |  */
416 | AutoTools.getPixelsOrDimension = (dimension) => {
417 |     if(!isNaN(new Number(dimension))){
418 |         return dimension+"px";
419 |     }
420 |     return dimension;
421 | }
422 | 
423 | /**
424 |  * Check if a certain flag is set
425 |  * @param {int} flags - flags to check
426 |  * @param {int} flagToCheck - flag to check
427 |  */
428 | AutoTools.checkFlag = (flags, flagToCheck) => {
429 |     if ((flags & flagToCheck) == flagToCheck){
430 |         return true;
431 |     }
432 |     return false;
433 | }
434 | 
435 | 
436 | AutoTools.DRAG_LOCK_ALL = "0";
437 | AutoTools.DRAG_LOCK_HORIZONTAL = "1";
438 | AutoTools.DRAG_LOCK_VERTICAL = "2";
439 | AutoTools.DRAG_LOCK_NONE = "3";
440 | 
441 | /**
442 |  * Enable or disable vertical dragging in overlays
443 |  * @param {boolean} enable - select if you want to enable or disable it
444 |  */
445 | AutoTools.setDragInY = enable => AutoToolsAndroid.setDragInY(enable);
446 | 
447 | /**
448 |  * Enable or disable horizontal dragging in overlays
449 |  * @param {boolean} enable - select if you want to enable or disable it
450 |  */
451 | AutoTools.setDragInX = enable => AutoToolsAndroid.setDragInX(enable);
452 | 
453 | AutoTools.FLING_TO_DISMISS_NONE = "0";
454 | AutoTools.FLING_TO_DISMISS_ALL = "1";
455 | AutoTools.FLING_TO_DISMISS_UP = "2";
456 | AutoTools.FLING_TO_DISMISS_RIGHT = "3";
457 | AutoTools.FLING_TO_DISMISS_DOWN = "4";
458 | AutoTools.FLING_TO_DISMISS_LEFT = "5";
459 | AutoTools.FLING_TO_DISMISS_UP_AND_DOWN = "6";
460 | AutoTools.FLING_TO_DISMISS_LEFT_AND_RIGHT = "7";
461 | /**
462 |  * Enable or disable fling to dismiss on negative X
463 |  * @param {boolean} enable - select if you want to enable or disable it
464 |  */
465 | AutoTools.setflingOnNegativeX = enable => AutoToolsAndroid.setflingOnNegativeX(enable);
466 | 
467 | /**
468 |  * Enable or disable fling to dismiss on positive X
469 |  * @param {boolean} enable - select if you want to enable or disable it
470 |  */
471 | AutoTools.setflingOnPositiveX = enable => AutoToolsAndroid.setflingOnPositiveX(enable);
472 | 
473 | /**
474 |  * Enable or disable fling to dismiss on negative Y
475 |  * @param {boolean} enable - select if you want to enable or disable it
476 |  */
477 | AutoTools.setflingOnNegativeY = enable => AutoToolsAndroid.setflingOnNegativeY(enable);
478 | 
479 | /**
480 |  * Enable or disable fling to dismiss on positive Y
481 |  * @param {boolean} enable - select if you want to enable or disable it
482 |  */
483 | AutoTools.setflingOnPositiveY = enable => AutoToolsAndroid.setflingOnPositiveY(enable);
484 | 
485 | /**
486 |  * Check if fling to dismiss is enabled for left
487 |  * @param {string} fling - current fling to dismiss value
488 |  */
489 | AutoTools.checkFlingLeft = fling => fling == AutoTools.FLING_TO_DISMISS_LEFT || fling == AutoTools.FLING_TO_DISMISS_LEFT_AND_RIGHT || fling == AutoTools.FLING_TO_DISMISS_ALL;
490 | /**
491 |  * Check if fling to dismiss is enabled for right
492 |  * @param {string} fling - current fling to dismiss value
493 |  */
494 | AutoTools.checkFlingRight = fling => fling == AutoTools.FLING_TO_DISMISS_RIGHT || fling == AutoTools.FLING_TO_DISMISS_LEFT_AND_RIGHT || fling == AutoTools.FLING_TO_DISMISS_ALL;
495 | /**
496 |  * Check if fling to dismiss is enabled for up
497 |  * @param {string} fling - current fling to dismiss value
498 |  */
499 | AutoTools.checkFlingUp = fling => fling == AutoTools.FLING_TO_DISMISS_UP || fling == AutoTools.FLING_TO_DISMISS_UP_AND_DOWN || fling == AutoTools.FLING_TO_DISMISS_ALL;
500 | /**
501 |  * Check if fling to dismiss is enabled for down
502 |  * @param {string} fling - current fling to dismiss value
503 |  */
504 | AutoTools.checkFlingDown = fling => fling == AutoTools.FLING_TO_DISMISS_DOWN || fling == AutoTools.FLING_TO_DISMISS_UP_AND_DOWN || fling == AutoTools.FLING_TO_DISMISS_ALL;
505 | 
506 | /**
507 |  * Sleep for some time. Should be called with the await keyword
508 |  * @param {int} time - ms to wait
509 |  */
510 | AutoTools.sleep = async time => new Promise(resolve=>setTimeout(resolve,time));
511 | 
512 | /**
513 |  * Add a click and long click listener to a DOM element
514 |  * @param {HTMLElement} element - DOM element to attach listeners to
515 |  * @param {Function} callbackClick - optional function to run when element is clicked
516 |  * @param {Function} callbackLongClick - optional function to run when element is long clicked
517 |  * @param {int} longClickTime - time to wait until a long click is acknowledged
518 |  */
519 | AutoTools.onclickandlongclick = function(element, callbackClick, callbackLongClick,longClickTime){
520 |     var longpress = false;
521 |     var presstimer = null;
522 |     var longtarget = null;
523 |     if(!longClickTime)longClickTime=500;
524 | 
525 |     var cancel = function(e) {
526 |         if (presstimer !== null) {
527 |             clearTimeout(presstimer);
528 |             presstimer = null;
529 |         }
530 | 
531 |         this.classList.remove("longpress");
532 |     };
533 | 
534 |     var click = function(e) {
535 |         if (presstimer !== null) {
536 |             clearTimeout(presstimer);
537 |             presstimer = null;
538 |         }
539 | 
540 |         this.classList.remove("longpress");
541 | 
542 |         if (longpress) {
543 |             return false;
544 |         }
545 |         if(callbackClick)callbackClick(e);
546 |     };
547 | 
548 |     var start = function(e) {
549 |         console.log(e);
550 | 
551 |         if (e.type === "click" && e.button !== 0) {
552 |             return;
553 |         }
554 | 
555 |         longpress = false;
556 | 
557 |         this.classList.add("longpress");
558 | 
559 |         presstimer = setTimeout(function() {
560 |             if(callbackLongClick)callbackLongClick(e);
561 |             longpress = true;
562 |         }, longClickTime);
563 | 
564 |         return false;
565 |     };
566 | 
567 |     element.addEventListener("mousedown", start);
568 |     element.addEventListener("touchstart", start);
569 |     element.addEventListener("click", click);
570 |     element.addEventListener("mouseout", cancel);
571 |     element.addEventListener("touchend", cancel);
572 |     element.addEventListener("touchleave", cancel);
573 |     element.addEventListener("touchcancel", cancel);
574 | }
575 | 
576 | 


--------------------------------------------------------------------------------
/autotoolsstyle.css:
--------------------------------------------------------------------------------
1 | /*
2 | * Class used by the hide() and show() functions
3 | */
4 | .hidden{
5 |     display: none !important;
6 | }


--------------------------------------------------------------------------------
/demos/bubble/instructions.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | 	<style type="text/css">
 5 | 		div{
 6 | 			margin: 16px;
 7 | 		}
 8 | 	</style>
 9 | </head>
10 | <body>
11 | 	<h2>Bubble</h2>
12 | 	<div>Show an interactive image/icon as a floating overlay</div>
13 | 	<div>You can click on it to perform an AutoApps command</div>
14 | 	<div>To change the size of the bubble change the Window Size in <b>Window Settings</b>-><b>Width</b> and <b>Height</b></div>
15 | 	<div>If you set the <b>Overlay Settings</b>-><b>Drag Movements</b> to <b>Horizontal Only</b> or <b>Vertical Only</b> you can then also set swipe commands</div>
16 | 	<div>If you enable the <b>Update</b> option the bubble's position will be kept and only the image and other properties will be updated</div>
17 | 	<h3>Examples</h3>
18 | 	<div><a href="http://forum.joaoapps.com/index.php?resources/create-context-bubbles.286/">Context Bubbles - Bubbles that pop up just when you need them</a></div>
19 | </body>
20 | </html>


--------------------------------------------------------------------------------
/demos/bubble/page.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 | 	<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
  5 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  6 | 	<meta name="autotoolswebscreen" type="variablejs" group="Image" id="imageSource" label="Image" isIcon="true"/>
  7 | 	<meta name="autotoolswebscreen" type="variablejs" subtype="boolean" group="Image" id="imageRound" label="Round Image" defaultValue="true" />
  8 | 	<meta name="autotoolswebscreen" type="variablejs" group="Image Filter" id="filterGrayscale" label="Grayscale" defaultValue="0%" />
  9 | 	<meta name="autotoolswebscreen" type="variablejs" group="Image Filter" id="filterBlur" label="Blur" defaultValue="0" />
 10 | 	<meta name="autotoolswebscreen" type="variablejs" group="Image Filter" id="filterOpacity" label="Opacity" defaultValue="100%" />
 11 | 	<meta name="autotoolswebscreen" type="variablejs" group="Image Filter" id="filterBrightness" label="Brightness" defaultValue="100%" />
 12 | 	<meta name="autotoolswebscreen" type="variablejs" group="Image Filter" id="filterContrast" label="Contrast" defaultValue="100%" />
 13 | 	<meta name="autotoolswebscreen" type="variablejs" group="Image Filter" id="filterSaturate" label="Saturate" defaultValue="100%" />
 14 | 	<meta name="autotoolswebscreen" type="variablejs" group="Image Filter" id="filterSepia" label="Sepia" defaultValue="0%" />
 15 | 	<meta name="autotoolswebscreen" type="variablejs" group="Image Filter" id="filterHue-rotate" label="Hue Rotate" hint="180deg" />
 16 | 	<meta name="autotoolswebscreen" type="variablejs" group="Image Filter" id="filterInvert" label="Invert" defaultValue="0%" />
 17 | 	<meta name="autotoolswebscreen" type="variablejs" group="Image Filter" id="filterDrop-shadow" label="Drop Shadow" hint="3px 3px 10px black" />
 18 | 	<meta name="autotoolswebscreen" type="variablejs" group="Text" id="text" description="Set to 'null' to remove on update" label="Text" />
 19 | 	<meta name="autotoolswebscreen" type="variablejs" group="Text" id="textSize" label="Size" defaultValue="16px" />
 20 | 	<meta name="autotoolswebscreen" type="variablejs" group="Text" id="textMaxWidth" label="Max Width"  />
 21 | 	<meta name="autotoolswebscreen" type="variablejs" group="Text" id="textPosition" label="Position" options="Bottom,Left,Right,Top" />
 22 | 	<meta name="autotoolswebscreen" type="variablejs" group="Text" id="textColor" label="Color" isColor="true" />
 23 | 	<meta name="autotoolswebscreen" type="variablejs" group="Text" id="textBorderColor" label="Character Border Color" description="Color of the border for each character in the text" isColor="true" />
 24 | 	<meta name="autotoolswebscreen" type="variablejs" group="Text" id="textBorderAroundColor" label="Border Color" description="Color of the border for the text box" isColor="true" />
 25 | 	<meta name="autotoolswebscreen" type="variablejs" group="Text" id="textBorderAroundThickness" label="Border Color Thickness" description="Thickness of the border in pixels" defaultValue="1" />
 26 | 	<meta name="autotoolswebscreen" type="variablejs" group="Text" id="textBorderAroundStyle" label="Border Style" defaultValue="solid" options="solid,dotted,dashed,double,groove,ridge,inset,outset" />
 27 | 	<meta name="autotoolswebscreen" type="variablejs" group="Text" id="textBackground" label="Background" isColor="true" defaultValue="linear-gradient(rgba(151, 190, 252, 0.7), rgba(182, 208, 249, 0.7))" />
 28 | 	<meta name="autotoolswebscreen" type="variablejs" group="Badge" id="badgeText" label="Text" description="Set to 'null' to remove on update" />
 29 | 	<meta name="autotoolswebscreen" type="variablejs" group="Badge" id="badgeTextColor" label="Text Color" isColor="true" defaultValue="white" />
 30 | 	<meta name="autotoolswebscreen" type="variablejs" group="Badge" id="badgeBackground" label="Background" isColor="true"  defaultValue="red" />
 31 | 	<meta name="autotoolswebscreen" type="variablejs" group="Badge" id="badgePosition" label="Position" options="Top Right,Bottom Right,Bottom Left,Top Left" defaultValue="Top Right" />
 32 | 	<meta name="autotoolswebscreen" type="variablejs" group="Commands" id="commandTap" label="Tap" />
 33 | 	<meta name="autotoolswebscreen" type="variablejs" group="Commands" id="commandLongTap" label="Long Tap" />
 34 | 	<meta name="autotoolswebscreen" type="variablejs" group="Commands" id="commandSwipeUp" label="Swipe Up" />
 35 | 	<meta name="autotoolswebscreen" type="variablejs" group="Commands" id="commandSwipeDown" label="Swipe Down" />
 36 | 	<meta name="autotoolswebscreen" type="variablejs" group="Commands" id="commandSwipeLeft" label="Swipe Left" />
 37 | 	<meta name="autotoolswebscreen" type="variablejs" group="Commands" id="commandSwipeRight" label="Swipe Right" />
 38 | 	<meta name="autotoolswebscreen" type="variablejs" group="Commands" id="commandPrefix" label="Prefix"  description="Optional prefix for all the commands above" />
 39 | 	<meta name="autotoolswebscreen" type="variablejs" subtype="boolean" group="Commands" id="reportPositionDownEnabled" label="Tap Down Position" description="If enabled will send an AutoApps command with the position of the bubble when you put your finger on it (x,y format)" defaultValue="false" />
 40 | 	<meta name="autotoolswebscreen" type="variablejs" group="Commands" id="commandPrefixPositionDown" label="Command Prefix Down" description="Prefix for the position command" hint="positiondown" defaultValue="positiondown" />
 41 | 	<meta name="autotoolswebscreen" type="variablejs" subtype="boolean" group="Commands" id="reportPositionEnabled" label="Tap Up Position" description="If enabled will send an AutoApps command with the position of the bubble after you release it (x,y format)" defaultValue="false" />
 42 | 	<meta name="autotoolswebscreen" type="variablejs" group="Commands" id="commandPrefixPosition" label="Command Prefix Up" description="Prefix for the position command" hint="positionup" defaultValue="positionup" />
 43 | 	<meta name="autotoolswebscreen" type="variablejs" group="Image" id="borderWidth" label="Border Width" defaultValue="0" />
 44 | 	<meta name="autotoolswebscreen" type="variablejs" group="Image" id="borderColor" label="Border Color" defaultValue="black" isColor="true" />
 45 | 	<meta name="autotoolswebscreen" type="variablejs" group="Image" id="borderStyle" label="Border Style" defaultValue="solid" options="solid,dotted,dashed,double,groove,ridge,inset,outset" />
 46 | 	
 47 | 	
 48 | 
 49 | 	
 50 | 	<!--<script src="autotools.js"></script>
 51 | 	<link rel="stylesheet" type="text/css" href="autotoolsstyle.css" />-->
 52 | 	<style type="text/css">
 53 | 		html, body{
 54 | 			margin: 0px;
 55 | 			height: 100vh;
 56 | 			overflow: hidden;
 57 | 		}
 58 | 		#wrapper{
 59 | 			//width: 100vw;
 60 | 			//height: 100vh;
 61 | 			box-sizing: border-box;
 62 | 			display: flex;
 63 | 			flex-direction: column;
 64 | 			align-items: center;
 65 |     		justify-content: center;
 66 | 		}
 67 | 		#textelement{
 68 | 			font-family: 'Quicksand', sans-serif;
 69 | 		    color: yellow;
 70 |     		white-space: nowrap;
 71 |     		border-radius: 10px;
 72 | 
 73 | 		    animation-duration: 0.21s;
 74 | 		    animation-timing-function: cubic-bezier(.17,.67,.73,1.44);
 75 | 		}
 76 | 		img{
 77 | 			object-fit: contain;
 78 | 			box-sizing: border-box;
 79 | 			flex: 1;
 80 | 		    min-height: 10px;
 81 | 		    min-width: 10px;
 82 | 		}
 83 | 		#imagewrapper{
 84 | 			position: relative;
 85 | 			display: flex;
 86 | 		}
 87 | 		#badge{
 88 | 		    position: absolute;
 89 | 		    font-weight: bold;
 90 | 		    border-radius: 40%;
 91 | 		    color: white;
 92 | 		    padding: 4px;
 93 | 		    border: 1px solid black;
 94 | 
 95 | 		    animation-duration: 0.21s;
 96 | 		    animation-timing-function: cubic-bezier(.17,.67,.73,1.44);
 97 | 		}
 98 | 		@keyframes popin {
 99 | 			from {
100 |     			transform: scale(0);
101 | 			}
102 | 			to {
103 | 				transform: scale(1);
104 | 			}
105 | 		}
106 | 	</style>
107 | </head>
108 | <body>
109 | 	<div id="wrapper">
110 | 		<div id="imagewrapper">
111 | 			<img id="bubble"></img>
112 | 			<div id="badge" class="hidden">1002</div>
113 | 		</div>
114 | 		<div id="textelement" class="hidden"></div>
115 | 	</div>
116 | </body>
117 | 	<script type="text/javascript">
118 | 
119 | 		//var imageSource = "http://www.wallpapersworldonline.com/wp-content/uploads/2014/01/nice-wallpapers-desktop-84.jpg";
120 | 		/*var commandTap = "taptap";
121 | 		var commandLongTap = "lloooonnngg";
122 | 		var commandSwipeUp = "upman";
123 | 		var imageRound = true;
124 | 		//var borderWidth = "40";
125 | 		//var borderColor = "red";
126 | 		//window["filterDrop-shadow"] = "3px 3px 1px black";
127 | 		//window["filterHue-rotate"] = "180deg";
128 | 		//var filterInvert = "100%";
129 | 		//var filterOpacity = "50%";
130 | 		//var filterSaturate = "250%";
131 | 		var filterSepia = "100%";
132 | 		//var borderStyle = "outset";*/
133 | 		//var text = "Hey this is a super duper long text oh yes it is";
134 | 		//var textBorderAroundColor = "black";
135 | 		//var textBorderAroundThickness = "3";
136 | 		//var textColor = "white";
137 | 		//var badgeText = "5";
138 | 		//var textMaxWidth = "250";
139 | 		//var badgePosition = "Bottom Left";
140 | 		//var textPosition = "Bottom";
141 | 		if(!AutoTools.getInput){
142 | 			AutoTools.getInput = ()=>{return{webscreenWindow:{dialogHeight:"100",dialogWidth:"100"}}};
143 | 		}
144 | 		AutoTools.setDefaultValues({
145 | 			"imageSource":"https://joaoapps.com/AutoApps/com.joaomgcd.autotools.png",
146 | 			"commandPrefix":"",
147 | 			"commandTap":"",
148 | 			"commandLongTap":"",
149 | 			"imageRound": true,
150 | 			"borderWidth": "0",
151 | 			"borderColor": "black",
152 | 			"borderStyle": "solid",
153 | 			"textBorderAroundStyle": "solid",
154 | 			"filterGrayscale": "0%",
155 | 			"filterBlur": "0",
156 | 			"filterInvert": "0%",
157 | 			"filterOpacity": "100%",
158 | 			"filterSaturate": "100%",
159 | 			"filterSepia": "0%",
160 | 			"textColor": "black",
161 | 			"textSize": "16px",
162 | 			"textPosition": "Left",
163 | 			"textBackground": "linear-gradient(rgba(151, 190, 252, 0.7), rgba(182, 208, 249, 0.7))",
164 | 			"badgeTextColor":"white",
165 | 			"badgeBackground":"red",
166 | 			"badgePosition":"Top Right",
167 | 			"text":"null",
168 | 			"badgeText":"null",
169 | 			"textBorderAroundThickness":"1",			
170 | 			"reportPositionDownEnabled":false,				
171 | 			"reportPositionEnabled":false,			
172 | 			"commandPrefixPositionDown":"positiondown",
173 | 			"commandPrefixPosition":"positionup",
174 | 		});
175 | 		var wrapperElement = document.querySelector("#wrapper");
176 | 		var positions = {
177 | 			"Top": "column-reverse",
178 | 			"Bottom": "column",
179 | 			"Left": "row-reverse",
180 | 			"Right": "row",
181 | 		}
182 | 		var positionsBadge = {
183 | 			"Top Right": {top:0,right:0},
184 | 			"Bottom Right": {bottom:0,Right:0},
185 | 			"Top Left": {top:0,left:0},
186 | 			"Bottom Left": {bottom:0,left:0},
187 | 		}
188 | 		var setTextAndAnimate = (element,text) => {
189 | 			if(text == ""){
190 | 				return;
191 | 			}		
192 | 			var hideIfEmpty = false;
193 | 			if(text == "null"){
194 | 				text = undefined;
195 | 				hideIfEmpty = true;
196 | 			}
197 | 			if(text !== undefined){
198 | 				AutoTools.show(element);
199 | 				element.style["animation-name"] = "d";
200 | 				element.innerText = text;
201 | 				setTimeout(()=>element.style["animation-name"] = "popin");
202 | 			}else{
203 | 				if(hideIfEmpty){
204 | 					AutoTools.hide(element);	
205 | 				}
206 | 			}
207 | 		}
208 | 		var autoToolsUpdateValues = function(values){
209 | 			for(var prop in values){
210 | 				var value = values[prop];
211 | 				window[prop] = value;
212 | 				//console.debug(prop +": "+window[prop]);
213 | 			}
214 | 			setFilters();
215 | 			if(values.imageSource){
216 | 				bubbleElement.src = values.imageSource;
217 | 			}
218 | 			//setTextAndAnimate(textElement,values.text);
219 | 			adjustTextPosition(values.text);
220 | 			adjustBadgePosition(values.badgeText);
221 | 			//setTextAndAnimate(badgeElement,values.badgeText ,values.badgeText == "null");
222 | 			adjustTextWidth();
223 | 			adjustWindowSize();
224 | 		}
225 | 		var badgeElement = document.querySelector("#badge");
226 | 	
227 | 		badgeElement.style["color"] = badgeTextColor;
228 | 		badgeElement.style["background"] = badgeBackground;
229 | 		var adjustBadgePosition = (badgeText)=>{
230 | 			var position = positionsBadge[badgePosition];
231 | 			badgeElement.style["top"] = "unset";
232 | 			badgeElement.style["bottom"] = "unset";
233 | 			badgeElement.style["left"] = "unset";
234 | 			badgeElement.style["right"] = "unset";
235 | 			for(var s in position){
236 | 				badgeElement.style[s] = position[s];
237 | 			}
238 | 			setTextAndAnimate(badgeElement,badgeText,badgeText == "null")
239 | 		}
240 | 		adjustBadgePosition(badgeText);
241 | 		var textElement = document.querySelector("#textelement");
242 | 		if(AutoTools.isSet("textBorderColor")){
243 | 			textElement.style["-webkit-text-stroke-color"] = textBorderColor;
244 | 			textElement.style["-webkit-text-stroke-width"] = "1px";	
245 | 		}
246 | 
247 | 		if(!AutoTools.isSet("textBorderAroundThickness")){
248 | 			textBorderAroundThickness = "1";
249 | 		}
250 | 		var borderTextNumber = new Number(textBorderAroundThickness);		
251 | 		if(!isNaN(borderTextNumber)){
252 | 			textBorderAroundThickness+="px";
253 | 		}
254 | 		if(AutoTools.isSet("textBorderAroundColor")){
255 | 			textElement.style["border"] = `${textBorderAroundThickness} ${textBorderAroundStyle} ${textBorderAroundColor}`;
256 | 		}
257 | 		textElement.style["color"] = textColor;
258 | 		var marginVerticalText = 0;
259 | 		var marginHorizontalText = 0;
260 | 		var marginHorizontalText = 0;
261 | 		var adjustTextPosition = (text)=>{
262 | 			wrapperElement.style["flex-direction"] = positions[textPosition];
263 | 			var textVertical = textPosition == "Top" || textPosition == "Bottom";
264 | 			var paddingText = 8;
265 | 			textElement.style["padding"] = paddingText + "px";	
266 | 			if(textVertical){
267 | 				marginVerticalText = 8;
268 | 				var type = textPosition == "Top" ? "bottom" : "top";
269 | 				textElement.style["margin-"+type] = marginVerticalText + "px";
270 | 			}else{
271 | 				marginHorizontalText = 8;
272 | 				var type = textPosition == "Left" ? "right" : "left";
273 | 				textElement.style["margin-"+type] = marginHorizontalText + "px";	
274 | 			}
275 | 			textElement.style["font-size"] = textSize;
276 | 			textElement.style["background"] = textBackground;
277 | 			setTextAndAnimate(textElement,text);
278 | 		};
279 | 		adjustTextPosition(text);
280 | 
281 | 		var adjustTextWidth = ()=>{
282 | 			if(AutoTools.isSet("textMaxWidth")){
283 | 				textElement.style["max-width"] = "initial";
284 | 				textElement.style["min-width"] = "initial";
285 | 				textElement.style["white-space"] = "nowrap";	
286 | 				if(!isNaN(new Number(textMaxWidth))){
287 | 					textMaxWidth = Math.min(textMaxWidth,textElement.clientWidth);
288 | 					textMaxWidth += "px";
289 | 				}
290 | 				textElement.style["max-width"] = textMaxWidth;
291 | 				textElement.style["min-width"] = textMaxWidth;
292 | 				textElement.style["white-space"] = "normal";
293 | 			}
294 | 		}
295 | 		adjustTextWidth();
296 | 		
297 | 		var bubbleElement = document.querySelector("#bubble");
298 | 		bubbleElement.src = imageSource;
299 | 		var taskerInput = AutoTools.getInput();
300 | 
301 | 		var currentHeight = new Number(taskerInput.webscreenWindow.dialogHeight);
302 | 		var currentWidth = new Number(taskerInput.webscreenWindow.dialogWidth);
303 | 		var canAdjustSize = true;
304 | 		if(isNaN(currentHeight) || isNaN(currentWidth)){
305 | 			canAdjustSize = false;
306 | 		}
307 | 		if(canAdjustSize){
308 | 			bubbleElement.style["width"] = currentWidth + "px";
309 | 			bubbleElement.style["height"] = currentHeight + "px";
310 | 			bubbleElement.style["min-width"] = currentWidth + "px";
311 | 			bubbleElement.style["min-height"] = currentHeight + "px";
312 | 		}
313 | 		var adjustWindowSize = ()=>{
314 | 			if(text == null){
315 | 				return;
316 | 			}
317 | 			if(!canAdjustSize){
318 | 				console.log("invalid sizes");
319 | 				return;
320 | 			}
321 | 			var textWidth = textElement.clientWidth;
322 | 			var textHeight = textElement.clientHeight;
323 | 			var realHeight = null;
324 | 			var realWidth = null;
325 | 			var addBorder = !isNaN(borderTextNumber);
326 | 			var doubleBorder = 0;
327 | 			if(addBorder){
328 | 				doubleBorder = borderTextNumber*2;
329 | 			}
330 | 			if(textPosition == "Top" || textPosition == "Bottom"){
331 | 				
332 | 					/*var bubbleHeight = bubbleElement.clientHeight;
333 | 					var heightRatio =  currentHeight / bubbleHeight;
334 | 					var realHeight = Math.floor(currentHeight * heightRatio);*/	
335 | 					realHeight = currentHeight + textHeight + marginVerticalText;
336 | 					realWidth = Math.max(currentWidth,textWidth);				
337 | 			}else{
338 | 					/*var bubbleWidth = bubbleElement.clientWidth;
339 | 					AutoTools.showToast(currentWidth+","+bubbleWidth);
340 | 					var widthRatio =  currentWidth / bubbleWidth;
341 | 					var realWidth = Math.floor(currentWidth * widthRatio);*/
342 | 					realWidth = currentWidth + textWidth + marginHorizontalText;
343 | 					realHeight = Math.max(currentHeight,textHeight);				
344 | 			}
345 | 			if(realHeight && realWidth){
346 | 				if(addBorder){
347 | 					realHeight += doubleBorder;
348 | 					realWidth += doubleBorder;
349 | 				}
350 | 				AutoTools.setSize(realWidth,realHeight);
351 | 			}
352 | 		};
353 | 		//adjustWindowSize();
354 | 		setTimeout(adjustWindowSize);
355 | 		/*setTimeout(()=>AutoTools.showToast(bubbleElement.clientWidth+","+bubbleElement.clientHeight),1000);
356 | 		setTimeout(()=>AutoTools.showToast(bubbleElement.offsetWidth+","+bubbleElement.offsetHeight),1000);
357 | 		setTimeout(()=>AutoTools.showToast(bubbleElement.scrollWidth+","+bubbleElement.scrollHeight),1000);*/
358 | 
359 | 		if(imageRound){
360 | 			bubbleElement.style["border-radius"] = "100%";
361 | 		}
362 | 		if(!isNaN(new Number(borderWidth))){
363 | 			borderWidth += "px";
364 | 		}
365 | 		bubbleElement.style["border"] = `${borderWidth} ${borderStyle} ${borderColor}`;
366 | 		var	getFilter = function(...vars){
367 | 			var filter = "";
368 | 			for(var v of vars){
369 | 				if(!AutoTools.isSet(v)){
370 | 					continue;
371 | 				}
372 | 				var shortName = v.replace("filter","").toLowerCase();
373 | 				var value = window[v];
374 | 				if(!isNaN(new Number(value))){
375 | 					value += "px";
376 | 				}
377 | 				filter+=`${shortName}(${value}) `;
378 | 			}
379 | 			return filter;
380 | 		}
381 | 		if(AutoTools.isSet("filterDrop-shadow")){
382 | 			var splitShadow = window["filterDrop-shadow"].split(" ");
383 | 			if(splitShadow.length == 4){
384 | 				var getValue = original => {
385 | 					/*var value = new Number(original.replace("px",""));
386 | 					if(isNaN(value)){
387 | 						return null;
388 | 					}
389 | 					return value;*/
390 | 					return original;
391 | 				}
392 | 				var x = getValue(splitShadow[0]);
393 | 				var y = getValue(splitShadow[1]);
394 | 				var blur = getValue(splitShadow[2]);
395 | 				if(x && y && blur){
396 | 					bubbleElement.style["width"] = `calc(100vw - ${x} - ${blur})`
397 | 					bubbleElement.style["height"] = `calc(100vh - ${y} - ${blur})`
398 | 				}
399 | 			}
400 | 		}
401 | 		var setFilters = () => {
402 | 			var filter = getFilter("filterGrayscale","filterBlur","filterDrop-shadow","filterHue-rotate","filterInvert","filterOpacity","filterSaturate","filterSepia");
403 | 			//console.debug(filter);
404 | 			bubbleElement.style["filter"] = filter;
405 | 		}		
406 | 		setFilters();
407 | 		var reportCurrentPosition = (isDown) =>{
408 | 			if(isDown && !reportPositionDownEnabled){
409 | 				return;
410 | 			}
411 | 			if(!isDown && !reportPositionEnabled){
412 | 				return;
413 | 			}
414 | 			if(!AutoTools.getOverlayPosition){
415 | 				return;
416 | 			}
417 | 	        var currentPosition = AutoTools.getOverlayPosition();
418 | 	        if(!currentPosition){
419 | 	        	return;
420 | 	        }
421 | 	        var prefix = isDown ? commandPrefixPositionDown : commandPrefixPosition;
422 | 	        AutoTools.sendCommand(`${currentPosition.x},${currentPosition.y}`,prefix);
423 | 		}
424 | 		function swipedetect(el, callback){
425 | 		  
426 | 		    var touchsurface = el,
427 | 		    swipedir,
428 | 		    startX,
429 | 		    startY,
430 | 		    distX,
431 | 		    distY,
432 | 		    threshold = 5, //required min distance traveled to be considered swipe
433 | 		    longThreshold = 5, // maximum distance allowed at the same time in perpendicular direction
434 | 		    restraint = 100, // maximum distance allowed at the same time in perpendicular direction
435 | 		    allowedTime = 300, // maximum time allowed to travel that distance
436 | 		    allowedTimeClick = 150, // maximum time allowed to travel that distance
437 | 		    longTapTime = 500,
438 | 		    elapsedTime,
439 | 		    startTime,
440 | 		    handleswipe = callback || function(swipedir){}
441 | 		  	var timeout = null;
442 | 
443 | 		    touchsurface.addEventListener('touchstart', function(e){
444 | 		        var touchobj = e.changedTouches[0]
445 | 		        swipedir = 'none'
446 | 		        dist = 0
447 | 		        startX = touchobj.pageX
448 | 		        startY = touchobj.pageY
449 | 		        distX = 0;
450 | 		        distY = 0;
451 | 		        startTime = new Date().getTime() // record time when finger first makes contact with surface
452 | 		        e.preventDefault();
453 | 		        timeout = setTimeout(()=>{
454 | 		        	if(Math.abs(distX) <= longThreshold && Math.abs(distY) <= longThreshold){
455 | 		        		handleswipe("long");	
456 | 		        	}
457 | 		    	},longTapTime);
458 | 		        reportCurrentPosition(true);
459 | 		    }, false)
460 | 		  
461 | 		    touchsurface.addEventListener('touchmove', function(e){
462 | 		        var touchobj = e.changedTouches[0];
463 | 		    	distX = Math.max(Math.abs(touchobj.pageX) - startX,distX);
464 | 		        distY = Math.max(Math.abs(touchobj.pageY) - startY,distY);
465 | 		        e.preventDefault() // prevent scrolling when inside DIV
466 | 		    }, false)
467 | 		  
468 | 		    touchsurface.addEventListener('touchend', function(e){
469 | 		    	clearTimeout(timeout);
470 | 		        var touchobj = e.changedTouches[0]
471 | 		        distX = touchobj.pageX - startX // get horizontal dist traveled by finger while in contact with surface
472 | 		        distY = touchobj.pageY - startY // get vertical dist traveled by finger while in contact with surface
473 | 		        elapsedTime = new Date().getTime() - startTime // get time elapsed
474 | 		        console.log(elapsedTime);
475 | 		        if (elapsedTime <= allowedTime){ // first condition for awipe met
476 | 		            if (Math.abs(distX) >= threshold && Math.abs(distY) <= restraint){ // 2nd condition for horizontal swipe met
477 | 		                swipedir = (distX < 0)? 'Left' : 'Right' // if dist traveled is negative, it indicates left swipe
478 | 		            }
479 | 		            else if (Math.abs(distY) >= threshold && Math.abs(distX) <= restraint){ // 2nd condition for vertical swipe met
480 | 		                swipedir = (distY < 0)? 'Up' : 'Down' // if dist traveled is negative, it indicates up swipe
481 | 		            }
482 | 		            if(swipedir == "none"){
483 | 		            	if(elapsedTime <= allowedTimeClick){
484 | 		        			handleswipe(swipedir);
485 | 		            	}
486 | 		            }else{
487 | 		        		handleswipe(swipedir);	
488 | 		            }
489 | 		        }	
490 | 		        reportCurrentPosition(false);
491 | 		        e.preventDefault()
492 | 		    }, false)
493 | 		}
494 | 		swipedetect(bubbleElement,direction=>{
495 | 			console.log(direction);
496 | 			var command = null;
497 | 			if(direction == "none"){
498 | 				command = commandTap;
499 | 			}if(direction == "long"){
500 | 				command = commandLongTap;
501 | 			}else{
502 | 				var name = "commandSwipe"+direction;
503 | 				if(AutoTools.isSet(name)){
504 | 					command = window[name];
505 | 				}
506 | 			}
507 | 			AutoTools.sendCommand(command,commandPrefix,true);
508 | 		});
509 | 	</script>
510 | </html>


--------------------------------------------------------------------------------
/demos/functions/functiondemo.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Function Demo</title>
 5 | 
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 7 |     <meta name="autotoolswebscreen" type="variablejs" id="title" label="Titles" description="A list of comma seperated titles" defaultValue="Title 1,Title 2,Title 3"/>
 8 |     <meta name="autotoolswebscreen" type="variablejs" id="text" label="Texts" description="A list of comma seperated texts" defaultValue="text 1,text 2,text 3"/>
 9 |     <meta name="autotoolswebscreen" type="variablejs" id="checked" label="Checked" description="A list of comma seperated true or false values" defaultValue="true,false,true"/>
10 |     <script type="text/javascript">
11 |         //This will set the default values for the various variables. These values will be set if they are not set from Tasker, so you can be sure they always have a value even if the user deletes the values in Tasker.
12 |         //The "title" variable will be "Title 1,Title 2,Title 3" by default
13 |         //The "text" variable will be "text 1,text 2,text 3" by default
14 |         AutoTools.setDefaultValues({
15 |             "title":"Title 1,Title 2,Title 3",
16 |             "text":"text 1,text 2,text 3",
17 |             "checked":"true,false,true",
18 |         });
19 |     </script>
20 | </head>
21 | <body>
22 |     <div id="items"></div>
23 |     <div class="item">
24 |         <h2 class="title">Sample Title</h2>
25 |         <input type="checkbox" class="checked"></input>
26 |         <div class="text">Sample Text</div>
27 |     </div>
28 |     <script type="text/javascript">
29 |         //This has to be called AFTER the element with the "item" class is declared above.
30 |         //["title", "text"] is an array with the AutoTools Web Screen variables that you want to convert to a list
31 |         //"items" is the ID of the element in which the list should be created
32 |         //"item" is the class of the element that will be used as a template to create each element on the list. The original element you declared will be hidden automatically.
33 |         /*Using the default values for the Web Screen Variables above, the following elements would be created inside the "items" element when this is ran in an AutoTools Web Screen:
34 | 
35 |             <div class="item">
36 |                 <h2 class="title">Title 1</h2>
37 |                 <div class="text">text 1</div>
38 |             </div>            
39 |             <div class="item">
40 |                 <h2 class="title">Title 2</h2>
41 |                 <div class="text">text 2</div>
42 |             </div>            
43 |             <div class="item">
44 |                 <h2 class="title">Title 3</h2>
45 |                 <div class="text">text 3</div>
46 |             </div>
47 |         */
48 | 
49 |         AutoTools.variablesToElements(["title", "text", "checked"], "items","item",{
50 |             "onclick":item=>{
51 |                 if(!item){
52 |                     return;
53 |                 }
54 |                 console.log(item);
55 |                 AutoTools.sendCommand(item.text);
56 |                 AutoTools.say(item.text);
57 |                 AutoTools.hapticFeedback();
58 |             },
59 |             "events":[{
60 |                 "name":"change",
61 |                 "query":".checked",
62 |                 "handler":element=>console.log(element.checked)
63 |             }]
64 |             
65 |         });
66 |     </script>
67 | </body>
68 | </html>


--------------------------------------------------------------------------------
/demos/input/page.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | 	<style type="text/css">		
 5 | 		body{
 6 | 			display: flex;
 7 | 			justify-content: center;
 8 | 			align-items: center;
 9 | 			height: 100vh;
10 | 		}
11 | 	</style>
12 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
13 | </head>
14 | <body>
15 | 	<input type="text" id="input" />
16 | 	<input type="button" value="Send Command" onclick="AutoTools.sendCommand(inputElement.value);" />
17 | 	<script type="text/javascript">
18 | 		var inputElement = document.querySelector("#input");
19 | 	</script>
20 | </body>
21 | </html>


--------------------------------------------------------------------------------
/demos/loading/bounce.css:
--------------------------------------------------------------------------------
  1 | 
  2 | .bounce {
  3 |   position: relative;
  4 |   left: -105px;
  5 |   height: 80px;
  6 | }
  7 | 
  8 | svg {
  9 |   position: absolute;
 10 | }
 11 | svg ellipse {
 12 |   -webkit-transform-origin: center;
 13 |           transform-origin: center;
 14 | }
 15 | svg:nth-of-type(1) ellipse {
 16 |   stroke: #F1725D;
 17 |   cx: 25px;
 18 |   stroke-width: 3px;
 19 |   -webkit-animation: jump 600ms infinite ease-in-out;
 20 |           animation: jump 600ms infinite ease-in-out;
 21 |   opacity: .7;
 22 |   -webkit-animation-delay: 0ms;
 23 |           animation-delay: 0ms;
 24 | }
 25 | svg:nth-of-type(2) ellipse {
 26 |   stroke: #38BDAB;
 27 |   cx: 65px;
 28 |   stroke-width: 3px;
 29 |   -webkit-animation: jump 600ms infinite ease-in-out;
 30 |           animation: jump 600ms infinite ease-in-out;
 31 |   opacity: .7;
 32 |   -webkit-animation-delay: 75ms;
 33 |           animation-delay: 75ms;
 34 | }
 35 | svg:nth-of-type(3) ellipse {
 36 |   stroke: #9D30A5;
 37 |   cx: 105px;
 38 |   stroke-width: 3px;
 39 |   -webkit-animation: jump 600ms infinite ease-in-out;
 40 |           animation: jump 600ms infinite ease-in-out;
 41 |   opacity: .7;
 42 |   -webkit-animation-delay: 150ms;
 43 |           animation-delay: 150ms;
 44 | }
 45 | svg:nth-of-type(4) ellipse {
 46 |   stroke: #B779E2;
 47 |   cx: 145px;
 48 |   stroke-width: 3px;
 49 |   -webkit-animation: jump 600ms infinite ease-in-out;
 50 |           animation: jump 600ms infinite ease-in-out;
 51 |   opacity: .7;
 52 |   -webkit-animation-delay: 225ms;
 53 |           animation-delay: 225ms;
 54 | }
 55 | svg:nth-of-type(5) ellipse {
 56 |   stroke: #ffffff;
 57 |   cx: 185px;
 58 |   stroke-width: 3px;
 59 |   -webkit-animation: jump 600ms infinite ease-in-out;
 60 |           animation: jump 600ms infinite ease-in-out;
 61 |   opacity: .7;
 62 |   -webkit-animation-delay: 300ms;
 63 |           animation-delay: 300ms;
 64 | }
 65 | svg:nth-of-type(6) ellipse {
 66 |   fill: #333333;
 67 |   opacity: .05;
 68 |   rx: 0;
 69 |   ry: 0;
 70 |   cx: 25px;
 71 |   cy: 48px;
 72 |   -webkit-animation: shadow 600ms infinite ease-in-out;
 73 |           animation: shadow 600ms infinite ease-in-out;
 74 |   -webkit-animation-delay: 0ms;
 75 |           animation-delay: 0ms;
 76 | }
 77 | svg:nth-of-type(7) ellipse {
 78 |   fill: #333333;
 79 |   opacity: .05;
 80 |   rx: 0;
 81 |   ry: 0;
 82 |   cx: 65px;
 83 |   cy: 48px;
 84 |   -webkit-animation: shadow 600ms infinite ease-in-out;
 85 |           animation: shadow 600ms infinite ease-in-out;
 86 |   -webkit-animation-delay: 75ms;
 87 |           animation-delay: 75ms;
 88 | }
 89 | svg:nth-of-type(8) ellipse {
 90 |   fill: #333333;
 91 |   opacity: .05;
 92 |   rx: 0;
 93 |   ry: 0;
 94 |   cx: 105px;
 95 |   cy: 48px;
 96 |   -webkit-animation: shadow 600ms infinite ease-in-out;
 97 |           animation: shadow 600ms infinite ease-in-out;
 98 |   -webkit-animation-delay: 150ms;
 99 |           animation-delay: 150ms;
100 | }
101 | svg:nth-of-type(9) ellipse {
102 |   fill: #333333;
103 |   opacity: .05;
104 |   rx: 0;
105 |   ry: 0;
106 |   cx: 145px;
107 |   cy: 48px;
108 |   -webkit-animation: shadow 600ms infinite ease-in-out;
109 |           animation: shadow 600ms infinite ease-in-out;
110 |   -webkit-animation-delay: 225ms;
111 |           animation-delay: 225ms;
112 | }
113 | svg:nth-of-type(10) ellipse {
114 |   fill: #333333;
115 |   opacity: .05;
116 |   rx: 0;
117 |   ry: 0;
118 |   cx: 185px;
119 |   cy: 48px;
120 |   -webkit-animation: shadow 600ms infinite ease-in-out;
121 |           animation: shadow 600ms infinite ease-in-out;
122 |   -webkit-animation-delay: 300ms;
123 |           animation-delay: 300ms;
124 | }
125 | 
126 | @-webkit-keyframes jump {
127 |   40% {
128 |     -webkit-transform: translateY(20px) scale(1.3);
129 |             transform: translateY(20px) scale(1.3);
130 |     opacity: .9;
131 |   }
132 |   40% {
133 |     rx: 10px;
134 |     ry: 10px;
135 |     stroke-width: 3px;
136 |   }
137 |   45% {
138 |     rx: 15px;
139 |     ry: 7px;
140 |     stroke-width: 4px;
141 |   }
142 |   55% {
143 |     rx: 10px;
144 |     ry: 10px;
145 |   }
146 | }
147 | 
148 | @keyframes jump {
149 |   40% {
150 |     -webkit-transform: translateY(20px) scale(1.3);
151 |             transform: translateY(20px) scale(1.3);
152 |     opacity: .9;
153 |   }
154 |   40% {
155 |     rx: 10px;
156 |     ry: 10px;
157 |     stroke-width: 3px;
158 |   }
159 |   45% {
160 |     rx: 15px;
161 |     ry: 7px;
162 |     stroke-width: 4px;
163 |   }
164 |   55% {
165 |     rx: 10px;
166 |     ry: 10px;
167 |   }
168 | }
169 | @-webkit-keyframes shadow {
170 |   45% {
171 |     opacity: .15;
172 |     rx: 10px;
173 |     ry: 3px;
174 |     -webkit-transform: translateY(5px) scale(1.3);
175 |             transform: translateY(5px) scale(1.3);
176 |   }
177 | }
178 | @keyframes shadow {
179 |   45% {
180 |     opacity: .15;
181 |     rx: 10px;
182 |     ry: 3px;
183 |     -webkit-transform: translateY(5px) scale(1.3);
184 |             transform: translateY(5px) scale(1.3);
185 |   }
186 | }


--------------------------------------------------------------------------------
/demos/loading/bounce.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <div id="bounce" class='bounce'>
 3 |   <svg height='80' width='210'>
 4 |     <ellipse cx='25' cy='20' fill='none' rx='10' ry='10'></ellipse>
 5 |   </svg>
 6 |   <svg height='80' width='210'>
 7 |     <ellipse cx='25' cy='20' fill='none' rx='10' ry='10'></ellipse>
 8 |   </svg>
 9 |   <svg height='80' width='210'>
10 |     <ellipse cx='25' cy='20' fill='none' rx='10' ry='10'></ellipse>
11 |   </svg>
12 |   <svg height='80' width='210'>
13 |     <ellipse cx='25' cy='20' fill='none' rx='10' ry='10'></ellipse>
14 |   </svg>
15 |   <svg height='80' width='210'>
16 |     <ellipse cx='25' cy='20' fill='none' rx='10' ry='10'></ellipse>
17 |   </svg>
18 |   <svg height='80' width='210'>
19 |     <ellipse cx='25' cy='20' fill='none' rx='10' ry='10'></ellipse>
20 |   </svg>
21 |   <svg height='80' width='210'>
22 |     <ellipse cx='25' cy='20' fill='none' rx='10' ry='10'></ellipse>
23 |   </svg>
24 |   <svg height='80' width='210'>
25 |     <ellipse cx='25' cy='20' fill='none' rx='10' ry='10'></ellipse>
26 |   </svg>
27 |   <svg height='80' width='210'>
28 |     <ellipse cx='25' cy='20' fill='none' rx='10' ry='10'></ellipse>
29 |   </svg>
30 |   <svg height='80' width='210'>
31 |     <ellipse cx='25' cy='20' fill='none' rx='10' ry='10'></ellipse>
32 |   </svg>
33 | </div>


--------------------------------------------------------------------------------
/demos/loading/chasingdots.css:
--------------------------------------------------------------------------------
 1 | .sk-chasing-dots {
 2 |   margin: 40px auto;
 3 |   width: 60px;
 4 |   height: 60px;
 5 |   position: relative;
 6 |   text-align: center;
 7 |   -webkit-animation: sk-chasingDotsRotate 2s infinite linear;
 8 |           animation: sk-chasingDotsRotate 2s infinite linear; }
 9 |   .sk-chasing-dots .sk-child {
10 |     width: 60%;
11 |     height: 60%;
12 |     display: inline-block;
13 |     position: absolute;
14 |     top: 0;
15 |     background-color: #FFFFFF;
16 |     border-radius: 100%;
17 |     -webkit-animation: sk-chasingDotsBounce 2s infinite ease-in-out;
18 |             animation: sk-chasingDotsBounce 2s infinite ease-in-out; }
19 |   .sk-chasing-dots .sk-dot2 {
20 |     top: auto;
21 |     bottom: 0;
22 |     -webkit-animation-delay: -1s;
23 |             animation-delay: -1s; }
24 | 
25 | @-webkit-keyframes sk-chasingDotsRotate {
26 |   100% {
27 |     -webkit-transform: rotate(360deg);
28 |             transform: rotate(360deg); } }
29 | 
30 | @keyframes sk-chasingDotsRotate {
31 |   100% {
32 |     -webkit-transform: rotate(360deg);
33 |             transform: rotate(360deg); } }
34 | 
35 | @-webkit-keyframes sk-chasingDotsBounce {
36 |   0%, 100% {
37 |     -webkit-transform: scale(0);
38 |             transform: scale(0); }
39 |   50% {
40 |     -webkit-transform: scale(1);
41 |             transform: scale(1); } }
42 | 
43 | @keyframes sk-chasingDotsBounce {
44 |   0%, 100% {
45 |     -webkit-transform: scale(0);
46 |             transform: scale(0); }
47 |   50% {
48 |     -webkit-transform: scale(1);
49 |             transform: scale(1); } }
50 | 


--------------------------------------------------------------------------------
/demos/loading/chasingdots.html:
--------------------------------------------------------------------------------
1 | <div id="chasingdots">
2 |     <div class="sk-chasing-dots">
3 |         <div class="sk-child sk-dot1"></div>
4 |         <div class="sk-child sk-dot2"></div>
5 |     </div>
6 | </div>
7 | 


--------------------------------------------------------------------------------
/demos/loading/circle.css:
--------------------------------------------------------------------------------
  1 | .sk-circle {
  2 |   margin: 40px auto;
  3 |   width: 60px;
  4 |   height: 60px;
  5 |   position: relative; }
  6 |   .sk-circle .sk-child {
  7 |     width: 100%;
  8 |     height: 100%;
  9 |     position: absolute;
 10 |     left: 0;
 11 |     top: 0; }
 12 |   .sk-circle .sk-child:before {
 13 |     content: '';
 14 |     display: block;
 15 |     margin: 0 auto;
 16 |     width: 15%;
 17 |     height: 15%;
 18 |     background-color: #FFFFFF;
 19 |     border-radius: 100%;
 20 |     -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
 21 |             animation: sk-circleBounceDelay 1.2s infinite ease-in-out both; }
 22 |   .sk-circle .sk-circle2 {
 23 |     -webkit-transform: rotate(30deg);
 24 |         -ms-transform: rotate(30deg);
 25 |             transform: rotate(30deg); }
 26 |   .sk-circle .sk-circle3 {
 27 |     -webkit-transform: rotate(60deg);
 28 |         -ms-transform: rotate(60deg);
 29 |             transform: rotate(60deg); }
 30 |   .sk-circle .sk-circle4 {
 31 |     -webkit-transform: rotate(90deg);
 32 |         -ms-transform: rotate(90deg);
 33 |             transform: rotate(90deg); }
 34 |   .sk-circle .sk-circle5 {
 35 |     -webkit-transform: rotate(120deg);
 36 |         -ms-transform: rotate(120deg);
 37 |             transform: rotate(120deg); }
 38 |   .sk-circle .sk-circle6 {
 39 |     -webkit-transform: rotate(150deg);
 40 |         -ms-transform: rotate(150deg);
 41 |             transform: rotate(150deg); }
 42 |   .sk-circle .sk-circle7 {
 43 |     -webkit-transform: rotate(180deg);
 44 |         -ms-transform: rotate(180deg);
 45 |             transform: rotate(180deg); }
 46 |   .sk-circle .sk-circle8 {
 47 |     -webkit-transform: rotate(210deg);
 48 |         -ms-transform: rotate(210deg);
 49 |             transform: rotate(210deg); }
 50 |   .sk-circle .sk-circle9 {
 51 |     -webkit-transform: rotate(240deg);
 52 |         -ms-transform: rotate(240deg);
 53 |             transform: rotate(240deg); }
 54 |   .sk-circle .sk-circle10 {
 55 |     -webkit-transform: rotate(270deg);
 56 |         -ms-transform: rotate(270deg);
 57 |             transform: rotate(270deg); }
 58 |   .sk-circle .sk-circle11 {
 59 |     -webkit-transform: rotate(300deg);
 60 |         -ms-transform: rotate(300deg);
 61 |             transform: rotate(300deg); }
 62 |   .sk-circle .sk-circle12 {
 63 |     -webkit-transform: rotate(330deg);
 64 |         -ms-transform: rotate(330deg);
 65 |             transform: rotate(330deg); }
 66 |   .sk-circle .sk-circle2:before {
 67 |     -webkit-animation-delay: -1.1s;
 68 |             animation-delay: -1.1s; }
 69 |   .sk-circle .sk-circle3:before {
 70 |     -webkit-animation-delay: -1s;
 71 |             animation-delay: -1s; }
 72 |   .sk-circle .sk-circle4:before {
 73 |     -webkit-animation-delay: -0.9s;
 74 |             animation-delay: -0.9s; }
 75 |   .sk-circle .sk-circle5:before {
 76 |     -webkit-animation-delay: -0.8s;
 77 |             animation-delay: -0.8s; }
 78 |   .sk-circle .sk-circle6:before {
 79 |     -webkit-animation-delay: -0.7s;
 80 |             animation-delay: -0.7s; }
 81 |   .sk-circle .sk-circle7:before {
 82 |     -webkit-animation-delay: -0.6s;
 83 |             animation-delay: -0.6s; }
 84 |   .sk-circle .sk-circle8:before {
 85 |     -webkit-animation-delay: -0.5s;
 86 |             animation-delay: -0.5s; }
 87 |   .sk-circle .sk-circle9:before {
 88 |     -webkit-animation-delay: -0.4s;
 89 |             animation-delay: -0.4s; }
 90 |   .sk-circle .sk-circle10:before {
 91 |     -webkit-animation-delay: -0.3s;
 92 |             animation-delay: -0.3s; }
 93 |   .sk-circle .sk-circle11:before {
 94 |     -webkit-animation-delay: -0.2s;
 95 |             animation-delay: -0.2s; }
 96 |   .sk-circle .sk-circle12:before {
 97 |     -webkit-animation-delay: -0.1s;
 98 |             animation-delay: -0.1s; }
 99 | 
100 | @-webkit-keyframes sk-circleBounceDelay {
101 |   0%, 80%, 100% {
102 |     -webkit-transform: scale(0);
103 |             transform: scale(0); }
104 |   40% {
105 |     -webkit-transform: scale(1);
106 |             transform: scale(1); } }
107 | 
108 | @keyframes sk-circleBounceDelay {
109 |   0%, 80%, 100% {
110 |     -webkit-transform: scale(0);
111 |             transform: scale(0); }
112 |   40% {
113 |     -webkit-transform: scale(1);
114 |             transform: scale(1); } }
115 | 


--------------------------------------------------------------------------------
/demos/loading/circle.html:
--------------------------------------------------------------------------------
 1 | <div id="circle">
 2 |     <div class="sk-circle">
 3 |         <div class="sk-circle1 sk-child"></div>
 4 |         <div class="sk-circle2 sk-child"></div>
 5 |         <div class="sk-circle3 sk-child"></div>
 6 |         <div class="sk-circle4 sk-child"></div>
 7 |         <div class="sk-circle5 sk-child"></div>
 8 |         <div class="sk-circle6 sk-child"></div>
 9 |         <div class="sk-circle7 sk-child"></div>
10 |         <div class="sk-circle8 sk-child"></div>
11 |         <div class="sk-circle9 sk-child"></div>
12 |         <div class="sk-circle10 sk-child"></div>
13 |         <div class="sk-circle11 sk-child"></div>
14 |         <div class="sk-circle12 sk-child"></div>
15 |     </div>
16 | </div>
17 | 


--------------------------------------------------------------------------------
/demos/loading/colorcircles.css:
--------------------------------------------------------------------------------
 1 | 
 2 | .colorcircles {
 3 |   position: relative;
 4 |   width: 150px;
 5 |   height: 150px;
 6 | }
 7 | 
 8 | .loader {
 9 |   position: absolute;
10 |   opacity: .7;
11 | }
12 | 
13 | .loader circle {
14 |   -webkit-animation: draw 4s infinite ease-in-out;
15 |           animation: draw 4s infinite ease-in-out;
16 |   -webkit-transform-origin: center;
17 |           transform-origin: center;
18 |   -webkit-transform: rotate(-90deg);
19 |           transform: rotate(-90deg);
20 | }
21 | 
22 | .loader-2 circle,
23 | .loader-6 circle {
24 |   -webkit-animation-delay: 1s;
25 |           animation-delay: 1s;
26 | }
27 | 
28 | .loader-7 circle {
29 |   -webkit-animation-delay: 2s;
30 |           animation-delay: 2s;
31 | }
32 | 
33 | .loader-4 circle,
34 | .loader-8 circle {
35 |   -webkit-animation-delay: 3s;
36 |           animation-delay: 3s;
37 | }
38 | 
39 | .loader-3 {
40 |   left: -150px;
41 |   -webkit-transform: rotateY(180deg);
42 |           transform: rotateY(180deg);
43 | }
44 | 
45 | .loader-6,
46 | .loader-7,
47 | .loader-8 {
48 |   left: -150px;
49 |   -webkit-transform: rotateX(180deg) rotateY(180deg);
50 |           transform: rotateX(180deg) rotateY(180deg);
51 | }
52 | 
53 | .loader-5 circle {
54 |   opacity: .2;
55 | }
56 | 
57 | @-webkit-keyframes draw {
58 |   50% {
59 |     stroke-dashoffset: 0;
60 |     -webkit-transform: scale(0.5);
61 |             transform: scale(0.5);
62 |   }
63 | }
64 | 
65 | @keyframes draw {
66 |   50% {
67 |     stroke-dashoffset: 0;
68 |     -webkit-transform: scale(0.5);
69 |             transform: scale(0.5);
70 |   }
71 | }
72 | 


--------------------------------------------------------------------------------
/demos/loading/colorcircles.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <div id="colorcircles" class="colorcircles">
 3 |   <svg class="loader">
 4 |     <filter id="blur">
 5 |       <fegaussianblur in="SourceGraphic" stddeviation="2"></fegaussianblur>
 6 |     </filter>
 7 |     <circle cx="75" cy="75" r="60" fill="transparent" stroke="#F4F519" stroke-width="6" stroke-linecap="round" stroke-dasharray="385" stroke-dashoffset="385" filter="url(#blur)"></circle>
 8 |   </svg>
 9 |   <svg class="loader loader-2">
10 |     <circle cx="75" cy="75" r="60" fill="transparent" stroke="#DE2FFF" stroke-width="6" stroke-linecap="round" stroke-dasharray="385" stroke-dashoffset="385" filter="url(#blur)"></circle>
11 |   </svg>
12 |   <svg class="loader loader-3">
13 |     <circle cx="75" cy="75" r="60" fill="transparent" stroke="#FF5932" stroke-width="6" stroke-linecap="round" stroke-dasharray="385" stroke-dashoffset="385" filter="url(#blur)"></circle>
14 |   </svg>
15 |   <svg class="loader loader-4">
16 |     <circle cx="75" cy="75" r="60" fill="transparent" stroke="#E97E42" stroke-width="6" stroke-linecap="round" stroke-dasharray="385" stroke-dashoffset="385" filter="url(#blur)"></circle>
17 |   </svg>
18 |   <svg class="loader loader-5">
19 |     <circle cx="75" cy="75" r="60" fill="transparent" stroke="white" stroke-width="6" stroke-linecap="round" filter="url(#blur)"></circle>
20 |   </svg>
21 |   <svg class="loader loader-6">
22 |     <circle cx="75" cy="75" r="60" fill="transparent" stroke="#00DCA3" stroke-width="6" stroke-linecap="round" stroke-dasharray="385" stroke-dashoffset="385" filter="url(#blur)"></circle>
23 |   </svg>
24 |   <svg class="loader loader-7">
25 |     <circle cx="75" cy="75" r="60" fill="transparent" stroke="purple" stroke-width="6" stroke-linecap="round" stroke-dasharray="385" stroke-dashoffset="385" filter="url(#blur)"></circle>
26 |   </svg>
27 |   <svg class="loader loader-8">
28 |     <circle cx="75" cy="75" r="60" fill="transparent" stroke="#AAEA33" stroke-width="6" stroke-linecap="round" stroke-dasharray="385" stroke-dashoffset="385" filter="url(#blur)"></circle>
29 |   </svg>
30 | </div>


--------------------------------------------------------------------------------
/demos/loading/cubegrid.css:
--------------------------------------------------------------------------------
 1 | .sk-cube-grid {
 2 |   width: 60px;
 3 |   height: 60px;
 4 |   margin: 40px auto;
 5 |   /*
 6 |    * Spinner positions
 7 |    * 1 2 3
 8 |    * 4 5 6
 9 |    * 7 8 9
10 |    */ }
11 |   .sk-cube-grid .sk-cube {
12 |     width: 33.33%;
13 |     height: 33.33%;
14 |     background-color: #FFFFFF;
15 |     float: left;
16 |     -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
17 |             animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; }
18 |   .sk-cube-grid .sk-cube1 {
19 |     -webkit-animation-delay: 0.2s;
20 |             animation-delay: 0.2s; }
21 |   .sk-cube-grid .sk-cube2 {
22 |     -webkit-animation-delay: 0.3s;
23 |             animation-delay: 0.3s; }
24 |   .sk-cube-grid .sk-cube3 {
25 |     -webkit-animation-delay: 0.4s;
26 |             animation-delay: 0.4s; }
27 |   .sk-cube-grid .sk-cube4 {
28 |     -webkit-animation-delay: 0.1s;
29 |             animation-delay: 0.1s; }
30 |   .sk-cube-grid .sk-cube5 {
31 |     -webkit-animation-delay: 0.2s;
32 |             animation-delay: 0.2s; }
33 |   .sk-cube-grid .sk-cube6 {
34 |     -webkit-animation-delay: 0.3s;
35 |             animation-delay: 0.3s; }
36 |   .sk-cube-grid .sk-cube7 {
37 |     -webkit-animation-delay: 0.0s;
38 |             animation-delay: 0.0s; }
39 |   .sk-cube-grid .sk-cube8 {
40 |     -webkit-animation-delay: 0.1s;
41 |             animation-delay: 0.1s; }
42 |   .sk-cube-grid .sk-cube9 {
43 |     -webkit-animation-delay: 0.2s;
44 |             animation-delay: 0.2s; }
45 | 
46 | @-webkit-keyframes sk-cubeGridScaleDelay {
47 |   0%, 70%, 100% {
48 |     -webkit-transform: scale3D(1, 1, 1);
49 |             transform: scale3D(1, 1, 1); }
50 |   35% {
51 |     -webkit-transform: scale3D(0, 0, 1);
52 |             transform: scale3D(0, 0, 1); } }
53 | 
54 | @keyframes sk-cubeGridScaleDelay {
55 |   0%, 70%, 100% {
56 |     -webkit-transform: scale3D(1, 1, 1);
57 |             transform: scale3D(1, 1, 1); }
58 |   35% {
59 |     -webkit-transform: scale3D(0, 0, 1);
60 |             transform: scale3D(0, 0, 1); } }
61 | 


--------------------------------------------------------------------------------
/demos/loading/cubegrid.html:
--------------------------------------------------------------------------------
 1 | <div id="cubegrid">
 2 |     <div class="sk-cube-grid">
 3 |         <div class="sk-cube sk-cube1"></div>
 4 |         <div class="sk-cube sk-cube2"></div>
 5 |         <div class="sk-cube sk-cube3"></div>
 6 |         <div class="sk-cube sk-cube4"></div>
 7 |         <div class="sk-cube sk-cube5"></div>
 8 |         <div class="sk-cube sk-cube6"></div>
 9 |         <div class="sk-cube sk-cube7"></div>
10 |         <div class="sk-cube sk-cube8"></div>
11 |         <div class="sk-cube sk-cube9"></div>
12 |     </div>
13 | </div>
14 | 


--------------------------------------------------------------------------------
/demos/loading/doublebounce.css:
--------------------------------------------------------------------------------
 1 | .sk-double-bounce {
 2 |   width: 60px;
 3 |   height: 60px;
 4 |   position: relative;
 5 |   margin: 40px auto; }
 6 |   .sk-double-bounce .sk-child {
 7 |     width: 100%;
 8 |     height: 100%;
 9 |     border-radius: 50%;
10 |     background-color: #FFFFFF;
11 |     opacity: 0.6;
12 |     position: absolute;
13 |     top: 0;
14 |     left: 0;
15 |     -webkit-animation: sk-doubleBounce 2s infinite ease-in-out;
16 |             animation: sk-doubleBounce 2s infinite ease-in-out; }
17 |   .sk-double-bounce .sk-double-bounce2 {
18 |     -webkit-animation-delay: -1.0s;
19 |             animation-delay: -1.0s; }
20 | 
21 | @-webkit-keyframes sk-doubleBounce {
22 |   0%, 100% {
23 |     -webkit-transform: scale(0);
24 |             transform: scale(0); }
25 |   50% {
26 |     -webkit-transform: scale(1);
27 |             transform: scale(1); } }
28 | 
29 | @keyframes sk-doubleBounce {
30 |   0%, 100% {
31 |     -webkit-transform: scale(0);
32 |             transform: scale(0); }
33 |   50% {
34 |     -webkit-transform: scale(1);
35 |             transform: scale(1); } }
36 | 


--------------------------------------------------------------------------------
/demos/loading/doublebounce.html:
--------------------------------------------------------------------------------
1 | <div id="doublebounce">
2 |     <div class="sk-double-bounce">
3 |       <div class="sk-child sk-double-bounce1"></div>
4 |       <div class="sk-child sk-double-bounce2"></div>
5 |     </div>
6 | </div>
7 | 


--------------------------------------------------------------------------------
/demos/loading/fadingcircle.css:
--------------------------------------------------------------------------------
  1 | .sk-fading-circle {
  2 |   margin: 40px auto;
  3 |   width: 60px;
  4 |   height: 60px;
  5 |   position: relative; }
  6 |   .sk-fading-circle .sk-circle {
  7 |     width: 100%;
  8 |     height: 100%;
  9 |     position: absolute;
 10 |     left: 0;
 11 |     top: 0; }
 12 |   .sk-fading-circle .sk-circle:before {
 13 |     content: '';
 14 |     display: block;
 15 |     margin: 0 auto;
 16 |     width: 15%;
 17 |     height: 15%;
 18 |     background-color: #FFFFFF;
 19 |     border-radius: 100%;
 20 |     -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
 21 |             animation: sk-circleFadeDelay 1.2s infinite ease-in-out both; }
 22 |   .sk-fading-circle .sk-circle2 {
 23 |     -webkit-transform: rotate(30deg);
 24 |         -ms-transform: rotate(30deg);
 25 |             transform: rotate(30deg); }
 26 |   .sk-fading-circle .sk-circle3 {
 27 |     -webkit-transform: rotate(60deg);
 28 |         -ms-transform: rotate(60deg);
 29 |             transform: rotate(60deg); }
 30 |   .sk-fading-circle .sk-circle4 {
 31 |     -webkit-transform: rotate(90deg);
 32 |         -ms-transform: rotate(90deg);
 33 |             transform: rotate(90deg); }
 34 |   .sk-fading-circle .sk-circle5 {
 35 |     -webkit-transform: rotate(120deg);
 36 |         -ms-transform: rotate(120deg);
 37 |             transform: rotate(120deg); }
 38 |   .sk-fading-circle .sk-circle6 {
 39 |     -webkit-transform: rotate(150deg);
 40 |         -ms-transform: rotate(150deg);
 41 |             transform: rotate(150deg); }
 42 |   .sk-fading-circle .sk-circle7 {
 43 |     -webkit-transform: rotate(180deg);
 44 |         -ms-transform: rotate(180deg);
 45 |             transform: rotate(180deg); }
 46 |   .sk-fading-circle .sk-circle8 {
 47 |     -webkit-transform: rotate(210deg);
 48 |         -ms-transform: rotate(210deg);
 49 |             transform: rotate(210deg); }
 50 |   .sk-fading-circle .sk-circle9 {
 51 |     -webkit-transform: rotate(240deg);
 52 |         -ms-transform: rotate(240deg);
 53 |             transform: rotate(240deg); }
 54 |   .sk-fading-circle .sk-circle10 {
 55 |     -webkit-transform: rotate(270deg);
 56 |         -ms-transform: rotate(270deg);
 57 |             transform: rotate(270deg); }
 58 |   .sk-fading-circle .sk-circle11 {
 59 |     -webkit-transform: rotate(300deg);
 60 |         -ms-transform: rotate(300deg);
 61 |             transform: rotate(300deg); }
 62 |   .sk-fading-circle .sk-circle12 {
 63 |     -webkit-transform: rotate(330deg);
 64 |         -ms-transform: rotate(330deg);
 65 |             transform: rotate(330deg); }
 66 |   .sk-fading-circle .sk-circle2:before {
 67 |     -webkit-animation-delay: -1.1s;
 68 |             animation-delay: -1.1s; }
 69 |   .sk-fading-circle .sk-circle3:before {
 70 |     -webkit-animation-delay: -1s;
 71 |             animation-delay: -1s; }
 72 |   .sk-fading-circle .sk-circle4:before {
 73 |     -webkit-animation-delay: -0.9s;
 74 |             animation-delay: -0.9s; }
 75 |   .sk-fading-circle .sk-circle5:before {
 76 |     -webkit-animation-delay: -0.8s;
 77 |             animation-delay: -0.8s; }
 78 |   .sk-fading-circle .sk-circle6:before {
 79 |     -webkit-animation-delay: -0.7s;
 80 |             animation-delay: -0.7s; }
 81 |   .sk-fading-circle .sk-circle7:before {
 82 |     -webkit-animation-delay: -0.6s;
 83 |             animation-delay: -0.6s; }
 84 |   .sk-fading-circle .sk-circle8:before {
 85 |     -webkit-animation-delay: -0.5s;
 86 |             animation-delay: -0.5s; }
 87 |   .sk-fading-circle .sk-circle9:before {
 88 |     -webkit-animation-delay: -0.4s;
 89 |             animation-delay: -0.4s; }
 90 |   .sk-fading-circle .sk-circle10:before {
 91 |     -webkit-animation-delay: -0.3s;
 92 |             animation-delay: -0.3s; }
 93 |   .sk-fading-circle .sk-circle11:before {
 94 |     -webkit-animation-delay: -0.2s;
 95 |             animation-delay: -0.2s; }
 96 |   .sk-fading-circle .sk-circle12:before {
 97 |     -webkit-animation-delay: -0.1s;
 98 |             animation-delay: -0.1s; }
 99 | 
100 | @-webkit-keyframes sk-circleFadeDelay {
101 |   0%, 39%, 100% {
102 |     opacity: 0; }
103 |   40% {
104 |     opacity: 1; } }
105 | 
106 | @keyframes sk-circleFadeDelay {
107 |   0%, 39%, 100% {
108 |     opacity: 0; }
109 |   40% {
110 |     opacity: 1; } }
111 | 


--------------------------------------------------------------------------------
/demos/loading/fadingcircle.html:
--------------------------------------------------------------------------------
 1 | <div id="fadingcircle">
 2 |     <div class="sk-fading-circle">
 3 |         <div class="sk-circle1 sk-circle"></div>
 4 |         <div class="sk-circle2 sk-circle"></div>
 5 |         <div class="sk-circle3 sk-circle"></div>
 6 |         <div class="sk-circle4 sk-circle"></div>
 7 |         <div class="sk-circle5 sk-circle"></div>
 8 |         <div class="sk-circle6 sk-circle"></div>
 9 |         <div class="sk-circle7 sk-circle"></div>
10 |         <div class="sk-circle8 sk-circle"></div>
11 |         <div class="sk-circle9 sk-circle"></div>
12 |         <div class="sk-circle10 sk-circle"></div>
13 |         <div class="sk-circle11 sk-circle"></div>
14 |         <div class="sk-circle12 sk-circle"></div>
15 |     </div>
16 | </div>
17 | 


--------------------------------------------------------------------------------
/demos/loading/foldingcube.css:
--------------------------------------------------------------------------------
 1 | .sk-folding-cube {
 2 |   margin: 40px auto;
 3 |   width: 60px;
 4 |   height: 60px;
 5 |   position: relative;
 6 |   -webkit-transform: rotateZ(45deg);
 7 |           transform: rotateZ(45deg); }
 8 |   .sk-folding-cube .sk-cube {
 9 |     float: left;
10 |     width: 50%;
11 |     height: 50%;
12 |     position: relative;
13 |     -webkit-transform: scale(1.1);
14 |         -ms-transform: scale(1.1);
15 |             transform: scale(1.1); }
16 |   .sk-folding-cube .sk-cube:before {
17 |     content: '';
18 |     position: absolute;
19 |     top: 0;
20 |     left: 0;
21 |     width: 100%;
22 |     height: 100%;
23 |     background-color: #FFFFFF;
24 |     -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;
25 |             animation: sk-foldCubeAngle 2.4s infinite linear both;
26 |     -webkit-transform-origin: 100% 100%;
27 |         -ms-transform-origin: 100% 100%;
28 |             transform-origin: 100% 100%; }
29 |   .sk-folding-cube .sk-cube2 {
30 |     -webkit-transform: scale(1.1) rotateZ(90deg);
31 |             transform: scale(1.1) rotateZ(90deg); }
32 |   .sk-folding-cube .sk-cube3 {
33 |     -webkit-transform: scale(1.1) rotateZ(180deg);
34 |             transform: scale(1.1) rotateZ(180deg); }
35 |   .sk-folding-cube .sk-cube4 {
36 |     -webkit-transform: scale(1.1) rotateZ(270deg);
37 |             transform: scale(1.1) rotateZ(270deg); }
38 |   .sk-folding-cube .sk-cube2:before {
39 |     -webkit-animation-delay: 0.3s;
40 |             animation-delay: 0.3s; }
41 |   .sk-folding-cube .sk-cube3:before {
42 |     -webkit-animation-delay: 0.6s;
43 |             animation-delay: 0.6s; }
44 |   .sk-folding-cube .sk-cube4:before {
45 |     -webkit-animation-delay: 0.9s;
46 |             animation-delay: 0.9s; }
47 | 
48 | @-webkit-keyframes sk-foldCubeAngle {
49 |   0%, 10% {
50 |     -webkit-transform: perspective(140px) rotateX(-180deg);
51 |             transform: perspective(140px) rotateX(-180deg);
52 |     opacity: 0; }
53 |   25%, 75% {
54 |     -webkit-transform: perspective(140px) rotateX(0deg);
55 |             transform: perspective(140px) rotateX(0deg);
56 |     opacity: 1; }
57 |   90%, 100% {
58 |     -webkit-transform: perspective(140px) rotateY(180deg);
59 |             transform: perspective(140px) rotateY(180deg);
60 |     opacity: 0; } }
61 | 
62 | @keyframes sk-foldCubeAngle {
63 |   0%, 10% {
64 |     -webkit-transform: perspective(140px) rotateX(-180deg);
65 |             transform: perspective(140px) rotateX(-180deg);
66 |     opacity: 0; }
67 |   25%, 75% {
68 |     -webkit-transform: perspective(140px) rotateX(0deg);
69 |             transform: perspective(140px) rotateX(0deg);
70 |     opacity: 1; }
71 |   90%, 100% {
72 |     -webkit-transform: perspective(140px) rotateY(180deg);
73 |             transform: perspective(140px) rotateY(180deg);
74 |     opacity: 0; } }
75 | 


--------------------------------------------------------------------------------
/demos/loading/foldingcube.html:
--------------------------------------------------------------------------------
1 | <div id="foldingcube">
2 |     <div class="sk-folding-cube">
3 |         <div class="sk-cube1 sk-cube"></div>
4 |         <div class="sk-cube2 sk-cube"></div>
5 |         <div class="sk-cube4 sk-cube"></div>
6 |         <div class="sk-cube3 sk-cube"></div>
7 |     </div>
8 | </div>
9 | 


--------------------------------------------------------------------------------
/demos/loading/googlematerialbounce.css:
--------------------------------------------------------------------------------
 1 | #googlematerialbounce {
 2 |   position: relative;
 3 |   width: 268px;
 4 |   height: 64px;
 5 | }
 6 | 
 7 | #obj {
 8 |   display: inline-block;
 9 |   width: 32px;
10 |   height: 32px;
11 |   border-radius: 50%;
12 |   margin: 16px;
13 |   -webkit-animation-name: float;
14 |   -webkit-animation-iteration-count: infinite;
15 |   -webkit-animation-timing-function: ease-in-out;
16 |   -webkit-animation-duration: 1.5s;
17 | }
18 | #obj:nth-child(1) {
19 |   background: #4285F4;
20 | }
21 | #obj:nth-child(2) {
22 |   background: #EA4335;
23 |   -webkit-animation-delay: calc(.18 * 1.5s);
24 | }
25 | #obj:nth-child(3) {
26 |   background: #FBBC05;
27 |   -webkit-animation-delay: calc(0.18 * 1.5s * 2);
28 | }
29 | #obj:nth-child(4) {
30 |   background: #34A853;
31 |   -webkit-animation-delay: calc(0.18 * 1.5s * 3);
32 | }
33 | 
34 | @-webkit-keyframes float {
35 |   0%, 100% {
36 |     -webkit-transform: translateY(-calc(32px * .2));
37 |   }
38 |   50% {
39 |     -webkit-transform: translateY(calc(32px * .2));
40 |   }
41 | }
42 | 


--------------------------------------------------------------------------------
/demos/loading/googlematerialbounce.html:
--------------------------------------------------------------------------------
 1 | <!--
 2 | Copyright (c) 2017 by Noah Rocket Rezentes (http://codepen.io/rocketnoah/pen/vXdQJP)
 3 | Fork of an original work by Noah Rocket Rezentes (http://codepen.io/rocketnoah/pen/JKpXzY)
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 6 | 
 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 8 | 
 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
10 | -->
11 | 
12 | <div id='googlematerialbounce'>
13 |   <div id='obj'></div>
14 |   <div id='obj'></div>
15 |   <div id='obj'></div>
16 |   <div id='obj'></div>
17 | </div>


--------------------------------------------------------------------------------
/demos/loading/googlematerialpreloader.css:
--------------------------------------------------------------------------------
  1 | header [role="progressbar"][aria-busy="true"] {
  2 |   position: absolute;
  3 |   top: 0;
  4 |   left: 0;
  5 |   padding-top: 8px;
  6 |   width: 100%;
  7 |   background-color: #159756;
  8 |   -webkit-animation: preloader-background linear 3.5s infinite;
  9 |           animation: preloader-background linear 3.5s infinite;
 10 | }
 11 | header [role="progressbar"][aria-busy="true"]::before, header [role="progressbar"][aria-busy="true"]::after {
 12 |   display: block;
 13 |   position: absolute;
 14 |   top: 0;
 15 |   z-index: 2;
 16 |   width: 0;
 17 |   height: 8px;
 18 |   background: #afa;
 19 |   -webkit-animation: preloader-front linear 3.5s infinite;
 20 |           animation: preloader-front linear 3.5s infinite;
 21 |   content: '';
 22 | }
 23 | header [role="progressbar"][aria-busy="true"]::before {
 24 |   right: 50%;
 25 | }
 26 | header [role="progressbar"][aria-busy="true"]::after {
 27 |   left: 50%;
 28 | }
 29 | 
 30 | @-webkit-keyframes preloader-background {
 31 |   0%, 24.9% {
 32 |     background-color: #159756;
 33 |   }
 34 |   25%, 49.9% {
 35 |     background-color: #da4733;
 36 |   }
 37 |   50%, 74.9% {
 38 |     background-color: #3b78e7;
 39 |   }
 40 |   75%, 100% {
 41 |     background-color: #fdba2c;
 42 |   }
 43 | }
 44 | 
 45 | @keyframes preloader-background {
 46 |   0%, 24.9% {
 47 |     background-color: #159756;
 48 |   }
 49 |   25%, 49.9% {
 50 |     background-color: #da4733;
 51 |   }
 52 |   50%, 74.9% {
 53 |     background-color: #3b78e7;
 54 |   }
 55 |   75%, 100% {
 56 |     background-color: #fdba2c;
 57 |   }
 58 | }
 59 | @-webkit-keyframes preloader-front {
 60 |   0% {
 61 |     width: 0;
 62 |     background-color: #da4733;
 63 |   }
 64 |   24.9% {
 65 |     width: 50%;
 66 |     background-color: #da4733;
 67 |   }
 68 |   25% {
 69 |     width: 0;
 70 |     background-color: #3b78e7;
 71 |   }
 72 |   49.9% {
 73 |     width: 50%;
 74 |     background-color: #3b78e7;
 75 |   }
 76 |   50% {
 77 |     width: 0;
 78 |     background-color: #fdba2c;
 79 |   }
 80 |   74.9% {
 81 |     width: 50%;
 82 |     background-color: #fdba2c;
 83 |   }
 84 |   75% {
 85 |     width: 0%;
 86 |     background-color: #159756;
 87 |   }
 88 |   100% {
 89 |     width: 50%;
 90 |     background-color: #159756;
 91 |   }
 92 | }
 93 | @keyframes preloader-front {
 94 |   0% {
 95 |     width: 0;
 96 |     background-color: #da4733;
 97 |   }
 98 |   24.9% {
 99 |     width: 50%;
100 |     background-color: #da4733;
101 |   }
102 |   25% {
103 |     width: 0;
104 |     background-color: #3b78e7;
105 |   }
106 |   49.9% {
107 |     width: 50%;
108 |     background-color: #3b78e7;
109 |   }
110 |   50% {
111 |     width: 0;
112 |     background-color: #fdba2c;
113 |   }
114 |   74.9% {
115 |     width: 50%;
116 |     background-color: #fdba2c;
117 |   }
118 |   75% {
119 |     width: 0%;
120 |     background-color: #159756;
121 |   }
122 |   100% {
123 |     width: 50%;
124 |     background-color: #159756;
125 |   }
126 | }
127 | * {
128 |   box-sizing: border-box;
129 | }
130 | 
131 | 
132 | 
133 | body {
134 |   font-family: Avenir Next, Helvetica Neue, Helvetica, Arial, sans-serif;
135 | }
136 | 
137 | header {
138 |   position: relative;
139 |   width: 100%;
140 |   box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
141 |   background-color: #fff;    
142 |   margin: 8px;
143 | }
144 | 
145 | main {
146 |   display: -webkit-box;
147 |   display: -ms-flexbox;
148 |   display: flex;
149 |   -webkit-box-orient: vertical;
150 |   -webkit-box-direction: normal;
151 |       -ms-flex-direction: column;
152 |           flex-direction: column;
153 |   -webkit-box-align: center;
154 |       -ms-flex-align: center;
155 |           align-items: center;
156 |   -webkit-box-pack: center;
157 |       -ms-flex-pack: center;
158 |           justify-content: center;
159 |   padding: 20px;
160 |   -webkit-box-flex: 1;
161 |       -ms-flex-positive: 1;
162 |           flex-grow: 1;
163 |   text-align: center;
164 | }
165 | :root main > * + * {
166 |   margin-top: 1em;
167 | }
168 | 
169 | h1 {
170 |   margin: 0;
171 |   font-size: 2.2em;
172 |   font-weight: 200;
173 | }
174 | 
175 | p {
176 |   margin: 0;
177 |   font-size: .875em;
178 |   font-weight: 400;
179 | }
180 | 


--------------------------------------------------------------------------------
/demos/loading/googlematerialpreloader.html:
--------------------------------------------------------------------------------
1 | 
2 | <header id="googlematerialpreloader" >
3 |  <div aria-busy="true" aria-label="Loading, please wait." role="progressbar"></div>
4 | </header>


--------------------------------------------------------------------------------
/demos/loading/instructions.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | 	<title>Loading Dialog</title>
 5 | 	<style type="text/css">
 6 | 		div{
 7 | 			margin: 8px;
 8 | 		}
 9 | 	</style>
10 | </head>
11 | <body>
12 | 	<h2>Loading Dialog</h2>
13 | 	<div>Set the <b>Loading Type</b> at the bottom and then in <b>Text -> Loading Text</b> set the text you want</div>
14 | 	<div>You can customize the text appearance and position if you want. :)</div>
15 | </body>
16 | </html>


--------------------------------------------------------------------------------
/demos/loading/pacman.css:
--------------------------------------------------------------------------------
  1 | @-webkit-keyframes up {
  2 |   0%, 100% {
  3 |     transform: rotate(0);
  4 |   }
  5 |   50% {
  6 |     transform: rotate(-30deg);
  7 |   }
  8 | }
  9 | @-moz-keyframes up {
 10 |   0%, 100% {
 11 |     transform: rotate(0);
 12 |   }
 13 |   50% {
 14 |     transform: rotate(-30deg);
 15 |   }
 16 | }
 17 | @-o-keyframes up {
 18 |   0%, 100% {
 19 |     transform: rotate(0);
 20 |   }
 21 |   50% {
 22 |     transform: rotate(-30deg);
 23 |   }
 24 | }
 25 | @keyframes up {
 26 |   0%, 100% {
 27 |     transform: rotate(0);
 28 |   }
 29 |   50% {
 30 |     transform: rotate(-30deg);
 31 |   }
 32 | }
 33 | @-webkit-keyframes down {
 34 |   0%, 100% {
 35 |     transform: rotate(0);
 36 |   }
 37 |   50% {
 38 |     transform: rotate(30deg);
 39 |   }
 40 | }
 41 | @-moz-keyframes down {
 42 |   0%, 100% {
 43 |     transform: rotate(0);
 44 |   }
 45 |   50% {
 46 |     transform: rotate(30deg);
 47 |   }
 48 | }
 49 | @-o-keyframes down {
 50 |   0%, 100% {
 51 |     transform: rotate(0);
 52 |   }
 53 |   50% {
 54 |     transform: rotate(30deg);
 55 |   }
 56 | }
 57 | @keyframes down {
 58 |   0%, 100% {
 59 |     transform: rotate(0);
 60 |   }
 61 |   50% {
 62 |     transform: rotate(30deg);
 63 |   }
 64 | }
 65 | @-webkit-keyframes r-to-l {
 66 |   100% {
 67 |     margin-left: -1px;
 68 |   }
 69 | }
 70 | @-moz-keyframes r-to-l {
 71 |   100% {
 72 |     margin-left: -1px;
 73 |   }
 74 | }
 75 | @-o-keyframes r-to-l {
 76 |   100% {
 77 |     margin-left: -1px;
 78 |   }
 79 | }
 80 | @keyframes r-to-l {
 81 |   100% {
 82 |     margin-left: -1px;
 83 |   }
 84 | }
 85 | #pacman{  
 86 |     height: 150px;
 87 | }
 88 | body .pacmanpie:before, body .pacmanpie:after {
 89 |   content: '';
 90 |   position: absolute;
 91 |   background: #FFC107;
 92 |   width: 100px;
 93 |   height: 50px;
 94 |   left: 50%;
 95 |   top: 50%;
 96 |   margin-left: -50px;
 97 |   margin-top: -50px;
 98 |   border-radius: 50px 50px 0 0;
 99 |   -webkit-animation: up 0.4s infinite;
100 |   -moz-animation: up 0.4s infinite;
101 |   -o-animation: up 0.4s infinite;
102 |   animation: up 0.4s infinite;
103 | }
104 | body .pacmanpie:after {
105 |   margin-top: -1px;
106 |   border-radius: 0 0 50px 50px;
107 |   -webkit-animation: down 0.4s infinite;
108 |   -moz-animation: down 0.4s infinite;
109 |   -o-animation: down 0.4s infinite;
110 |   animation: down 0.4s infinite;
111 | }
112 | body .dot {
113 |   position: absolute;
114 |   left: 50%;
115 |   top: 50%;
116 |   width: 10px;
117 |   height: 10px;
118 |   margin-top: -5px;
119 |   margin-left: 30px;
120 |   border-radius: 50%;
121 |   background: #ccc;
122 |   z-index: -1;
123 |   box-shadow: 30px 0 0 #ccc, 60px 0 0 #ccc, 90px 0 0 #ccc, 120px 0 0 #ccc, 150px 0 0 #ccc;
124 |   -webkit-animation: r-to-l 0.4s infinite;
125 |   -moz-animation: r-to-l 0.4s infinite;
126 |   -o-animation: r-to-l 0.4s infinite;
127 |   animation: r-to-l 0.4s infinite;
128 | }
129 | 


--------------------------------------------------------------------------------
/demos/loading/pacman.html:
--------------------------------------------------------------------------------
1 | <div id="pacman">
2 | 	<div class="pacmanpie"></div>
3 | 	<div class="dot"></div>
4 | </div>


--------------------------------------------------------------------------------
/demos/loading/page.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | 	<style type="text/css" id="bodystylesheet">
 5 | 		body{
 6 | 			border: 0px;
 7 | 			margin: 0px;
 8 | 		    display: flex;
 9 | 		    flex-direction: column;
10 | 		    align-items: center;
11 | 		    height: 100vh;
12 | 		    justify-content: center;
13 |   			overflow: hidden;
14 | 		}
15 | 		.loadingText{
16 | 			color: white;
17 | 		}
18 | 	</style>
19 | 	<meta name="autotoolswebscreen" type="variablejs" id="loadingType" label="Loading Type" description="Choose the type of loading screen you want" defaultValue="Simple Dots" options="Simple Dots,Stairs,Bounce,Uphill,Pacman,Spinning Flower,Shrinking Hexagon,Red Vortex,Color Circles,Rotating Plane,Double Bounce,Wave,Wandering Cubes,Pulse,Chasing Dots,Three Bounce,Circle,Cube Grid,Fading Circle,Folding Cube,Google Material Bounce,Google Material Preloader" isHtmlLink="true" isCssLink="true" />
20 |    	<meta name="autotoolswebscreen" type="variablejs" id="text" group="Text" label="Loading Text" description="Text to display. Can be used with the update feature." defaultValue="Loading..." Hint="Loading..." />
21 |    	<meta name="autotoolswebscreen" type="variablejs" id="textSize" group="Text" label="Text Size" defaultValue="24" Hint="24" />
22 |    	<meta name="autotoolswebscreen" type="variablejs" id="textColor" group="Text" label="Text Color" defaultValue="white" Hint="white" isColor="true" />
23 |    	<meta name="autotoolswebscreen" type="variablejs" id="textPosition" group="Text" label="Text Position" defaultValue="Top" options="Top,Bottom" />
24 | 
25 | </head>
26 | <body>
27 |    <span id="loadingText" class="loadingText">Now Loading...</span>
28 | </body>
29 | 	<script type="text/javascript">
30 | 		var autoToolsUpdateValues = function(values){
31 | 			if(values.text){
32 | 				document.querySelector("#loadingText").innerHTML = values.text;	
33 | 			}
34 | 		}
35 | 		AutoTools.setDefaultValues({
36 | 			"text":"Loading...",
37 | 			"textSize":"24",
38 | 			"textColor":"white",
39 | 			"textPosition":"Top"
40 | 		});
41 | 		loadingType = loadingType.toLowerCase().replace(new RegExp(" ", 'g'), "");
42 | 		var htmlFile = loadingType+'.html';
43 | 		console.log(loadingType);
44 | 		/*var bodyStylesheet = document.querySelector("#bodystylesheet").cloneNode(true);
45 | 		var stylesheet = document.querySelector("link[rel=stylesheet]").cloneNode(true);*/
46 | 		var original = document.querySelector(".hidden");
47 | 		var loading = document.querySelector("#"+loadingType).cloneNode(true);
48 | 		loading.classList.remove("hidden");
49 | 		original.parentNode.removeChild(original);
50 | 		var body = document.querySelector("body");
51 | 		body.appendChild(loading);
52 | 
53 | 		var textElement = document.querySelector("#loadingText");
54 | 		textElement.innerHTML = text;
55 | 		textElement.style["font-size"] = textSize +"px";
56 | 		textElement.style["color"] = textColor;
57 | 		if(textPosition!="Top"){
58 | 			textElement.parentNode.removeChild(textElement);
59 | 			body.appendChild(textElement);
60 | 		}
61 | 	</script>
62 | </html>
63 | 


--------------------------------------------------------------------------------
/demos/loading/pulse.css:
--------------------------------------------------------------------------------
 1 | .sk-spinner-pulse {
 2 |   width: 60px;
 3 |   height: 60px;
 4 |   margin: 40px auto;
 5 |   background-color: #FFFFFF;
 6 |   border-radius: 100%;
 7 |   -webkit-animation: sk-pulseScaleOut 1s infinite ease-in-out;
 8 |           animation: sk-pulseScaleOut 1s infinite ease-in-out; }
 9 | 
10 | @-webkit-keyframes sk-pulseScaleOut {
11 |   0% {
12 |     -webkit-transform: scale(0);
13 |             transform: scale(0); }
14 |   100% {
15 |     -webkit-transform: scale(1);
16 |             transform: scale(1);
17 |     opacity: 0; } }
18 | 
19 | @keyframes sk-pulseScaleOut {
20 |   0% {
21 |     -webkit-transform: scale(0);
22 |             transform: scale(0); }
23 |   100% {
24 |     -webkit-transform: scale(1);
25 |             transform: scale(1);
26 |     opacity: 0; } }
27 | 


--------------------------------------------------------------------------------
/demos/loading/pulse.html:
--------------------------------------------------------------------------------
1 | <div id="pulse">
2 |     <div class="sk-spinner sk-spinner-pulse"></div>
3 | </div>
4 | 


--------------------------------------------------------------------------------
/demos/loading/redvortex.css:
--------------------------------------------------------------------------------
 1 | 
 2 | #redvortex{
 3 |   width:100px;
 4 |   height:100px;
 5 | }
 6 | .img{
 7 |      margin-left: -60px;
 8 |   width:100px;
 9 |   height:100px;
10 | border-radius:100%;
11 |   position:absolute;
12 |   border: 1px solid red;
13 |   animation: up 1s;
14 | animation-iteration-count: infinite;
15 |   transition:2s;
16 |  border-bottom:none;
17 |   border-right:none;
18 |   animation-timing-function:linear;
19 | 	left:50%;
20 | 
21 |   }
22 |   
23 |   @keyframes up{
24 |    from{transform:rotate(0deg); }
25 |    50%{transform:rotate(180deg);}
26 |    100%{transform:rotate(360deg);}
27 |   }
28 |   #img2{
29 |   width:90px;
30 |   height:90px;
31 |   left:50.35%;
32 |   animation-delay:.2s;
33 | 
34 |   }
35 |     #img3{
36 |    width:80px;
37 |   height:80px;
38 |     left:50.70%;
39 |   animation-delay:.4s;
40 |   }
41 |     #img4{
42 |    width:70px;
43 |   height:70px;
44 |      left:51.05%;
45 |   animation-delay:.6s;
46 | 
47 |   }
48 |     #img5{
49 |     width:60px;
50 |   height:60px;
51 |       left:51.40%;
52 |   animation-delay:.8s;
53 | 
54 |   }


--------------------------------------------------------------------------------
/demos/loading/redvortex.html:
--------------------------------------------------------------------------------
1 | <div id="redvortex">
2 | 	<div id="img1" class="img">
3 | 	</div>
4 | 	<div id="img2" class="img"></div>
5 | 	<div id="img3" class="img"></div>
6 | 	<div id="img4" class="img"></div>
7 | 	<div id="img5" class="img"></div>
8 | </div>


--------------------------------------------------------------------------------
/demos/loading/rotatingplane.css:
--------------------------------------------------------------------------------
 1 | .sk-rotating-plane {
 2 |   width: 60px;
 3 |   height: 60px;
 4 |   background-color: #FFFFFF;
 5 |   margin: 40px auto;
 6 |   -webkit-animation: sk-rotatePlane 1.2s infinite ease-in-out;
 7 |           animation: sk-rotatePlane 1.2s infinite ease-in-out; }
 8 | 
 9 | @-webkit-keyframes sk-rotatePlane {
10 |   0% {
11 |     -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
12 |             transform: perspective(120px) rotateX(0deg) rotateY(0deg); }
13 |   50% {
14 |     -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
15 |             transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); }
16 |   100% {
17 |     -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
18 |             transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } }
19 | 
20 | @keyframes sk-rotatePlane {
21 |   0% {
22 |     -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
23 |             transform: perspective(120px) rotateX(0deg) rotateY(0deg); }
24 |   50% {
25 |     -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
26 |             transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); }
27 |   100% {
28 |     -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
29 |             transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } }
30 | 


--------------------------------------------------------------------------------
/demos/loading/rotatingplane.html:
--------------------------------------------------------------------------------
1 | <div id="rotatingplane">
2 | 	<div class="sk-rotating-plane"></div>
3 | </div>
4 | 


--------------------------------------------------------------------------------
/demos/loading/shrinkinghexagon.css:
--------------------------------------------------------------------------------
  1 | #shrinkinghexagon {
  2 |   color: #ccc;
  3 |   height: 230px;
  4 | }
  5 | 
  6 | div, :before {
  7 |   position: absolute;
  8 |   top: 50%;
  9 |   left: 50%;
 10 | }
 11 | 
 12 | .assembly {
 13 |   -webkit-filter: drop-shadow(0 0 1px currentColor);
 14 |           filter: drop-shadow(0 0 1px currentColor);
 15 |   -webkit-animation: down 2s linear infinite;
 16 |           animation: down 2s linear infinite;
 17 | }
 18 | 
 19 | @-webkit-keyframes down {
 20 |   to {
 21 |     -webkit-transform: scale(0.5);
 22 |             transform: scale(0.5);
 23 |   }
 24 | }
 25 | 
 26 | @keyframes down {
 27 |   to {
 28 |     -webkit-transform: scale(0.5);
 29 |             transform: scale(0.5);
 30 |   }
 31 | }
 32 | .hex {
 33 |   z-index: -1;
 34 |   margin: -4em;
 35 |   width: 8em;
 36 |   height: 8em;
 37 |   /* shape it into rhombus */
 38 |   -webkit-transform: skewY(30deg) scaleX(0.86603);
 39 |           transform: skewY(30deg) scaleX(0.86603);
 40 |   /* make rhombus ends transparent, get hex */
 41 |   background: -webkit-linear-gradient(315deg, transparent 25%, currentColor 0, currentColor 75%, transparent 0);
 42 |   background: linear-gradient(135deg, transparent 25%, currentColor 0, currentColor 75%, transparent 0);
 43 | }
 44 | 
 45 | .tri:before {
 46 |   margin: 0 -2em;
 47 |   border: solid 0;
 48 |   border-color: currentColor transparent;
 49 |   border-width: 3.4641em 2em 0;
 50 |   -webkit-animation: up 2s ease-out infinite;
 51 |           animation: up 2s ease-out infinite;
 52 |   content: '';
 53 | }
 54 | .tri:nth-child(1) {
 55 |   -webkit-transform: rotate(30deg) translateY(3.4641em);
 56 |           transform: rotate(30deg) translateY(3.4641em);
 57 | }
 58 | .tri:nth-child(1):before {
 59 |   -webkit-animation-name: up-1;
 60 |           animation-name: up-1;
 61 | }
 62 | @-webkit-keyframes up-1 {
 63 |   0%, 5.88235% {
 64 |     -webkit-transform: scale(0);
 65 |             transform: scale(0);
 66 |   }
 67 |   100%, 85.88235% {
 68 |     -webkit-transform: scale(1);
 69 |             transform: scale(1);
 70 |   }
 71 | }
 72 | @keyframes up-1 {
 73 |   0%, 5.88235% {
 74 |     -webkit-transform: scale(0);
 75 |             transform: scale(0);
 76 |   }
 77 |   100%, 85.88235% {
 78 |     -webkit-transform: scale(1);
 79 |             transform: scale(1);
 80 |   }
 81 | }
 82 | .tri:nth-child(2) {
 83 |   -webkit-transform: rotate(30deg) translateY(3.4641em) translate(2em, 3.4641em) rotate(0.5turn);
 84 |           transform: rotate(30deg) translateY(3.4641em) translate(2em, 3.4641em) rotate(0.5turn);
 85 | }
 86 | .tri:nth-child(2):before {
 87 |   -webkit-animation-name: up-2;
 88 |           animation-name: up-2;
 89 | }
 90 | @-webkit-keyframes up-2 {
 91 |   0%, 6.76471% {
 92 |     -webkit-transform: scale(0);
 93 |             transform: scale(0);
 94 |   }
 95 |   100%, 86.76471% {
 96 |     -webkit-transform: scale(1);
 97 |             transform: scale(1);
 98 |   }
 99 | }
100 | @keyframes up-2 {
101 |   0%, 6.76471% {
102 |     -webkit-transform: scale(0);
103 |             transform: scale(0);
104 |   }
105 |   100%, 86.76471% {
106 |     -webkit-transform: scale(1);
107 |             transform: scale(1);
108 |   }
109 | }
110 | .tri:nth-child(3) {
111 |   -webkit-transform: rotate(30deg) translateY(3.4641em) translate(4em, 0em) rotate(0turn);
112 |           transform: rotate(30deg) translateY(3.4641em) translate(4em, 0em) rotate(0turn);
113 | }
114 | .tri:nth-child(3):before {
115 |   -webkit-animation-name: up-3;
116 |           animation-name: up-3;
117 | }
118 | @-webkit-keyframes up-3 {
119 |   0%, 7.64706% {
120 |     -webkit-transform: scale(0);
121 |             transform: scale(0);
122 |   }
123 |   100%, 87.64706% {
124 |     -webkit-transform: scale(1);
125 |             transform: scale(1);
126 |   }
127 | }
128 | @keyframes up-3 {
129 |   0%, 7.64706% {
130 |     -webkit-transform: scale(0);
131 |             transform: scale(0);
132 |   }
133 |   100%, 87.64706% {
134 |     -webkit-transform: scale(1);
135 |             transform: scale(1);
136 |   }
137 | }
138 | .tri:nth-child(4) {
139 |   -webkit-transform: rotate(-30deg) translateY(3.4641em);
140 |           transform: rotate(-30deg) translateY(3.4641em);
141 | }
142 | .tri:nth-child(4):before {
143 |   -webkit-animation-name: up-4;
144 |           animation-name: up-4;
145 | }
146 | @-webkit-keyframes up-4 {
147 |   0%, 8.52941% {
148 |     -webkit-transform: scale(0);
149 |             transform: scale(0);
150 |   }
151 |   100%, 88.52941% {
152 |     -webkit-transform: scale(1);
153 |             transform: scale(1);
154 |   }
155 | }
156 | @keyframes up-4 {
157 |   0%, 8.52941% {
158 |     -webkit-transform: scale(0);
159 |             transform: scale(0);
160 |   }
161 |   100%, 88.52941% {
162 |     -webkit-transform: scale(1);
163 |             transform: scale(1);
164 |   }
165 | }
166 | .tri:nth-child(5) {
167 |   -webkit-transform: rotate(-30deg) translateY(3.4641em) translate(2em, 3.4641em) rotate(0.5turn);
168 |           transform: rotate(-30deg) translateY(3.4641em) translate(2em, 3.4641em) rotate(0.5turn);
169 | }
170 | .tri:nth-child(5):before {
171 |   -webkit-animation-name: up-5;
172 |           animation-name: up-5;
173 | }
174 | @-webkit-keyframes up-5 {
175 |   0%, 9.41176% {
176 |     -webkit-transform: scale(0);
177 |             transform: scale(0);
178 |   }
179 |   100%, 89.41176% {
180 |     -webkit-transform: scale(1);
181 |             transform: scale(1);
182 |   }
183 | }
184 | @keyframes up-5 {
185 |   0%, 9.41176% {
186 |     -webkit-transform: scale(0);
187 |             transform: scale(0);
188 |   }
189 |   100%, 89.41176% {
190 |     -webkit-transform: scale(1);
191 |             transform: scale(1);
192 |   }
193 | }
194 | .tri:nth-child(6) {
195 |   -webkit-transform: rotate(-30deg) translateY(3.4641em) translate(4em, 0em) rotate(0turn);
196 |           transform: rotate(-30deg) translateY(3.4641em) translate(4em, 0em) rotate(0turn);
197 | }
198 | .tri:nth-child(6):before {
199 |   -webkit-animation-name: up-6;
200 |           animation-name: up-6;
201 | }
202 | @-webkit-keyframes up-6 {
203 |   0%, 10.29412% {
204 |     -webkit-transform: scale(0);
205 |             transform: scale(0);
206 |   }
207 |   100%, 90.29412% {
208 |     -webkit-transform: scale(1);
209 |             transform: scale(1);
210 |   }
211 | }
212 | @keyframes up-6 {
213 |   0%, 10.29412% {
214 |     -webkit-transform: scale(0);
215 |             transform: scale(0);
216 |   }
217 |   100%, 90.29412% {
218 |     -webkit-transform: scale(1);
219 |             transform: scale(1);
220 |   }
221 | }
222 | .tri:nth-child(7) {
223 |   -webkit-transform: rotate(-90deg) translateY(3.4641em);
224 |           transform: rotate(-90deg) translateY(3.4641em);
225 | }
226 | .tri:nth-child(7):before {
227 |   -webkit-animation-name: up-7;
228 |           animation-name: up-7;
229 | }
230 | @-webkit-keyframes up-7 {
231 |   0%, 11.17647% {
232 |     -webkit-transform: scale(0);
233 |             transform: scale(0);
234 |   }
235 |   100%, 91.17647% {
236 |     -webkit-transform: scale(1);
237 |             transform: scale(1);
238 |   }
239 | }
240 | @keyframes up-7 {
241 |   0%, 11.17647% {
242 |     -webkit-transform: scale(0);
243 |             transform: scale(0);
244 |   }
245 |   100%, 91.17647% {
246 |     -webkit-transform: scale(1);
247 |             transform: scale(1);
248 |   }
249 | }
250 | .tri:nth-child(8) {
251 |   -webkit-transform: rotate(-90deg) translateY(3.4641em) translate(2em, 3.4641em) rotate(0.5turn);
252 |           transform: rotate(-90deg) translateY(3.4641em) translate(2em, 3.4641em) rotate(0.5turn);
253 | }
254 | .tri:nth-child(8):before {
255 |   -webkit-animation-name: up-8;
256 |           animation-name: up-8;
257 | }
258 | @-webkit-keyframes up-8 {
259 |   0%, 12.05882% {
260 |     -webkit-transform: scale(0);
261 |             transform: scale(0);
262 |   }
263 |   100%, 92.05882% {
264 |     -webkit-transform: scale(1);
265 |             transform: scale(1);
266 |   }
267 | }
268 | @keyframes up-8 {
269 |   0%, 12.05882% {
270 |     -webkit-transform: scale(0);
271 |             transform: scale(0);
272 |   }
273 |   100%, 92.05882% {
274 |     -webkit-transform: scale(1);
275 |             transform: scale(1);
276 |   }
277 | }
278 | .tri:nth-child(9) {
279 |   -webkit-transform: rotate(-90deg) translateY(3.4641em) translate(4em, 0em) rotate(0turn);
280 |           transform: rotate(-90deg) translateY(3.4641em) translate(4em, 0em) rotate(0turn);
281 | }
282 | .tri:nth-child(9):before {
283 |   -webkit-animation-name: up-9;
284 |           animation-name: up-9;
285 | }
286 | @-webkit-keyframes up-9 {
287 |   0%, 12.94118% {
288 |     -webkit-transform: scale(0);
289 |             transform: scale(0);
290 |   }
291 |   100%, 92.94118% {
292 |     -webkit-transform: scale(1);
293 |             transform: scale(1);
294 |   }
295 | }
296 | @keyframes up-9 {
297 |   0%, 12.94118% {
298 |     -webkit-transform: scale(0);
299 |             transform: scale(0);
300 |   }
301 |   100%, 92.94118% {
302 |     -webkit-transform: scale(1);
303 |             transform: scale(1);
304 |   }
305 | }
306 | .tri:nth-child(10) {
307 |   -webkit-transform: rotate(-150deg) translateY(3.4641em);
308 |           transform: rotate(-150deg) translateY(3.4641em);
309 | }
310 | .tri:nth-child(10):before {
311 |   -webkit-animation-name: up-10;
312 |           animation-name: up-10;
313 | }
314 | @-webkit-keyframes up-10 {
315 |   0%, 13.82353% {
316 |     -webkit-transform: scale(0);
317 |             transform: scale(0);
318 |   }
319 |   100%, 93.82353% {
320 |     -webkit-transform: scale(1);
321 |             transform: scale(1);
322 |   }
323 | }
324 | @keyframes up-10 {
325 |   0%, 13.82353% {
326 |     -webkit-transform: scale(0);
327 |             transform: scale(0);
328 |   }
329 |   100%, 93.82353% {
330 |     -webkit-transform: scale(1);
331 |             transform: scale(1);
332 |   }
333 | }
334 | .tri:nth-child(11) {
335 |   -webkit-transform: rotate(-150deg) translateY(3.4641em) translate(2em, 3.4641em) rotate(0.5turn);
336 |           transform: rotate(-150deg) translateY(3.4641em) translate(2em, 3.4641em) rotate(0.5turn);
337 | }
338 | .tri:nth-child(11):before {
339 |   -webkit-animation-name: up-11;
340 |           animation-name: up-11;
341 | }
342 | @-webkit-keyframes up-11 {
343 |   0%, 14.70588% {
344 |     -webkit-transform: scale(0);
345 |             transform: scale(0);
346 |   }
347 |   100%, 94.70588% {
348 |     -webkit-transform: scale(1);
349 |             transform: scale(1);
350 |   }
351 | }
352 | @keyframes up-11 {
353 |   0%, 14.70588% {
354 |     -webkit-transform: scale(0);
355 |             transform: scale(0);
356 |   }
357 |   100%, 94.70588% {
358 |     -webkit-transform: scale(1);
359 |             transform: scale(1);
360 |   }
361 | }
362 | .tri:nth-child(12) {
363 |   -webkit-transform: rotate(-150deg) translateY(3.4641em) translate(4em, 0em) rotate(0turn);
364 |           transform: rotate(-150deg) translateY(3.4641em) translate(4em, 0em) rotate(0turn);
365 | }
366 | .tri:nth-child(12):before {
367 |   -webkit-animation-name: up-12;
368 |           animation-name: up-12;
369 | }
370 | @-webkit-keyframes up-12 {
371 |   0%, 15.58824% {
372 |     -webkit-transform: scale(0);
373 |             transform: scale(0);
374 |   }
375 |   100%, 95.58824% {
376 |     -webkit-transform: scale(1);
377 |             transform: scale(1);
378 |   }
379 | }
380 | @keyframes up-12 {
381 |   0%, 15.58824% {
382 |     -webkit-transform: scale(0);
383 |             transform: scale(0);
384 |   }
385 |   100%, 95.58824% {
386 |     -webkit-transform: scale(1);
387 |             transform: scale(1);
388 |   }
389 | }
390 | .tri:nth-child(13) {
391 |   -webkit-transform: rotate(-210deg) translateY(3.4641em);
392 |           transform: rotate(-210deg) translateY(3.4641em);
393 | }
394 | .tri:nth-child(13):before {
395 |   -webkit-animation-name: up-13;
396 |           animation-name: up-13;
397 | }
398 | @-webkit-keyframes up-13 {
399 |   0%, 16.47059% {
400 |     -webkit-transform: scale(0);
401 |             transform: scale(0);
402 |   }
403 |   100%, 96.47059% {
404 |     -webkit-transform: scale(1);
405 |             transform: scale(1);
406 |   }
407 | }
408 | @keyframes up-13 {
409 |   0%, 16.47059% {
410 |     -webkit-transform: scale(0);
411 |             transform: scale(0);
412 |   }
413 |   100%, 96.47059% {
414 |     -webkit-transform: scale(1);
415 |             transform: scale(1);
416 |   }
417 | }
418 | .tri:nth-child(14) {
419 |   -webkit-transform: rotate(-210deg) translateY(3.4641em) translate(2em, 3.4641em) rotate(0.5turn);
420 |           transform: rotate(-210deg) translateY(3.4641em) translate(2em, 3.4641em) rotate(0.5turn);
421 | }
422 | .tri:nth-child(14):before {
423 |   -webkit-animation-name: up-14;
424 |           animation-name: up-14;
425 | }
426 | @-webkit-keyframes up-14 {
427 |   0%, 17.35294% {
428 |     -webkit-transform: scale(0);
429 |             transform: scale(0);
430 |   }
431 |   100%, 97.35294% {
432 |     -webkit-transform: scale(1);
433 |             transform: scale(1);
434 |   }
435 | }
436 | @keyframes up-14 {
437 |   0%, 17.35294% {
438 |     -webkit-transform: scale(0);
439 |             transform: scale(0);
440 |   }
441 |   100%, 97.35294% {
442 |     -webkit-transform: scale(1);
443 |             transform: scale(1);
444 |   }
445 | }
446 | .tri:nth-child(15) {
447 |   -webkit-transform: rotate(-210deg) translateY(3.4641em) translate(4em, 0em) rotate(0turn);
448 |           transform: rotate(-210deg) translateY(3.4641em) translate(4em, 0em) rotate(0turn);
449 | }
450 | .tri:nth-child(15):before {
451 |   -webkit-animation-name: up-15;
452 |           animation-name: up-15;
453 | }
454 | @-webkit-keyframes up-15 {
455 |   0%, 18.23529% {
456 |     -webkit-transform: scale(0);
457 |             transform: scale(0);
458 |   }
459 |   100%, 98.23529% {
460 |     -webkit-transform: scale(1);
461 |             transform: scale(1);
462 |   }
463 | }
464 | @keyframes up-15 {
465 |   0%, 18.23529% {
466 |     -webkit-transform: scale(0);
467 |             transform: scale(0);
468 |   }
469 |   100%, 98.23529% {
470 |     -webkit-transform: scale(1);
471 |             transform: scale(1);
472 |   }
473 | }
474 | .tri:nth-child(16) {
475 |   -webkit-transform: rotate(-270deg) translateY(3.4641em);
476 |           transform: rotate(-270deg) translateY(3.4641em);
477 | }
478 | .tri:nth-child(16):before {
479 |   -webkit-animation-name: up-16;
480 |           animation-name: up-16;
481 | }
482 | @-webkit-keyframes up-16 {
483 |   0%, 19.11765% {
484 |     -webkit-transform: scale(0);
485 |             transform: scale(0);
486 |   }
487 |   100%, 99.11765% {
488 |     -webkit-transform: scale(1);
489 |             transform: scale(1);
490 |   }
491 | }
492 | @keyframes up-16 {
493 |   0%, 19.11765% {
494 |     -webkit-transform: scale(0);
495 |             transform: scale(0);
496 |   }
497 |   100%, 99.11765% {
498 |     -webkit-transform: scale(1);
499 |             transform: scale(1);
500 |   }
501 | }
502 | .tri:nth-child(17) {
503 |   -webkit-transform: rotate(-270deg) translateY(3.4641em) translate(2em, 3.4641em) rotate(0.5turn);
504 |           transform: rotate(-270deg) translateY(3.4641em) translate(2em, 3.4641em) rotate(0.5turn);
505 | }
506 | .tri:nth-child(17):before {
507 |   -webkit-animation-name: up-17;
508 |           animation-name: up-17;
509 | }
510 | @-webkit-keyframes up-17 {
511 |   0%, 20% {
512 |     -webkit-transform: scale(0);
513 |             transform: scale(0);
514 |   }
515 |   100%, 100% {
516 |     -webkit-transform: scale(1);
517 |             transform: scale(1);
518 |   }
519 | }
520 | @keyframes up-17 {
521 |   0%, 20% {
522 |     -webkit-transform: scale(0);
523 |             transform: scale(0);
524 |   }
525 |   100%, 100% {
526 |     -webkit-transform: scale(1);
527 |             transform: scale(1);
528 |   }
529 | }
530 | .tri:nth-child(18) {
531 |   -webkit-transform: rotate(-270deg) translateY(3.4641em) translate(4em, 0em) rotate(0turn);
532 |           transform: rotate(-270deg) translateY(3.4641em) translate(4em, 0em) rotate(0turn);
533 | }
534 | .tri:nth-child(18):before {
535 |   -webkit-animation-name: up-18;
536 |           animation-name: up-18;
537 | }
538 | @-webkit-keyframes up-18 {
539 |   0%, 20.88235% {
540 |     -webkit-transform: scale(0);
541 |             transform: scale(0);
542 |   }
543 |   100%, 100.88235% {
544 |     -webkit-transform: scale(1);
545 |             transform: scale(1);
546 |   }
547 | }
548 | @keyframes up-18 {
549 |   0%, 20.88235% {
550 |     -webkit-transform: scale(0);
551 |             transform: scale(0);
552 |   }
553 |   100%, 100.88235% {
554 |     -webkit-transform: scale(1);
555 |             transform: scale(1);
556 |   }
557 | }
558 | 


--------------------------------------------------------------------------------
/demos/loading/shrinkinghexagon.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <div id="shrinkinghexagon" class="assembly">
 3 |   <div class="tri"></div>
 4 |   <div class="tri"></div>
 5 |   <div class="tri"></div>
 6 |   <div class="tri"></div>
 7 |   <div class="tri"></div>
 8 |   <div class="tri"></div>
 9 |   <div class="tri"></div>
10 |   <div class="tri"></div>
11 |   <div class="tri"></div>
12 |   <div class="tri"></div>
13 |   <div class="tri"></div>
14 |   <div class="tri"></div>
15 |   <div class="tri"></div>
16 |   <div class="tri"></div>
17 |   <div class="tri"></div>
18 |   <div class="tri"></div>
19 |   <div class="tri"></div>
20 |   <div class="tri"></div>
21 |   <div class="hex"></div>
22 | </div>


--------------------------------------------------------------------------------
/demos/loading/simpledots.css:
--------------------------------------------------------------------------------
 1 | #simpledots{
 2 |   height: 100px;
 3 | }
 4 | .cs-loader {
 5 |   position: absolute;
 6 |   top: 0;
 7 |   left: 0;
 8 |   height: 100%;
 9 |   width: 100%;
10 | }
11 | 
12 | .cs-loader-inner {
13 |   transform: translateY(-50%);
14 |   top: 50%;
15 |   position: absolute;
16 |   width: calc(100% - 200px);
17 |   color: #FFF;
18 |   padding: 0 100px;
19 |   text-align: center;
20 | }
21 | 
22 | .cs-loader-inner label {
23 |   font-size: 20px;
24 |   opacity: 0;
25 |   display:inline-block;
26 | }
27 | 
28 | @keyframes lol {
29 |   0% {
30 |     opacity: 0;
31 |     transform: translateX(-300px);
32 |   }
33 |   33% {
34 |     opacity: 1;
35 |     transform: translateX(0px);
36 |   }
37 |   66% {
38 |     opacity: 1;
39 |     transform: translateX(0px);
40 |   }
41 |   100% {
42 |     opacity: 0;
43 |     transform: translateX(300px);
44 |   }
45 | }
46 | 
47 | @-webkit-keyframes lol {
48 |   0% {
49 |     opacity: 0;
50 |     -webkit-transform: translateX(-300px);
51 |   }
52 |   33% {
53 |     opacity: 1;
54 |     -webkit-transform: translateX(0px);
55 |   }
56 |   66% {
57 |     opacity: 1;
58 |     -webkit-transform: translateX(0px);
59 |   }
60 |   100% {
61 |     opacity: 0;
62 |     -webkit-transform: translateX(300px);
63 |   }
64 | }
65 | 
66 | .cs-loader-inner label:nth-child(6) {
67 |   -webkit-animation: lol 3s infinite ease-in-out;
68 |   animation: lol 3s infinite ease-in-out;
69 | }
70 | 
71 | .cs-loader-inner label:nth-child(5) {
72 |   -webkit-animation: lol 3s 100ms infinite ease-in-out;
73 |   animation: lol 3s 100ms infinite ease-in-out;
74 | }
75 | 
76 | .cs-loader-inner label:nth-child(4) {
77 |   -webkit-animation: lol 3s 200ms infinite ease-in-out;
78 |   animation: lol 3s 200ms infinite ease-in-out;
79 | }
80 | 
81 | .cs-loader-inner label:nth-child(3) {
82 |   -webkit-animation: lol 3s 300ms infinite ease-in-out;
83 |   animation: lol 3s 300ms infinite ease-in-out;
84 | }
85 | 
86 | .cs-loader-inner label:nth-child(2) {
87 |   -webkit-animation: lol 3s 400ms infinite ease-in-out;
88 |   animation: lol 3s 400ms infinite ease-in-out;
89 | }
90 | 
91 | .cs-loader-inner label:nth-child(1) {
92 |   -webkit-animation: lol 3s 500ms infinite ease-in-out;
93 |   animation: lol 3s 500ms infinite ease-in-out;
94 | }


--------------------------------------------------------------------------------
/demos/loading/simpledots.html:
--------------------------------------------------------------------------------
 1 | <div id="simpledots">
 2 | 	<div class="cs-loader">
 3 | 	  <div class="cs-loader-inner">
 4 | 	    <label>	●</label>
 5 | 	    <label>	●</label>
 6 | 	    <label>	●</label>
 7 | 	    <label>	●</label>
 8 | 	    <label>	●</label>
 9 | 	    <label>	●</label>
10 | 	  </div>
11 | 	</div>
12 | </div>


--------------------------------------------------------------------------------
/demos/loading/spinningflower.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |   margin: 0;
 3 |   padding: 0;
 4 | }
 5 | *,
 6 | *:after,
 7 | *:before {
 8 |   box-sizing: border-box;
 9 | }
10 | .container {
11 |   background-color: #f39c12;
12 |   height: 100px;
13 |   position: relative;
14 | }
15 | .loader {
16 |   position: absolute;
17 |   left: 50%;
18 |   top: 50%;
19 |   -webkit-transform: translate(-50%, -50%);
20 |           transform: translate(-50%, -50%);
21 | }
22 | .loader .spinnerBlock {
23 |   -webkit-animation: rotate 600ms linear 600ms infinite;
24 |           animation: rotate 600ms linear 600ms infinite;
25 |   -webkit-transform-origin: center;
26 |           transform-origin: center;
27 |   display: block;
28 |   height: 50px;
29 |   width: 50px;
30 | }
31 | .loader span {
32 |   display: block;
33 |   border: 2px solid #fff;
34 |   border-radius: 50%;
35 |   height: 100%;
36 |   width: 100%;
37 |   position: absolute;
38 |   left: 0;
39 |   top: 0;
40 | }
41 | .loader span:nth-child(1) {
42 |   border-color: #eee;
43 | }
44 | .loader span:nth-child(2) {
45 |   left: -18px;
46 |   top: 10px;
47 | }
48 | .loader span:nth-child(3) {
49 |   left: -18px;
50 |   top: -10px;
51 | }
52 | .loader span:nth-child(4) {
53 |   left: 0;
54 |   top: -18px;
55 | }
56 | .loader span:nth-child(5) {
57 |   left: 18px;
58 |   top: -10px;
59 | }
60 | .loader span:nth-child(6) {
61 |   left: 18px;
62 |   top: 10px;
63 | }
64 | .loader span:nth-child(7) {
65 |   left: 0;
66 |   top: 18px;
67 | }
68 | @-webkit-keyframes rotate {
69 |   from {
70 |     -webkit-transform: rotate(0deg);
71 |             transform: rotate(0deg);
72 |   }
73 |   to {
74 |     -webkit-transform: rotate(360deg);
75 |             transform: rotate(360deg);
76 |   }
77 | }
78 | @keyframes rotate {
79 |   from {
80 |     -webkit-transform: rotate(0deg);
81 |             transform: rotate(0deg);
82 |   }
83 |   to {
84 |     -webkit-transform: rotate(360deg);
85 |             transform: rotate(360deg);
86 |   }
87 | }
88 | 


--------------------------------------------------------------------------------
/demos/loading/spinningflower.html:
--------------------------------------------------------------------------------
 1 | <div id="spinningflower" class="container">
 2 | 	<div class="loader">
 3 | 		<div class="spinnerBlock">
 4 | 			<span></span>
 5 | 			<span></span>
 6 | 			<span></span>
 7 | 			<span></span>
 8 | 			<span></span>
 9 | 			<span></span>
10 | 			<span></span>
11 | 		</div>
12 | 	</div>
13 | </div>


--------------------------------------------------------------------------------
/demos/loading/stairs.css:
--------------------------------------------------------------------------------
  1 | 
  2 | 
  3 | .loader {
  4 |   position: relative;
  5 |   width: 75px;
  6 |   height: 100px;
  7 | }
  8 | .loader__bar {
  9 |   position: absolute;
 10 |   bottom: 0;
 11 |   width: 10px;
 12 |   height: 50%;
 13 |   background: #fff;
 14 |   -webkit-transform-origin: center bottom;
 15 |           transform-origin: center bottom;
 16 |   box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
 17 | }
 18 | .loader__bar:nth-child(1) {
 19 |   left: 0px;
 20 |   -webkit-transform: scale(1, 0.2);
 21 |           transform: scale(1, 0.2);
 22 |   -webkit-animation: barUp1 4s infinite;
 23 |           animation: barUp1 4s infinite;
 24 | }
 25 | .loader__bar:nth-child(2) {
 26 |   left: 15px;
 27 |   -webkit-transform: scale(1, 0.4);
 28 |           transform: scale(1, 0.4);
 29 |   -webkit-animation: barUp2 4s infinite;
 30 |           animation: barUp2 4s infinite;
 31 | }
 32 | .loader__bar:nth-child(3) {
 33 |   left: 30px;
 34 |   -webkit-transform: scale(1, 0.6);
 35 |           transform: scale(1, 0.6);
 36 |   -webkit-animation: barUp3 4s infinite;
 37 |           animation: barUp3 4s infinite;
 38 | }
 39 | .loader__bar:nth-child(4) {
 40 |   left: 45px;
 41 |   -webkit-transform: scale(1, 0.8);
 42 |           transform: scale(1, 0.8);
 43 |   -webkit-animation: barUp4 4s infinite;
 44 |           animation: barUp4 4s infinite;
 45 | }
 46 | .loader__bar:nth-child(5) {
 47 |   left: 60px;
 48 |   -webkit-transform: scale(1, 1);
 49 |           transform: scale(1, 1);
 50 |   -webkit-animation: barUp5 4s infinite;
 51 |           animation: barUp5 4s infinite;
 52 | }
 53 | .loader__ball {
 54 |   position: absolute;
 55 |   bottom: 10px;
 56 |   left: 0;
 57 |   width: 10px;
 58 |   height: 10px;
 59 |   background: #fff;
 60 |   border-radius: 50%;
 61 |   -webkit-animation: ball 4s infinite;
 62 |           animation: ball 4s infinite;
 63 | }
 64 | 
 65 | @-webkit-keyframes ball {
 66 |   0% {
 67 |     -webkit-transform: translate(0, 0);
 68 |             transform: translate(0, 0);
 69 |   }
 70 |   5% {
 71 |     -webkit-transform: translate(8px, -14px);
 72 |             transform: translate(8px, -14px);
 73 |   }
 74 |   10% {
 75 |     -webkit-transform: translate(15px, -10px);
 76 |             transform: translate(15px, -10px);
 77 |   }
 78 |   17% {
 79 |     -webkit-transform: translate(23px, -24px);
 80 |             transform: translate(23px, -24px);
 81 |   }
 82 |   20% {
 83 |     -webkit-transform: translate(30px, -20px);
 84 |             transform: translate(30px, -20px);
 85 |   }
 86 |   27% {
 87 |     -webkit-transform: translate(38px, -34px);
 88 |             transform: translate(38px, -34px);
 89 |   }
 90 |   30% {
 91 |     -webkit-transform: translate(45px, -30px);
 92 |             transform: translate(45px, -30px);
 93 |   }
 94 |   37% {
 95 |     -webkit-transform: translate(53px, -44px);
 96 |             transform: translate(53px, -44px);
 97 |   }
 98 |   40% {
 99 |     -webkit-transform: translate(60px, -40px);
100 |             transform: translate(60px, -40px);
101 |   }
102 |   50% {
103 |     -webkit-transform: translate(60px, 0);
104 |             transform: translate(60px, 0);
105 |   }
106 |   57% {
107 |     -webkit-transform: translate(53px, -14px);
108 |             transform: translate(53px, -14px);
109 |   }
110 |   60% {
111 |     -webkit-transform: translate(45px, -10px);
112 |             transform: translate(45px, -10px);
113 |   }
114 |   67% {
115 |     -webkit-transform: translate(37px, -24px);
116 |             transform: translate(37px, -24px);
117 |   }
118 |   70% {
119 |     -webkit-transform: translate(30px, -20px);
120 |             transform: translate(30px, -20px);
121 |   }
122 |   77% {
123 |     -webkit-transform: translate(22px, -34px);
124 |             transform: translate(22px, -34px);
125 |   }
126 |   80% {
127 |     -webkit-transform: translate(15px, -30px);
128 |             transform: translate(15px, -30px);
129 |   }
130 |   87% {
131 |     -webkit-transform: translate(7px, -44px);
132 |             transform: translate(7px, -44px);
133 |   }
134 |   90% {
135 |     -webkit-transform: translate(0, -40px);
136 |             transform: translate(0, -40px);
137 |   }
138 |   100% {
139 |     -webkit-transform: translate(0, 0);
140 |             transform: translate(0, 0);
141 |   }
142 | }
143 | 
144 | @keyframes ball {
145 |   0% {
146 |     -webkit-transform: translate(0, 0);
147 |             transform: translate(0, 0);
148 |   }
149 |   5% {
150 |     -webkit-transform: translate(8px, -14px);
151 |             transform: translate(8px, -14px);
152 |   }
153 |   10% {
154 |     -webkit-transform: translate(15px, -10px);
155 |             transform: translate(15px, -10px);
156 |   }
157 |   17% {
158 |     -webkit-transform: translate(23px, -24px);
159 |             transform: translate(23px, -24px);
160 |   }
161 |   20% {
162 |     -webkit-transform: translate(30px, -20px);
163 |             transform: translate(30px, -20px);
164 |   }
165 |   27% {
166 |     -webkit-transform: translate(38px, -34px);
167 |             transform: translate(38px, -34px);
168 |   }
169 |   30% {
170 |     -webkit-transform: translate(45px, -30px);
171 |             transform: translate(45px, -30px);
172 |   }
173 |   37% {
174 |     -webkit-transform: translate(53px, -44px);
175 |             transform: translate(53px, -44px);
176 |   }
177 |   40% {
178 |     -webkit-transform: translate(60px, -40px);
179 |             transform: translate(60px, -40px);
180 |   }
181 |   50% {
182 |     -webkit-transform: translate(60px, 0);
183 |             transform: translate(60px, 0);
184 |   }
185 |   57% {
186 |     -webkit-transform: translate(53px, -14px);
187 |             transform: translate(53px, -14px);
188 |   }
189 |   60% {
190 |     -webkit-transform: translate(45px, -10px);
191 |             transform: translate(45px, -10px);
192 |   }
193 |   67% {
194 |     -webkit-transform: translate(37px, -24px);
195 |             transform: translate(37px, -24px);
196 |   }
197 |   70% {
198 |     -webkit-transform: translate(30px, -20px);
199 |             transform: translate(30px, -20px);
200 |   }
201 |   77% {
202 |     -webkit-transform: translate(22px, -34px);
203 |             transform: translate(22px, -34px);
204 |   }
205 |   80% {
206 |     -webkit-transform: translate(15px, -30px);
207 |             transform: translate(15px, -30px);
208 |   }
209 |   87% {
210 |     -webkit-transform: translate(7px, -44px);
211 |             transform: translate(7px, -44px);
212 |   }
213 |   90% {
214 |     -webkit-transform: translate(0, -40px);
215 |             transform: translate(0, -40px);
216 |   }
217 |   100% {
218 |     -webkit-transform: translate(0, 0);
219 |             transform: translate(0, 0);
220 |   }
221 | }
222 | @-webkit-keyframes barUp1 {
223 |   0% {
224 |     -webkit-transform: scale(1, 0.2);
225 |             transform: scale(1, 0.2);
226 |   }
227 |   40% {
228 |     -webkit-transform: scale(1, 0.2);
229 |             transform: scale(1, 0.2);
230 |   }
231 |   50% {
232 |     -webkit-transform: scale(1, 1);
233 |             transform: scale(1, 1);
234 |   }
235 |   90% {
236 |     -webkit-transform: scale(1, 1);
237 |             transform: scale(1, 1);
238 |   }
239 |   100% {
240 |     -webkit-transform: scale(1, 0.2);
241 |             transform: scale(1, 0.2);
242 |   }
243 | }
244 | @keyframes barUp1 {
245 |   0% {
246 |     -webkit-transform: scale(1, 0.2);
247 |             transform: scale(1, 0.2);
248 |   }
249 |   40% {
250 |     -webkit-transform: scale(1, 0.2);
251 |             transform: scale(1, 0.2);
252 |   }
253 |   50% {
254 |     -webkit-transform: scale(1, 1);
255 |             transform: scale(1, 1);
256 |   }
257 |   90% {
258 |     -webkit-transform: scale(1, 1);
259 |             transform: scale(1, 1);
260 |   }
261 |   100% {
262 |     -webkit-transform: scale(1, 0.2);
263 |             transform: scale(1, 0.2);
264 |   }
265 | }
266 | @-webkit-keyframes barUp2 {
267 |   0% {
268 |     -webkit-transform: scale(1, 0.4);
269 |             transform: scale(1, 0.4);
270 |   }
271 |   40% {
272 |     -webkit-transform: scale(1, 0.4);
273 |             transform: scale(1, 0.4);
274 |   }
275 |   50% {
276 |     -webkit-transform: scale(1, 0.8);
277 |             transform: scale(1, 0.8);
278 |   }
279 |   90% {
280 |     -webkit-transform: scale(1, 0.8);
281 |             transform: scale(1, 0.8);
282 |   }
283 |   100% {
284 |     -webkit-transform: scale(1, 0.4);
285 |             transform: scale(1, 0.4);
286 |   }
287 | }
288 | @keyframes barUp2 {
289 |   0% {
290 |     -webkit-transform: scale(1, 0.4);
291 |             transform: scale(1, 0.4);
292 |   }
293 |   40% {
294 |     -webkit-transform: scale(1, 0.4);
295 |             transform: scale(1, 0.4);
296 |   }
297 |   50% {
298 |     -webkit-transform: scale(1, 0.8);
299 |             transform: scale(1, 0.8);
300 |   }
301 |   90% {
302 |     -webkit-transform: scale(1, 0.8);
303 |             transform: scale(1, 0.8);
304 |   }
305 |   100% {
306 |     -webkit-transform: scale(1, 0.4);
307 |             transform: scale(1, 0.4);
308 |   }
309 | }
310 | @-webkit-keyframes barUp3 {
311 |   0% {
312 |     -webkit-transform: scale(1, 0.6);
313 |             transform: scale(1, 0.6);
314 |   }
315 |   100% {
316 |     -webkit-transform: scale(1, 0.6);
317 |             transform: scale(1, 0.6);
318 |   }
319 | }
320 | @keyframes barUp3 {
321 |   0% {
322 |     -webkit-transform: scale(1, 0.6);
323 |             transform: scale(1, 0.6);
324 |   }
325 |   100% {
326 |     -webkit-transform: scale(1, 0.6);
327 |             transform: scale(1, 0.6);
328 |   }
329 | }
330 | @-webkit-keyframes barUp4 {
331 |   0% {
332 |     -webkit-transform: scale(1, 0.8);
333 |             transform: scale(1, 0.8);
334 |   }
335 |   40% {
336 |     -webkit-transform: scale(1, 0.8);
337 |             transform: scale(1, 0.8);
338 |   }
339 |   50% {
340 |     -webkit-transform: scale(1, 0.4);
341 |             transform: scale(1, 0.4);
342 |   }
343 |   90% {
344 |     -webkit-transform: scale(1, 0.4);
345 |             transform: scale(1, 0.4);
346 |   }
347 |   100% {
348 |     -webkit-transform: scale(1, 0.8);
349 |             transform: scale(1, 0.8);
350 |   }
351 | }
352 | @keyframes barUp4 {
353 |   0% {
354 |     -webkit-transform: scale(1, 0.8);
355 |             transform: scale(1, 0.8);
356 |   }
357 |   40% {
358 |     -webkit-transform: scale(1, 0.8);
359 |             transform: scale(1, 0.8);
360 |   }
361 |   50% {
362 |     -webkit-transform: scale(1, 0.4);
363 |             transform: scale(1, 0.4);
364 |   }
365 |   90% {
366 |     -webkit-transform: scale(1, 0.4);
367 |             transform: scale(1, 0.4);
368 |   }
369 |   100% {
370 |     -webkit-transform: scale(1, 0.8);
371 |             transform: scale(1, 0.8);
372 |   }
373 | }
374 | @-webkit-keyframes barUp5 {
375 |   0% {
376 |     -webkit-transform: scale(1, 1);
377 |             transform: scale(1, 1);
378 |   }
379 |   40% {
380 |     -webkit-transform: scale(1, 1);
381 |             transform: scale(1, 1);
382 |   }
383 |   50% {
384 |     -webkit-transform: scale(1, 0.2);
385 |             transform: scale(1, 0.2);
386 |   }
387 |   90% {
388 |     -webkit-transform: scale(1, 0.2);
389 |             transform: scale(1, 0.2);
390 |   }
391 |   100% {
392 |     -webkit-transform: scale(1, 1);
393 |             transform: scale(1, 1);
394 |   }
395 | }
396 | @keyframes barUp5 {
397 |   0% {
398 |     -webkit-transform: scale(1, 1);
399 |             transform: scale(1, 1);
400 |   }
401 |   40% {
402 |     -webkit-transform: scale(1, 1);
403 |             transform: scale(1, 1);
404 |   }
405 |   50% {
406 |     -webkit-transform: scale(1, 0.2);
407 |             transform: scale(1, 0.2);
408 |   }
409 |   90% {
410 |     -webkit-transform: scale(1, 0.2);
411 |             transform: scale(1, 0.2);
412 |   }
413 |   100% {
414 |     -webkit-transform: scale(1, 1);
415 |             transform: scale(1, 1);
416 |   }
417 | }
418 | 


--------------------------------------------------------------------------------
/demos/loading/stairs.html:
--------------------------------------------------------------------------------
1 | <div id="stairs" class="loader">
2 |   <div class="loader__bar"></div>
3 |   <div class="loader__bar"></div>
4 |   <div class="loader__bar"></div>
5 |   <div class="loader__bar"></div>
6 |   <div class="loader__bar"></div>
7 |   <div class="loader__ball"></div>
8 | </div>


--------------------------------------------------------------------------------
/demos/loading/test.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 |  <head>
  4 |   <script type="text/javascript">var loadingType = `Google Material Bounce`;
  5 | var text = `Now Loading...`;
  6 | var textSize = `24`;
  7 | var textColor = `#EEEEEE`;
  8 | var textPosition = `Top`;
  9 | </script>
 10 |   <style type="text/css">
 11 | .hidden{
 12 |     display: none !important;
 13 | }
 14 | </style>
 15 |   <script type="text/javascript">/**
 16 | * These functions will automatically be injected into every page that is loaded with the AutoTools Web Screen action in Tasker.
 17 | * You can use them freely in your own web screens! :)
 18 | * If you want you can copy these to your web screen for easy testing on your PC.
 19 | * Only the functions that call AutoToolsAndroid functions will not work on your PC, like the AutoTools.say function for example.
 20 | */
 21 | 
 22 | /**
 23 |  * Create base AutoTools object that will contain everything else
 24 |  */
 25 | var AutoTools = {};
 26 | 
 27 | /**
 28 |  * Send an AutoApps command from JavaScript.
 29 |  * @param {string} command - The command you want to send
 30 |  * @param {string} [prefix] - An optional prefix that will be prepended to the command. If it exists command will have the prefix=:=command format
 31 |  * @param {boolean} [hapticFeedback] - If true, will perform a short vibration with the command
 32 |  */
 33 | AutoTools.sendCommand = function(command, prefix, hapticFeedback){
 34 |     if(!command){
 35 |         return;
 36 |     }
 37 |     if(!prefix){
 38 |         prefix = null;
 39 |     }
 40 |     console.log("Sending command: " + command+";"+prefix);
 41 |     AutoToolsAndroid.sendCommand(command, prefix, hapticFeedback);
 42 | }
 43 | 
 44 | /**
 45 |  * Easily assign a command to an HTML element
 46 |  * @param {string} selector - The CSS selector for the element. For example, to specify an element with the id "link", you should pass in "#link"
 47 |  * @param {string} command - The command you want to send
 48 |  * @param {string} [prefix] - An optional prefix that will be prepended to the command. If it exists command will have the prefix=:=command format
 49 |  */
 50 | AutoTools.commandOnClick = function(selector, command, prefix){
 51 |     document.querySelector(selector).onclick = e => AutoTools.sendCommand(command, prefix);
 52 | }
 53 | /**
 54 |  * Change a color dynamically. Got it from here: https://stackoverflow.com/questions/5560248/programmatically-lighten-or-darken-a-hex-color-or-rgb-and-blend-colors
 55 |  * Example use: Have color #ff0000 (red) and want a 30% darker shade of red, would call AutoTools.shadeBlendConvert(-0.3, "#ff0000");
 56 |  */
 57 | AutoTools.shadeBlendConvert = function(p, from, to) {
 58 |     if(typeof(p)!="number"||p<-1||p>1||typeof(from)!="string"||(from[0]!='r'&&from[0]!='#')||(typeof(to)!="string"&&typeof(to)!="undefined"))return null;
 59 |     var sbcRip=function(d){
 60 |         var l=d.length,RGB=new Object();
 61 |         if(l>9){
 62 |             d=d.split(",");
 63 |             if(d.length<3||d.length>4)return null;
 64 |             RGB[0]=i(d[0].slice(4)),RGB[1]=i(d[1]),RGB[2]=i(d[2]),RGB[3]=d[3]?parseFloat(d[3]):-1;
 65 |         }else{
 66 |             if(l==8||l==6||l<4)return null;
 67 |             if(l<6)d="#"+d[1]+d[1]+d[2]+d[2]+d[3]+d[3]+(l>4?d[4]+""+d[4]:"");
 68 |             d=i(d.slice(1),16),RGB[0]=d>>16&255,RGB[1]=d>>8&255,RGB[2]=d&255,RGB[3]=l==9||l==5?r(((d>>24&255)/255)*10000)/10000:-1;
 69 |         }
 70 |         return RGB;}
 71 |     var i=parseInt,r=Math.round,h=from.length>9,h=typeof(to)=="string"?to.length>9?true:to=="c"?!h:false:h,b=p<0,p=b?p*-1:p,to=to&&to!="c"?to:b?"#000000":"#FFFFFF",f=sbcRip(from),t=sbcRip(to);
 72 |     if(!f||!t)return null;
 73 |     if(h)return "rgb("+r((t[0]-f[0])*p+f[0])+","+r((t[1]-f[1])*p+f[1])+","+r((t[2]-f[2])*p+f[2])+(f[3]<0&&t[3]<0?")":","+(f[3]>-1&&t[3]>-1?r(((t[3]-f[3])*p+f[3])*10000)/10000:t[3]<0?f[3]:t[3])+")");
 74 |     else return "#"+(0x100000000+(f[3]>-1&&t[3]>-1?r(((t[3]-f[3])*p+f[3])*255):t[3]>-1?r(t[3]*255):f[3]>-1?r(f[3]*255):255)*0x1000000+r((t[0]-f[0])*p+f[0])*0x10000+r((t[1]-f[1])*p+f[1])*0x100+r((t[2]-f[2])*p+f[2])).toString(16).slice(f[3]>-1||t[3]>-1?1:3);
 75 | };
 76 | 
 77 | /**
 78 |  * Brighten the color of a property in a CSS rule
 79 |  * @param {Object} rule - The cssRule object you want to change
 80 |  * @param {string} propertyName - The property you want to change ("background-color" for example)
 81 |  * @param {string} percent - Value from 0 to 100 you want to change
 82 |  * @param {boolean} darken - If true will darken the color instead of brightening it
 83 |  */
 84 | AutoTools.increaseBrightnessRule = function(rule, propertyName, percent, darken){
 85 |     var originalColor = rule.style.getPropertyValue(propertyName);
 86 |     if(!originalColor){
 87 |         return;
 88 |     }
 89 |     originalColor = originalColor.trim();
 90 |     var newColor = AutoTools.shadeBlendConvert(percent/100,originalColor);
 91 |     rule.style.setProperty(propertyName, newColor);
 92 |     return newColor;
 93 | };
 94 | 
 95 | /**
 96 |  * Check if the value of a Web Screen Variable was set from Tasker
 97 |  * @param {string} value - Name of the variable you want to check
 98 |  */
 99 | AutoTools.isSet = value => {
100 |     value = window[value];
101 |     if(!value){
102 |         return false;
103 |     }
104 |     var toClass = {}.toString.call(value);
105 |     if(toClass  == "[object Boolean]"){
106 |         return value;
107 |     }
108 |     return toClass  == "[object String]";
109 | };
110 | /**
111 |  * Set the value of a Web Screen variable if it hasn't been set already from Tasker
112 |  * @param {string} variable - The name of the variable you want to set
113 |  * @param {string} value - The value you want to set if it hasn't been set from Tasker
114 |  */
115 | AutoTools.setDefault = (variable, value) => {
116 |     if(!AutoTools.isSet(variable)){
117 |         window[variable] = value;
118 |     }
119 | };
120 | /**
121 |  * As above but for setting multiple values
122 |  * @param {Object} values - Object to set default values of.
123 |  * For example, using
124 |  * AutoTools.setDefault("title","My Title");
125 |  * AutoTools.setDefault("text","my text");
126 |  * Is the same as using
127 |  * AutoTools.setDefaultValues({
128 |     "title": "My Title",
129 |     "text":"my text"
130 |    });
131 |  */
132 | AutoTools.setDefaultValues = (values) => {
133 |     for(var varName in values){
134 |         var value = values[varName];
135 |         AutoTools.setDefault(varName, value);
136 |     }
137 | };
138 | 
139 | /**
140 |  * Will convert a list of comma separated Web Screen variables into a nice JSON object.
141 |  * @param {...string} fields - Names of the Web Screen Variables to convert
142 |  * For example if have
143 |  * - variable "title" with value = "Title1,Title2,Title3"
144 |  * - variable "text" with value = "text1,text2,text3"
145 |  * And use
146 |  * AutoTools.fieldsToObject("title","text");
147 |  * It'll return an array of objects like this:
148 | [
149 |     {
150 |         "title": "Title1",
151 |         "text": "Text1"
152 |     },
153 |     {
154 |         "title": "Title2",
155 |         "text": "text2"
156 |     },
157 |     {
158 |         "title": "Title3",
159 |         "text": "text3"
160 |     }
161 | ]
162 |  * This is much easier to use in JavaScript :)
163 |  */
164 | AutoTools.fieldsToObject = (...fields) => {
165 |     var first =  fields[0];
166 |     var result = [];
167 |     /*if(!AutoTools.isSet(first)){
168 |         return result;
169 |     }*/
170 |     var length = null;
171 |     var separator = ",";
172 |     if(AutoTools.isSet("itemSeparator")){
173 |         separator =  itemSeparator;
174 |     }
175 |     for(var field of fields){
176 |         if(!AutoTools.isSet(field)){
177 |             continue;
178 |         }
179 |         var value = window[field];
180 |         var split = value.split(separator);
181 |         if(length == null){
182 |             length = split.length;
183 |         }
184 |         for (var i = 0; i < length; i++) {
185 |             if(result.length<=i){
186 |                 result.push({});
187 |             }
188 |             var current = result[i];
189 |             current[field] = split[i];
190 |         }
191 |     }
192 |     return result;
193 | };
194 | 
195 | /**
196 |  * Will hide an element on the page
197 |  * @param {HTMLElement} element - The element you want to hide
198 | */
199 | AutoTools.hide = element => element.classList.add("hidden");
200 | 
201 | /**
202 |  * Will show an element on the page
203 |  * @param {HTMLElement} element - The element you want to show
204 | */
205 | AutoTools.show = element => element.classList.remove("hidden");
206 | 
207 | /**
208 |  * Will convert an array object into HTML elements on the page. It will map each property in the object with elements with the same class name. Check this page for a concrete example: https://www.dropbox.com/s/ia2m4quij24h13q/functiondemo.html?dl=1
209 |  * @param {string} rootElementsId - The ID of the HTML element where you want to insert the HTML elements
210 |  * @param {string} rootElementClass - The class of the HTML element that you want to clone for each item in the input array
211 |  * @param {Object[]} input - The array that contains properties that will be mapped to each replicated HTML element
212 |  * @param {Function} [itemTransformer] - Optional transformer that will be called for each element on the page
213 | */
214 | AutoTools.objectToElements = function(rootElementsId, rootElementClass, input, itemTransformer){
215 |     var setByClass = (root,className,value,prop) => {
216 |         var element = root.querySelector(`.${className}`);
217 |         if(!element){
218 |             return;
219 |         }
220 |         if(!value){
221 |             hide(element);
222 |             return element;
223 |         }
224 |         AutoTools.show(element);
225 |         if(!prop){
226 |             var tagName = element.tagName;
227 |             if(tagName == "IMG"){
228 |                 prop = "src";
229 |             }else if(tagName == "A"){
230 |                 prop = "href";
231 |             }else{
232 |                 prop = "innerHTML";
233 |             }
234 |         }
235 |         element[prop] = value;
236 |         return element;
237 |     };
238 |     var listRoot = document.querySelector("#"+rootElementsId);
239 |     var elementToClone = document.querySelector("."+rootElementClass);
240 |     AutoTools.hide(elementToClone);
241 |     var rootElement = elementToClone.cloneNode(true);
242 |     AutoTools.show(rootElement);
243 |     listRoot.innerHTML = "";
244 |     if(itemTransformer.onclick){
245 |         var styleNoPointerEvents = document.createElement("style");
246 |         styleNoPointerEvents.innerHTML = `
247 |         .${rootElementClass}{
248 |             cursor: pointer;
249 |         }
250 |         .${rootElementClass} *{
251 |             pointer-events: none;
252 |         }`;
253 |         document.querySelector("head").appendChild(styleNoPointerEvents);
254 |     }
255 |     for(var item of input){
256 | 
257 |         var resultElement = rootElement.cloneNode(true);
258 |         resultElement.item = item;
259 |         var itemObject = {"parent":resultElement};
260 |         for(var prop in item){
261 |             var value = item[prop];
262 |             var setElement = setByClass(resultElement,prop,value);
263 |             itemObject[prop] = {"value":value,"element":setElement};
264 |         }
265 |         if(itemTransformer){
266 |             if(itemTransformer.item){
267 |                 itemTransformer(itemObject);
268 |             }
269 |             if(itemTransformer.onclick){
270 |                 resultElement.onclick = e => itemTransformer.onclick(e.target.item);
271 |             }
272 |         }
273 |         if(itemObject.elementToAdd){
274 |             resultElement = itemObject.elementToAdd;
275 |         }
276 |         if(itemObject.elementRoot){
277 |             listRoot = itemObject.elementRoot;
278 |         }
279 |         listRoot.appendChild(resultElement);
280 |      }
281 | }
282 | /**
283 |  * Will convert Web Screen variables into HTML elements on the page. It will map each variable with elements with the same class name. Check this page for a concrete example: https://www.dropbox.com/s/ia2m4quij24h13q/functiondemo.html?dl=1
284 |  * @param {string[]} webscreenVariables - Array of variable names that you want to map to the HTML element
285 |  * @param {string} rootElementsId - The ID of the HTML element where you want to insert the HTML elements
286 |  * @param {string} rootElementClass - The class of the HTML element that you want to clone for each item in the input array
287 |  * @param {Function} [itemTransformer] - Optional transformer that will be called for each element on the page
288 |  */
289 | AutoTools.variablesToElements = function(webscreenVariables, rootElementsId, rootElementClass, itemTransformer){
290 |         var input = AutoTools.fieldsToObject(...webscreenVariables);
291 |         AutoTools.objectToElements(rootElementsId,rootElementClass, input, itemTransformer);
292 | }
293 | /**
294 |  * Will say some text out loud on your Android device
295 |  * @param {string} text - Text you want to say
296 |  * @param {string} [language] - Optional language. Will default to your device's language
297 |  */
298 | AutoTools.say = (text,language) => AutoToolsAndroid.say(text,language);
299 | /**
300 |  * Will return info about the user that's logged in to AutoTools (usually you). Try it here with the "userId" set to "me" to see what kind of output you get: https://developers.google.com/+/web/api/rest/latest/people/get
301 |  */
302 | AutoTools.getUserInfo = () => JSON.parse(AutoToolsAndroid.getUserInfo());
303 | /**
304 |  * Will make your phone vibrate with the given vibration pattern.
305 |  * @param {string} vibration - Vibration Pattern. Same as Tasker's vibrate pattern
306 |  */
307 | AutoTools.vibrate = (vibration) => JSON.parse(AutoToolsAndroid.vibrate(vibration));
308 | /**
309 |  * Will make your phone vibrate shortly
310 |  */
311 | AutoTools.hapticFeedback = () => JSON.parse(AutoToolsAndroid.hapticFeedback());
312 | </script> 
313 |   <style type="text/css" id="bodystylesheet">
314 |         body{
315 |             border: 0px;
316 |             margin: 0px;
317 |             display: flex;
318 |             flex-direction: column;
319 |             align-items: center;
320 |             height: 100vh;
321 |             justify-content: center;
322 |             overflow: hidden;
323 |         }
324 |         .loadingText{
325 |             color: white;
326 |         }
327 |     </style> 
328 |   <meta name="autotoolswebscreen" type="variablejs" id="loadingType" label="Loading Type" description="Choose the type of loading screen you want" defaultValue="Simple Dots" options="Simple Dots,Stairs,Bounce,Uphill,Pacman,Spinning Flower,Shrinking Hexagon,Red Vortex,Color Circles,Rotating Plane,Double Bounce,Wave,Wandering Cubes,Pulse,Chasing Dots,Three Bounce,Circle,Cube Grid,Fading Circle,Folding Cube,Google Material Bounce,Google Material Preloader" isHtmlLink="true" isCssLink="true"> 
329 |   <meta name="autotoolswebscreen" type="variablejs" id="text" group="Text" label="Loading Text" description="Text to display" defaultValue="Loading..." Hint="Loading..."> 
330 |   <meta name="autotoolswebscreen" type="variablejs" id="textSize" group="Text" label="Text Size" defaultValue="24" Hint="24"> 
331 |   <meta name="autotoolswebscreen" type="variablejs" id="textColor" group="Text" label="Text Color" defaultValue="white" Hint="white" isColor="true"> 
332 |   <meta name="autotoolswebscreen" type="variablejs" id="textPosition" group="Text" label="Text Position" defaultValue="Top" options="Top,Bottom"> 
333 |   <link rel="stylesheet" href="googlematerialbounce.css" type="text/css">
334 |  </head> 
335 |  <body>
336 |   <div class="hidden">
337 |    <#root>
338 |     <!--
339 | Copyright (c) 2017 by Noah Rocket Rezentes (http://codepen.io/rocketnoah/pen/vXdQJP)
340 | Fork of an original work by Noah Rocket Rezentes (http://codepen.io/rocketnoah/pen/JKpXzY)
341 | 
342 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
343 | 
344 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
345 | 
346 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
347 | -->
348 |     <html>
349 |      <head></head>
350 |      <body>
351 |       <div id="googlematerialbounce"> 
352 |        <div id="obj"></div> 
353 |        <div id="obj"></div> 
354 |        <div id="obj"></div> 
355 |        <div id="obj"></div> 
356 |       </div> 
357 |      </body>
358 |     </html>
359 |    </#root>
360 |   </div> 
361 |   <span id="loadingText" class="loadingText">Now Loading...</span>  
362 |   <script type="text/javascript">
363 |         AutoTools.setDefaultValues({
364 |             "text":"Loading...",
365 |             "textSize":"24",
366 |             "textColor":"white",
367 |             "textPosition":"Top"
368 |         });
369 |         loadingType = loadingType.toLowerCase().replace(new RegExp(" ", 'g'), "");
370 |         var htmlFile = loadingType+'.html';
371 |         console.log(loadingType);
372 |         /*var bodyStylesheet = document.querySelector("#bodystylesheet").cloneNode(true);
373 |         var stylesheet = document.querySelector("link[rel=stylesheet]").cloneNode(true);*/
374 |         var original = document.querySelector(".hidden");
375 |         var loading = document.querySelector("#"+loadingType).cloneNode(true);
376 |         loading.classList.remove("hidden");
377 |         original.parentNode.removeChild(original);
378 |         var body = document.querySelector("body");
379 |         body.appendChild(loading);
380 | 
381 |         var textElement = document.querySelector("#loadingText");
382 |         textElement.innerHTML = text;
383 |         textElement.style["font-size"] = textSize +"px";
384 |         textElement.style["color"] = textColor;
385 |         if(textPosition!="Top"){
386 |             textElement.parentNode.removeChild(textElement);
387 |             body.appendChild(textElement);
388 |         }
389 |     </script>  
390 |  </body>
391 | </html>


--------------------------------------------------------------------------------
/demos/loading/threebounce.css:
--------------------------------------------------------------------------------
 1 | .sk-three-bounce {
 2 |   margin: 40px auto;
 3 |   width: 80px;
 4 |   text-align: center; }
 5 |   .sk-three-bounce .sk-child {
 6 |     width: 20px;
 7 |     height: 20px;
 8 |     background-color: #FFFFFF;
 9 |     border-radius: 100%;
10 |     display: inline-block;
11 |     -webkit-animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
12 |             animation: sk-three-bounce 1.4s ease-in-out 0s infinite both; }
13 |   .sk-three-bounce .sk-bounce1 {
14 |     -webkit-animation-delay: -0.32s;
15 |             animation-delay: -0.32s; }
16 |   .sk-three-bounce .sk-bounce2 {
17 |     -webkit-animation-delay: -0.16s;
18 |             animation-delay: -0.16s; }
19 | 
20 | @-webkit-keyframes sk-three-bounce {
21 |   0%, 80%, 100% {
22 |     -webkit-transform: scale(0);
23 |             transform: scale(0); }
24 |   40% {
25 |     -webkit-transform: scale(1);
26 |             transform: scale(1); } }
27 | 
28 | @keyframes sk-three-bounce {
29 |   0%, 80%, 100% {
30 |     -webkit-transform: scale(0);
31 |             transform: scale(0); }
32 |   40% {
33 |     -webkit-transform: scale(1);
34 |             transform: scale(1); } }
35 | 


--------------------------------------------------------------------------------
/demos/loading/threebounce.html:
--------------------------------------------------------------------------------
1 | <div id="threebounce">
2 |     <div class="sk-three-bounce">
3 |         <div class="sk-child sk-bounce1"></div>
4 |         <div class="sk-child sk-bounce2"></div>
5 |         <div class="sk-child sk-bounce3"></div>
6 |     </div>
7 | </div>
8 | 


--------------------------------------------------------------------------------
/demos/loading/uphill.css:
--------------------------------------------------------------------------------
 1 | 
 2 | #uphill {
 3 |   width: 5.4em;
 4 |   height: 5.4em;    
 5 |   margin-left: 50px;
 6 | }
 7 | 
 8 | #hill {
 9 |   width: 7.1em;
10 |   height: 7.1em;
11 |   background-color: transparent;
12 |   border-left: .25em solid whitesmoke;
13 |   transform: rotate(45deg);
14 | }
15 | 
16 | #hill:after {
17 |   content: '';
18 |   width: 7.1em;
19 |   height: 7.1em;
20 | }
21 | 
22 | #box {    
23 |   position: relative;
24 |   top: 65px;
25 |   left: -35px;
26 |   width: 1em;
27 |   height: 1em;
28 |   background-color: transparent;
29 |   border: .25em solid whitesmoke;
30 |   border-radius: 15%;
31 |   transform: translate(0, -1em) rotate(-45deg);
32 |   animation: push 2.5s cubic-bezier(.79, 0, .47, .97) infinite;
33 | }
34 | 
35 | @keyframes push {
36 |   0% {
37 |     transform: translate(0, -1em) rotate(-45deg);
38 |   }
39 |   5% {
40 |     transform: translate(0, -1em) rotate(-50deg);
41 |   }
42 |   20% {
43 |     transform: translate(1em, -2em) rotate(47deg);
44 |   }
45 |   25% {
46 |     transform: translate(1em, -2em) rotate(45deg);
47 |   }
48 |   30% {
49 |     transform: translate(1em, -2em) rotate(40deg);
50 |   }
51 |   45% {
52 |     transform: translate(2em, -3em) rotate(137deg);
53 |   }
54 |   50% {
55 |     transform: translate(2em, -3em) rotate(135deg);
56 |   }
57 |   55% {
58 |     transform: translate(2em, -3em) rotate(130deg);
59 |   }
60 |   70% {
61 |     transform: translate(3em, -4em) rotate(217deg);
62 |   }
63 |   75% {
64 |     transform: translate(3em, -4em) rotate(220deg);
65 |   }
66 |   100% {
67 |     transform: translate(0, -1em) rotate(-225deg);
68 |   }
69 | }


--------------------------------------------------------------------------------
/demos/loading/uphill.html:
--------------------------------------------------------------------------------
1 | <div id="uphill">
2 |   <div id="box"></div>
3 |   <div id="hill"></div>
4 | </div>


--------------------------------------------------------------------------------
/demos/loading/wanderingcubes.css:
--------------------------------------------------------------------------------
 1 | .sk-wandering-cubes {
 2 |   margin: 40px auto;
 3 |   width: 60px;
 4 |   height: 60px;
 5 |   position: relative; }
 6 |   .sk-wandering-cubes .sk-cube {
 7 |     background-color: #FFFFFF;
 8 |     width: 10px;
 9 |     height: 10px;
10 |     position: absolute;
11 |     top: 0;
12 |     left: 0;
13 |     -webkit-animation: sk-wanderingCube 1.8s ease-in-out -1.8s infinite both;
14 |             animation: sk-wanderingCube 1.8s ease-in-out -1.8s infinite both; }
15 |   .sk-wandering-cubes .sk-cube2 {
16 |     -webkit-animation-delay: -0.9s;
17 |             animation-delay: -0.9s; }
18 | 
19 | @-webkit-keyframes sk-wanderingCube {
20 |   0% {
21 |     -webkit-transform: rotate(0deg);
22 |             transform: rotate(0deg); }
23 |   25% {
24 |     -webkit-transform: translateX(30px) rotate(-90deg) scale(0.5);
25 |             transform: translateX(30px) rotate(-90deg) scale(0.5); }
26 |   50% {
27 |     /* Hack to make FF rotate in the right direction */
28 |     -webkit-transform: translateX(30px) translateY(30px) rotate(-179deg);
29 |             transform: translateX(30px) translateY(30px) rotate(-179deg); }
30 |   50.1% {
31 |     -webkit-transform: translateX(30px) translateY(30px) rotate(-180deg);
32 |             transform: translateX(30px) translateY(30px) rotate(-180deg); }
33 |   75% {
34 |     -webkit-transform: translateX(0) translateY(30px) rotate(-270deg) scale(0.5);
35 |             transform: translateX(0) translateY(30px) rotate(-270deg) scale(0.5); }
36 |   100% {
37 |     -webkit-transform: rotate(-360deg);
38 |             transform: rotate(-360deg); } }
39 | 
40 | @keyframes sk-wanderingCube {
41 |   0% {
42 |     -webkit-transform: rotate(0deg);
43 |             transform: rotate(0deg); }
44 |   25% {
45 |     -webkit-transform: translateX(30px) rotate(-90deg) scale(0.5);
46 |             transform: translateX(30px) rotate(-90deg) scale(0.5); }
47 |   50% {
48 |     /* Hack to make FF rotate in the right direction */
49 |     -webkit-transform: translateX(30px) translateY(30px) rotate(-179deg);
50 |             transform: translateX(30px) translateY(30px) rotate(-179deg); }
51 |   50.1% {
52 |     -webkit-transform: translateX(30px) translateY(30px) rotate(-180deg);
53 |             transform: translateX(30px) translateY(30px) rotate(-180deg); }
54 |   75% {
55 |     -webkit-transform: translateX(0) translateY(30px) rotate(-270deg) scale(0.5);
56 |             transform: translateX(0) translateY(30px) rotate(-270deg) scale(0.5); }
57 |   100% {
58 |     -webkit-transform: rotate(-360deg);
59 |             transform: rotate(-360deg); } }
60 | 


--------------------------------------------------------------------------------
/demos/loading/wanderingcubes.html:
--------------------------------------------------------------------------------
1 | <div id="wanderingcubes">
2 |     <div class="sk-wandering-cubes">
3 |         <div class="sk-cube sk-cube1"></div>
4 |         <div class="sk-cube sk-cube2"></div>
5 |     </div>
6 | </div>
7 | 


--------------------------------------------------------------------------------
/demos/loading/wave.css:
--------------------------------------------------------------------------------
 1 | .sk-wave {
 2 |   margin: 40px auto;
 3 |   width: 75px;
 4 |   height: 60px;
 5 |   text-align: center;
 6 |   font-size: 10px; }
 7 |   .sk-wave .sk-rect {
 8 |     background-color: #FFFFFF;
 9 |     height: 100%;
10 |     width: 6px;
11 |     display: inline-block;
12 |     -webkit-animation: sk-waveStretchDelay 1.2s infinite ease-in-out;
13 |             animation: sk-waveStretchDelay 1.2s infinite ease-in-out; }
14 |   .sk-wave .sk-rect1 {
15 |     -webkit-animation-delay: -1.2s;
16 |             animation-delay: -1.2s; }
17 |   .sk-wave .sk-rect2 {
18 |     -webkit-animation-delay: -1.1s;
19 |             animation-delay: -1.1s; }
20 |   .sk-wave .sk-rect3 {
21 |     -webkit-animation-delay: -1s;
22 |             animation-delay: -1s; }
23 |   .sk-wave .sk-rect4 {
24 |     -webkit-animation-delay: -0.9s;
25 |             animation-delay: -0.9s; }
26 |   .sk-wave .sk-rect5 {
27 |     -webkit-animation-delay: -0.8s;
28 |             animation-delay: -0.8s; }
29 | 
30 | @-webkit-keyframes sk-waveStretchDelay {
31 |   0%, 40%, 100% {
32 |     -webkit-transform: scaleY(0.4);
33 |             transform: scaleY(0.4); }
34 |   20% {
35 |     -webkit-transform: scaleY(1);
36 |             transform: scaleY(1); } }
37 | 
38 | @keyframes sk-waveStretchDelay {
39 |   0%, 40%, 100% {
40 |     -webkit-transform: scaleY(0.4);
41 |             transform: scaleY(0.4); }
42 |   20% {
43 |     -webkit-transform: scaleY(1);
44 |             transform: scaleY(1); } }
45 | 


--------------------------------------------------------------------------------
/demos/loading/wave.html:
--------------------------------------------------------------------------------
 1 | <div id="wave">
 2 |     <div class="sk-wave">
 3 |         <div class="sk-rect sk-rect1"></div>
 4 |         <div class="sk-rect sk-rect2"></div>
 5 |         <div class="sk-rect sk-rect3"></div>
 6 |         <div class="sk-rect sk-rect4"></div>
 7 |         <div class="sk-rect sk-rect5"></div>
 8 |     </div>
 9 | </div>
10 | 


--------------------------------------------------------------------------------
/demos/updating/page.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | 	
 5 | 	<!--<script src="../../autotoolsfunctions.js"></script>
 6 | 	<link rel="stylesheet" type="text/css" href="../../autotoolsstyle.css" />-->
 7 | 
 8 | 	<meta name="autotoolswebscreen" type="variablejs" id="valueToUpdate" label="Value To Update" description="Value used to update the page" defaultValue="Some Value" hint="Some Value" />
 9 | 	
10 | 
11 | </head>
12 | <body>
13 | 	<div id="updatable"></div>
14 | </body>
15 | <script type="text/javascript">
16 | 	/*
17 | 	
18 | 	This example enables the "Update" option in the AutoTools Web Screen configuration page in Tasker.
19 | 	This happens because the "autoToolsUpdateValues" function is present on the page below.
20 | 	The following task in Tasker will make the text "initial value" show up initially and after 3 seconds the text "different value" will show.
21 | 	Test (106)
22 | 		A1: AutoTools Web Screen [ Configuration:
23 | 	Source: https://raw.githubusercontent.com/joaomgcd/AutoToolsWebScreens/master/demos/updating/page.html
24 | 	Update: true
25 | 	Value To Update: initial value 
26 | 	Timeout (Seconds):30 ] 
27 | 		A2: Wait [ MS:0 Seconds:3 Minutes:0 Hours:0 Days:0 ] 
28 | 		A3: AutoTools Web Screen [ Configuration:
29 | 	Source: https://raw.githubusercontent.com/joaomgcd/AutoToolsWebScreens/master/demos/updating/page.html
30 | 	Update: true
31 | 	Value To Update: different value 
32 | 	Timeout (Seconds):30 ] 
33 | 
34 | 	*/
35 | 
36 | 	//Sets default value in case user doesn't set it
37 | 	AutoTools.setDefaultValues({
38 | 		"valueToUpdate": "Some Value"
39 | 	});
40 | 
41 | 	//function will update the div with id "updatable" with whatever text is passed in the parameter
42 | 	var updateValue = function(value){
43 | 		document.querySelector("#updatable").innerHTML = value;
44 | 	}
45 | 
46 | 	//Because this function is present the "Update" option will appear in the Tasker configuration screen. All the values used as inputs there will be set in the "values" parameter here
47 | 	//In this example the "valueToUpdate" value is present because that's the name of the Web Screen Variable this screen has declared in the <head> section of the page
48 | 	var autoToolsUpdateValues = function(values){
49 | 		updateValue(values.valueToUpdate);
50 | 	}
51 | 	updateValue(valueToUpdate);
52 | </script>
53 | </html>


--------------------------------------------------------------------------------