You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
572 lines
17 KiB
JavaScript
572 lines
17 KiB
JavaScript
var debugEl;
|
|
var hooks = [];
|
|
var layers = [];
|
|
var layer_increment = 0;
|
|
var presets = [];
|
|
var active = false;
|
|
|
|
presets[1] = '[[],[{"type":"text","shadow_color":"f5f500","shadow_inset":false,"shadow_offset_x":0,"shadow_offset_y":-1,"shadow_blur":4,"shadow_spread":0,"layer_name":"Yellow"},{"type":"text","shadow_color":"e07b00","shadow_inset":false,"shadow_offset_x":0,"shadow_offset_y":-4,"shadow_blur":8,"shadow_spread":0,"layer_name":"Orange"},{"type":"text","shadow_color":"ff1100","shadow_inset":false,"shadow_offset_x":0,"shadow_offset_y":-5,"shadow_blur":16,"shadow_spread":0,"layer_name":"Red"}]]';
|
|
presets[2] = '[[],[{"type":"text","shadow_color":"ff1cff","shadow_inset":false,"shadow_offset_x":0,"shadow_offset_y":0,"shadow_blur":3,"shadow_spread":0,"layer_name":"Layer 0"},{"type":"text","shadow_color":"b314b3","shadow_inset":false,"shadow_offset_x":0,"shadow_offset_y":0,"shadow_blur":7,"shadow_spread":0,"layer_name":"Layer 1"},{"type":"text","shadow_color":"850d85","shadow_inset":false,"shadow_offset_x":0,"shadow_offset_y":0,"shadow_blur":10,"shadow_spread":0,"layer_name":"Layer 2"},{"type":"text","shadow_color":"470b47","shadow_inset":false,"shadow_offset_x":0,"shadow_offset_y":0,"shadow_blur":16,"shadow_spread":0,"layer_name":"Layer 3"},{"type":"text","shadow_color":"290029","shadow_inset":false,"shadow_offset_x":0,"shadow_offset_y":0,"shadow_blur":23,"shadow_spread":0,"layer_name":"Layer 4"}]]';
|
|
presets[3] = '[[],[{"type":"text","shadow_color":"7700ff","shadow_inset":false,"shadow_offset_x":1,"shadow_offset_y":1,"shadow_blur":0,"shadow_spread":0,"layer_name":"Layer 5"},{"type":"text","shadow_color":"0040ff","shadow_inset":false,"shadow_offset_x":1,"shadow_offset_y":-1,"shadow_blur":0,"shadow_spread":0,"layer_name":"Layer 6"},{"type":"text","shadow_color":"ff0048","shadow_inset":false,"shadow_offset_x":-1,"shadow_offset_y":-1,"shadow_blur":0,"shadow_spread":0,"layer_name":"Layer 7"},{"type":"text","shadow_color":"ffdd00","shadow_inset":false,"shadow_offset_x":-1,"shadow_offset_y":1,"shadow_blur":0,"shadow_spread":0,"layer_name":"Layer 8"}]]';
|
|
presets[4] = '[[{"type":"box","shadow_color":"d7e854","shadow_inset":false,"shadow_offset_x":0,"shadow_offset_y":0,"shadow_blur":30,"shadow_spread":7,"layer_name":"Glow"},{"type":"box","shadow_color":"c0d900","shadow_inset":true,"shadow_offset_x":0,"shadow_offset_y":0,"shadow_blur":3,"shadow_spread":0,"layer_name":"Inner glow"}],[]]';
|
|
presets[5] = '[[{"type":"box","shadow_color":"0fa37e","shadow_inset":false,"shadow_offset_x":-3,"shadow_offset_y":0,"shadow_blur":6,"shadow_spread":0,"layer_name":"Layer 6"},{"type":"box","shadow_color":"ff0033","shadow_inset":false,"shadow_offset_x":3,"shadow_offset_y":3,"shadow_blur":6,"shadow_spread":0,"layer_name":"Layer 5"},{"type":"box","shadow_color":"ffea00","shadow_inset":false,"shadow_offset_x":3,"shadow_offset_y":-3,"shadow_blur":6,"shadow_spread":0,"layer_name":"Layer 7"}],[]]';
|
|
presets[6] = '[[{"type":"box","shadow_color":"000000","shadow_inset":true,"shadow_offset_x":0,"shadow_offset_y":0,"shadow_blur":11,"shadow_spread":1,"layer_name":"Layer 0"}],[{"type":"text","shadow_color":"000000","shadow_inset":false,"shadow_offset_x":0,"shadow_offset_y":0,"shadow_blur":5,"shadow_spread":0,"layer_name":"Layer 1"}]]';
|
|
presets[7] = '[[],[{"type":"text","shadow_color":"85f5d9","shadow_inset":false,"shadow_offset_x":0,"shadow_offset_y":-1,"shadow_blur":4,"shadow_spread":0,"layer_name":"Light"},{"type":"text","shadow_color":"00ff8c","shadow_inset":false,"shadow_offset_x":0,"shadow_offset_y":-4,"shadow_blur":8,"shadow_spread":0,"layer_name":"Mid"},{"type":"text","shadow_color":"003369","shadow_inset":false,"shadow_offset_x":0,"shadow_offset_y":-5,"shadow_blur":16,"shadow_spread":0,"layer_name":"Dark"}]]';
|
|
presets[8] = '[[],[{"type":"text","shadow_color":"938cc9","shadow_inset":false,"shadow_offset_x":12,"shadow_offset_y":12,"shadow_blur":11,"shadow_spread":0,"layer_name":"Layer 0"},{"type":"text","shadow_color":"80bbd6","shadow_inset":false,"shadow_offset_x":-15,"shadow_offset_y":2,"shadow_blur":16,"shadow_spread":0,"layer_name":"Layer 1"},{"type":"text","shadow_color":"3c48d6","shadow_inset":false,"shadow_offset_x":3,"shadow_offset_y":-4,"shadow_blur":22,"shadow_spread":0,"layer_name":"Layer 2"},{"type":"text","shadow_color":"a3edff","shadow_inset":false,"shadow_offset_x":-6,"shadow_offset_y":10,"shadow_blur":27,"shadow_spread":0,"layer_name":"Layer 3"},{"type":"text","shadow_color":"ffffff","shadow_inset":false,"shadow_offset_x":0,"shadow_offset_y":0,"shadow_blur":11,"shadow_spread":0,"layer_name":"Layer 43"}]]';
|
|
|
|
hooks['colorbutton_preview_background'] = function(hex, el){ $('#fieldset_preview').css({'background-color' : "#" + hex}); };
|
|
hooks['colorbutton_preview_box'] = function(hex, el){ $('#fieldset_preview textarea').css({'background-color' : "#" + hex}); };
|
|
hooks['colorbutton_preview_text'] = function(hex, el){ $('#fieldset_preview textarea').css({'color' : "#" + hex}); };
|
|
hooks['colorbutton_shadow_color'] = function(hex, el){ current_layer.shadow_color = "#" + hex; };
|
|
hooks['slider_blur'] = function(value){ current_layer.shadow_blur = value; };
|
|
hooks['slider_offset_x'] = function(value){ current_layer.shadow_offset_x = value; };
|
|
hooks['slider_offset_y'] = function(value){ current_layer.shadow_offset_y = value; };
|
|
hooks['slider_spread'] = function(value){ current_layer.shadow_spread = value; };
|
|
hooks['colorbutton_shadow_color'] = function(hex, el){ current_layer.shadow_color = hex; };
|
|
|
|
function ShadowLayer(is_text_layer)
|
|
{
|
|
if(is_text_layer == true)
|
|
{
|
|
this.type = "text";
|
|
}
|
|
else
|
|
{
|
|
this.type = "box";
|
|
}
|
|
|
|
this.shadow_color = "000000";
|
|
this.shadow_inset = false;
|
|
this.shadow_offset_x = 0;
|
|
this.shadow_offset_y = 0;
|
|
this.shadow_blur = 0;
|
|
this.shadow_spread = 0;
|
|
this.layer_name = "";
|
|
}
|
|
|
|
function initialize()
|
|
{
|
|
$('.colorfield .colorbutton').ColorPicker({
|
|
onSubmit: function(hsb, hex, rgb, el) {
|
|
var id_self = $(el).attr('id');
|
|
$(el).parent().children('input').val(hex);
|
|
$(el).css({'background-color': '#' + hex});
|
|
|
|
if(hooks[id_self])
|
|
{
|
|
hooks[id_self](hex, el);
|
|
update_preview();
|
|
}
|
|
},
|
|
onBeforeShow: function () {
|
|
$(this).ColorPickerSetColor($(this).parent().children('input').val());
|
|
},
|
|
onShow: function (colpkr) {
|
|
$(colpkr).fadeIn(500);
|
|
return false;
|
|
},
|
|
onHide: function (colpkr) {
|
|
$(colpkr).fadeOut(500);
|
|
return false;
|
|
}
|
|
})
|
|
.bind('keyup', function(){
|
|
$(this).ColorPickerSetColor($(this).parent().children('input').val());
|
|
});
|
|
|
|
$('.sortable').sortable({
|
|
placeholder: "listbox-item-placeholder",
|
|
containment: "parent",
|
|
distance: 8,
|
|
update: function(){
|
|
update_preview();
|
|
}
|
|
});
|
|
$('.sortable').disableSelection();
|
|
|
|
$('#setting_inset').buttonset();
|
|
|
|
$('.slider').slider({
|
|
slide: function(event, ui){
|
|
$(ui.handle).parent().parent().children('input').val(ui.value);
|
|
hooks[$(ui.handle).parent().attr('id')](ui.value); // Run the specified hook
|
|
update_preview();
|
|
},
|
|
min: 0,
|
|
max: 30,
|
|
|
|
});
|
|
|
|
$('.slider-negative').slider({
|
|
slide: function(event, ui){
|
|
$(ui.handle).parent().parent().children('input').val(ui.value);
|
|
hooks[$(ui.handle).parent().attr('id')](ui.value); // Run the specified hook
|
|
update_preview();
|
|
},
|
|
min: -30,
|
|
max: 30,
|
|
|
|
});
|
|
|
|
$('.slider-field').children('input').change(function(){
|
|
var slider_element = $(this).parent().children('.slider, .slider-negative');
|
|
slider_element.slider("value", $(this).val());
|
|
hooks[slider_element.attr('id')]($(this).val()); // Run the specified hook
|
|
update_preview();
|
|
});
|
|
|
|
$('#input_inset, #input_outset').change(function(){
|
|
//alert(0);
|
|
if($('#input_inset:checked').val() !== undefined)
|
|
{
|
|
current_layer.shadow_inset = true;
|
|
}
|
|
else
|
|
{
|
|
current_layer.shadow_inset = false;
|
|
}
|
|
|
|
update_preview();
|
|
});
|
|
|
|
$('#settings').hide();
|
|
|
|
rebind();
|
|
}
|
|
|
|
function rebind()
|
|
{
|
|
$('.listbox-item').click(function(){
|
|
|
|
var layer_id = $(this).children('.layer-id').text();
|
|
select_layer(layer_id)
|
|
});
|
|
}
|
|
|
|
function add_layer(is_text_layer)
|
|
{
|
|
if(is_text_layer == true)
|
|
{
|
|
var target = "#layers_text";
|
|
}
|
|
else
|
|
{
|
|
var target = "#layers_box";
|
|
}
|
|
|
|
var new_layer = new ShadowLayer(is_text_layer);
|
|
layers[layer_increment] = new_layer;
|
|
new_layer.layer_name = "Layer " + layer_increment;
|
|
$(target).append('<li><div class="listbox-item" id="layer_item_' + layer_increment + '"><img src="images/handle.png" class=\"handle\"> <span class="layer-id">' + layer_increment + '</span><span class="layer-title">' + new_layer.layer_name + '</span><div class="tools"><img src="images/rename.png" onclick="rename_layer(' + layer_increment + ');"><img src="images/delete.png" onclick="delete_layer(' + layer_increment + ');"></div></div></li>');
|
|
|
|
layer_increment += 1;
|
|
rebind();
|
|
|
|
select_layer(layer_increment - 1);
|
|
|
|
return layer_increment - 1;
|
|
}
|
|
|
|
function add_layer_text()
|
|
{
|
|
return add_layer(true);
|
|
}
|
|
|
|
function add_layer_box()
|
|
{
|
|
return add_layer(false);
|
|
}
|
|
|
|
function select_layer(id)
|
|
{
|
|
$('.listbox-item.selected').removeClass('selected');
|
|
$('#layer_item_' + id).addClass("selected");
|
|
|
|
current_layer = layers[id];
|
|
|
|
if(current_layer.type == "box")
|
|
{
|
|
$('#setting_inset').show();
|
|
$('#setting_spread').show();
|
|
}
|
|
else
|
|
{
|
|
$('#setting_inset').hide();
|
|
$('#setting_spread').hide();
|
|
}
|
|
|
|
$('#settings_placeholder').hide();
|
|
$('#settings').show();
|
|
|
|
load_layer();
|
|
}
|
|
|
|
|
|
function select_first()
|
|
{
|
|
var first_id = $('div.listbox-item:first').find('.layer-id').text();
|
|
if(first_id == "")
|
|
{
|
|
$('#settings_placeholder').show();
|
|
$('#settings').hide();
|
|
active = false;
|
|
}
|
|
else
|
|
{
|
|
select_layer(first_id);
|
|
}
|
|
}
|
|
|
|
function save_layers()
|
|
{
|
|
var save_object = [];
|
|
|
|
var entry_list = [];
|
|
|
|
$('#layers_box div.listbox-item').each(function(index, el){
|
|
var layer_id = $(this).find('.layer-id').text();
|
|
var working_layer = layers[layer_id];
|
|
entry_list.push(working_layer);
|
|
});
|
|
|
|
save_object[0] = entry_list.slice(0);
|
|
|
|
var entry_list = [];
|
|
|
|
$('#layers_text div.listbox-item').each(function(index, el){
|
|
var layer_id = $(this).find('.layer-id').text();
|
|
var working_layer = layers[layer_id];
|
|
entry_list.push(working_layer);
|
|
});
|
|
|
|
save_object[1] = entry_list.slice(0);
|
|
|
|
$('#dialog_save textarea').text($.toJSON(save_object));
|
|
|
|
$('#dialog_save').dialog({
|
|
resizable: false,
|
|
modal: true,
|
|
width: 500,
|
|
height: 280
|
|
});
|
|
}
|
|
|
|
function load_layers()
|
|
{
|
|
var data = $.evalJSON($('#dialog_load textarea').val());
|
|
parse_layers(data);
|
|
}
|
|
|
|
function parse_layers(jsondata)
|
|
{
|
|
confirm_clear_layers();
|
|
|
|
for(i in jsondata[0])
|
|
{
|
|
var new_id = add_layer_box();
|
|
layers[new_id] = jsondata[0][i];
|
|
}
|
|
|
|
for(i in jsondata[1])
|
|
{
|
|
var new_id = add_layer_text();
|
|
layers[new_id] = jsondata[1][i];
|
|
}
|
|
|
|
update_names();
|
|
select_first();
|
|
update_preview();
|
|
}
|
|
|
|
function load_layer()
|
|
{
|
|
$('#input_offset_x').val(current_layer.shadow_offset_x);
|
|
$('#slider_offset_x').slider("value", current_layer.shadow_offset_x);
|
|
$('#input_offset_y').val(current_layer.shadow_offset_y);
|
|
$('#slider_offset_y').slider("value", current_layer.shadow_offset_y);
|
|
$('#input_blur').val(current_layer.shadow_blur);
|
|
$('#slider_blur').slider("value", current_layer.shadow_blur);
|
|
$('#input_shadow_color').val(current_layer.shadow_color);
|
|
$('#colorbutton_shadow_color').css({'background-color': "#" + current_layer.shadow_color});
|
|
|
|
if(current_layer.type == "box")
|
|
{
|
|
$('#input_spread').val(current_layer.shadow_spread);
|
|
$('#slider_spread').slider("value", current_layer.shadow_spread);
|
|
|
|
if(current_layer.shadow_inset == true)
|
|
{
|
|
$('#input_inset').attr("checked","checked").button("refresh");
|
|
}
|
|
else
|
|
{
|
|
$('#input_outset').attr("checked","checked").button("refresh");
|
|
}
|
|
}
|
|
}
|
|
|
|
function delete_layer(id)
|
|
{
|
|
$('#dialog_confirm_deletion').find('.layer-name').text(layers[id].layer_name);
|
|
|
|
$('#dialog_confirm_deletion').dialog({
|
|
resizable: false,
|
|
modal: true,
|
|
buttons: {
|
|
"Delete layer": function(){
|
|
confirm_delete_layer(id);
|
|
$(this).dialog("close");
|
|
},
|
|
Cancel: function(){
|
|
$(this).dialog("close");
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function confirm_delete_layer(id)
|
|
{
|
|
layers[id] = null;
|
|
$('#layer_item_' + id).parent().remove();
|
|
select_first();
|
|
update_preview();
|
|
}
|
|
|
|
function clear_layers()
|
|
{
|
|
$('#dialog_confirm_clear').dialog({
|
|
resizable: false,
|
|
modal: true,
|
|
buttons: {
|
|
"Clear layers": function(){
|
|
confirm_clear_layers();
|
|
$(this).dialog("close");
|
|
},
|
|
Cancel: function(){
|
|
$(this).dialog("close");
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function confirm_clear_layers()
|
|
{
|
|
$('.listbox-item').parent().remove();
|
|
layers = [];
|
|
update_preview();
|
|
$('#settings').hide();
|
|
$('#settings_placeholder').show();
|
|
active = false;
|
|
}
|
|
|
|
function rename_layer(id)
|
|
{
|
|
$('#dialog_rename input').val(layers[id].layer_name);
|
|
|
|
$('#dialog_rename').dialog({
|
|
resizable: false,
|
|
modal: true,
|
|
width: 500,
|
|
height: 180,
|
|
buttons: {
|
|
"Rename": function(){
|
|
confirm_rename_layer(id);
|
|
$(this).dialog("close");
|
|
},
|
|
Cancel: function(){
|
|
$(this).dialog("close");
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function confirm_rename_layer(id)
|
|
{
|
|
layers[id].layer_name = $('#dialog_rename input').val();
|
|
update_names();
|
|
}
|
|
|
|
function update_preview()
|
|
{
|
|
var entry_list = [];
|
|
|
|
$('#layers_box div.listbox-item').each(function(index, el){
|
|
var layer_id = $(this).find('.layer-id').text();
|
|
var working_layer = layers[layer_id];
|
|
entry_list.push(generate_box_shadow_entry(working_layer.shadow_color,
|
|
working_layer.shadow_offset_x,
|
|
working_layer.shadow_offset_y,
|
|
working_layer.shadow_blur,
|
|
working_layer.shadow_spread,
|
|
working_layer.shadow_inset));
|
|
});
|
|
|
|
var css_box = entry_list.join(", ");
|
|
|
|
var entry_list = [];
|
|
|
|
$('#layers_text div.listbox-item').each(function(index, el){
|
|
var layer_id = $(this).find('.layer-id').text();
|
|
var working_layer = layers[layer_id];
|
|
entry_list.push(generate_text_shadow_entry(working_layer.shadow_color,
|
|
working_layer.shadow_offset_x,
|
|
working_layer.shadow_offset_y,
|
|
working_layer.shadow_blur));
|
|
});
|
|
|
|
var css_text = entry_list.join(", ");
|
|
|
|
$('#preview').css({
|
|
'box-shadow': css_box,
|
|
'text-shadow': css_text
|
|
});
|
|
|
|
$('#preview').hide().show();
|
|
}
|
|
|
|
function update_names()
|
|
{
|
|
for(i in layers)
|
|
{
|
|
$('#layer_item_' + i).children('.layer-title').html(layers[i].layer_name);
|
|
}
|
|
}
|
|
|
|
function generate_code()
|
|
{
|
|
var css_lines = [];
|
|
|
|
var entry_list = [];
|
|
|
|
$('#layers_box div.listbox-item').each(function(index, el){
|
|
var layer_id = $(this).find('.layer-id').text();
|
|
var working_layer = layers[layer_id];
|
|
entry_list.push(generate_box_shadow_entry(working_layer.shadow_color,
|
|
working_layer.shadow_offset_x,
|
|
working_layer.shadow_offset_y,
|
|
working_layer.shadow_blur,
|
|
working_layer.shadow_spread,
|
|
working_layer.shadow_inset));
|
|
});
|
|
|
|
if(entry_list.length > 0)
|
|
{
|
|
css_lines.push(generate_box_shadow_line("", entry_list));
|
|
css_lines.push(generate_box_shadow_line("webkit", entry_list));
|
|
css_lines.push(generate_box_shadow_line("moz", entry_list));
|
|
css_lines.push(generate_box_shadow_line("o", entry_list));
|
|
css_lines.push(generate_box_shadow_line("ms", entry_list));
|
|
}
|
|
|
|
var entry_list = [];
|
|
|
|
$('#layers_text div.listbox-item').each(function(index, el){
|
|
var layer_id = $(this).find('.layer-id').text();
|
|
var working_layer = layers[layer_id];
|
|
entry_list.push(generate_text_shadow_entry(working_layer.shadow_color,
|
|
working_layer.shadow_offset_x,
|
|
working_layer.shadow_offset_y,
|
|
working_layer.shadow_blur));
|
|
});
|
|
|
|
if(entry_list.length > 0)
|
|
{
|
|
css_lines.push(generate_text_shadow_line("", entry_list));
|
|
css_lines.push(generate_text_shadow_line("webkit", entry_list));
|
|
css_lines.push(generate_text_shadow_line("moz", entry_list));
|
|
css_lines.push(generate_text_shadow_line("o", entry_list));
|
|
css_lines.push(generate_text_shadow_line("ms", entry_list));
|
|
}
|
|
|
|
$('#dialog_code textarea').text(css_lines.join("\n")).enableSelection();
|
|
|
|
$('#dialog_code').dialog({
|
|
resizable: false,
|
|
modal: true,
|
|
width: 500,
|
|
height: 280
|
|
});
|
|
}
|
|
|
|
function generate_text_shadow_line(prefix, entries)
|
|
{
|
|
if(prefix)
|
|
{
|
|
prefix = "-" + prefix + "-";
|
|
}
|
|
|
|
return prefix + "text-shadow: " + entries.join(", ") + ";";
|
|
}
|
|
|
|
function generate_text_shadow_entry(color, offset_x, offset_y, blur)
|
|
{
|
|
return offset_x + "px " + offset_y + "px " + blur + "px #" + color;
|
|
}
|
|
|
|
function generate_box_shadow_line(prefix, entries)
|
|
{
|
|
if(prefix)
|
|
{
|
|
prefix = "-" + prefix + "-";
|
|
}
|
|
|
|
return prefix + "box-shadow: " + entries.join(", ") + ";";
|
|
}
|
|
|
|
function generate_box_shadow_entry(color, offset_x, offset_y, blur, spread, inset)
|
|
{
|
|
if(inset)
|
|
{
|
|
is_inset = " inset";
|
|
}
|
|
else
|
|
{
|
|
is_inset = "";
|
|
}
|
|
|
|
return offset_x + "px " + offset_y + "px " + blur + "px " + spread + "px #" + color + is_inset;
|
|
}
|
|
|
|
|
|
function dialog_load()
|
|
{
|
|
$('#dialog_load').dialog({
|
|
resizable: false,
|
|
modal: true,
|
|
width: 500,
|
|
height: 330,
|
|
buttons: {
|
|
"Load": function(){
|
|
load_layers();
|
|
$(this).dialog("close");
|
|
},
|
|
Cancel: function(){
|
|
$(this).dialog("close");
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function dialog_presets()
|
|
{
|
|
$('#dialog_presets').dialog({
|
|
resizable: true,
|
|
modal: true,
|
|
width: 600,
|
|
height: 500,
|
|
buttons: {
|
|
Cancel: function(){
|
|
$(this).dialog("close");
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function load_preset(id)
|
|
{
|
|
parse_layers($.evalJSON(presets[id]));
|
|
$('#dialog_presets').dialog("close");
|
|
}
|
|
|
|
$(function(){ initialize(); });
|