[#875179] Attempt at an in editor colour picker.

2013-08-01 22:50:58 -04:00 · 2013-08-01 22:50:58 -04:00 · 15d0743877
--- a/.gitignore
+++ b/.gitignore
@ -16,3 +16,4 @@
 /local.json
 /node_modules/
 /user_published/
+bower_components/
--- a/bower.json
+++ b/bower.json
@ -0,0 +1,6 @@
+{
+  "name": "popcorn.webmaker.org",
+  "dependencies": {
+    "farbtastic": "git://github.com/mattfarina/farbtastic.git#40a18515931d8150510d1b7b823369b18b2c8f30"
+  }
+}
--- a/package.json
+++ b/package.json
@ -87,6 +87,7 @@
  },
  "dependencies": {
    "async": "0.2.9",
+    "bower": "1.1.0",
    "csslint": "0.9.10",
    "express": "3.1.0",
    "helmet": "0.0.11",
@ -117,7 +118,8 @@
    "tap": "0.4.0"
  },
  "scripts": {
-    "test": "node make check"
+    "test": "node make check",
+    "postinstall": "./node_modules/.bin/bower install"
  },
  "license": "MIT",
  "engines": {
--- a/public/css/editors.less
+++ b/public/css/editors.less
@ -353,6 +353,26 @@
    }
  }

+  .farbtastic {
+    margin: auto;
+  }
+
+  .color .value {
+    height: 32px;
+    float: left;
+  }
+
+  .color-picker {
+    height: 195px;
+    width: 200px;
+    transition: height .3s linear;
+    overflow: hidden;
+  }
+
+  .color-picker.hidden {
+    height: 0;
+  }
+
  // Textareas
  textarea {
    height: 100px;
--- a/public/src/editor/project-editor.js
+++ b/public/src/editor/project-editor.js
@ -97,14 +97,16 @@ define([ "editor/editor", "editor/base-editor",
      _this.scrollbar.update();
    }

+    function onProjectTabClick( e ) {
+      if ( !_project.isSaved || !butter.cornfield.authenticated() ) {
+        return;
+      }
+      activateProjectTab( e.target );
+    }
+
    for ( _idx = 0; _idx < _numProjectTabs; _idx++ ) {
      _projectTab = _projectTabs[ _idx ];
-      _projectTab.addEventListener( "click", function( e ) {
-        if ( !_project.isSaved || !butter.cornfield.authenticated() ) {
-          return;
-        }
-        activateProjectTab( e.target );
-      }, false );
+      _projectTab.addEventListener( "click", onProjectTabClick, false );
    }

    function updateEmbed( url ) {
--- a/public/src/editor/trackevent-editor.js
+++ b/public/src/editor/trackevent-editor.js
@ -2,6 +2,7 @@
 * If a copy of the MIT license was not distributed with this file, you can
 * obtain one at https://raw.github.com/mozilla/butter/master/LICENSE */

+/*global $*/
 define([ "util/lang", "util/keys", "util/time", "./base-editor", "ui/widget/tooltip",
          "text!layouts/trackevent-editor-defaults.html" ],
  function( LangUtils, KeysUtils, TimeUtils, BaseEditor, ToolTip,
@ -236,9 +237,9 @@ define([ "util/lang", "util/keys", "util/time", "./base-editor", "ui/widget/tool
    };

    extendObject.attachColorChangeHandler = function( element, trackEvent, propertyName, callback ) {
-      element.addEventListener( "change", function() {
-        var value = element.value,
-            message,
+
+      function updateColor( value ) {
+        var message,
            updateOptions = {},
            i,
            flag = true;
@ -277,6 +278,34 @@ define([ "util/lang", "util/keys", "util/time", "./base-editor", "ui/widget/tool
        } else {
          trackEvent.update( updateOptions );
        }
+      }
+
+      var colorPickerElement = element.querySelector( ".color-picker" ),
+          inputElement = element.querySelector( "input" ),
+          initialValue = inputElement.value,
+          colorToggle = element.querySelector( ".color-picker-toggle" ),
+          colorPicker = $.farbtastic( colorPickerElement, {
+            callback: function( value ) {
+              inputElement.value = value;
+              colorToggle.style.background = value;
+              updateColor( value );
+            },
+            height: 195,
+            width: 195
+          });
+
+      colorPicker.setColor( initialValue );
+
+      inputElement.addEventListener( "change", function() {
+        colorPicker.setColor( inputElement.value );
+      }, false );
+
+      inputElement.addEventListener( "focus", function() {
+        colorPickerElement.classList.remove( "hidden" );
+      }, false );
+
+      inputElement.addEventListener( "blur", function() {
+        colorPickerElement.classList.add( "hidden" );
      }, false );
    };

@ -664,6 +693,9 @@ define([ "util/lang", "util/keys", "util/time", "./base-editor", "ui/widget/tool
      if ( manifestEntry.type === "range" ) {
        propertyArchetypeSelector += ".range";
      }
+      if ( manifestEntry.type === "color" ) {
+        propertyArchetypeSelector += ".color";
+      }

      propertyArchetype = __defaultLayouts.querySelector( propertyArchetypeSelector ).cloneNode( true );

@ -722,8 +754,7 @@ define([ "util/lang", "util/keys", "util/time", "./base-editor", "ui/widget/tool
            editorElement.appendChild( font );
          }
        }
-      }
-      else if ( manifestEntry.elem === "textarea" ) {
+      } else if ( manifestEntry.elem === "textarea" ) {
        editorElement = propertyArchetype.querySelector( "textarea" );

        // data-manifest-key is used to update this property later on
@ -775,6 +806,16 @@ define([ "util/lang", "util/keys", "util/time", "./base-editor", "ui/widget/tool
          tooltip.setAttribute( "data-manifest-key", name );

          editorElement = propertyArchetype.querySelector( ".butter-slider" );
+        } else if ( manifestEntry.type === "color" ) {
+          editorElement = propertyArchetype;
+          // Don't print "undefined" or the like
+          if ( data ) {
+            editorElement.querySelector( "input" ).value = data;
+            editorElement.querySelector( ".color-picker-toggle" ).style.background = data;
+          }
+
+          // data-manifest-key is used to update this property later on
+          editorElement.querySelector( "input" ).setAttribute( "data-manifest-key", name );
        } else {
          editorElement = propertyArchetype.querySelector( "input" );
          if ( data ) {
@ -926,8 +967,7 @@ define([ "util/lang", "util/keys", "util/time", "./base-editor", "ui/widget/tool
        if ( ignoreManifestKeys && ignoreManifestKeys.indexOf( item ) > -1 ) {
          continue;
        }
-        element = extendObject.createManifestItem( item, manifestOptions[ item ], trackEvent.popcornOptions[ item ], trackEvent,
-                                                   options.callback );
+        element = extendObject.createManifestItem( item, manifestOptions[ item ], trackEvent.popcornOptions[ item ], trackEvent, options.callback );

        if ( element ) {
          container.appendChild( element );
--- a/public/src/layouts/trackevent-editor-defaults.html
+++ b/public/src/layouts/trackevent-editor-defaults.html
@ -40,6 +40,15 @@
  </label>
 </fieldset>

+<fieldset class="trackevent-property default input color">
+  <label class="property-name"></label>
+  <div class="butter-form-append">
+    <input class="value" type="text"/>
+    <span class="color-picker-toggle butter-unit"></span>
+  </div>
+  <div class="color-picker hidden"></div>
+</fieldset>
+
 <fieldset class="trackevent-property select">
  <label class="property-name"></label>
  <select>
--- a/public/templates/assets/editors/text/text-editor.js
+++ b/public/templates/assets/editors/text/text-editor.js
@ -59,11 +59,9 @@
            if ( updateOptions[ prop ] ) {
              pickers[ prop ].classList.remove( "butter-disabled" );
              pickers[ prop ].onclick = _trueClick;
-              pickers[ prop ].removeAttribute("disabled");
            } else {
              pickers[ prop ].classList.add( "butter-disabled" );
              pickers[ prop ].onclick = _falseClick;
-              pickers[ prop ].setAttribute( "disabled", "true" );
            }
          }
          trackEvent.update( updateOptions );
@ -99,7 +97,6 @@
                if ( !_popcornOptions.background ) {
                  option.element.classList.add( "butter-disabled" );
                  option.element.onclick = _falseClick;
-                  option.element.setAttribute( "disabled", "true" );
                }
                _this.attachColorChangeHandler( option.element, option.trackEvent, key, colorCallback );
              } else if ( key === "shadowColor" ) {
@ -108,7 +105,6 @@
                if ( !_popcornOptions.shadow ) {
                  option.element.classList.add( "butter-disabled" );
                  option.element.onclick = _falseClick;
-                  option.element.setAttribute( "disabled", "true" );
                }
                _this.attachColorChangeHandler( option.element, option.trackEvent, key, colorCallback );
              }
--- a/server.js
+++ b/server.js
@ -37,6 +37,9 @@ app.configure( function() {
  var tmpDir = path.normalize( require( "os" ).tmpDir() + "/mozilla.butter/" );

  app.use( express.logger( config.logger ) );
+  app.use( "/static/bower", express.static( path.join( __dirname, "/bower_components" ), {
+    maxAge: "31556952000" // one year
+  }));
  if ( !!config.FORCE_SSL ) {
    app.use( helmet.hsts() );
    app.enable( "trust proxy" );
--- a/views/editor.html
+++ b/views/editor.html
@ -43,6 +43,7 @@
  <script src="/src/butter.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
+  <script src="/static/bower/farbtastic/src/farbtastic.js"></script>
  <script src="/templates/assets/editors/editorhelper.js"></script>
  <script src="/templates/assets/editors/wikipedia.js"></script>
  <script src="/templates/assets/editors/popup/popup.js"></script>