Skip to content

Commit 5335249

Browse files
committed
add design controls
1 parent 9b2a5c2 commit 5335249

File tree

15 files changed

+1933
-7
lines changed

15 files changed

+1933
-7
lines changed

css/style.css

Lines changed: 96 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2998,7 +2998,7 @@ body.vertical .wrap .main-blocks .props-block {
29982998
}
29992999

30003000
body.vertical .wrap .main-blocks .css-block {
3001-
margin-top: 18px;
3001+
margin-top: 15px;
30023002
}
30033003

30043004
body #page-preloader {
@@ -4634,6 +4634,101 @@ body.documentation .copyright {
46344634
background: #343436;
46354635
}
46364636

4637+
.colors {
4638+
position: absolute;
4639+
left: -120px;
4640+
top: 40%;
4641+
width: 100px;
4642+
}
4643+
4644+
.colors input {
4645+
max-width: 100%;
4646+
padding: 3px 5px;
4647+
display: inline-block;
4648+
border: none;
4649+
}
4650+
4651+
.anim-element .control {
4652+
display: block;
4653+
}
4654+
4655+
.anim-element .control.hidden {
4656+
display: none !important;
4657+
}
4658+
4659+
.resizable {
4660+
border: 1px dashed #ddd;
4661+
position: relative;
4662+
min-height: 50px;
4663+
}
4664+
4665+
.handle {
4666+
width: 15px;
4667+
height: 15px;
4668+
position: absolute;
4669+
right: -20px;
4670+
top: -20px;
4671+
color: #000;
4672+
}
4673+
4674+
.ui-resizable-handle {
4675+
width: 10px;
4676+
height: 10px;
4677+
background-color: #ffffff;
4678+
border: 1px solid #000000;
4679+
position: absolute;
4680+
}
4681+
4682+
.ui-resizable-nw {
4683+
left: -5px;
4684+
top: -5px;
4685+
cursor: nw-resize;
4686+
}
4687+
4688+
.ui-resizable-ne {
4689+
top: -5px;
4690+
right: -5px;
4691+
cursor: ne-resize;
4692+
}
4693+
4694+
.ui-resizable-sw {
4695+
bottom: -5px;
4696+
left: -5px;
4697+
cursor: sw-resize;
4698+
}
4699+
4700+
.ui-resizable-se {
4701+
bottom: -5px;
4702+
right: -5px;
4703+
cursor: se-resize;
4704+
}
4705+
4706+
.ui-resizable-n {
4707+
top: -5px;
4708+
left: 50%;
4709+
cursor: n-resize;
4710+
}
4711+
4712+
.ui-resizable-s {
4713+
bottom: -5px;
4714+
left: 50%;
4715+
cursor: s-resize;
4716+
}
4717+
4718+
.ui-resizable-w {
4719+
left: -5px;
4720+
top: -webkit-calc(50% - 5px);
4721+
top: calc(50% - 5px);
4722+
cursor: w-resize;
4723+
}
4724+
4725+
.ui-resizable-e {
4726+
right: -5px;
4727+
top: -webkit-calc(50% - 5px);
4728+
top: calc(50% - 5px);
4729+
cursor: e-resize;
4730+
}
4731+
46374732
@font-face {
46384733
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");
46394734
}

index.html

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1023,13 +1023,33 @@ <h2><i class="fa fa-code" aria-hidden="true"></i> Код анімації</h2>
10231023
</div>
10241024
<!-- end .custom-el -->
10251025
<!-- start .wrapper -->
1026+
<!-- start .colors -->
1027+
1028+
<!-- end .colors -->
10261029
<div class="wrapper">
10271030
<!-- start .anim-el -->
1031+
10281032
<div class="anim-el">
1033+
10291034
<!-- start .square -->
10301035
<div class="anim-element" id="anim-element">
10311036
<img src="img/logo.png" alt="" />
10321037
<span>FIREFLY</span>
1038+
<!-- start .handle -->
1039+
<div class="colors control">
1040+
<input type="text" class="bg-color" />
1041+
<input type="text" class="color" />
1042+
</div>
1043+
<div class="control hidden handle"><i class="fa fa-undo" aria-hidden="true"></i><span class="angle"></span></div>
1044+
<!-- end .handle -->
1045+
<div class="control hidden ui-resizable-handle ui-resizable-nw"></div>
1046+
<div class="control hidden ui-resizable-handle ui-resizable-ne"></div>
1047+
<div class="control hidden ui-resizable-handle ui-resizable-sw"></div>
1048+
<div class="control hidden ui-resizable-handle ui-resizable-se"></div>
1049+
<div class="control hidden ui-resizable-handle ui-resizable-n"></div>
1050+
<div class="control hidden ui-resizable-handle ui-resizable-s"></div>
1051+
<div class="control hidden ui-resizable-handle ui-resizable-e"></div>
1052+
<div class="control hidden ui-resizable-handle ui-resizable-w"></div>
10331053
</div>
10341054
<!-- end .square -->
10351055
</div>
@@ -1160,6 +1180,10 @@ <h3>Контакти</h3>
11601180
<script src="js/modules/inputs.js"></script>
11611181
<script src="js/modules/animzone.js"></script>
11621182
<script src="js/auth.js"></script>
1183+
<!-- <script src="libs/propeller.js"></script> -->
1184+
<script src="libs/CP/colors.js"></script>
1185+
<script src="libs/CP/colorPicker.js"></script>
1186+
<!-- <script src="libs/jquery.follow-cursor.js"></script> -->
11631187

11641188
<script src="js/common.js"></script>
11651189

js/common.js

Lines changed: 48 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,7 @@ $(document).on("ready", function(){
121121
}else{
122122
$( "<style id='custom'>" + styles + "</style>" ).appendTo( "head" );
123123
}
124-
$("#anim-element").empty();
124+
$("#anim-element>*:not(.control)").remove();
125125
$("#anim-element").append($(html));
126126
});
127127

@@ -316,6 +316,53 @@ function handleFileSelect(evt) {
316316
}
317317

318318
updateTips();
319+
320+
$('.bg-color').colorPicker({
321+
doRender: "#anim-element",
322+
renderCallback: function($elm, toggled) {
323+
var bg = $(".keyframe-tab.active input[name='background-color']");
324+
if (toggled === true) { // simple, lightweight check
325+
// ... like an open callback
326+
327+
328+
if(!bg.length){
329+
$("<div class='group'> <label for=''>background-color</label><input value='#fff' name='background-color'></input></div>")
330+
.appendTo("#css-props .keyframe-tab.active");
331+
}
332+
bg.trigger("input");
333+
} else if (toggled === false) {
334+
// ... like a close callback
335+
} else {
336+
bg.val($elm.text);
337+
bg.trigger("input");
338+
$("#anim-element").css("background-color", $elm.text);
339+
};
340+
}
341+
});
342+
$('.color').colorPicker({
343+
renderCallback: function($elm, toggled) {
344+
var color = $(".keyframe-tab.active input[name='color']");
345+
if (toggled === true) { // simple, lightweight check
346+
// ... like an open callback
347+
348+
349+
if(!color.length){
350+
$("<div class='group'> <label for=''>color</label><input value='#fff' name='color'></input></div>")
351+
.appendTo("#css-props .keyframe-tab.active");
352+
}
353+
color.trigger("input");
354+
} else if (toggled === false) {
355+
// ... like a close callback
356+
} else {
357+
color.val($elm.text);
358+
color.trigger("input");
359+
$("#anim-element").css("color", $elm.text);
360+
};
361+
362+
}
363+
});
364+
365+
// $('.handle').propeller({inertia: 0, speed: 0})
319366
});
320367

321368

js/modules/animzone.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

js/modules/inputs.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)