Adding autoplay feature to go through the list of frameworks automati…

README.md

@@ -25,12 +25,23 @@ To use the CSS switcher, just add the following line anywhere within the body ta
 <script src="https://dohliam.github.io/dropin-minimal-css/switcher.js" type="text/javascript"></script>
 ```
 
+Alternatively, open Developer Console and enter the following code:
+
+```
+var body = document.getElementsByTagName('body')[0];
+script = document.createElement('script');
+script.type= 'text/javascript';script.src= 'https://dohliam.github.io/dropin-minimal-css/switcher.js';
+body.appendChild(script);
+```
+
 That's it! You should now be able to cycle through the different frameworks by choosing them from the dropdown at the top of the page.
 
-### Keyboard shortcut
+### Autoplay & Keyboard shortcut
 
 You can quickly switch between frameworks by pressing the [modifier key or keys on your keyboard](https://github.com/dohliam/xsampa#access-keys) + `s` to focus the switcher dropdown menu, followed by the up and down keys to move up and down the list.
 
+You can also let the script run through the list of frameworks by hit "Play" button. The button should now be focused and if you press `spacebar` anytime, the code will pause at the current theme. The +/- button makes the auto-play feature goes faster or slower.
+
 ### Bookmarklet
 
 The bookmarklet is a convenient way to preview how different CSS frameworks would look on any HTML page. Just paste the following code into your address bar to create a CSS switcher for any site:

switcher.js

@@ -19,18 +19,54 @@ function on_css_load() {
   switcher.style.backgroundColor = bgColor;
 }
 
+waittime = 1500
+play = false
+
+async function autoplay() {
+    play = !play
+    if (play) {
+        document.getElementById("autoplay").innerText='Stop';
+    } else {
+        document.getElementById("autoplay").innerText='Play';
+    }
+    currentselection=document.getElementById("switcher_dropdown").selectedIndex;
+    for (currentselection;currentselection<switcher_dropdown.length;currentselection++){
+        if (play) {
+            switch_css(switcher_dropdown[currentselection].value);
+            switcher_dropdown.value=switcher_dropdown[currentselection].value;
+            await sleep(waittime);
+        } else {
+            break;
+        }
+    }
+}
+
+function sleep(ms) {
+  return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+function faster(){
+    if (waittime > 1000){
+        waittime -= 500;
+    }
+}
+function slower(){
+    waittime += 500;
+}
+
+
 function inline_switcher() {
   switcher = document.getElementById("switcher");
   frameworks_array = frameworks.split(",");
-  select_open = '\n        <select name="switcher_dropdown" id="switcher_dropdown" accesskey="s" onchange="switch_css(this.value)">\n';
+  select_open = '\n        <select name="switcher_dropdown" style="display: inline;width: 50%;" id="switcher_dropdown" accesskey="s" onchange="switch_css(this.value)">\n';
   dropdown = select_open;
   for (i = 0; i < frameworks_array.length; i++) {
     f = frameworks_array[i];
     framework_name = capitalize(f);
     option = '          <option value="' + f + '">' + framework_name + ' CSS</option>\n';
     dropdown = dropdown + option;
   }
-  select_close = '        </select>\n      '
+  select_close = '        </select>\n <div style="display: inline;width: 50%;"> <button style="display: inline;padding: 5px;" onclick=slower()>-</button><button style="display: inline;padding: 5px;" id="autoplay" onclick=autoplay()>Play</button><button style="display: inline;padding: 5px;" onclick=faster()>+</button></div>'
   dropdown = dropdown + select_close;
   switcher.innerHTML = dropdown;
 }
@@ -47,6 +83,11 @@ function add_switcher() {
   }
 
   var new_div = document.createElement('div');
+  new_div.style.top="0px"
+  new_div.style.right="0px"
+  new_div.style.position="absolute"
+  new_div.style.display="float"
+  new_div.style.top="0px"
   new_div.id = 'switcher';
   new_div.innerHTML = '      <div>&nbsp;</div>\n      <script type="text/javascript">inline_switcher();</script>';
   document.body.prepend(new_div);
@@ -55,4 +96,4 @@ function add_switcher() {
   inline_switcher();
 
   css_link.onload = on_css_load;
-}
+}