add design controls

Author: groot007

css/style.css

@@ -2998,7 +2998,7 @@ body.vertical .wrap .main-blocks .props-block {
 }
 
 body.vertical .wrap .main-blocks .css-block {
-  margin-top: 18px;
+  margin-top: 15px;
 }
 
 body #page-preloader {
@@ -4634,6 +4634,101 @@ body.documentation .copyright {
   background: #343436;
 }
 
+.colors {
+  position: absolute;
+  left: -120px;
+  top: 40%;
+  width: 100px;
+}
+
+.colors input {
+  max-width: 100%;
+  padding: 3px 5px;
+  display: inline-block;
+  border: none;
+}
+
+.anim-element .control {
+  display: block;
+}
+
+.anim-element .control.hidden {
+  display: none !important;
+}
+
+.resizable {
+  border: 1px dashed #ddd;
+  position: relative;
+  min-height: 50px;
+}
+
+.handle {
+  width: 15px;
+  height: 15px;
+  position: absolute;
+  right: -20px;
+  top: -20px;
+  color: #000;
+}
+
+.ui-resizable-handle {
+  width: 10px;
+  height: 10px;
+  background-color: #ffffff;
+  border: 1px solid #000000;
+  position: absolute;
+}
+
+.ui-resizable-nw {
+  left: -5px;
+  top: -5px;
+  cursor: nw-resize;
+}
+
+.ui-resizable-ne {
+  top: -5px;
+  right: -5px;
+  cursor: ne-resize;
+}
+
+.ui-resizable-sw {
+  bottom: -5px;
+  left: -5px;
+  cursor: sw-resize;
+}
+
+.ui-resizable-se {
+  bottom: -5px;
+  right: -5px;
+  cursor: se-resize;
+}
+
+.ui-resizable-n {
+  top: -5px;
+  left: 50%;
+  cursor: n-resize;
+}
+
+.ui-resizable-s {
+  bottom: -5px;
+  left: 50%;
+  cursor: s-resize;
+}
+
+.ui-resizable-w {
+  left: -5px;
+  top: -webkit-calc(50% - 5px);
+  top: calc(50% - 5px);
+  cursor: w-resize;
+}
+
+.ui-resizable-e {
+  right: -5px;
+  top: -webkit-calc(50% - 5px);
+  top: calc(50% - 5px);
+  cursor: e-resize;
+}
+
 @font-face {
   font-family:"OpenSans";font-style:normal;font-weight:800;src:url("../fonts/OpenSans/OpenSansExtraBold/OpenSansExtraBold.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans/OpenSansExtraBold/OpenSansExtraBold.woff") format("woff"), url("../fonts/OpenSans/OpenSansExtraBold/OpenSansExtraBold.ttf") format("truetype");
 }

index.html

@@ -1023,13 +1023,33 @@ <h2><i class="fa fa-code" aria-hidden="true"></i> Код анімації</h2>
 		</div>
 		 <!-- end .custom-el -->
 		<!-- start .wrapper -->
+		<!-- start .colors -->
+
+		 <!-- end .colors -->
 		<div class="wrapper">
 			<!-- start .anim-el -->
+
 			<div class="anim-el">
+
 				<!-- start .square -->
 				<div class="anim-element" id="anim-element">
 					<img src="img/logo.png" alt="" />
 					<span>FIREFLY</span>
+					<!-- start .handle -->
+					<div class="colors control">
+						<input type="text" class="bg-color" />
+						<input type="text" class="color" />
+					</div>
+					<div class="control hidden handle"><i class="fa fa-undo" aria-hidden="true"></i><span class="angle"></span></div>
+					 <!-- end .handle -->
+					<div class="control  hidden ui-resizable-handle ui-resizable-nw"></div>
+				    <div class="control  hidden ui-resizable-handle ui-resizable-ne"></div>
+				    <div class="control  hidden ui-resizable-handle ui-resizable-sw"></div>
+				    <div class="control  hidden ui-resizable-handle ui-resizable-se"></div>
+				    <div class="control  hidden ui-resizable-handle ui-resizable-n"></div>
+				    <div class="control  hidden ui-resizable-handle ui-resizable-s"></div>
+				    <div class="control  hidden ui-resizable-handle ui-resizable-e"></div>
+				    <div class="control  hidden ui-resizable-handle ui-resizable-w"></div>
 				</div>
 				 <!-- end .square -->
 			</div>
@@ -1160,6 +1180,10 @@ <h3>Контакти</h3>
 	<script src="js/modules/inputs.js"></script>
 	<script src="js/modules/animzone.js"></script>
 	<script src="js/auth.js"></script>
+	<!-- <script src="libs/propeller.js"></script> -->
+	<script src="libs/CP/colors.js"></script>
+	<script src="libs/CP/colorPicker.js"></script>
+	<!-- <script src="libs/jquery.follow-cursor.js"></script> -->
 
 	<script src="js/common.js"></script>
 

js/common.js

@@ -121,7 +121,7 @@ $(document).on("ready", function(){
 	  	}else{
 	  		$( "<style id='custom'>" + styles + "</style>" ).appendTo( "head" );
 	  	}
-	  	$("#anim-element").empty();
+	  	$("#anim-element>*:not(.control)").remove();
 	  	$("#anim-element").append($(html));
 	});
 
@@ -316,6 +316,53 @@ function handleFileSelect(evt) {
 	}
 
 	updateTips();
+
+ 	$('.bg-color').colorPicker({
+ 		 doRender: "#anim-element",
+	 	renderCallback: function($elm, toggled) {
+	 		var bg = $(".keyframe-tab.active input[name='background-color']");
+	         if (toggled === true) { // simple, lightweight check
+       		 // ... like an open callback
+
+
+	    		if(!bg.length){
+	    			$("<div class='group'> <label for=''>background-color</label><input value='#fff' name='background-color'></input></div>")
+					.appendTo("#css-props .keyframe-tab.active");
+	    		}
+				bg.trigger("input");
+		    } else if (toggled === false) {
+		        // ... like a close callback
+		    } else {
+		    	bg.val($elm.text);
+		    	bg.trigger("input");
+		        $("#anim-element").css("background-color", $elm.text);
+		    };
+	    }
+	 });
+	 $('.color').colorPicker({
+	 	renderCallback: function($elm, toggled) {
+	 		var color = $(".keyframe-tab.active input[name='color']");
+	         if (toggled === true) { // simple, lightweight check
+       		 // ... like an open callback
+
+
+	    		if(!color.length){
+	    			$("<div class='group'> <label for=''>color</label><input value='#fff' name='color'></input></div>")
+					.appendTo("#css-props .keyframe-tab.active");
+	    		}
+				color.trigger("input");
+		    } else if (toggled === false) {
+		        // ... like a close callback
+		    } else {
+		    	color.val($elm.text);
+		    	color.trigger("input");
+		        $("#anim-element").css("color", $elm.text);
+		    };
+
+	    }
+	 });
+
+	// $('.handle').propeller({inertia: 0, speed: 0})
 });