Browse Source

working on nav events

Benoît Hubert 8 years ago
parent
commit
4c87da738d
8 changed files with 920 additions and 30 deletions
  1. 32 16
      html/index.mustache.html
  2. 28 6
      js/editor.js
  3. 115 5
      js/menu.js
  4. 69 0
      js/vendor/eventemitter.js
  5. 654 0
      js/vendor/jquery.color.js
  6. 7 0
      js/ws-events.js
  7. 2 2
      lib/indexHandlers.js
  8. 13 1
      sandboxApp.js

+ 32 - 16
html/index.mustache.html

@@ -20,7 +20,7 @@
 
         <div id="navbar">
             <button id="menu-btn" class="icon-menu"></button>
-            <a href="/">Web Sandbox</a>
+            <a id="nav-back-home" href="/">Web Sandbox</a>
         </div>
 
         <div id="nav-menus">
@@ -36,7 +36,7 @@
             <div id="menu-example" class="pure-g nav-menu">{{#menuExample}}
               <div class="pure-u-1 pure-u-md-1-2">
               <span class="cat-title">{{category.title}}</span>
-              <ul id="cat-{{category.slug}}">{{#examples}}
+              <ul data-id="{{category.slug}}">{{#examples}}
               <li><a href="/{{{slug}}}">{{title}}</a></li>{{/examples}}</ul>
             </div>{{/menuExample}}</div>
         </div>
@@ -48,31 +48,29 @@
             <div class="alert-box error">{{errorMessage}}</div>
         {{/errorMessage}}
 
-        {{#repo}}
             <div id="details-repo" data-slug="{{path}}">
+        {{#repo}}
                 <strong>{{_.collection}} </strong><span>{{title}}</span>
                 <button id="add-example-btn"><span class="icon-plus rounded"></span> {{_.add}}</button>
-            </div>
         {{/repo}}
-        {{#example}}
+            </div>
             <div id="details-example" data-slug="{{slug}}">
+        {{#example}}
                 <strong>{{_.example}} </strong><span>{{title}}</span>
-            </div>
         {{/example}}
+            </div>
 
-        {{#showControls}}
             <form id="add-example-form" style="display: none;">
                 <input type="text" name="title" class="input-sm" value="" placeholder="{{_.exampleName}}" required />
                 <button type="button" id="add-example-cancel" class="icon-cross rounded red"></button><!--
                 --><button type="submit" id="add-example-save" class="icon-checkmark rounded green"></button>
             </form>
             <!-- <button id="save-changes" class="icon-cloud-upload green"></button> -->
-        {{/showControls}}
 
         </div>
 
-        {{#showEditor}}
-        <div id="editor-wrapper">
+        
+        <div id="editor-wrapper"{{^showEditor}} style="display: none";{{/showEditor}}>
             <ul id="tabs">{{#files}}
                 <li class="tab-{{type}}" data-type="{{type}}">{{name}}</li>
             {{/files}}
@@ -84,7 +82,6 @@
         <script type="text/html" id="editor-javascript"></script>
         <script type="text/html" id="editor-html"></script>
         <script type="text/html" id="editor-css"></script>
-        {{/showEditor}}
         <!-- <button id="revert-editor">!</button> -->
     </div>
 
@@ -94,23 +91,42 @@
     <iframe class="panel-right" src="/html/start-iframe.html"></iframe>
 </div>
 
+{{=<% %>=}}
+<script id="menu-example-tmpl" type="text/x-mustache-tmpl">
+{{#menuExample}}
+  <div class="pure-u-1 pure-u-md-1-2">
+  <span class="cat-title">{{category.title}}</span>
+  <ul data-id="{{category.slug}}">{{#examples}}
+  <li><a href="/{{{slug}}}">{{title}}</a></li>{{/examples}}</ul>
+</div>{{/menuExample}}
+</script>
+<%={{ }}=%>
+
+<!-- Vendor scripts -->
+<script src="/js/vendor/eventemitter.js"></script>
 <script src="/js/vendor/modernizr-3.5.0.min.js"></script>
 <script src="/js/vendor/jquery-3.2.1.min.js" ></script>
 <script src="/js/vendor/jquery-resizable.min.js" ></script>
+<script src="/js/vendor/jquery.color.js" ></script>
 <!-- <script src="/js/vendor/qunit-2.4.1.js" ></script> -->
+<script src="/js/vendor/mustache.min.js" ></script>
 <script src="/js/vendor/lodash.min.js" ></script>
 <script src="/js/vendor/loadJS.js" ></script>
 <script src="/js/plugins.js"></script>
 <script src="/js/main.js"></script>
+
+<!-- WS scripts -->
+<script id="inline-js-data">
+window._ws = {
+  files: {{{filesJSON}}}
+};
+</script>
+<script src="/js/ws-events.js"></script>
 <script src="/js/menu.js"></script>
-{{#showEditor}}
+<!-- <script src="/js/ws-navigator.js"></script> -->
 <script src="/js/vendor/ace/ace.js" type="text/javascript" charset="utf-8"></script>
 <script src="/js/req-promise.js"></script>
 <script src="/js/editor-local-storage.js"></script>
-<script id="inline-js-data">
-window._webSandboxFiles = {{{filesJSON}}};
-</script>
 <script src="/js/editor.js"></script>
-{{/showEditor}}
 </body>
 </html>

+ 28 - 6
js/editor.js

@@ -1,6 +1,7 @@
 "use strict";
 $(document).ready(function() {
 
+  var $editorWrapper = $('#editor-wrapper');
   var $editor        = $('#editor');
   var $editorJs      = $('#editor-javascript');
   var $editorHtml    = $('#editor-html');
@@ -35,7 +36,22 @@ $(document).ready(function() {
     html: 'html', js: 'javascript', css: 'css'
   }
 
-  if(_webSandboxFiles.length === 0) {
+  console.log('log events from editor', _ws);
+  _ws.events.on('navToRoot', function() {
+    $editorWrapper.hide();
+    $detailsRepo.hide();
+    $detailsExmp.hide();
+  });
+
+  _ws.events.on('navToRepo', function(repoSlug) {
+    console.log('got navToRepo', repoSlug);
+    $editorWrapper.hide();
+    $detailsRepo.hide();
+    $detailsExmp.hide();
+
+  });
+
+  if(_ws.files.length === 0) {
     return;
   }
 
@@ -68,9 +84,9 @@ $(document).ready(function() {
     editor.setTheme("ace/theme/eclipse");
     editor.$blockScrolling = Infinity;
     editorSession.setUseWrapMode(true);
-    if(_webSandboxFiles) {
+    if(_ws.files) {
       editorSession.setMode("ace/mode/html");
-      var firstHtml = _webSandboxFiles.find(f => (f.type === 'html'));
+      var firstHtml = _ws.files.find(f => (f.type === 'html'));
       editorSession.setValue(firstHtml.content);
     }
   }
@@ -84,7 +100,7 @@ $(document).ready(function() {
     var type = clickedItem.data('type');
     editorSession.setMode("ace/mode/" + mapTypes[type]);
     var name = clickedItem.html();
-    var file = _webSandboxFiles.find(f => (f.name === name));
+    var file = _ws.files.find(f => (f.name === name));
     editorSession.setValue(file.content);
     // saveToLocalStorage();
     // var mode = $(this).prop('id').substr(5);
@@ -279,9 +295,11 @@ $(document).ready(function() {
       clearAndCloseEditor();
       // $fileSelect.append(makeFileSelectOption(example));
       // $fileSelect.val(example.slug);
-      var $exMenuItem = $('<li><a href="/' + repoSlug + example.slug + '">' + example.title + '</a></li>')
-      .appendTo( $('#cat-' + example.category) );
+      
+      // var $exMenuItem = $('<li><a href="/' + repoSlug + '/' + example.slug + '">' + example.title + '</a></li>')
+      // .appendTo( $('#cat-' + example.category) );
       notify('success', "Exemple créé !");
+      // navigateTo('/'+ repoSlug + '/' + example.slug);
     })
     .catch(errText => notify('error', 'Erreur: ' + errText));
   }
@@ -291,6 +309,10 @@ $(document).ready(function() {
     toggleEditor();
   }
 
+  // function navigateTo(path) {
+  //   history.pushState({}, 'pouet', path)
+  // }
+
   // function revertEditor() {
   //   editorStorage.reset();
   //   location.reload();

+ 115 - 5
js/menu.js

@@ -1,8 +1,118 @@
 "use strict";
-$(document).ready(function() {
+(function($) {
+  $(document).ready(function() {
 
-  $('#menu-btn').click(() => {
-    $('#nav-menus').toggleClass('in');
-  });
+    function SandboxNavigator() {
+      this.$menu = $('#nav-menus');
+      this.$menuBtn = $('#menu-btn');
+      this.$menuExample = $('#menu-example');
+      this.$menuBtn.click(this.toggleMenu.bind(this));
+      this.$links = $('#nav-menus a,#nav-back-home');
+      this.init();
+    }
+
+    SandboxNavigator.prototype.init = function() {
+      this.nav = this.parsePath();
+      this.bindAllLinksEvents();
+    };
+
+    SandboxNavigator.prototype.toggleMenu = function() {
+      this.$menu.toggleClass('in');
+    };
+
+    SandboxNavigator.prototype.bindAllLinksEvents = function() {
+      this.$links.each(this.bindLinkEvents.bind(this));
+    };
+
+    SandboxNavigator.prototype.bindLinkEvents = function(idx, linkEl) {
+      var self = this;
+      $(linkEl).click(function(e) {
+        var $link = $(this);
+        e.preventDefault();
+        var originalColor = $link.css('backgroundColor');
+        self.toggleMenu();
+        $link.animate({
+          backgroundColor: '#aaa',
+        }, 70);
+        $link.animate({
+          backgroundColor: originalColor,
+        }, 70);
+        self.navigateTo($link.prop('href'));
+      });
+    };
+
+    SandboxNavigator.prototype.parsePath = function() {
+      const path = window.location.pathname.substr(1);
+      const bits = path.split('/');
+      return {
+        repo: bits[0],
+        example: bits.length === 1 ? '' : bits[1]
+      };
+    };
+
+
+    SandboxNavigator.prototype.navigateTo = function(path) {
+      history.pushState({}, 'New path', path);
+      var oldNav = this.nav;
+      this.nav = this.parsePath();
+      console.log(this.nav, oldNav);
+      if(this.nav.repo === oldNav.repo && this.nav.example === oldNav.example) {
+        console.log('nav: nop');
+      }
+      // else if(this.nav.repo !== oldNav.repo && this.nav.example !== oldNav.example) {
+      //   console.log('nav: repo&example');
+      // }
+      else if(this.nav.repo === oldNav.repo) {
+        if(this.nav.example === '') {
+          console.log('nav: example empty');
+          console.log(_ws.events);
+          _ws.events.emit('navToRepoRoot');
+        }
+        else {
+          console.log('nav: example changed');
+          _ws.events.emit('navToExample', this.nav.repo); 
+        }
+      }
+      else if(this.nav.example === oldNav.example) {
+        if(this.nav.repo === '') {
+          console.log('nav: repo empty');
+          _ws.events.emit('navToRoot');
+        }
+        else {
+          console.log('nav: repo changed');
+          _ws.events.emit('navToRepo', this.nav.repo);
+          rp.get('/parts/' + this.nav.repo, 'json')
+          .then(function(parts) {
+            renderMenuExample(parts.menuExample);
+          });
+        }
+      }
 
-});
+    };
+
+
+    function renderMenuExample(menuExample) {
+      var tmpl = $('#menu-example-tmpl').html();
+      console.log(tmpl);
+      $('#menu-example').html( Mustache.render( tmpl, { menuExample: menuExample } ) );
+    }
+
+    window._ws.navigator = new SandboxNavigator();
+    console.log('navigator init', _ws);
+
+    //     var $exMenuItem = $('<li><a href="/' + repoSlug + '/' + example.slug + '">' + example.title + '</a></li>')
+    //     .appendTo( $('#cat-' + example.category) );
+    //     notify('success', "Exemple créé !");
+    //     navigateTo('/'+ repoSlug + '/' + example.slug);
+    //   })
+    //   .catch(errText => notify('error', 'Erreur: ' + errText));
+    // }
+
+    // function clearAndCloseEditor() {
+    //   $exampleFormIn.val('');
+    //   toggleEditor();
+    // }
+
+
+  });
+})(jQuery);

+ 69 - 0
js/vendor/eventemitter.js

@@ -0,0 +1,69 @@
+/* Polyfill indexOf. */
+var indexOf;
+
+if (typeof Array.prototype.indexOf === 'function') {
+    indexOf = function (haystack, needle) {
+        return haystack.indexOf(needle);
+    };
+} else {
+    indexOf = function (haystack, needle) {
+        var i = 0, length = haystack.length, idx = -1, found = false;
+
+        while (i < length && !found) {
+            if (haystack[i] === needle) {
+                idx = i;
+                found = true;
+            }
+
+            i++;
+        }
+
+        return idx;
+    };
+};
+
+
+/* Polyfill EventEmitter. */
+var EventEmitter = function () {
+    this.events = {};
+};
+
+EventEmitter.prototype.on = function (event, listener) {
+    if (typeof this.events[event] !== 'object') {
+        this.events[event] = [];
+    }
+
+    this.events[event].push(listener);
+};
+
+EventEmitter.prototype.removeListener = function (event, listener) {
+    var idx;
+
+    if (typeof this.events[event] === 'object') {
+        idx = indexOf(this.events[event], listener);
+
+        if (idx > -1) {
+            this.events[event].splice(idx, 1);
+        }
+    }
+};
+
+EventEmitter.prototype.emit = function (event) {
+    var i, listeners, length, args = [].slice.call(arguments, 1);
+
+    if (typeof this.events[event] === 'object') {
+        listeners = this.events[event].slice();
+        length = listeners.length;
+
+        for (i = 0; i < length; i++) {
+            listeners[i].apply(this, args);
+        }
+    }
+};
+
+EventEmitter.prototype.once = function (event, listener) {
+    this.on(event, function g () {
+        this.removeListener(event, g);
+        listener.apply(this, arguments);
+    });
+};

+ 654 - 0
js/vendor/jquery.color.js

@@ -0,0 +1,654 @@
+/*!
+ * jQuery Color Animations v@VERSION
+ * https://github.com/jquery/jquery-color
+ *
+ * Copyright jQuery Foundation and other contributors
+ * Released under the MIT license.
+ * http://jquery.org/license
+ *
+ * Date: @DATE
+ */
+
+( function( root, factory ) {
+	if ( typeof define === "function" && define.amd ) {
+
+		// AMD. Register as an anonymous module.
+		define( [ "jquery" ], factory );
+	} else if ( typeof exports === "object" ) {
+		module.exports = factory( require( "jquery" ) );
+	} else {
+		factory( root.jQuery );
+	}
+} )( this, function( jQuery, undefined ) {
+
+	var stepHooks = "backgroundColor borderBottomColor borderLeftColor borderRightColor " +
+		"borderTopColor color columnRuleColor outlineColor textDecorationColor textEmphasisColor",
+
+	// plusequals test for += 100 -= 100
+	rplusequals = /^([\-+])=\s*(\d+\.?\d*)/,
+
+	// a set of RE's that can match strings and generate color tuples.
+	stringParsers = [ {
+			re: /rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*(\d?(?:\.\d+)?)\s*)?\)/,
+			parse: function( execResult ) {
+				return [
+					execResult[ 1 ],
+					execResult[ 2 ],
+					execResult[ 3 ],
+					execResult[ 4 ]
+				];
+			}
+		}, {
+			re: /rgba?\(\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*(?:,\s*(\d?(?:\.\d+)?)\s*)?\)/,
+			parse: function( execResult ) {
+				return [
+					execResult[ 1 ] * 2.55,
+					execResult[ 2 ] * 2.55,
+					execResult[ 3 ] * 2.55,
+					execResult[ 4 ]
+				];
+			}
+		}, {
+
+			// this regex ignores A-F because it's compared against an already lowercased string
+			re: /#([a-f0-9]{2})([a-f0-9]{2})([a-f0-9]{2})/,
+			parse: function( execResult ) {
+				return [
+					parseInt( execResult[ 1 ], 16 ),
+					parseInt( execResult[ 2 ], 16 ),
+					parseInt( execResult[ 3 ], 16 )
+				];
+			}
+		}, {
+
+			// this regex ignores A-F because it's compared against an already lowercased string
+			re: /#([a-f0-9])([a-f0-9])([a-f0-9])/,
+			parse: function( execResult ) {
+				return [
+					parseInt( execResult[ 1 ] + execResult[ 1 ], 16 ),
+					parseInt( execResult[ 2 ] + execResult[ 2 ], 16 ),
+					parseInt( execResult[ 3 ] + execResult[ 3 ], 16 )
+				];
+			}
+		}, {
+			re: /hsla?\(\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*(?:,\s*(\d?(?:\.\d+)?)\s*)?\)/,
+			space: "hsla",
+			parse: function( execResult ) {
+				return [
+					execResult[ 1 ],
+					execResult[ 2 ] / 100,
+					execResult[ 3 ] / 100,
+					execResult[ 4 ]
+				];
+			}
+		} ],
+
+	// jQuery.Color( )
+	color = jQuery.Color = function( color, green, blue, alpha ) {
+		return new jQuery.Color.fn.parse( color, green, blue, alpha );
+	},
+	spaces = {
+		rgba: {
+			props: {
+				red: {
+					idx: 0,
+					type: "byte"
+				},
+				green: {
+					idx: 1,
+					type: "byte"
+				},
+				blue: {
+					idx: 2,
+					type: "byte"
+				}
+			}
+		},
+
+		hsla: {
+			props: {
+				hue: {
+					idx: 0,
+					type: "degrees"
+				},
+				saturation: {
+					idx: 1,
+					type: "percent"
+				},
+				lightness: {
+					idx: 2,
+					type: "percent"
+				}
+			}
+		}
+	},
+	propTypes = {
+		"byte": {
+			floor: true,
+			max: 255
+		},
+		"percent": {
+			max: 1
+		},
+		"degrees": {
+			mod: 360,
+			floor: true
+		}
+	},
+
+	// colors = jQuery.Color.names
+	colors,
+
+	// local aliases of functions called often
+	each = jQuery.each;
+
+// define cache name and alpha properties
+// for rgba and hsla spaces
+each( spaces, function( spaceName, space ) {
+	space.cache = "_" + spaceName;
+	space.props.alpha = {
+		idx: 3,
+		type: "percent",
+		def: 1
+	};
+} );
+
+function clamp( value, prop, allowEmpty ) {
+	var type = propTypes[ prop.type ] || {};
+
+	if ( value == null ) {
+		return ( allowEmpty || !prop.def ) ? null : prop.def;
+	}
+
+	// ~~ is an short way of doing floor for positive numbers
+	value = type.floor ? ~~value : parseFloat( value );
+
+	if ( type.mod ) {
+
+		// we add mod before modding to make sure that negatives values
+		// get converted properly: -10 -> 350
+		return ( value + type.mod ) % type.mod;
+	}
+
+	// for now all property types without mod have min and max
+	return Math.min( type.max, Math.max( 0, value ) );
+}
+
+function stringParse( string ) {
+	var inst = color(),
+		rgba = inst._rgba = [];
+
+	string = string.toLowerCase();
+
+	each( stringParsers, function( i, parser ) {
+		var parsed,
+			match = parser.re.exec( string ),
+			values = match && parser.parse( match ),
+			spaceName = parser.space || "rgba";
+
+		if ( values ) {
+			parsed = inst[ spaceName ]( values );
+
+			// if this was an rgba parse the assignment might happen twice
+			// oh well....
+			inst[ spaces[ spaceName ].cache ] = parsed[ spaces[ spaceName ].cache ];
+			rgba = inst._rgba = parsed._rgba;
+
+			// exit each( stringParsers ) here because we matched
+			return false;
+		}
+	} );
+
+	// Found a stringParser that handled it
+	if ( rgba.length ) {
+
+		// if this came from a parsed string, force "transparent" when alpha is 0
+		// chrome, (and maybe others) return "transparent" as rgba(0,0,0,0)
+		if ( rgba.join() === "0,0,0,0" ) {
+			jQuery.extend( rgba, colors.transparent );
+		}
+		return inst;
+	}
+
+	// named colors
+	return colors[ string ];
+}
+
+color.fn = jQuery.extend( color.prototype, {
+	parse: function( red, green, blue, alpha ) {
+		if ( red === undefined ) {
+			this._rgba = [ null, null, null, null ];
+			return this;
+		}
+		if ( red.jquery || red.nodeType ) {
+			red = jQuery( red ).css( green );
+			green = undefined;
+		}
+
+		var inst = this,
+			type = jQuery.type( red ),
+			rgba = this._rgba = [];
+
+		// more than 1 argument specified - assume ( red, green, blue, alpha )
+		if ( green !== undefined ) {
+			red = [ red, green, blue, alpha ];
+			type = "array";
+		}
+
+		if ( type === "string" ) {
+			return this.parse( stringParse( red ) || colors._default );
+		}
+
+		if ( type === "array" ) {
+			each( spaces.rgba.props, function( key, prop ) {
+				rgba[ prop.idx ] = clamp( red[ prop.idx ], prop );
+			} );
+			return this;
+		}
+
+		if ( type === "object" ) {
+			if ( red instanceof color ) {
+				each( spaces, function( spaceName, space ) {
+					if ( red[ space.cache ] ) {
+						inst[ space.cache ] = red[ space.cache ].slice();
+					}
+				} );
+			} else {
+				each( spaces, function( spaceName, space ) {
+					var cache = space.cache;
+					each( space.props, function( key, prop ) {
+
+						// if the cache doesn't exist, and we know how to convert
+						if ( !inst[ cache ] && space.to ) {
+
+							// if the value was null, we don't need to copy it
+							// if the key was alpha, we don't need to copy it either
+							if ( key === "alpha" || red[ key ] == null ) {
+								return;
+							}
+							inst[ cache ] = space.to( inst._rgba );
+						}
+
+						// this is the only case where we allow nulls for ALL properties.
+						// call clamp with alwaysAllowEmpty
+						inst[ cache ][ prop.idx ] = clamp( red[ key ], prop, true );
+					} );
+
+					// everything defined but alpha?
+					if ( inst[ cache ] && jQuery.inArray( null, inst[ cache ].slice( 0, 3 ) ) < 0 ) {
+
+						// use the default of 1
+						inst[ cache ][ 3 ] = 1;
+						if ( space.from ) {
+							inst._rgba = space.from( inst[ cache ] );
+						}
+					}
+				} );
+			}
+			return this;
+		}
+	},
+	is: function( compare ) {
+		var is = color( compare ),
+			same = true,
+			inst = this;
+
+		each( spaces, function( _, space ) {
+			var localCache,
+				isCache = is[ space.cache ];
+			if ( isCache ) {
+				localCache = inst[ space.cache ] || space.to && space.to( inst._rgba ) || [];
+				each( space.props, function( _, prop ) {
+					if ( isCache[ prop.idx ] != null ) {
+						same = ( isCache[ prop.idx ] === localCache[ prop.idx ] );
+						return same;
+					}
+				} );
+			}
+			return same;
+		} );
+		return same;
+	},
+	_space: function() {
+		var used = [],
+			inst = this;
+		each( spaces, function( spaceName, space ) {
+			if ( inst[ space.cache ] ) {
+				used.push( spaceName );
+			}
+		} );
+		return used.pop();
+	},
+	transition: function( other, distance ) {
+		var end = color( other ),
+			spaceName = end._space(),
+			space = spaces[ spaceName ],
+			startColor = this.alpha() === 0 ? color( "transparent" ) : this,
+			start = startColor[ space.cache ] || space.to( startColor._rgba ),
+			result = start.slice();
+
+		end = end[ space.cache ];
+		each( space.props, function( key, prop ) {
+			var index = prop.idx,
+				startValue = start[ index ],
+				endValue = end[ index ],
+				type = propTypes[ prop.type ] || {};
+
+			// if null, don't override start value
+			if ( endValue === null ) {
+				return;
+			}
+
+			// if null - use end
+			if ( startValue === null ) {
+				result[ index ] = endValue;
+			} else {
+				if ( type.mod ) {
+					if ( endValue - startValue > type.mod / 2 ) {
+						startValue += type.mod;
+					} else if ( startValue - endValue > type.mod / 2 ) {
+						startValue -= type.mod;
+					}
+				}
+				result[ index ] = clamp( ( endValue - startValue ) * distance + startValue, prop );
+			}
+		} );
+		return this[ spaceName ]( result );
+	},
+	blend: function( opaque ) {
+
+		// if we are already opaque - return ourself
+		if ( this._rgba[ 3 ] === 1 ) {
+			return this;
+		}
+
+		var rgb = this._rgba.slice(),
+			a = rgb.pop(),
+			blend = color( opaque )._rgba;
+
+		return color( jQuery.map( rgb, function( v, i ) {
+			return ( 1 - a ) * blend[ i ] + a * v;
+		} ) );
+	},
+	toRgbaString: function() {
+		var prefix = "rgba(",
+			rgba = jQuery.map( this._rgba, function( v, i ) {
+                if ( v != null ) {
+                    return v;
+                }
+				return i > 2 ? 1 : 0;
+			} );
+
+		if ( rgba[ 3 ] === 1 ) {
+			rgba.pop();
+			prefix = "rgb(";
+		}
+
+		return prefix + rgba.join() + ")";
+	},
+	toHslaString: function() {
+		var prefix = "hsla(",
+			hsla = jQuery.map( this.hsla(), function( v, i ) {
+				if ( v == null ) {
+					v = i > 2 ? 1 : 0;
+				}
+
+				// catch 1 and 2
+				if ( i && i < 3 ) {
+					v = Math.round( v * 100 ) + "%";
+				}
+				return v;
+			} );
+
+		if ( hsla[ 3 ] === 1 ) {
+			hsla.pop();
+			prefix = "hsl(";
+		}
+		return prefix + hsla.join() + ")";
+	},
+	toHexString: function( includeAlpha ) {
+		var rgba = this._rgba.slice(),
+			alpha = rgba.pop();
+
+		if ( includeAlpha ) {
+			rgba.push( ~~( alpha * 255 ) );
+		}
+
+		return "#" + jQuery.map( rgba, function( v ) {
+
+			// default to 0 when nulls exist
+			return ( "0" + ( v || 0 ).toString( 16 ) ).substr( -2 );
+		} ).join( "" );
+	},
+	toString: function() {
+		return this._rgba[ 3 ] === 0 ? "transparent" : this.toRgbaString();
+	}
+} );
+color.fn.parse.prototype = color.fn;
+
+// hsla conversions adapted from:
+// https://code.google.com/p/maashaack/source/browse/packages/graphics/trunk/src/graphics/colors/HUE2RGB.as?r=5021
+
+function hue2rgb( p, q, h ) {
+	h = ( h + 1 ) % 1;
+	if ( h * 6 < 1 ) {
+		return p + ( q - p ) * h * 6;
+	}
+	if ( h * 2 < 1 ) {
+		return q;
+	}
+	if ( h * 3 < 2 ) {
+		return p + ( q - p ) * ( ( 2 / 3 ) - h ) * 6;
+	}
+	return p;
+}
+
+spaces.hsla.to = function( rgba ) {
+	if ( rgba[ 0 ] == null || rgba[ 1 ] == null || rgba[ 2 ] == null ) {
+		return [ null, null, null, rgba[ 3 ] ];
+	}
+	var r = rgba[ 0 ] / 255,
+		g = rgba[ 1 ] / 255,
+		b = rgba[ 2 ] / 255,
+		a = rgba[ 3 ],
+		max = Math.max( r, g, b ),
+		min = Math.min( r, g, b ),
+		diff = max - min,
+		add = max + min,
+		l = add * 0.5,
+		h, s;
+
+	if ( min === max ) {
+		h = 0;
+	} else if ( r === max ) {
+		h = ( 60 * ( g - b ) / diff ) + 360;
+	} else if ( g === max ) {
+		h = ( 60 * ( b - r ) / diff ) + 120;
+	} else {
+		h = ( 60 * ( r - g ) / diff ) + 240;
+	}
+
+	// chroma (diff) == 0 means greyscale which, by definition, saturation = 0%
+	// otherwise, saturation is based on the ratio of chroma (diff) to lightness (add)
+	if ( diff === 0 ) {
+		s = 0;
+	} else if ( l <= 0.5 ) {
+		s = diff / add;
+	} else {
+		s = diff / ( 2 - add );
+	}
+	return [ Math.round( h ) % 360, s, l, a == null ? 1 : a ];
+};
+
+spaces.hsla.from = function( hsla ) {
+	if ( hsla[ 0 ] == null || hsla[ 1 ] == null || hsla[ 2 ] == null ) {
+		return [ null, null, null, hsla[ 3 ] ];
+	}
+	var h = hsla[ 0 ] / 360,
+		s = hsla[ 1 ],
+		l = hsla[ 2 ],
+		a = hsla[ 3 ],
+		q = l <= 0.5 ? l * ( 1 + s ) : l + s - l * s,
+		p = 2 * l - q;
+
+	return [
+		Math.round( hue2rgb( p, q, h + ( 1 / 3 ) ) * 255 ),
+		Math.round( hue2rgb( p, q, h ) * 255 ),
+		Math.round( hue2rgb( p, q, h - ( 1 / 3 ) ) * 255 ),
+		a
+	];
+};
+
+
+each( spaces, function( spaceName, space ) {
+	var props = space.props,
+		cache = space.cache,
+		to = space.to,
+		from = space.from;
+
+	// makes rgba() and hsla()
+	color.fn[ spaceName ] = function( value ) {
+
+		// generate a cache for this space if it doesn't exist
+		if ( to && !this[ cache ] ) {
+			this[ cache ] = to( this._rgba );
+		}
+		if ( value === undefined ) {
+			return this[ cache ].slice();
+		}
+
+		var ret,
+			type = jQuery.type( value ),
+			arr = ( type === "array" || type === "object" ) ? value : arguments,
+			local = this[ cache ].slice();
+
+		each( props, function( key, prop ) {
+			var val = arr[ type === "object" ? key : prop.idx ];
+			if ( val == null ) {
+				val = local[ prop.idx ];
+			}
+			local[ prop.idx ] = clamp( val, prop );
+		} );
+
+		if ( from ) {
+			ret = color( from( local ) );
+			ret[ cache ] = local;
+			return ret;
+		} else {
+			return color( local );
+		}
+	};
+
+	// makes red() green() blue() alpha() hue() saturation() lightness()
+	each( props, function( key, prop ) {
+
+		// alpha is included in more than one space
+		if ( color.fn[ key ] ) {
+			return;
+		}
+		color.fn[ key ] = function( value ) {
+			var local, cur, match, fn,
+				vtype = jQuery.type( value );
+
+			if ( key === "alpha" ) {
+				fn = this._hsla ? "hsla" : "rgba";
+			} else {
+				fn = spaceName;
+			}
+			local = this[ fn ]();
+			cur = local[ prop.idx ];
+
+			if ( vtype === "undefined" ) {
+				return cur;
+			}
+
+			if ( vtype === "function" ) {
+				value = value.call( this, cur );
+				vtype = jQuery.type( value );
+			}
+			if ( value == null && prop.empty ) {
+				return this;
+			}
+			if ( vtype === "string" ) {
+				match = rplusequals.exec( value );
+				if ( match ) {
+					value = cur + parseFloat( match[ 2 ] ) * ( match[ 1 ] === "+" ? 1 : -1 );
+				}
+			}
+			local[ prop.idx ] = value;
+			return this[ fn ]( local );
+		};
+	} );
+} );
+
+// add cssHook and .fx.step function for each named hook.
+// accept a space separated string of properties
+color.hook = function( hook ) {
+	var hooks = hook.split( " " );
+	each( hooks, function( i, hook ) {
+		jQuery.cssHooks[ hook ] = {
+			set: function( elem, value ) {
+				var parsed;
+
+				if ( value !== "transparent" && ( jQuery.type( value ) !== "string" || ( parsed = stringParse( value ) ) ) ) {
+					value = color( parsed || value );
+					value = value.toRgbaString();
+				}
+				elem.style[ hook ] = value;
+			}
+		};
+		jQuery.fx.step[ hook ] = function( fx ) {
+			if ( !fx.colorInit ) {
+				fx.start = color( fx.elem, hook );
+				fx.end = color( fx.end );
+				fx.colorInit = true;
+			}
+			jQuery.cssHooks[ hook ].set( fx.elem, fx.start.transition( fx.end, fx.pos ) );
+		};
+	} );
+
+};
+
+color.hook( stepHooks );
+
+jQuery.cssHooks.borderColor = {
+	expand: function( value ) {
+		var expanded = {};
+
+		each( [ "Top", "Right", "Bottom", "Left" ], function( i, part ) {
+			expanded[ "border" + part + "Color" ] = value;
+		} );
+		return expanded;
+	}
+};
+
+// Basic color names only.
+// Usage of any of the other color names requires adding yourself or including
+// jquery.color.svg-names.js.
+colors = jQuery.Color.names = {
+
+	// 4.1. Basic color keywords
+	aqua: "#00ffff",
+	black: "#000000",
+	blue: "#0000ff",
+	fuchsia: "#ff00ff",
+	gray: "#808080",
+	green: "#008000",
+	lime: "#00ff00",
+	maroon: "#800000",
+	navy: "#000080",
+	olive: "#808000",
+	purple: "#800080",
+	red: "#ff0000",
+	silver: "#c0c0c0",
+	teal: "#008080",
+	white: "#ffffff",
+	yellow: "#ffff00",
+
+	// 4.2.3. "transparent" color keyword
+	transparent: [ null, null, null, 0 ],
+
+	_default: "#ffffff"
+};
+
+} );

+ 7 - 0
js/ws-events.js

@@ -0,0 +1,7 @@
+"use strict";
+(function($) {
+  $(document).ready(function() {
+    _ws.events = new EventEmitter();
+    console.log('log events from events', _ws);
+  });
+})(jQuery);

+ 2 - 2
lib/indexHandlers.js

@@ -43,7 +43,7 @@ module.exports = function(exStore, exDir) {
     let menuExample;
     let statusCode;
 
-    // Initialize vie data
+    // Initialize view data
     let data = {
       menuRepo: exStore.getRepoMenu(),
       _: translator.getAll(locale)
@@ -120,7 +120,7 @@ module.exports = function(exStore, exDir) {
     /**
      * Get index with repo selected only
      */
-    getIndexRepo: function getIndexRepo(req, res) {
+    getIndexRepo: function(req, res) {
       renderIndex(req, true)
       .then(({ html, code }) => res.status(code).send(html));
       // const repo = exStore.getRepo(req.params.repoSlug);

+ 13 - 1
sandboxApp.js

@@ -28,6 +28,11 @@ var {
   getIndexRepo,
   getIndexExample
 }                 = require('./lib/indexHandlers')(exStore, examplesDir);
+var {
+  // getIndexBare,
+  getPartsRepo,
+  getPartsExample
+}                 = require('./lib/partHandlers')(exStore, examplesDir);
 
 
 /**
@@ -69,6 +74,11 @@ function mapObjToArray(obj, key, value) {
 }
 
 /**
+ * Get repo menu
+ */
+ app.get('/parts/:repoSlug', getPartsRepo);
+
+/**
  * Index page: render with only repo list in menu
  */
 app.get('/', getIndexBare);
@@ -84,6 +94,8 @@ app.get('/:repoSlug', getIndexRepo);
  */
 app.get('/:repoSlug/:exampleSlug', getIndexExample);
 
+
+
 /**
  * Create a new example for specified repo
  */
@@ -119,7 +131,7 @@ app.post('/:repoSlug/examples', function(req, res) {
   // Prepare files to write
   var targetDir = __dirname + '/exemples/' + repoSlug + '/' + exampleSlug;
   var files = mapObjToArray({
-    'contenu.html': '<!-- ' + title + '-->\n',
+    'example.html': '<!-- ' + title + '-->\n',
     'script.js': '// ' + title,
     'config.json': beautify(config, null, 2, 100)
   }, 'file', 'content');