colorpicker remote controll and auto apply...

Author: Thierry Charbonnel

app/index.html

@@ -58,11 +58,11 @@
 
     // load all of the dependencies asynchronously.
     $script([
-        'lib/less/less-1.3.3.min.js',
+        'lib/less/less-1.3.3.js',
         'lib/jquery/jquery-1.8.3.min.js'
     ], function() {
         $script([
-            '../twitter-bootstrap/js/bootstrap.min.js',
+            '../twitter-bootstrap/js/bootstrap.js',
             'lib/colorpicker/bootstrap-colorpicker.js'
         ], function() {
             $script([

app/js/controllers.js

@@ -53,6 +53,14 @@ function LessCtrl($scope, $http, ap_less) {
     };
     initLessVariables();
 
+    $scope.autoapplyless = false;
+    
+    $scope.autoApplyLess = function (event) {
+        if ($scope.autoapplyless){
+            var vars = ap_less.getVariables($scope);
+            less.modifyVars(vars);
+        }
+    };
 
     $scope.applyLess = function (event) {
         var vars = ap_less.getVariables($scope);
@@ -98,6 +106,10 @@ function LessCtrl($scope, $http, ap_less) {
         $scope.applyLess();
     };
 
+    $scope.upDateValue = function () {
+        
+    };
+    
     $scope.isViewLoading = false;
 
     $scope.$on('$routeChangeStart', function() {

app/js/directives.js

@@ -12,38 +12,23 @@ angular.module('bootstrapVariablesEditor.directives', []).
     }]).
 
     directive('apColorPicker',[ function() {
-        
-        return function(scope, element, attrs) {
-            
-            scope.$watch(attrs.ngModel,
-                function(value){
-                    /*
-                    lessData.variables[scope.variable.key] = value;
-                    clearTimeout(lessData.timer);
-                    lessData.timer = setTimeout(
+        return {
+            restrict: 'C',
+            link: function(scope, element, attrs) {
+                var inputChange;
+                
+                element.bind('change',  function () {
+                	if (scope.variable.value.charAt(0) == '#') {
+                        element.colorpicker('setValue', scope.variable.value);
+                    }
+                	clearTimeout(inputChange);
+                    inputChange = setTimeout(
                         function () {
-                            console.log('update');
-                            less.modifyVars(lessData.variables);
-                        }, 3000
+                            scope.$apply(attrs.colorpickerapply);
+                        }, 400
                     );
-                    */
-                }
-            );
-            
-            
-            element.bind('blur', 
-                function(event){
-                    lessData.variables[scope.variable.key] = scope.variable.value;
-                    clearTimeout(lessData.timer);
-                    lessData.timer = setTimeout(
-                        function () {
-                            console.log('update');
-                            less.modifyVars(lessData.variables);
-                        }, 100
-                    );
-                    
-                }
-            );
-            
+                });
+                
+            }
         };
     }]);

app/lib/colorpicker/bootstrap-colorpicker.js

@@ -345,15 +345,15 @@
 		}
 	}
 
-	$.fn.colorpicker = function ( option ) {
+	$.fn.colorpicker = function ( option, args ) {
 		return this.each(function () {
 			var $this = $(this),
 				data = $this.data('colorpicker'),
 				options = typeof option === 'object' && option;
 			if (!data) {
 				$this.data('colorpicker', (data = new Colorpicker(this, $.extend({}, $.fn.colorpicker.defaults,options))));
 			}
-			if (typeof option === 'string') data[option]();
+			if (typeof option === 'string') data[option](args);
 		});
 	};
 

app/partials/editor.html

@@ -2,6 +2,7 @@
     <div class="navbar navbar-fixed-bottom" id="menuBottom" class="isEditor">
         <ul>
             <li><button class="btn btn-primary" ng-click="applyLess()">Apply</button></li>
+            <li><label class="checkbox"><input type="checkbox" name="cssAutoapplyless" data-ng-model="autoapplyless">Auto</label></li>
             <li><button class="btn btn-info" ng-click="saveLessVariables()">Save Less Variables</button></li>
             <li><button class="btn btn-success" ng-click="saveCSS()">Save CSS</button></li>
             <li><label class="checkbox"><input type="checkbox" name="cssMinified" data-ng-model="minified">Minified</label></li>
@@ -24,7 +25,7 @@ <h2 class="groupNameTitle" id="{{ group.name }}">{{ group.name }}</h2>
                 <div class="span4">
                     <div ng-repeat="variable in group.data" class="protected">
                         <label class="labelTitle">{{variable.key}}</label></td>                
-                        <div class="input" data-color="{{ color(variable.type, variable.value) }}" data-color-format="hex" ng-class="{ 'input-append color colorpicker' : colorpicker(variable.type)}">
+                        <div data-ColorPickerApply="autoApplyLess()" class="input {' ap-color-picker: variable.value': colorpicker(variable.type)}" data-color="{{ color(variable.type, variable.value) }}" data-color-format="hex" ng-class="{'input-append color colorpicker' : colorpicker(variable.type)}">
                             <input id="appendedDropdownButton" type="text" data-ng-model="variable.value" class="span3 lessVariable">
                             <span class="add-on" ng-class="{ 'hidden' : !colorpicker(variable.type)}"><i></i></span>
                         </div>