adding options from querry, adding more themes and right snaping to h…

…alfscreen size
patriciogonzalezvivo · May 13, 2016 · e04e45a · e04e45a
1 parent 280aaca
commit e04e45a
Show file tree

Hide file tree

Showing 10 changed files with 104 additions and 29 deletions.
diff --git a/README.md b/README.md
@@ -58,7 +58,6 @@ This is a list of all the **options** you can set up:
 | ```watchHash```| bool | Listen to changes on the wash path to load files |```false```|
 | ```frag_header``` | string| Adds a hidden header to every shader before compiling |```""```|
 | ```frag_footer``` | string| Adds a hidden footer to every shader before compiling |```""```|
-| ```theme``` | string| Codemirror Themes |```"default"```|
 
 ## Some of the features features
 

diff --git a/build/glslEditor.css b/build/glslEditor.css
diff --git a/build/glslEditor.css.map b/build/glslEditor.css.map
diff --git a/build/glslEditor.js b/build/glslEditor.js
diff --git a/index.html b/index.html
@@ -33,6 +33,7 @@
             fileDrops: true,
     		menu: true
     	});
+        document.body.style.backgroundColor = window.getComputedStyle(glslEditor.editor.getWrapperElement(),null).getPropertyValue('background-color'); 
     </script>
     <script>
         (function(i,s,o,g,r,a,m){i["GoogleAnalyticsObject"]=r;i[r]=i[r]||function(){

diff --git a/src/css/glslEditor.css b/src/css/glslEditor.css
@@ -33,12 +33,28 @@
 @import 'codemirror/addon/hint/show-hint.css';
 
 /* Themes */
+@import 'codemirror/theme/ambiance.css';
+@import 'codemirror/theme/base16-dark.css';
+@import 'codemirror/theme/base16-light.css';
+@import 'codemirror/theme/dracula.css';
+@import 'codemirror/theme/eclipse.css';
 @import 'codemirror/theme/elegant.css';
+@import 'codemirror/theme/icecoder.css';
+@import 'codemirror/theme/lesser-dark.css';
 @import 'codemirror/theme/material.css';
+@import 'codemirror/theme/mdn-like.css';
+@import 'codemirror/theme/midnight.css';
 @import 'codemirror/theme/monokai.css';
 @import 'codemirror/theme/neat.css';
 @import 'codemirror/theme/neo.css';
+@import 'codemirror/theme/pastel-on-dark.css';
+@import 'codemirror/theme/railscasts.css';
+@import 'codemirror/theme/seti.css';
+@import 'codemirror/theme/solarized.css';
+@import 'codemirror/theme/tomorrow-night-bright.css';
+@import 'codemirror/theme/tomorrow-night-eighties.css';
 @import 'codemirror/theme/ttcn.css';
+@import 'codemirror/theme/yeti.css';
 
 /* Elements */
 @import '_menu';

diff --git a/src/js/GlslEditor.js b/src/js/GlslEditor.js
@@ -68,6 +68,7 @@ export default class GlslEditor {
         if (!this.options.imgs) {
             this.options.imgs = [];
         }
+
         if (this.container.hasAttribute('data-textures')) {
             let imgList = this.container.getAttribute('data-textures').split(',');
             for (let i in imgList) {
@@ -95,6 +96,11 @@ export default class GlslEditor {
             this.options.frag_footer = '';
         }
 
+        // Listen to hash changes
+        if (this.options.watchHash) {
+            new HashWatch(this);
+        }
+
         // Load UI
         if (this.options.menu) {
             this.menu = new Menu(this);
@@ -105,11 +111,6 @@ export default class GlslEditor {
             this.bufferManager = new BufferManager(this);
         }
 
-        // Listen to hash changes
-        if (this.options.watchHash) {
-            new HashWatch(this);
-        }
-
         // Listen to file drops
         if (this.options.fileDrops) {
             new FileDrop(this);

diff --git a/src/js/core/Shader.js b/src/js/core/Shader.js
@@ -31,6 +31,10 @@ export default class Shader {
                                                         resize: main.options.canvas_resizable,
                                                         snap: main.options.canvas_snapable 
                                                     });
-        }
+
+            if (main.options.canvas_size === 'halfscreen') {
+                this.canvasDOM.snapRight();
+            }
+        } 
     }
 }
diff --git a/src/js/io/HashWatch.js b/src/js/io/HashWatch.js
@@ -35,15 +35,26 @@ export default class HashWatch {
 
         let query = parseQuery(window.location.search.slice(1));
         if (query) {
-            if (query.log) {
-                if (this.main.bufferManager) {
-                    let logs = query.log.split(',');
-                    for (let i in logs) {
-                        this.main.open('https://thebookofshaders.com/log/' + logs[i] + '.frag', logs[i]);
+            for (let key in query) {
+                if ( key === 'log') {
+                    if (this.main.bufferManager) {
+                        let logs = query.log.split(',');
+                        for (let i in logs) {
+                            this.main.open('https://thebookofshaders.com/log/' + logs[i] + '.frag', logs[i]);
+                        }
                     }
-                }
-                else {
-                    this.main.open('https://thebookofshaders.com/log/' + query.log + '.frag', query.log);
+                    else {
+                        this.main.open('https://thebookofshaders.com/log/' + query.log + '.frag', query.log);
+                    }
+                } else {
+                    let value = query[key];
+                    if (value === 'true' || value === 'false') {
+                        value = (value == 'true');
+                    } 
+                    else if (parseFloat(value)) {
+                        value = parseFloat(value);
+                    }
+                    this.main.options[key] = value;
                 }
             }
         }

diff --git a/src/js/tools/interactiveDom.js b/src/js/tools/interactiveDom.js
@@ -253,6 +253,8 @@ export function subscribeInteractiveDom (dom, options) {
     }
     animate();
 
+
+
     function onUp(e) {
         calc(e);
 
@@ -297,5 +299,18 @@ export function subscribeInteractiveDom (dom, options) {
         clicked = null;
     }
 
+    dom.snapRight = function () {
+        var snapped = {
+            width: dom.width,
+            height: dom.height
+        };
+
+        setBounds(dom, window.innerWidth / 2, 0, window.innerWidth / 2, window.innerHeight);
+        preSnapped = snapped;
+        // hintHide();
+        dom.trigger('move', { finish: true, el: dom });
+        dom.trigger('resize', { finish: true, el: dom });
+    }
+
     return dom;
 }