Skip to content

Commit aa65331

Browse files
JulianPrieberJulianPrieber
committed
Improved button editor
 - Improved compatibility - Reduced bulk #411
1 parent 2d64337 commit aa65331

File tree

2 files changed

+35
-122
lines changed

2 files changed

+35
-122
lines changed

‎assets/button-editor/js/jquery.gradientPicker.js‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -27,15 +27,6 @@
2727
}
2828

2929
var browserPrefix = "";
30-
if ($.browser.mozilla) {
31-
browserPrefix = "-moz-";
32-
} else if ($.browser.webkit) {
33-
browserPrefix = "-webkit-";
34-
} else if ($.browser.opera) {
35-
browserPrefix = "-o-";
36-
} else if ($.browser.msie) {
37-
browserPrefix = "-ms-";
38-
}
3930

4031
function GradientSelection($el, opts) {
4132
this.$el = $el;

‎resources/views/studio/button-editor.blade.php‎

Lines changed: 35 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -17,137 +17,59 @@
1717
@push('sidebar-scripts')
1818
<?php function strp($urlStrp){return str_replace(array('http://', 'https://'), '', $urlStrp);} ?>
1919
<!-- start button editor -->
20-
<script>
21-
$(document).ready(function() {
22-
$('#code').click(function() {
23-
var css_text = 'padding-top : ' + button_css.padding_top + ';' + '\npadding-bottom :' + button_css.padding_bottom + ';' + '\npadding-left :' + button_css.padding_left + ';';
24-
css_text = css_text + '\npadding-right :' + button_css.padding_right + ';' + '\ncolor :' + button_css.color + ';' + '\nbackground-image :' + button_css.background_image + ';';
25-
css_text = css_text + '\nborder-radius :' + button_css.border_radius + ';' + '\nfont-size :' + button_css.font_size + ';' + '\nfont-family :' + button_css.font_family + ';';
26-
css_text = css_text + '\nborder-color :' + button_css.border_color + ';' + '\nborder-style :' + button_css.border_style + ';' + '\nborder-width :' + button_css.border_width + ';';
20+
<script>
21+
$(document).ready(function() {
22+
$('#code').click(function() {
23+
var css_text = 'color: ' + button_css.color + ';' + '\nbackground-image: ' + button_css.background_image + ';';
2724
$('#sCode').html(css_text);
2825
Rainbow.color(div, function() {
29-
document.getElementById('output').appendChild(div);
30-
});
31-
26+
document.getElementById('output').appendChild(div);
27+
});
28+
3229
$('.modal-profile').fadeIn("slow");
3330
$('.modal-lightsout').fadeTo("slow", .9);
34-
});
35-
36-
$('a.modal-close-profile, .modal-lightsout').click(function() {
31+
});
32+
33+
$('a.modal-close-profile, .modal-lightsout').click(function() {
3734
$('.modal-profile').fadeOut("slow");
3835
$('.modal-lightsout').fadeOut("slow");
39-
});
40-
41-
var $button = $("#sample");
42-
$("#ex1").gradientPicker({
36+
});
37+
38+
var $button = $("#sample");
39+
$("#ex1").gradientPicker({
4340
change: function(points, styles) {
44-
for (i = 1; i < styles.length; ++i) {
45-
$button.css("background-image", styles[i]);
46-
button_css.background_image = styles[i];
47-
}
41+
for (i = 1; i < styles.length; ++i) {
42+
$button.css("background-image", styles[i]);
43+
button_css.background_image = styles[i];
44+
}
4845
},
4946
fillDirection: "45deg",
5047
controlPoints: ["white 0%", "#888888 100%"]
51-
});
52-
53-
$('#color').ColorPicker({
54-
color: '#000000',
55-
onShow: function(colpkr) {
56-
$(colpkr).fadeIn(500);
57-
return false;
58-
},
59-
onHide: function(colpkr) {
60-
$(colpkr).fadeOut(500);
61-
return false;
62-
},
63-
onChange: function(hsb, hex, rgb) {
64-
$('#color').css('background-color', '#' + hex);
65-
document.getElementById("sample").style.color = '#' + hex;
66-
button_css.color = '#' + hex;
67-
}
68-
});
69-
70-
$('#border-color').ColorPicker({
48+
});
49+
50+
$('#color').ColorPicker({
7151
color: '#000000',
7252
onShow: function(colpkr) {
73-
$(colpkr).fadeIn(500);
74-
return false;
53+
$(colpkr).fadeIn(500);
54+
return false;
7555
},
7656
onHide: function(colpkr) {
77-
$(colpkr).fadeOut(500);
78-
return false;
57+
$(colpkr).fadeOut(500);
58+
return false;
7959
},
8060
onChange: function(hsb, hex, rgb) {
81-
$('#border-color').css('background-color', '#' + hex);
82-
document.getElementById("sample").style.borderColor = '#' + hex;
83-
button_css.border_color = '#' + hex;
61+
$('#color').css('background-color', '#' + hex);
62+
document.getElementById("sample").style.color = '#' + hex;
63+
button_css.color = '#' + hex;
8464
}
85-
});
86-
87-
document.getElementById("pdtb").onchange = $.proxy(function() {
88-
var val = document.getElementById('pdtb').value;
89-
$('#sample').css("padding-top", val + 'px');
90-
$('#sample').css("padding-bottom", val + 'px');
91-
button_css.padding_top = val + 'px';
92-
button_css.padding_bottom = val + 'px';
93-
}, document);
94-
document.getElementById("pdlr").onchange = $.proxy(function() {
95-
var val = document.getElementById('pdlr').value;
96-
$('#sample').css("padding-left", val + 'px');
97-
$('#sample').css("padding-right", val + 'px');
98-
button_css.padding_left = val + 'px';
99-
button_css.padding_right = val + 'px';
100-
}, document);
101-
document.getElementById("ftb").onchange = $.proxy(function() {
102-
var val = document.getElementById('ftb').value;
103-
$('#sample').css("font-size", val + 'px');
104-
button_css.font_size = val + 'px';
105-
}, document);
106-
document.getElementById("br").onchange = $.proxy(function() {
107-
var val = document.getElementById('br').value;
108-
$('#sample').css("border-radius", val + 'px');
109-
button_css.border_radius = val + 'px';
110-
}, document);
111-
document.getElementById("tsub").onclick = $.proxy(function() {
112-
var val = document.getElementById('text').value;
113-
$('#sample').text(val);
114-
}, document);
115-
document.getElementById("ffsub").onclick = $.proxy(function() {
116-
var font1 = document.getElementById("font-face"); // or in jQuery use: select = this;
117-
var FontFace = font1.options[font1.selectedIndex].text;
118-
document.getElementById('sample').style.fontFamily = FontFace;
119-
button_css.font_family = FontFace;
120-
}, document);
121-
document.getElementById("bssub").onclick = $.proxy(function() {
122-
var bor = document.getElementById("border-style"); // or in jQuery use: select = this;
123-
var borstyle = bor.options[bor.selectedIndex].text;
124-
document.getElementById('sample').style.borderStyle = borstyle;
125-
$('#sample').text(val);
126-
button_css.border_style = borstyle;
127-
}, document);
128-
document.getElementById("bw").onchange = $.proxy(function() {
129-
var val = document.getElementById('bw').value;
130-
$('#sample').css("border-width", val + 'px');
131-
button_css.border_width = val + 'px';
132-
}, document);
65+
});
13366
});
134-
135-
// Many of these values cannot be changed by the UI editor, so they are set to zero here. These values might get used in the future.
136-
var button_css = {
137-
padding_top: 'inherit',
138-
padding_bottom: 'inherit',
139-
color: 'inherit',
140-
background_image: 'inherit',
141-
padding_left: 'inherit',
142-
padding_right: 'inherit',
143-
border_radius: '8px',
144-
font_family: 'inherit',
145-
font_size: 'inherit',
146-
border_color: 'inherit',
147-
border_style: 'inherit',
148-
border_width: 'inherit'
149-
};
150-
</script>
67+
// Only include the necessary properties
68+
var button_css = {
69+
color: 'inherit',
70+
background_image: 'inherit'
71+
};
72+
</script>
15173

15274
<link rel="stylesheet" type="text/css" href="{{asset('assets/button-editor/styles/button-gen.css')}}">
15375
<link rel="stylesheet" href="{{asset('assets/button-editor/styles/jquery.gradientPicker.css')}}" type="text/css" />

0 commit comments

Comments
 (0)