definicao de layout
This commit is contained in:
1
public/assets/js/button-builder/clipboard.min.js
vendored
Normal file
1
public/assets/js/button-builder/clipboard.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
480
public/assets/js/button-builder/colorpicker.js
Normal file
480
public/assets/js/button-builder/colorpicker.js
Normal file
@@ -0,0 +1,480 @@
|
||||
|
||||
(function ($) {
|
||||
"use strict";
|
||||
var ColorPicker = function () {
|
||||
var
|
||||
ids = {},
|
||||
inAction,
|
||||
charMin = 65,
|
||||
visible,
|
||||
tpl = '<div class="colorpicker"><div class="colorpicker-color"><div><div></div></div></div><div class="colorpicker-hue"><div></div></div><div class="colorpicker-new-color" id="color_preview_box"></div><div class="colorpicker-current-color"></div><div class="colorpicker-hex"><input type="text" id="hex_code" maxlength="6" size="6" /></div><div class="colorpicker-rgb-r colorpicker-field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker-rgb-g colorpicker-field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker-rgb-b colorpicker-field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_h colorpicker-field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_s colorpicker-field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker-hsb-b colorpicker-field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker-submit"></div></div>',
|
||||
defaults = {
|
||||
eventName: 'click',
|
||||
onShow: function () {},
|
||||
onBeforeShow: function(){},
|
||||
onHide: function () {},
|
||||
onChange: function () {},
|
||||
onSubmit: function () {},
|
||||
color: 'ff0000',
|
||||
livePreview: true,
|
||||
flat: false
|
||||
},
|
||||
fillRGBFields = function (hsb, cal) {
|
||||
var rgb = HSBToRGB(hsb);
|
||||
$(cal).data('colorpicker').fields
|
||||
.eq(1).val(rgb.r).end()
|
||||
.eq(2).val(rgb.g).end()
|
||||
.eq(3).val(rgb.b).end();
|
||||
},
|
||||
fillHSBFields = function (hsb, cal) {
|
||||
$(cal).data('colorpicker').fields
|
||||
.eq(4).val(hsb.h).end()
|
||||
.eq(5).val(hsb.s).end()
|
||||
.eq(6).val(hsb.b).end();
|
||||
},
|
||||
fillHexFields = function (hsb, cal) {
|
||||
$(cal).data('colorpicker').fields
|
||||
.eq(0).val(HSBToHex(hsb)).end();
|
||||
},
|
||||
setSelector = function (hsb, cal) {
|
||||
$(cal).data('colorpicker').selector.css('backgroundColor', '#' + HSBToHex({h: hsb.h, s: 100, b: 100}));
|
||||
$(cal).data('colorpicker').selectorIndic.css({
|
||||
left: parseInt(150 * hsb.s/100, 10),
|
||||
top: parseInt(150 * (100-hsb.b)/100, 10)
|
||||
});
|
||||
},
|
||||
setHue = function (hsb, cal) {
|
||||
$(cal).data('colorpicker').hue.css('top', parseInt(150 - 150 * hsb.h/360, 10));
|
||||
},
|
||||
setCurrentColor = function (hsb, cal) {
|
||||
$(cal).data('colorpicker').currentColor.css('backgroundColor', '#' + HSBToHex(hsb));
|
||||
},
|
||||
setNewColor = function (hsb, cal) {
|
||||
$(cal).data('colorpicker').newColor.css('backgroundColor', '#' + HSBToHex(hsb));
|
||||
},
|
||||
keyDown = function (ev) {
|
||||
var pressedKey = ev.charCode || ev.keyCode || -1;
|
||||
if ((pressedKey > charMin && pressedKey <= 90) || pressedKey == 32) {
|
||||
return false;
|
||||
}
|
||||
var cal = $(this).parent().parent();
|
||||
if (cal.data('colorpicker').livePreview === true) {
|
||||
change.apply(this);
|
||||
}
|
||||
},
|
||||
change = function (ev) {
|
||||
var cal = $(this).parent().parent(), col;
|
||||
if (this.parentNode.className.indexOf('_hex') > 0) {
|
||||
cal.data('colorpicker').color = col = HexToHSB(fixHex(this.value));
|
||||
} else if (this.parentNode.className.indexOf('_hsb') > 0) {
|
||||
cal.data('colorpicker').color = col = fixHSB({
|
||||
h: parseInt(cal.data('colorpicker').fields.eq(4).val(), 10),
|
||||
s: parseInt(cal.data('colorpicker').fields.eq(5).val(), 10),
|
||||
b: parseInt(cal.data('colorpicker').fields.eq(6).val(), 10)
|
||||
});
|
||||
} else {
|
||||
cal.data('colorpicker').color = col = RGBToHSB(fixRGB({
|
||||
r: parseInt(cal.data('colorpicker').fields.eq(1).val(), 10),
|
||||
g: parseInt(cal.data('colorpicker').fields.eq(2).val(), 10),
|
||||
b: parseInt(cal.data('colorpicker').fields.eq(3).val(), 10)
|
||||
}));
|
||||
}
|
||||
if (ev) {
|
||||
fillRGBFields(col, cal.get(0));
|
||||
fillHexFields(col, cal.get(0));
|
||||
fillHSBFields(col, cal.get(0));
|
||||
}
|
||||
setSelector(col, cal.get(0));
|
||||
setHue(col, cal.get(0));
|
||||
setNewColor(col, cal.get(0));
|
||||
cal.data('colorpicker').onChange.apply(cal, [col, HSBToHex(col), HSBToRGB(col)]);
|
||||
},
|
||||
blur = function (ev) {
|
||||
var cal = $(this).parent().parent();
|
||||
cal.data('colorpicker').fields.parent().removeClass('colorpicker-focus');
|
||||
},
|
||||
focus = function () {
|
||||
charMin = this.parentNode.className.indexOf('_hex') > 0 ? 70 : 65;
|
||||
$(this).parent().parent().data('colorpicker').fields.parent().removeClass('colorpicker-focus');
|
||||
$(this).parent().addClass('colorpicker-focus');
|
||||
},
|
||||
downIncrement = function (ev) {
|
||||
var field = $(this).parent().find('input').focus();
|
||||
var current = {
|
||||
el: $(this).parent().addClass('colorpicker-slider'),
|
||||
max: this.parentNode.className.indexOf('_hsb_h') > 0 ? 360 : (this.parentNode.className.indexOf('_hsb') > 0 ? 100 : 255),
|
||||
y: ev.pageY,
|
||||
field: field,
|
||||
val: parseInt(field.val(), 10),
|
||||
preview: $(this).parent().parent().data('colorpicker').livePreview
|
||||
};
|
||||
$(document).bind('mouseup', current, upIncrement);
|
||||
$(document).bind('mousemove', current, moveIncrement);
|
||||
},
|
||||
moveIncrement = function (ev) {
|
||||
ev.data.field.val(Math.max(0, Math.min(ev.data.max, parseInt(ev.data.val + ev.pageY - ev.data.y, 10))));
|
||||
if (ev.data.preview) {
|
||||
change.apply(ev.data.field.get(0), [true]);
|
||||
}
|
||||
return false;
|
||||
},
|
||||
upIncrement = function (ev) {
|
||||
change.apply(ev.data.field.get(0), [true]);
|
||||
ev.data.el.removeClass('colorpicker-slider').find('input').focus();
|
||||
$(document).unbind('mouseup', upIncrement);
|
||||
$(document).unbind('mousemove', moveIncrement);
|
||||
return false;
|
||||
},
|
||||
downHue = function (ev) {
|
||||
var current = {
|
||||
cal: $(this).parent(),
|
||||
y: $(this).offset().top
|
||||
};
|
||||
current.preview = current.cal.data('colorpicker').livePreview;
|
||||
$(document).bind('mouseup', current, upHue);
|
||||
$(document).bind('mousemove', current, moveHue);
|
||||
},
|
||||
moveHue = function (ev) {
|
||||
change.apply(
|
||||
ev.data.cal.data('colorpicker')
|
||||
.fields
|
||||
.eq(4)
|
||||
.val(parseInt(360*(150 - Math.max(0,Math.min(150,(ev.pageY - ev.data.y))))/150, 10))
|
||||
.get(0),
|
||||
[ev.data.preview]
|
||||
);
|
||||
return false;
|
||||
},
|
||||
upHue = function (ev) {
|
||||
fillRGBFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
|
||||
fillHexFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
|
||||
$(document).unbind('mouseup', upHue);
|
||||
$(document).unbind('mousemove', moveHue);
|
||||
moveHue(ev);
|
||||
return false;
|
||||
},
|
||||
downSelector = function (ev) {
|
||||
var current = {
|
||||
cal: $(this).parent(),
|
||||
pos: $(this).offset()
|
||||
};
|
||||
current.preview = current.cal.data('colorpicker').livePreview;
|
||||
$(document).bind('mouseup', current, upSelector);
|
||||
$(document).bind('mousemove', current, moveSelector);
|
||||
},
|
||||
moveSelector = function (ev) {
|
||||
change.apply(
|
||||
ev.data.cal.data('colorpicker')
|
||||
.fields
|
||||
.eq(6)
|
||||
.val(parseInt(100*(150 - Math.max(0,Math.min(150,(ev.pageY - ev.data.pos.top))))/150, 10))
|
||||
.end()
|
||||
.eq(5)
|
||||
.val(parseInt(100*(Math.max(0,Math.min(150,(ev.pageX - ev.data.pos.left))))/150, 10))
|
||||
.get(0),
|
||||
[ev.data.preview]
|
||||
);
|
||||
return false;
|
||||
},
|
||||
upSelector = function (ev) {
|
||||
fillRGBFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
|
||||
fillHexFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
|
||||
$(document).unbind('mouseup', upSelector);
|
||||
$(document).unbind('mousemove', moveSelector);
|
||||
moveSelector(ev);
|
||||
return false;
|
||||
},
|
||||
enterSubmit = function (ev) {
|
||||
$(this).addClass('colorpicker-focus');
|
||||
},
|
||||
leaveSubmit = function (ev) {
|
||||
$(this).removeClass('colorpicker-focus');
|
||||
},
|
||||
clickSubmit = function (ev) {
|
||||
var cal = $(this).parent();
|
||||
var col = cal.data('colorpicker').color;
|
||||
cal.data('colorpicker').origColor = col;
|
||||
setCurrentColor(col, cal.get(0));
|
||||
cal.data('colorpicker').onSubmit(col, HSBToHex(col), HSBToRGB(col), cal.data('colorpicker').el);
|
||||
},
|
||||
show = function (ev) {
|
||||
var cal = $('#' + $(this).data('colorpickerId'));
|
||||
cal.data('colorpicker').onBeforeShow.apply(this, [cal.get(0)]);
|
||||
var pos = $(this).offset();
|
||||
var viewPort = getViewport();
|
||||
var top = pos.top + this.offsetHeight;
|
||||
var left = pos.left;
|
||||
if (top + 176 > viewPort.t + viewPort.h) {
|
||||
top -= this.offsetHeight + 176;
|
||||
}
|
||||
if (left + 356 > viewPort.l + viewPort.w) {
|
||||
left -= 356;
|
||||
}
|
||||
cal.css({left: left + 'px', top: top + 'px'});
|
||||
if (cal.data('colorpicker').onShow.apply(this, [cal.get(0)]) != false) {
|
||||
cal.show();
|
||||
}
|
||||
$(document).bind('mousedown', {cal: cal}, hide);
|
||||
return false;
|
||||
},
|
||||
hide = function (ev) {
|
||||
if (!isChildOf(ev.data.cal.get(0), ev.target, ev.data.cal.get(0))) {
|
||||
if (ev.data.cal.data('colorpicker').onHide.apply(this, [ev.data.cal.get(0)]) != false) {
|
||||
ev.data.cal.hide();
|
||||
}
|
||||
$(document).unbind('mousedown', hide);
|
||||
}
|
||||
},
|
||||
isChildOf = function(parentEl, el, container) {
|
||||
if (parentEl == el) {
|
||||
return true;
|
||||
}
|
||||
if (parentEl.contains) {
|
||||
return parentEl.contains(el);
|
||||
}
|
||||
if ( parentEl.compareDocumentPosition ) {
|
||||
return !!(parentEl.compareDocumentPosition(el) & 16);
|
||||
}
|
||||
var prEl = el.parentNode;
|
||||
while(prEl && prEl != container) {
|
||||
if (prEl == parentEl)
|
||||
return true;
|
||||
prEl = prEl.parentNode;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
getViewport = function () {
|
||||
var m = document.compatMode == 'CSS1Compat';
|
||||
return {
|
||||
l : window.pageXOffset || (m ? document.documentElement.scrollLeft : document.body.scrollLeft),
|
||||
t : window.pageYOffset || (m ? document.documentElement.scrollTop : document.body.scrollTop),
|
||||
w : window.innerWidth || (m ? document.documentElement.clientWidth : document.body.clientWidth),
|
||||
h : window.innerHeight || (m ? document.documentElement.clientHeight : document.body.clientHeight)
|
||||
};
|
||||
},
|
||||
fixHSB = function (hsb) {
|
||||
return {
|
||||
h: Math.min(360, Math.max(0, hsb.h)),
|
||||
s: Math.min(100, Math.max(0, hsb.s)),
|
||||
b: Math.min(100, Math.max(0, hsb.b))
|
||||
};
|
||||
},
|
||||
fixRGB = function (rgb) {
|
||||
return {
|
||||
r: Math.min(255, Math.max(0, rgb.r)),
|
||||
g: Math.min(255, Math.max(0, rgb.g)),
|
||||
b: Math.min(255, Math.max(0, rgb.b))
|
||||
};
|
||||
},
|
||||
fixHex = function (hex) {
|
||||
var len = 6 - hex.length;
|
||||
if (len > 0) {
|
||||
var o = [];
|
||||
for (var i=0; i<len; i++) {
|
||||
o.push('0');
|
||||
}
|
||||
o.push(hex);
|
||||
hex = o.join('');
|
||||
}
|
||||
return hex;
|
||||
},
|
||||
HexToRGB = function (hex) {
|
||||
var hex = parseInt(((hex.indexOf('#') > -1) ? hex.substring(1) : hex), 16);
|
||||
return {r: hex >> 16, g: (hex & 0x00FF00) >> 8, b: (hex & 0x0000FF)};
|
||||
},
|
||||
HexToHSB = function (hex) {
|
||||
return RGBToHSB(HexToRGB(hex));
|
||||
},
|
||||
RGBToHSB = function (rgb) {
|
||||
var hsb = {
|
||||
h: 0,
|
||||
s: 0,
|
||||
b: 0
|
||||
};
|
||||
var min = Math.min(rgb.r, rgb.g, rgb.b);
|
||||
var max = Math.max(rgb.r, rgb.g, rgb.b);
|
||||
var delta = max - min;
|
||||
hsb.b = max;
|
||||
if (max != 0) {
|
||||
|
||||
}
|
||||
hsb.s = max != 0 ? 255 * delta / max : 0;
|
||||
if (hsb.s != 0) {
|
||||
if (rgb.r == max) {
|
||||
hsb.h = (rgb.g - rgb.b) / delta;
|
||||
} else if (rgb.g == max) {
|
||||
hsb.h = 2 + (rgb.b - rgb.r) / delta;
|
||||
} else {
|
||||
hsb.h = 4 + (rgb.r - rgb.g) / delta;
|
||||
}
|
||||
} else {
|
||||
hsb.h = -1;
|
||||
}
|
||||
hsb.h *= 60;
|
||||
if (hsb.h < 0) {
|
||||
hsb.h += 360;
|
||||
}
|
||||
hsb.s *= 100/255;
|
||||
hsb.b *= 100/255;
|
||||
return hsb;
|
||||
},
|
||||
HSBToRGB = function (hsb) {
|
||||
var rgb = {};
|
||||
var h = Math.round(hsb.h);
|
||||
var s = Math.round(hsb.s*255/100);
|
||||
var v = Math.round(hsb.b*255/100);
|
||||
if(s == 0) {
|
||||
rgb.r = rgb.g = rgb.b = v;
|
||||
} else {
|
||||
var t1 = v;
|
||||
var t2 = (255-s)*v/255;
|
||||
var t3 = (t1-t2)*(h%60)/60;
|
||||
if(h==360) h = 0;
|
||||
if(h<60) {rgb.r=t1; rgb.b=t2; rgb.g=t2+t3}
|
||||
else if(h<120) {rgb.g=t1; rgb.b=t2; rgb.r=t1-t3}
|
||||
else if(h<180) {rgb.g=t1; rgb.r=t2; rgb.b=t2+t3}
|
||||
else if(h<240) {rgb.b=t1; rgb.r=t2; rgb.g=t1-t3}
|
||||
else if(h<300) {rgb.b=t1; rgb.g=t2; rgb.r=t2+t3}
|
||||
else if(h<360) {rgb.r=t1; rgb.g=t2; rgb.b=t1-t3}
|
||||
else {rgb.r=0; rgb.g=0; rgb.b=0}
|
||||
}
|
||||
return {r:Math.round(rgb.r), g:Math.round(rgb.g), b:Math.round(rgb.b)};
|
||||
},
|
||||
RGBToHex = function (rgb) {
|
||||
var hex = [
|
||||
rgb.r.toString(16),
|
||||
rgb.g.toString(16),
|
||||
rgb.b.toString(16)
|
||||
];
|
||||
$.each(hex, function (nr, val) {
|
||||
if (val.length == 1) {
|
||||
hex[nr] = '0' + val;
|
||||
}
|
||||
});
|
||||
return hex.join('');
|
||||
},
|
||||
HSBToHex = function (hsb) {
|
||||
return RGBToHex(HSBToRGB(hsb));
|
||||
},
|
||||
restoreOriginal = function () {
|
||||
var cal = $(this).parent();
|
||||
var col = cal.data('colorpicker').origColor;
|
||||
cal.data('colorpicker').color = col;
|
||||
fillRGBFields(col, cal.get(0));
|
||||
fillHexFields(col, cal.get(0));
|
||||
fillHSBFields(col, cal.get(0));
|
||||
setSelector(col, cal.get(0));
|
||||
setHue(col, cal.get(0));
|
||||
setNewColor(col, cal.get(0));
|
||||
};
|
||||
return {
|
||||
init: function (opt) {
|
||||
opt = $.extend({}, defaults, opt||{});
|
||||
if (typeof opt.color == 'string') {
|
||||
opt.color = HexToHSB(opt.color);
|
||||
} else if (opt.color.r != undefined && opt.color.g != undefined && opt.color.b != undefined) {
|
||||
opt.color = RGBToHSB(opt.color);
|
||||
} else if (opt.color.h != undefined && opt.color.s != undefined && opt.color.b != undefined) {
|
||||
opt.color = fixHSB(opt.color);
|
||||
} else {
|
||||
return this;
|
||||
}
|
||||
return this.each(function () {
|
||||
if (!$(this).data('colorpickerId')) {
|
||||
var options = $.extend({}, opt);
|
||||
options.origColor = opt.color;
|
||||
var id = 'collorpicker_' + parseInt(Math.random() * 1000);
|
||||
$(this).data('colorpickerId', id);
|
||||
var cal = $(tpl).attr('id', id);
|
||||
if (options.flat) {
|
||||
cal.appendTo(this).show();
|
||||
} else {
|
||||
cal.appendTo(document.body);
|
||||
}
|
||||
options.fields = cal
|
||||
.find('input')
|
||||
.bind('keyup', keyDown)
|
||||
.bind('change', change)
|
||||
.bind('blur', blur)
|
||||
.bind('focus', focus);
|
||||
cal
|
||||
.find('span').bind('mousedown', downIncrement).end()
|
||||
.find('>div.colorpicker-current-color').bind('click', restoreOriginal);
|
||||
options.selector = cal.find('div.colorpicker-color').bind('mousedown', downSelector);
|
||||
options.selectorIndic = options.selector.find('div div');
|
||||
options.el = this;
|
||||
options.hue = cal.find('div.colorpicker-hue div');
|
||||
cal.find('div.colorpicker-hue').bind('mousedown', downHue);
|
||||
options.newColor = cal.find('div.colorpicker-new-color');
|
||||
options.currentColor = cal.find('div.colorpicker-current-color');
|
||||
cal.data('colorpicker', options);
|
||||
cal.find('div.colorpicker-submit')
|
||||
.bind('mouseenter', enterSubmit)
|
||||
.bind('mouseleave', leaveSubmit)
|
||||
.bind('click', clickSubmit);
|
||||
fillRGBFields(options.color, cal.get(0));
|
||||
fillHSBFields(options.color, cal.get(0));
|
||||
fillHexFields(options.color, cal.get(0));
|
||||
setHue(options.color, cal.get(0));
|
||||
setSelector(options.color, cal.get(0));
|
||||
setCurrentColor(options.color, cal.get(0));
|
||||
setNewColor(options.color, cal.get(0));
|
||||
if (options.flat) {
|
||||
cal.css({
|
||||
position: 'relative',
|
||||
display: 'block'
|
||||
});
|
||||
} else {
|
||||
$(this).bind(options.eventName, show);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
showPicker: function() {
|
||||
return this.each( function () {
|
||||
if ($(this).data('colorpickerId')) {
|
||||
show.apply(this);
|
||||
}
|
||||
});
|
||||
},
|
||||
hidePicker: function() {
|
||||
return this.each( function () {
|
||||
if ($(this).data('colorpickerId')) {
|
||||
$('#' + $(this).data('colorpickerId')).hide();
|
||||
}
|
||||
});
|
||||
},
|
||||
setColor: function(col) {
|
||||
if (typeof col == 'string') {
|
||||
col = HexToHSB(col);
|
||||
} else if (col.r != undefined && col.g != undefined && col.b != undefined) {
|
||||
col = RGBToHSB(col);
|
||||
} else if (col.h != undefined && col.s != undefined && col.b != undefined) {
|
||||
col = fixHSB(col);
|
||||
} else {
|
||||
return this;
|
||||
}
|
||||
return this.each(function(){
|
||||
if ($(this).data('colorpickerId')) {
|
||||
var cal = $('#' + $(this).data('colorpickerId'));
|
||||
cal.data('colorpicker').color = col;
|
||||
cal.data('colorpicker').origColor = col;
|
||||
fillRGBFields(col, cal.get(0));
|
||||
fillHSBFields(col, cal.get(0));
|
||||
fillHexFields(col, cal.get(0));
|
||||
setHue(col, cal.get(0));
|
||||
setSelector(col, cal.get(0));
|
||||
setCurrentColor(col, cal.get(0));
|
||||
setNewColor(col, cal.get(0));
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
}();
|
||||
$.fn.extend({
|
||||
ColorPicker: ColorPicker.init,
|
||||
ColorPickerHide: ColorPicker.hidePicker,
|
||||
ColorPickerShow: ColorPicker.showPicker,
|
||||
ColorPickerSetColor: ColorPicker.setColor
|
||||
});
|
||||
})(jQuery);
|
||||
475
public/assets/js/button-builder/extend-1.0.js
Normal file
475
public/assets/js/button-builder/extend-1.0.js
Normal file
@@ -0,0 +1,475 @@
|
||||
"use strict";
|
||||
function customRadio(radioName){
|
||||
var radioButton = $('input[name="'+ radioName +'"]');
|
||||
$(radioButton).each(function(){
|
||||
$(this).wrap( "<span class='custom-radio'></span>" );
|
||||
if($(this).is(':checked')){
|
||||
$(this).parent().addClass("selected");
|
||||
}
|
||||
});
|
||||
$(radioButton).click(function(){
|
||||
if($(this).is(':checked')){
|
||||
$(this).parent().addClass("selected");
|
||||
}
|
||||
$(radioButton).not(this).each(function(){
|
||||
$(this).parent().removeClass("selected");
|
||||
});
|
||||
});
|
||||
}
|
||||
function customCheckbox(checkboxName){
|
||||
var checkBox = $('input[name="'+ checkboxName +'"]');
|
||||
$(checkBox).each(function(){
|
||||
$(this).wrap( "<span class='custom-checkbox'></span>" );
|
||||
if($(this).is(':checked')){
|
||||
$(this).parent().addClass("selected");
|
||||
}
|
||||
});
|
||||
$(checkBox).click(function(){
|
||||
$(this).parent().toggleClass("selected");
|
||||
});
|
||||
}
|
||||
function setColor(){
|
||||
// Getting current color values
|
||||
var btnSelector = "";
|
||||
var resultButton = $("#result").children("a, input, button");
|
||||
var btnClass = resultButton.attr("class");
|
||||
var btnClass = btnClass.replace(" "," ");
|
||||
var strTrim = $.trim(btnClass);
|
||||
var btnSelector = "." + strTrim.split(" ").join('.');
|
||||
|
||||
//alert(btnClass);
|
||||
if(resultButton.hasClass("btn-xs")){
|
||||
var classStr = btnClass.replace(" btn-xs","");
|
||||
var strTrim = $.trim(classStr);
|
||||
var btnSelector = "." + strTrim.split(" ").join('.');
|
||||
}
|
||||
if(resultButton.hasClass("btn-sm")){
|
||||
var classStr = btnClass.replace(" btn-sm","");
|
||||
var strTrim = $.trim(classStr);
|
||||
var btnSelector = "." + strTrim.split(" ").join('.');
|
||||
}
|
||||
if(resultButton.hasClass("btn-lg")){
|
||||
var classStr = btnClass.replace(" btn-lg","");
|
||||
var strTrim = $.trim(classStr);
|
||||
var btnSelector = "." + strTrim.split(" ").join('.');
|
||||
}
|
||||
if(resultButton.hasClass("btn-block")){
|
||||
var btnSelector = btnSelector.replace(".btn-block","");
|
||||
}
|
||||
|
||||
//alert(btnSelector);
|
||||
|
||||
// Default button style
|
||||
if(btnSelector == ".btn.btn-default" || btnSelector == ".btn.btn-default.disabled"){
|
||||
$("#textColor").val("333333");
|
||||
$("#bgColor").val("FFFFFF");
|
||||
$("#topColor").val("FFFFFF");
|
||||
$("#bottomColor").val("E0E0E0");
|
||||
$("#borderTopColor").val("CCCCCC");
|
||||
$("#borderHrColor").val("CCCCCC");
|
||||
$("#borderBottomColor").val("CCCCCC");
|
||||
}
|
||||
if(btnSelector == ".btn.btn-default.active"){
|
||||
$("#textColor").val("333333");
|
||||
$("#bgColor").val("E0E0E0");
|
||||
$("#topColor").val("E0E0E0");
|
||||
$("#bottomColor").val("E0E0E0");
|
||||
$("#borderTopColor").val("DBDBDB");
|
||||
$("#borderHrColor").val("DBDBDB");
|
||||
$("#borderBottomColor").val("DBDBDB");
|
||||
}
|
||||
|
||||
// Primary button style
|
||||
if(btnSelector == ".btn.btn-primary" || btnSelector == ".btn.btn-primary.disabled"){
|
||||
$("#textColor").val("ffffff");
|
||||
$("#bgColor").val("428BCA");
|
||||
$("#topColor").val("428BCA");
|
||||
$("#bottomColor").val("2D6CA2");
|
||||
$("#borderTopColor").val("2B669A");
|
||||
$("#borderHrColor").val("2B669A");
|
||||
$("#borderBottomColor").val("2B669A");
|
||||
}
|
||||
if(btnSelector == ".btn.btn-primary.active"){
|
||||
$("#textColor").val("ffffff");
|
||||
$("#bgColor").val("2D6CA2");
|
||||
$("#topColor").val("2D6CA2");
|
||||
$("#bottomColor").val("2D6CA2");
|
||||
$("#borderTopColor").val("2B669A");
|
||||
$("#borderHrColor").val("2B669A");
|
||||
$("#borderBottomColor").val("2B669A");
|
||||
}
|
||||
|
||||
// Info button style
|
||||
if(btnSelector == ".btn.btn-info" || btnSelector == ".btn.btn-info.disabled"){
|
||||
$("#textColor").val("ffffff");
|
||||
$("#bgColor").val("5BC0DE");
|
||||
$("#topColor").val("5BC0DE");
|
||||
$("#bottomColor").val("2AABD2");
|
||||
$("#borderTopColor").val("28A4C9");
|
||||
$("#borderHrColor").val("28A4C9");
|
||||
$("#borderBottomColor").val("28A4C9");
|
||||
}
|
||||
if(btnSelector == ".btn.btn-info.active"){
|
||||
$("#textColor").val("ffffff");
|
||||
$("#bgColor").val("2AABD2");
|
||||
$("#topColor").val("2AABD2");
|
||||
$("#bottomColor").val("2AABD2");
|
||||
$("#borderTopColor").val("28A4C9");
|
||||
$("#borderHrColor").val("28A4C9");
|
||||
$("#borderBottomColor").val("28A4C9");
|
||||
}
|
||||
|
||||
// Success button style
|
||||
if(btnSelector == ".btn.btn-success" || btnSelector == ".btn.btn-success.disabled"){
|
||||
$("#textColor").val("ffffff");
|
||||
$("#bgColor").val("00c292");
|
||||
$("#topColor").val("00c292");
|
||||
$("#bottomColor").val("00ebb1");
|
||||
$("#borderTopColor").val("00c292");
|
||||
$("#borderHrColor").val("00c292");
|
||||
$("#borderBottomColor").val("00c292");
|
||||
}
|
||||
if(btnSelector == ".btn.btn-success.active"){
|
||||
$("#textColor").val("ffffff");
|
||||
$("#bgColor").val("00ebb1");
|
||||
$("#topColor").val("00ebb1");
|
||||
$("#bottomColor").val("00ebb1");
|
||||
$("#borderTopColor").val("00c292");
|
||||
$("#borderHrColor").val("00c292");
|
||||
$("#borderBottomColor").val("00c292");
|
||||
}
|
||||
|
||||
// Warning button style
|
||||
if(btnSelector == ".btn.btn-warning" || btnSelector == ".btn.btn-warning.disabled"){
|
||||
$("#textColor").val("ffffff");
|
||||
$("#bgColor").val("F0AD4E");
|
||||
$("#topColor").val("F0AD4E");
|
||||
$("#bottomColor").val("EB9316");
|
||||
$("#borderTopColor").val("E38D13");
|
||||
$("#borderHrColor").val("E38D13");
|
||||
$("#borderBottomColor").val("E38D13");
|
||||
}
|
||||
if(btnSelector == ".btn.btn-warning.active"){
|
||||
$("#textColor").val("ffffff");
|
||||
$("#bgColor").val("EB9316");
|
||||
$("#topColor").val("EB9316");
|
||||
$("#bottomColor").val("EB9316");
|
||||
$("#borderTopColor").val("E38D13");
|
||||
$("#borderHrColor").val("E38D13");
|
||||
$("#borderBottomColor").val("E38D13");
|
||||
}
|
||||
|
||||
// Danger button style
|
||||
if(btnSelector == ".btn.btn-danger" || btnSelector == ".btn.btn-danger.disabled"){
|
||||
$("#textColor").val("ffffff");
|
||||
$("#bgColor").val("D9534F");
|
||||
$("#topColor").val("D9534F");
|
||||
$("#bottomColor").val("C12E2A");
|
||||
$("#borderTopColor").val("B92C28");
|
||||
$("#borderHrColor").val("B92C28");
|
||||
$("#borderBottomColor").val("B92C28");
|
||||
}
|
||||
if(btnSelector == ".btn.btn-danger.active"){
|
||||
$("#textColor").val("ffffff");
|
||||
$("#bgColor").val("C12E2A");
|
||||
$("#topColor").val("C12E2A");
|
||||
$("#bottomColor").val("C12E2A");
|
||||
$("#borderTopColor").val("B92C28");
|
||||
$("#borderHrColor").val("B92C28");
|
||||
$("#borderBottomColor").val("B92C28");
|
||||
}
|
||||
|
||||
// Setting background of color selector
|
||||
$(".custom-button-color input").each(function(){
|
||||
var colorValue = $(this).val();
|
||||
//alert(colorValue);
|
||||
$(this).next(".color-slelector").css("background", "#"+colorValue);
|
||||
});
|
||||
|
||||
var txtColor = $("#textColor").val();
|
||||
var bgColor = $("#bgColor").val();
|
||||
var topColor = $("#topColor").val();
|
||||
var bottomColor = $("#bottomColor").val();
|
||||
var borderTopColor = $("#borderTopColor").val();
|
||||
var borderHrColor = $("#borderHrColor").val();
|
||||
var borderBottomColor = $("#borderBottomColor").val();
|
||||
|
||||
var btnBg = "background-color: " + "#" + bgColor + ";";
|
||||
var btnGradient = "background-image: linear-gradient(to bottom, " + "#" + topColor + "," + " " + "#" + bottomColor + ");";
|
||||
var btnBgPosition = "background-position: 0 0;";
|
||||
var btnText = "color: " + "#" + txtColor + ";";
|
||||
var btnBorder = "border-color: " + "#" + borderTopColor + " " + "#" + borderHrColor + " " + "#" + borderBottomColor +";";
|
||||
|
||||
var btnBgHover = "background-color: " + "#" + bottomColor + ";";
|
||||
var btnGradientHover = "background-image: linear-gradient(to bottom, " + "#" + bottomColor + "," + " " + "#" + bottomColor + ");";
|
||||
|
||||
// Setting CSS
|
||||
var resultButton = $("#result").find("a, input, button");
|
||||
|
||||
if(resultButton.hasClass("active") || resultButton.hasClass("disabled")){
|
||||
//alert(btnSelector);
|
||||
var btnStyle = "<style type='text/css'>" + "#result" + " " + btnSelector + "," + " " + "#result" + " " + btnSelector + ":hover {" + btnText + " " + btnBg + " " + btnGradient + " " + btnBgPosition + " " + btnBorder + "}</style>";
|
||||
|
||||
var btnCSS = btnSelector + "," + " " + "\n" + btnSelector + ":hover {\n" + " "+ btnText + "\n" + " "+ btnBg + "\n" + " "+ btnGradient + "\n" + " "+btnBgPosition + "\n" + " "+ btnBorder + "\n}";
|
||||
|
||||
$("style").remove();
|
||||
$(btnStyle).appendTo("head");
|
||||
$(".button-css").empty();
|
||||
$(".button-css").html(btnCSS);
|
||||
}
|
||||
else{
|
||||
//alert(btnSelector);
|
||||
var btnStyle = "<style type='text/css'>" + "#result" + " " + btnSelector + " {" + btnText + " " + btnBg + " " + btnGradient + " " + btnBorder + "}" + "#result" + " " + btnSelector + ":hover {" + btnText + " " + btnBgHover + " " + btnGradientHover + " " + btnBorder + "}" + "</style>";
|
||||
|
||||
var btnCSS = btnSelector + " {\n" + " "+ btnText + "\n" + " "+ btnBg + "\n" + " "+ btnGradient + "\n" + " "+ btnBorder + "\n}\n" + btnSelector + ":hover {\n" + " "+ btnText + "\n" + " "+ btnBgHover + "\n" + " "+ btnGradientHover + "\n" + " "+ btnBorder + "\n}";
|
||||
|
||||
$("style").remove();
|
||||
$(btnStyle).appendTo("head");
|
||||
$(".button-css").empty();
|
||||
$(".button-css").html(btnCSS);
|
||||
}
|
||||
}
|
||||
(function($) {
|
||||
"use strict";
|
||||
customRadio("color-option");
|
||||
customCheckbox("border-all");
|
||||
setColor();
|
||||
|
||||
// Show hide border options
|
||||
$('.border-all input[type="checkbox"]').each(function(){
|
||||
if($(this).prop('checked') == true){
|
||||
var borderTopColor = $("#borderTopColor").val();
|
||||
$("#borderHrColor").val(borderTopColor);
|
||||
$("#borderBottomColor").val(borderTopColor);
|
||||
$("#borderHrColor, #borderBottomColor").next(".color-slelector").css("background", "#"+borderTopColor);
|
||||
$(".border-color-separate").hide();
|
||||
$(this).parents(".controls").prev().text("Border Color");
|
||||
}
|
||||
if($(this).prop('checked') == false){
|
||||
$(".border-color-separate").show();
|
||||
$(this).parents(".controls").prev().text("Border Top Color");
|
||||
}
|
||||
});
|
||||
$('.border-all, .border-all input[type="checkbox"]').click(function(){
|
||||
if($(this).prop('checked') == true){
|
||||
var borderTopColor = $("#borderTopColor").val();
|
||||
$("#borderHrColor").val(borderTopColor);
|
||||
$("#borderBottomColor").val(borderTopColor);
|
||||
$("#borderHrColor, #borderBottomColor").next(".color-slelector").css("background", "#"+borderTopColor);
|
||||
$(".border-color-separate").hide();
|
||||
$(this).parents(".controls").prev().text("Border Color");
|
||||
}
|
||||
if($(this).prop('checked') == false){
|
||||
$(".border-color-separate").show();
|
||||
$(this).parents(".controls").prev().text("Border Top Color");
|
||||
}
|
||||
});
|
||||
|
||||
// HTML copy to clipboard
|
||||
var copyHTML = new Clipboard("#copyHTML");
|
||||
|
||||
copyHTML.on("success", function(e) {
|
||||
$("#htmlAlert").fadeIn("fast").delay(500).queue(function() {
|
||||
$(this).fadeOut("fast");
|
||||
$(this).dequeue();
|
||||
});
|
||||
});
|
||||
|
||||
// HTML copy to clipboard
|
||||
var copyCSS = new Clipboard("#copyCSS");
|
||||
|
||||
copyCSS.on("success", function(e) {
|
||||
$("#cssAlert").fadeIn("fast").delay(500).queue(function() {
|
||||
$(this).fadeOut("fast");
|
||||
$(this).dequeue();
|
||||
});
|
||||
});
|
||||
|
||||
// Show hide icon option
|
||||
$('.element-type button[value="a"]').click(function(){
|
||||
$("#iconOption").show();
|
||||
$(".include-icon button").each(function(){
|
||||
if($('button[value="1"]').hasClass("active")){
|
||||
$(".toggle").show();
|
||||
}
|
||||
if($('button[value="0"]').hasClass("active")){
|
||||
$(".toggle").hide();
|
||||
}
|
||||
});
|
||||
});
|
||||
$('.element-type button[value="button"]').click(function(){
|
||||
$("#iconOption").show();
|
||||
$(".include-icon button").each(function(){
|
||||
if($('button[value="1"]').hasClass("active")){
|
||||
$(".toggle").show();
|
||||
}
|
||||
if($('button[value="0"]').hasClass("active")){
|
||||
$(".toggle").hide();
|
||||
}
|
||||
});
|
||||
});
|
||||
$('.element-type button[value="input"]').click(function(){
|
||||
$("#iconOption, .toggle").hide();
|
||||
});
|
||||
|
||||
// Show hide color option
|
||||
$('.button-color-option input[type="radio"]').each(function(){
|
||||
if($(this).is(':checked')){
|
||||
if($(this).attr("value")=="bootstrap"){
|
||||
$(".custom-button-color").hide();
|
||||
$(".bootstrap-inbuilt-style").show();
|
||||
$(".wrapper").removeClass("adjust");
|
||||
$("#cssBox").hide();
|
||||
$("style").remove();
|
||||
}
|
||||
if($(this).attr("value")=="custom"){
|
||||
$(".bootstrap-inbuilt-style").hide();
|
||||
$(".custom-button-color").show();
|
||||
$(".wrapper").addClass("adjust");
|
||||
$("#cssBox").show();
|
||||
setColor();
|
||||
}
|
||||
}
|
||||
});
|
||||
$('.button-color-option input[type="radio"]').click(function(){
|
||||
if($(this).attr("value")=="bootstrap"){
|
||||
$(".custom-button-color").hide();
|
||||
$(".bootstrap-inbuilt-style").show();
|
||||
$(".wrapper").removeClass("adjust");
|
||||
$("#cssBox").hide();
|
||||
$("style").remove();
|
||||
}
|
||||
if($(this).attr("value")=="custom"){
|
||||
$(".bootstrap-inbuilt-style").hide();
|
||||
$(".custom-button-color").show();
|
||||
$(".wrapper").addClass("adjust");
|
||||
$("#cssBox").show();
|
||||
setColor();
|
||||
}
|
||||
});
|
||||
|
||||
var colorInput = $('#textColor, #topColor, #bottomColor, #bgColor, #borderTopColor, #borderHrColor, #borderBottomColor');
|
||||
$(colorInput).each(function(){
|
||||
var defautColor = $(this).val();
|
||||
//alert(defautColor);
|
||||
$(this).ColorPicker({
|
||||
color: defautColor,
|
||||
onSubmit: function(hsb, hex, rgb, el) {
|
||||
$(el).val(hex);
|
||||
$(el).ColorPickerHide();
|
||||
}
|
||||
})
|
||||
.bind('keyup', function(){
|
||||
$(this).ColorPickerSetColor(this.value);
|
||||
});
|
||||
});
|
||||
|
||||
$(".colorpicker-submit").click(function(){
|
||||
$(".custom-button-color input").each(function(){
|
||||
var colorValue = $(this).val();
|
||||
//alert(colorValue);
|
||||
$(this).next(".color-slelector").css("background", "#"+colorValue);
|
||||
$(this).attr("value", colorValue);
|
||||
});
|
||||
});
|
||||
var colorSelector = $('#colorSelector1, #colorSelector2, #colorSelector3, #colorSelector4, #colorSelector5, #colorSelector6, #colorSelector7');
|
||||
$(colorSelector).each(function(){
|
||||
var selectorColor = $(this).prev().val();
|
||||
$(this).ColorPicker({
|
||||
color: selectorColor,
|
||||
onSubmit: function(hsb, hex, rgb, el) {
|
||||
$(el).val(hex);
|
||||
$(el).ColorPickerHide();
|
||||
$(el).css("background", "#"+hex);
|
||||
$(el).prev().val(hex);
|
||||
}
|
||||
}).bind('click', function(){
|
||||
var selectorColor = $(this).prev().val();
|
||||
$(this).ColorPickerSetColor(selectorColor);
|
||||
});
|
||||
});
|
||||
|
||||
// Inserting CSS
|
||||
$('.colorpicker-submit, .button-state button, .border-all input[type="checkbox"]').click(function(){
|
||||
if($('.button-color-option input[value="custom"]').is(':checked')){
|
||||
|
||||
// Getting current color values
|
||||
var btnSelector = "";
|
||||
var resultButton = $("#result").children("a, input, button");
|
||||
var btnClass = resultButton.attr("class");
|
||||
var strTrim = $.trim(btnClass);
|
||||
var btnSelector = "." + strTrim.split(" ").join('.');
|
||||
|
||||
//alert(btnClass);
|
||||
if(resultButton.hasClass("btn-xs")){
|
||||
var classStr = btnClass.replace(" btn-xs","");
|
||||
var strTrim = $.trim(classStr);
|
||||
var btnSelector = "." + strTrim.split(" ").join('.');
|
||||
}
|
||||
if(resultButton.hasClass("btn-sm")){
|
||||
var classStr = btnClass.replace(" btn-sm","");
|
||||
var strTrim = $.trim(classStr);
|
||||
var btnSelector = "." + strTrim.split(" ").join('.');
|
||||
}
|
||||
if(resultButton.hasClass("btn-lg")){
|
||||
var classStr = btnClass.replace(" btn-lg","");
|
||||
var strTrim = $.trim(classStr);
|
||||
var btnSelector = "." + strTrim.split(" ").join('.');
|
||||
}
|
||||
|
||||
//alert(btnSelector);
|
||||
|
||||
$('.border-all input[type="checkbox"]').each(function(){
|
||||
if($(this).is(':checked')){
|
||||
var borderTopColor = $("#borderTopColor").val();
|
||||
$("#borderHrColor").val(borderTopColor);
|
||||
$("#borderBottomColor").val(borderTopColor);
|
||||
$("#borderHrColor, #borderBottomColor").next(".color-slelector").css("background", "#"+borderTopColor);
|
||||
}
|
||||
});
|
||||
|
||||
var txtColor = $("#textColor").val();
|
||||
var bgColor = $("#bgColor").val();
|
||||
var topColor = $("#topColor").val();
|
||||
var bottomColor = $("#bottomColor").val();
|
||||
var borderTopColor = $("#borderTopColor").val();
|
||||
var borderHrColor = $("#borderHrColor").val();
|
||||
var borderBottomColor = $("#borderBottomColor").val();
|
||||
|
||||
var btnBg = "background-color: " + "#" + bgColor + ";";
|
||||
var btnGradient = "background-image: linear-gradient(to bottom, " + "#" + topColor + "," + " " + "#" + bottomColor + ");";
|
||||
var btnBgPosition = "background-position: 0 0;";
|
||||
var btnText = "color: " + "#" + txtColor + ";";
|
||||
var btnBorder = "border-color: " + "#" + borderTopColor + " " + "#" + borderHrColor + " " + "#" + borderBottomColor +";";
|
||||
|
||||
var btnBgHover = "background-color: " + "#" + bottomColor + ";";
|
||||
var btnGradientHover = "background-image: linear-gradient(to bottom, " + "#" + bottomColor + "," + " " + "#" + bottomColor + ");";
|
||||
|
||||
// Setting CSS
|
||||
var resultButton = $("#result").find("a, input, button");
|
||||
|
||||
if(resultButton.hasClass("active") || resultButton.hasClass("disabled")){
|
||||
//alert(btnSelector);
|
||||
var btnStyle = "<style type='text/css'>" + "#result" + " " + btnSelector + "," + " " + "#result" + " " + btnSelector + ":hover {" + btnText + " " + btnBg + " " + btnGradient + " " + btnBgPosition + " " + btnBorder + "}</style>";
|
||||
|
||||
var btnCSS = btnSelector + "," + " " + "\n" + btnSelector + ":hover {\n" + " "+ btnText + "\n" + " "+ btnBg + "\n" + " "+ btnGradient + "\n" + " "+btnBgPosition + "\n" + " "+ btnBorder + "\n}";
|
||||
|
||||
$("style").remove();
|
||||
$(btnStyle).appendTo("head");
|
||||
$(".button-css").empty();
|
||||
$(".button-css").html(btnCSS);
|
||||
}
|
||||
else{
|
||||
//alert(btnSelector);
|
||||
var btnStyle = "<style type='text/css'>" + "#result" + " " + btnSelector + " {" + btnText + " " + btnBg + " " + btnGradient + " " + btnBorder + "}" + "#result" + " " + btnSelector + ":hover {" + btnText + " " + btnBgHover + " " + btnGradientHover + " " + btnBorder + "}" + "</style>";
|
||||
|
||||
var btnCSS = btnSelector + " {\n" + " "+ btnText + "\n" + " "+ btnBg + "\n" + " "+ btnGradient + "\n" + " "+ btnBorder + "\n}\n" + btnSelector + ":hover {\n" + " "+ btnText + "\n" + " "+ btnBgHover + "\n" + " "+ btnGradientHover + "\n" + " "+ btnBorder + "\n}";
|
||||
|
||||
$("style").remove();
|
||||
$(btnStyle).appendTo("head");
|
||||
$(".button-css").empty();
|
||||
$(".button-css").html(btnCSS);
|
||||
}
|
||||
}
|
||||
});
|
||||
})(jQuery);
|
||||
368
public/assets/js/button-builder/generator.js
Normal file
368
public/assets/js/button-builder/generator.js
Normal file
@@ -0,0 +1,368 @@
|
||||
function filterHTML(strInput){
|
||||
strInput = strInput.replace(new RegExp(['<'],"g"), "<");
|
||||
strInput = strInput.replace(new RegExp(['>'],"g"), ">");
|
||||
return strInput;
|
||||
}
|
||||
$(function(){
|
||||
$(".button-text").keyup(function(){
|
||||
var btnText = $(this).val();
|
||||
if($("#result a.btn, #result button.btn").length){
|
||||
if($("#result a.btn span, #result button.btn span").length){
|
||||
var iconCode = $("#result a.btn span, #result button.btn span").clone();
|
||||
innerCode = btnText;
|
||||
$("#result .btn").html(filterHTML(btnText));
|
||||
$("#result .btn").prepend(" ");
|
||||
$("#result .btn").prepend(iconCode);
|
||||
var btnHTML = $("#result").html();
|
||||
$(".button-html").html(filterHTML(btnHTML));
|
||||
}
|
||||
else{
|
||||
$("#result .btn").html(filterHTML(btnText));
|
||||
var btnHTML = $("#result").html();
|
||||
$(".button-html").html(filterHTML(btnHTML));
|
||||
}
|
||||
}
|
||||
else if($("#result input.btn").length){
|
||||
$("#result .btn").attr("value", filterHTML(btnText));
|
||||
var btnHTML = $("#result").html();
|
||||
$(".button-html").html(filterHTML(btnHTML));
|
||||
}
|
||||
});
|
||||
$(".button-color label").click(function(){
|
||||
var btnColor = $(this).children("input").attr("value");
|
||||
var btnSize = $(".button-size label.active").children("input").attr("value");
|
||||
var btnState = $(".button-state label.active").children("input").attr("value");
|
||||
var btnWidth = $(".button-width label.active").children("input").attr("value");
|
||||
if(btnState == "active" || btnState == "disabled"){
|
||||
var className = btnColor + " " + btnSize + " " + btnState;
|
||||
if(btnWidth.length){
|
||||
var className = btnColor + " " + btnSize + " " + btnState + " " + btnWidth;
|
||||
}
|
||||
$("#result .btn").attr("class", className);
|
||||
var btnHTML = $("#result").html();
|
||||
$(".button-html").html(filterHTML(btnHTML));
|
||||
}
|
||||
if(btnState == "normal"){
|
||||
var className = btnColor + " " + btnSize;
|
||||
if(btnWidth.length){
|
||||
var className = btnColor + " " + btnSize + " " + btnWidth;
|
||||
}
|
||||
$("#result .btn").attr("class", className);
|
||||
var btnHTML = $("#result").html();
|
||||
$(".button-html").html(filterHTML(btnHTML));
|
||||
}
|
||||
});
|
||||
$(".button-size label").click(function(){
|
||||
var btnSize = $(this).children("input").attr("value");
|
||||
var btnColor = $(".button-color label.active").children("input").attr("value");
|
||||
var btnState = $(".button-state label.active").children("input").attr("value");
|
||||
var btnWidth = $(".button-width label.active").children("input").attr("value");
|
||||
if(btnSize.length){
|
||||
if(btnState == "active" || btnState == "disabled"){
|
||||
var className = btnColor + " " + btnSize + " " + btnState;
|
||||
if(btnWidth.length){
|
||||
var className = btnColor + " " + btnSize + " " + btnState + " " + btnWidth;
|
||||
}
|
||||
$("#result .btn").attr("class", className);
|
||||
var btnHTML = $("#result").html();
|
||||
$(".button-html").html(filterHTML(btnHTML));
|
||||
}
|
||||
if(btnState == "normal"){
|
||||
var className = btnColor + " " + btnSize;
|
||||
if(btnWidth.length){
|
||||
var className = btnColor + " " + btnSize + " " + btnWidth;
|
||||
}
|
||||
$("#result .btn").attr("class", className);
|
||||
var btnHTML = $("#result").html();
|
||||
$(".button-html").html(filterHTML(btnHTML));
|
||||
}
|
||||
}
|
||||
else{
|
||||
if(btnState == "active" || btnState == "disabled"){
|
||||
var className = btnColor + " " + btnState;
|
||||
if(btnWidth.length){
|
||||
var className = btnColor + " " + btnState + " " + btnWidth;
|
||||
}
|
||||
$("#result .btn").attr("class", className);
|
||||
var btnHTML = $("#result").html();
|
||||
$(".button-html").html(filterHTML(btnHTML));
|
||||
}
|
||||
if(btnState == "normal"){
|
||||
var className = btnColor;
|
||||
if(btnWidth.length){
|
||||
var className = btnColor + " " + btnWidth;
|
||||
}
|
||||
$("#result .btn").attr("class", className);
|
||||
var btnHTML = $("#result").html();
|
||||
$(".button-html").html(filterHTML(btnHTML));
|
||||
}
|
||||
}
|
||||
$("#result .btn").attr("class", className);
|
||||
var btnHTML = $("#result").html();
|
||||
$(".button-html").html(filterHTML(btnHTML));
|
||||
});
|
||||
$(".element-type label").click(function(){
|
||||
var iconCode = "";
|
||||
var currentClass = $("#result .btn").attr("class");
|
||||
if($("#result a.btn span").length){
|
||||
var iconCode = $("#result a.btn span, #result button.btn span").clone();
|
||||
}
|
||||
if($("#result a.btn span").length === 0 && $('.include-icon label.active input').val() == 1){
|
||||
var iconName = $(".the-icons li.active span").attr("class");
|
||||
iconCode = '<span class="'+iconName+ '"></span>';
|
||||
}
|
||||
if($("#result a.btn, #result button.btn").length){
|
||||
var btnStr = $("#result .btn").text();
|
||||
var btnText = $.trim(btnStr);
|
||||
}
|
||||
else if($("#result input.btn").length){
|
||||
var btnStr = $("#result .btn").attr("value");
|
||||
var btnText = $.trim(btnStr);
|
||||
}
|
||||
if($(this).children("input").attr("value")=="a"){
|
||||
$("#result").empty();
|
||||
var btnCode = '<a href="javascript:void(0)"' + " " + 'class="' + currentClass + '">' + btnText + '</a>';
|
||||
$("#result a").remove();
|
||||
$("#result").append(btnCode);
|
||||
if(iconCode.length){
|
||||
if($('.fa-position label.active input').val() == "left"){
|
||||
$("#result .btn").prepend(" ");
|
||||
$("#result .btn").prepend(iconCode);
|
||||
}
|
||||
if($('.fa-position label.active input').val() == "right"){
|
||||
$("#result .btn").append(" ");
|
||||
$("#result .btn").append(iconCode);
|
||||
}
|
||||
}
|
||||
var btnHTML = $("#result").html();
|
||||
$(".button-html").html(filterHTML(btnHTML));
|
||||
if($(".include-icon label.active").children("input").attr("value")=="1"){
|
||||
$(".toggle").add("#iconOption").show();
|
||||
}
|
||||
if($(".include-icon label.active").children("input").attr("value")=="0"){
|
||||
$("#iconOption").show();
|
||||
}
|
||||
}
|
||||
else if($(this).children("input").attr("value")=="button"){
|
||||
$("#result").empty();
|
||||
var btnCode = '<button type="button"' + " " + 'class="' + currentClass + '">' + btnText + '</button>';
|
||||
$("#result button").remove();
|
||||
$("#result").append(btnCode);
|
||||
if(iconCode.length){
|
||||
if($('.fa-position label.active input').val() == "left"){
|
||||
$("#result .btn").prepend(" ");
|
||||
$("#result .btn").prepend(iconCode);
|
||||
}
|
||||
if($('.fa-position label.active input').val() == "right"){
|
||||
$("#result .btn").append(" ");
|
||||
$("#result .btn").append(iconCode);
|
||||
}
|
||||
}
|
||||
var btnHTML = $("#result").html();
|
||||
$(".button-html").html(filterHTML(btnHTML));
|
||||
if($(".include-icon label.active").children("input").attr("value")=="1"){
|
||||
$(".toggle").add("#iconOption").show();
|
||||
}
|
||||
if($(".include-icon label.active").children("input").attr("value")=="0"){
|
||||
$("#iconOption").show();
|
||||
}
|
||||
}
|
||||
else if($(this).children("input").attr("value")=="input"){
|
||||
$("#result").empty();
|
||||
var btnCode = '<input type="button"' + " " + 'class="' + currentClass + '" value="' + btnText + '">';
|
||||
$("#result button").remove();
|
||||
$("#result").append(btnCode);
|
||||
// Only applicable for input case
|
||||
$(".button-html").html(filterHTML(btnCode));
|
||||
$(".toggle").add("#iconOption").hide();
|
||||
}
|
||||
else if($(this).children("input").attr("value")=="submit"){
|
||||
$("#result").empty();
|
||||
var btnCode = '<input type="submit"' + " " + 'class="' + currentClass + '" value="' + btnText + '">';
|
||||
$("#result button").remove();
|
||||
$("#result").append(btnCode);
|
||||
var btnHTML = $("#result").html();
|
||||
$(".button-html").html(filterHTML(btnHTML));
|
||||
}
|
||||
});
|
||||
$(".button-state label").click(function(){
|
||||
if($(this).children("input").attr("value")=="active"){
|
||||
if($("#result a.btn").length){
|
||||
if($("#result a.disabled").length){
|
||||
$("#result a.btn").removeClass("disabled");
|
||||
$("#result a.btn").addClass("active");
|
||||
var btnHTML = $("#result").html();
|
||||
$(".button-html").html(filterHTML(btnHTML));
|
||||
}
|
||||
else{
|
||||
$("#result a.btn").addClass("active");
|
||||
var btnHTML = $("#result").html();
|
||||
$(".button-html").html(filterHTML(btnHTML));
|
||||
}
|
||||
}
|
||||
if($("#result button.btn, #result input.btn").length){
|
||||
if($("#result button.disabled, #result input.disabled").length){
|
||||
$("#result button.btn, #result input.btn").removeClass("disabled");
|
||||
//$("#result button.btn, #result input.btn").removeAttr("disabled");
|
||||
$("#result button.btn, #result input.btn").addClass("active");
|
||||
var btnHTML = $("#result").html();
|
||||
$(".button-html").html(filterHTML(btnHTML));
|
||||
}
|
||||
else{
|
||||
$("#result button.btn, #result input.btn").addClass("active");
|
||||
var btnHTML = $("#result").html();
|
||||
$(".button-html").html(filterHTML(btnHTML));
|
||||
}
|
||||
}
|
||||
}
|
||||
if($(this).children("input").attr("value")=="disabled"){
|
||||
if($("#result a.btn").length){
|
||||
if($("#result a.active").length){
|
||||
$("#result a.btn").removeClass("active");
|
||||
$("#result a.btn").addClass("disabled");
|
||||
var btnHTML = $("#result").html();
|
||||
$(".button-html").html(filterHTML(btnHTML));
|
||||
}
|
||||
else{
|
||||
$("#result a.btn").addClass("disabled");
|
||||
var btnHTML = $("#result").html();
|
||||
$(".button-html").html(filterHTML(btnHTML));
|
||||
}
|
||||
}
|
||||
if($("#result button.btn, #result input.btn")){
|
||||
if($("#result button.active, #result input.active").length){
|
||||
$("#result button.btn, #result input.btn").removeClass("active");
|
||||
$("#result button.btn, #result input.btn").addClass("disabled");
|
||||
//$("#result button.btn, #result input.btn").attr("disabled","disabled");
|
||||
var btnHTML = $("#result").html();
|
||||
$(".button-html").html(filterHTML(btnHTML));
|
||||
}
|
||||
else{
|
||||
$("#result button.btn, #result input.btn").addClass("disabled");
|
||||
//$("#result button.btn, #result input.btn").attr("disabled","disabled");
|
||||
var btnHTML = $("#result").html();
|
||||
$(".button-html").html(filterHTML(btnHTML));
|
||||
}
|
||||
}
|
||||
}
|
||||
if($(this).children("input").attr("value")=="normal"){
|
||||
if($("#result .btn.active").length){
|
||||
$("#result .btn").removeClass("active");
|
||||
var btnHTML = $("#result").html();
|
||||
$(".button-html").html(filterHTML(btnHTML));
|
||||
}
|
||||
if($("#result .btn.disabled").length){
|
||||
$("#result .btn").removeClass("disabled");
|
||||
//$("#result .btn").removeAttr("disabled");
|
||||
var btnHTML = $("#result").html();
|
||||
$(".button-html").html(filterHTML(btnHTML));
|
||||
}
|
||||
}
|
||||
});
|
||||
$(".button-width label").click(function(){
|
||||
if($(this).children("input").attr("value")==""){
|
||||
if($("#result .btn").hasClass("btn-block")){
|
||||
$("#result .btn").removeClass("btn-block");
|
||||
var btnHTML = $("#result").html();
|
||||
$(".button-html").html(filterHTML(btnHTML));
|
||||
}
|
||||
}
|
||||
if($(this).children("input").attr("value")=="btn-block"){
|
||||
if(!$("#result .btn").hasClass("btn-block")){
|
||||
$("#result .btn").addClass("btn-block");
|
||||
var btnHTML = $("#result").html();
|
||||
$(".button-html").html(filterHTML(btnHTML));
|
||||
}
|
||||
}
|
||||
});
|
||||
$(".the-icons li").click(function(){
|
||||
$(".the-icons li").removeClass("active");
|
||||
$(this).addClass("active");
|
||||
if($('.include-icon label.active input').val() == 1){
|
||||
if($("#result .btn span").length){
|
||||
var iconClass = $(this).children("span").attr("class");
|
||||
iconCode = ' <span class="'+iconClass+'"></span> ';
|
||||
//alert(iconCode);
|
||||
$("#result .btn span").remove();
|
||||
if($('.fa-position label.active input').val() == "left"){
|
||||
$("#result .btn").prepend(iconCode);
|
||||
}
|
||||
if($('.fa-position label.active input').val() == "right"){
|
||||
$("#result .btn").append(iconCode);
|
||||
}
|
||||
var btnHTML = $("#result").html();
|
||||
$(".button-html").html(filterHTML(btnHTML));
|
||||
}
|
||||
}
|
||||
});
|
||||
$('.include-icon label').click(function(){
|
||||
if($(this).children("input").attr("value") == 0){
|
||||
if($("#result .btn span").length){
|
||||
var btnStr = $("#result .btn").text();
|
||||
var btnText = $.trim(btnStr);
|
||||
$("#result .btn").html(btnText);
|
||||
var btnHTML = $("#result").html();
|
||||
$(".button-html").html(filterHTML(btnHTML));
|
||||
}
|
||||
$(".toggle").hide();
|
||||
}
|
||||
if($(this).children("input").attr("value") == 1){
|
||||
$(".toggle").show();
|
||||
var iconName = $(".the-icons li.active span").attr("class");
|
||||
iconCode = '<span class="'+iconName+ '"></span>';
|
||||
if(iconCode.length){
|
||||
if($('.fa-position label.active input').val() == "left"){
|
||||
$("#result .btn").prepend(" ");
|
||||
$("#result .btn").prepend(iconCode);
|
||||
}
|
||||
if($('.fa-position label.active input').val() == "right"){
|
||||
$("#result .btn").append(" ");
|
||||
$("#result .btn").append(iconCode);
|
||||
}
|
||||
var btnHTML = $("#result").html();
|
||||
$(".button-html").html(filterHTML(btnHTML));
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
$(".fa-position label").click(function(){
|
||||
if($(this).children("input").attr("value") == "left"){
|
||||
if($("#result .btn span").length){
|
||||
var iconCode = $("#result .btn span").clone();
|
||||
var btnStr = $("#result .btn").text();
|
||||
var btnText = $.trim(btnStr);
|
||||
$("#result .btn").html(iconCode);
|
||||
$("#result .btn").append(" ");
|
||||
$("#result .btn").append(btnText);
|
||||
var btnHTML = $("#result").html();
|
||||
$(".button-html").html(filterHTML(btnHTML));
|
||||
}
|
||||
|
||||
}
|
||||
if($(this).children("input").attr("value") == "right"){
|
||||
if($("#result .btn span").length){
|
||||
var iconCode = $("#result .btn span").clone();
|
||||
var btnStr = $("#result .btn").text();
|
||||
var btnText = $.trim(btnStr);
|
||||
$("#result .btn").html(iconCode);
|
||||
$("#result .btn").prepend(" ");
|
||||
$("#result .btn").prepend(btnText);
|
||||
var btnHTML = $("#result").html();
|
||||
$(".button-html").html(filterHTML(btnHTML));
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
$(".the-icons li").each(function(){
|
||||
var iconName = $(this).text().trim();
|
||||
$(this).attr("title",iconName);
|
||||
});
|
||||
$(".the-icons li").tooltip();
|
||||
|
||||
//Print Button HTML
|
||||
$(".print-html").click(function(){
|
||||
var btnHTML = $("#result").html();
|
||||
alert(filterHTML(btnHTML));
|
||||
$(".button-html").html(filterHTML(btnHTML));
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user