definicao de layout
This commit is contained in:
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);
|
||||
Reference in New Issue
Block a user