1119 lines
50 KiB
JavaScript
1119 lines
50 KiB
JavaScript
/**
|
|
* Slider Editor
|
|
*
|
|
* @copyright Commercial License By LeoTheme.Com
|
|
* @email leotheme.com
|
|
* @visit http://www.leotheme.com
|
|
*/
|
|
(function($) {
|
|
|
|
$.fn.leoSliderEditor = function(initvar) {
|
|
|
|
/**
|
|
* Variables.
|
|
*/
|
|
this.data = null;
|
|
this.currentLayer = null;
|
|
this.stoolbar = $(".slider-toolbar");
|
|
this.seditor = $(".slider-editor");
|
|
this.ilayers = $(".layer-collection");
|
|
this.lform = $(".layer-form");
|
|
this.siteURL = null;
|
|
this.adminURL = null;
|
|
this.countItem = new Array();
|
|
this.delayTime = 9000;
|
|
this.state = false;
|
|
/**
|
|
* Create List Layers By JSON Data.
|
|
*/
|
|
this.createList = function(JSLIST, langID) {
|
|
|
|
var list = jQuery.parseJSON(JSLIST);
|
|
var $this = this;
|
|
//var $stoolbar = $( ".slider-toolbar" );
|
|
var layer = '';
|
|
if (list) {
|
|
$.each(list, function(i, jslayer) {
|
|
var type = list[i]['layer_type'] ? 'add-' + list[i]['layer_type'] : 'add-text';
|
|
$this.countItem[langID]++;
|
|
layer = $this.createLayer(type, list[i], list[i]['layer_id'], langID);
|
|
});
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Crete A Layer By Type with Default data or specified data.
|
|
*/
|
|
this.createLayer = function(type, data, slayerID, langID) {
|
|
var $this = this;
|
|
if (!langID)
|
|
langID = findActiveLang();
|
|
|
|
this.seditor = $("#slider-editor_" + langID);
|
|
this.ilayers = $("#layer-collection_" + langID);
|
|
this.lform = $("#layer-form_" + langID);
|
|
|
|
if (data !== null && data.layer_status == "0") {
|
|
var layer = $('<div class="draggable-item tp-caption in-active"><div class="caption-layer"></div></div>');
|
|
layer.attr('id', 'slayerID_' + slayerID);
|
|
var ilayer = $('<div class="layer-index"></div>').attr("id", "i-" + layer.attr("id"));
|
|
ilayer.append('<div class="slider-wrap"></div><div class="clearfix"></div>');
|
|
ilayer.append('<span class="i-no">' + ($(".draggable-item", $this.seditor).length + 1) + '</span>');
|
|
ilayer.append('<span class="layer-index-caption"></span>');
|
|
ilayer.append('<span class="status in-active">show</span>');
|
|
} else {
|
|
var layer = $('<div class="draggable-item tp-caption"><div class="caption-layer"></div></div>');
|
|
layer.attr('id', 'slayerID_' + slayerID);
|
|
var ilayer = $('<div class="layer-index"></div>').attr("id", "i-" + layer.attr("id"));
|
|
ilayer.append('<div class="slider-wrap"></div><div class="clearfix"></div>');
|
|
ilayer.append('<span class="i-no">' + ($(".draggable-item", $this.seditor).length + 1) + '</span>');
|
|
ilayer.append('<span class="layer-index-caption"></span>');
|
|
ilayer.append('<span class="status">show</span>');
|
|
}
|
|
|
|
switch (type) {
|
|
case 'add-text':
|
|
if (data === null)
|
|
$this.addLayerText(layer, ilayer, "Your Caption Here " + $this.countItem[langID], langID);
|
|
else
|
|
$this.addLayerText(layer, ilayer, data.layer_caption, langID);
|
|
break;
|
|
case 'add-video':
|
|
if (data === null)
|
|
$this.addLayerVideo(layer, ilayer, "Your Video Here " + $this.countItem[langID], langID);
|
|
else
|
|
$this.addLayerVideo(layer, ilayer, data.layer_caption, langID);
|
|
break;
|
|
case 'add-image':
|
|
if (data === null)
|
|
$this.addLayerImage(layer, ilayer, "Your Image Here " + $this.countItem[langID], langID);
|
|
else
|
|
$this.addLayerImage(layer, ilayer, data.layer_caption, langID);
|
|
break;
|
|
}
|
|
|
|
|
|
$("#layer_id_" + langID).val(slayerID);
|
|
|
|
// create slider timing
|
|
|
|
$('#islider_' + slayerID).slider({
|
|
max: $this.delayTime,
|
|
value: (400 * $this.countItem[langID]),
|
|
slide: function(event, ui) {
|
|
$('#input-islider_' + slayerID).val(ui.value);
|
|
}
|
|
});
|
|
$('#input-islider_' + slayerID).val(400 * $this.countItem[langID]);
|
|
// auto set current active.
|
|
$this.setCurrentLayerActive(layer, langID);
|
|
//auto bind the drag and drap for this
|
|
|
|
$(layer).draggable({
|
|
containment: "#slider-editor_" + langID,
|
|
drag: function() {
|
|
$this.setCurrentLayerActive(layer, langID);
|
|
$this.updatePosition(layer.css('left'), layer.css("top"));
|
|
},
|
|
create: function() {
|
|
$this.createDefaultLayerData(layer, data, langID);
|
|
}
|
|
});
|
|
|
|
|
|
// bind current layer be actived when this selected.
|
|
layer.click(function() {
|
|
if (!$(this).hasClass('layer-active')) {
|
|
$this.setCurrentLayerActive(layer, langID);
|
|
}
|
|
});
|
|
$("#i-" + layer.attr("id")).click(function() {
|
|
if (!$(this).hasClass('layer-active')) {
|
|
// if ($this.currentLayer != null) {
|
|
// $this.storeCurrentLayerData(langID);
|
|
// }
|
|
$this.setCurrentLayerActive(layer, langID);
|
|
}
|
|
});
|
|
/// insert typo
|
|
return layer;
|
|
};
|
|
|
|
|
|
/**
|
|
* Process All First Handler.
|
|
*/
|
|
this.process = function(adminURL, delayTime) {
|
|
|
|
this.adminURL = adminURL;
|
|
this.delayTime = delayTime;
|
|
var $this = this;
|
|
|
|
$("div.btn-create", $this.stoolbar).click(function() {
|
|
langID = findActiveLang();
|
|
++$this.countItem[langID];
|
|
slayerID = langID + "_" + $this.countItem[langID];
|
|
var layer = $this.createLayer($(this).attr("data-action"), null, slayerID);
|
|
if ($(this).attr("data-action") == 'add-image') {
|
|
$this.showDialogImage('img-' + layer.attr('id'));
|
|
}
|
|
if ($(this).attr("data-action") == 'add-video') {
|
|
$this.showDialogVideo();
|
|
}
|
|
return false;
|
|
});
|
|
|
|
$(".btn-delete").click(function() {
|
|
if(confirm($('.text-alert').data("remove"))){
|
|
$this.deleteCurrentLayer();
|
|
}
|
|
});
|
|
|
|
/////////// FORM SETTING ///////////
|
|
// auto save when any change of element form.
|
|
$('input, select ,textarea', '.slider-form').change(function() {
|
|
langID = findActiveLang();
|
|
if ($(this).hasClass('layer_top') || $(this).hasClass('layer_left')) {
|
|
$this.currentLayer.css({
|
|
top: $('.layer_top', '#slider-form_' + langID + ' #slider-toolbar_' + langID).val() + "px",
|
|
left: $('.layer_left', '#slider-form_' + langID + ' #slider-toolbar_' + langID).val() + "px"
|
|
});
|
|
}
|
|
$this.state = true;
|
|
if ($this.currentLayer != null) {
|
|
$this.storeCurrentLayerData(langID);
|
|
}
|
|
});
|
|
|
|
$('.layer_class', '.slider-form').change(function() {
|
|
$this.currentLayer.attr("class", "draggable-item tp-caption layer-text layer-active ui-draggable " + $(this).val())
|
|
});
|
|
|
|
$('.layer_background_color', '.slider-form').change(function() {
|
|
$this.currentLayer.css("background-color", $(this).val());
|
|
});
|
|
|
|
$('.layer_color', '.slider-form').change(function() {
|
|
$this.currentLayer.css("color", $(this).val());
|
|
});
|
|
$('.layer_font_size', '.slider-form').change(function() {
|
|
$this.currentLayer.css("font-size", $(this).val());
|
|
});
|
|
|
|
// auto fill text for name or any.
|
|
$('.input-slider-caption', '.slider-form').keyup(function() {
|
|
setTimeout(function() {
|
|
langID = findActiveLang();
|
|
$(".caption-layer", $this.currentLayer).html($('.input-slider-caption', '#slider-form_' + langID + ' #slider-toolbar_' + langID).val());
|
|
$('.layer-index-caption', "#i-" + $this.currentLayer.attr("id")).text($(".caption-layer", $this.currentLayer).text());
|
|
}, 6);
|
|
$this.state = true;
|
|
});
|
|
$('.input-slider-caption', '.slider-form').change(function() {
|
|
langID = findActiveLang();
|
|
$this.storeCurrentLayerData(langID);
|
|
});
|
|
|
|
/**** GLOBAL PROCESS ****/
|
|
$('.slider-editor').each(function() {
|
|
$(".draggable-item", $(this)).draggable({
|
|
containment: $(this)
|
|
});
|
|
|
|
});
|
|
|
|
//$(".draggable-item", this.seditor).draggable({ containment: "#slider-toolbar .slider-editor" });
|
|
|
|
$(".layer-collection").sortable({
|
|
accept: "div",
|
|
update: function(e,ui) {
|
|
var j = 1;
|
|
$(e.target.children).each(function(i, e) {
|
|
$(".i-no", $(this)).html((j++));
|
|
//id =
|
|
editor = $(this).closest(".slider-layers").find('.slider-editor').first();
|
|
lang = $(editor).attr("id").substr($(editor).attr("id").lastIndexOf("_"));
|
|
ceditor = $("#slayerID"+lang+"_"+j).clone(1);
|
|
$("#slayerID"+lang+"_"+j).remove();
|
|
$(editor).prepend($(ceditor));
|
|
});
|
|
if($(".translatable-field").length){
|
|
alert($('.text-alert').data("move"));
|
|
}
|
|
},
|
|
// stop: function() {
|
|
// console.log($this.ilayers.children());
|
|
// $this.ilayers.children().each(function(){
|
|
// id = $(this).attr("id");
|
|
// console.log(id);
|
|
// });
|
|
// }
|
|
});
|
|
$this.ilayers.delegate('.status', 'click', function() {
|
|
$(this).toggleClass('in-active');
|
|
$('#' + ($(this).parent('.layer-index').attr("id").replace("i-", ""))).toggleClass("in-active");
|
|
|
|
// togle value hidden input status
|
|
langID = findActiveLang();
|
|
val = $('[name="layer_status"]', '#slider-form_' + langID).val();
|
|
val = (val === "1" ? "0" : "1");
|
|
$('[name="layer_status"]', '#slider-form_' + langID).val(val).trigger('change');
|
|
});
|
|
|
|
/**
|
|
* - Change image
|
|
*/
|
|
$this.seditor.delegate('.btn-change-img', 'click', function() {
|
|
$this.showDialogImage('img-' + $this.currentLayer.attr('id'));
|
|
});
|
|
|
|
$('.slider-editor').each(function() {
|
|
$(this).delegate('.btn-change-video', 'click', function() {
|
|
$this.showDialogVideo();
|
|
});
|
|
});
|
|
|
|
/**
|
|
* Close video for layer
|
|
*/
|
|
$(".layer-close-video").click(function() {
|
|
langID = findActiveLang();
|
|
$("#dialog-video_" + langID).hide();
|
|
//$("#" + $this.currentLayer.attr('id')).remove();
|
|
$this.deleteCurrentLayer();
|
|
});
|
|
|
|
/**
|
|
* Find video for layer
|
|
*/
|
|
$(".layer-find-video").click(function() {
|
|
langID = findActiveLang();
|
|
if ($("#dialog_video_id_" + langID).val()) {
|
|
$this.videoDialogProcess($("#dialog_video_id_" + langID).val(), langID);
|
|
} else {
|
|
$("#video-preview_" + langID).html('<div class="error">Could not find any thing</div>');
|
|
}
|
|
});
|
|
|
|
$('.translatable-field').first().closest('.form-group').each(function() {
|
|
arrayLang = [];
|
|
$(this).find('.translatable-field').each(function() {
|
|
arrayLang.push($(this).attr("class").substr($(this).attr("class").lastIndexOf("-") + 1));
|
|
});
|
|
$("#module_form").data("lang", arrayLang);
|
|
});
|
|
$(".slide-copy-alllang").click(function() {
|
|
cfrom = $(this).closest(".slider-form");
|
|
clang = $(cfrom).attr("id").substr($(cfrom).attr("id").lastIndexOf("_")+1);
|
|
$('.slider-form').each(function() {
|
|
if($(cfrom).attr("id") != $(this).attr("id")){
|
|
$sliderForm = $(this);
|
|
nlang = $(this).attr("id").substr($(this).attr("id").lastIndexOf("_")+1);
|
|
$("#slider-image_"+nlang).val($("#slider-image_"+clang).val());
|
|
$(this).find(".slider-backcolor").first().val($(cfrom).find(".slider-backcolor").first().val());
|
|
|
|
$(".slider-backcolor", $(this)).first().val($(".slider-backcolor", $(cfrom)).first().val());
|
|
$(this).find(".simage img").first().attr("src", $(cfrom).find(".simage img").first().attr("src"));
|
|
|
|
$(this).find('.slider-editor').first().html($(cfrom).find('.slider-editor').first().html());
|
|
$(this).find('.slider-editor .draggable-item').each(function() {
|
|
count = $(this).attr("id").substr($(this).attr("id").lastIndexOf("_"));
|
|
$(this).attr('id', 'slayerID_'+nlang+count);
|
|
$(this).data('data-form', $('#slayerID_'+clang+count).data('data-form'));
|
|
});
|
|
|
|
$(this).find('.layer-collection').first().html($(cfrom).find('.layer-collection').first().html());
|
|
$(this).find('.layer-collection .layer-index').each(function() {
|
|
count = $(this).attr("id").substr($(this).attr("id").lastIndexOf("_"));
|
|
$(this).attr('id', 'i-slayerID_'+nlang+count);
|
|
});
|
|
}
|
|
});
|
|
|
|
alert($(".text-alert").data("duplicate"));
|
|
})
|
|
$(".layer-form .slide-copy-lang").click(function() {
|
|
wraper = $(this).closest("tr").find("td")[1];
|
|
lang = $("#module_form").data("lang");
|
|
// ename = $(this).attr('name');
|
|
|
|
//slayerID_
|
|
name = $this.currentLayer.attr("id").substr(0, $this.currentLayer.attr("id").lastIndexOf("_"));
|
|
name = name.substr(0, name.lastIndexOf("_") + 1);
|
|
//_3
|
|
number = $this.currentLayer.attr("id").substr($this.currentLayer.attr("id").lastIndexOf("_"));
|
|
|
|
for (i = 0; i < lang.length; i++) {
|
|
|
|
thiselement = $("#" + name + lang[i] + number);
|
|
if ($(thiselement).attr("id") != $this.currentLayer.attr("id")) {
|
|
obj = $(thiselement).data("data-form");
|
|
|
|
for (j = 0; j < obj.length; j++) {
|
|
$(wraper).find("input").each(function() {
|
|
if ($(this).attr("name") == obj[j].name) {
|
|
obj[j].value = $(this).val();
|
|
}
|
|
});
|
|
$(wraper).find("textarea").each(function() {
|
|
if ($(this).attr("name") == obj[j].name) {
|
|
obj[j].value = $(this).val();
|
|
}
|
|
});
|
|
$(wraper).find("select").each(function() {
|
|
if ($(this).attr("name") == obj[j].name) {
|
|
obj[j].value = $(this).val();
|
|
}
|
|
});
|
|
}
|
|
|
|
$(thiselement).data("data-form", obj);
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Apply video for layer
|
|
*/
|
|
$(".apply_this_video").click(function() {
|
|
langID = findActiveLang();
|
|
$("#video-" + $this.currentLayer.attr('id')).html('<img width="' + $('[name="layer_video_width"]', '#slider-form_' + langID).val() + '" height="' + $('[name="layer_video_height"]', '#slider-form_' + langID).val() + '" src="' + $("#layer_video_thumb_" + langID).val() + '"/>');
|
|
$("#dialog-video_" + langID).hide();
|
|
|
|
$this.storeCurrentLayerData(langID);
|
|
});
|
|
|
|
this.insertTypo();
|
|
|
|
$("#btn-preview-slider").click(function() {
|
|
$this.preview();
|
|
});
|
|
|
|
/** SUBMIT FORM **/
|
|
this.submitForm();
|
|
};
|
|
|
|
this.submitForm = function() {
|
|
var $this = this;
|
|
$("#module_form").submit(function() {
|
|
|
|
errorList = 0;
|
|
//when add new
|
|
if ($("#id_slide").length) {
|
|
$(".slider-title").each(function() {
|
|
if ($(this).val() == "") {
|
|
errorList = 1;
|
|
alert(txt_input_title);
|
|
return false;
|
|
}
|
|
});
|
|
} else {
|
|
if ($("#title_" + $("#current_language").val()).val() == "" || $("#title_" + findActiveLang()).val() == "") {
|
|
errorList = 1;
|
|
alert(txt_input_title);
|
|
}
|
|
}
|
|
|
|
if (errorList)
|
|
return false;
|
|
var data = [];
|
|
var i = 0;
|
|
var params = $("#module_form").serialize() + "&";
|
|
var times = '';
|
|
$('.slider-form').each(function() {
|
|
langID = $(this).attr("id").replace("slider-form_", "");
|
|
$(".layer-index", $(this)).each(function() {
|
|
var param = '';
|
|
var layerID = $(this).attr("id").substr(2);
|
|
layerContent = $("#"+layerID);
|
|
if($(layerContent).length){
|
|
$.each($(layerContent).data("data-form"), function(_, e) {
|
|
if ($(this).attr('name').indexOf('layer_time') == -1 && $(this).attr('name').indexOf('slider-image')) {
|
|
value = e.value;
|
|
if (e.name == 'layer_caption' || e.name == 'layer_link') {
|
|
value = value.replace(/\&/g, '_ASM_');
|
|
} else if(e.name == 'layer_content' && e.value.indexOf('http') == 0) {
|
|
value = encodeURIComponent(value);
|
|
} else if(e.name == 'layer_id') {
|
|
if(value != layerID.replace("slayerID_", "")) {
|
|
value = layerID.replace("slayerID_", "");
|
|
}
|
|
}
|
|
param += 'layers_' + langID + '[' + i + '][' + e.name + ']=' + value + '&';
|
|
}
|
|
});
|
|
params += param + "&";
|
|
i++;
|
|
}
|
|
});
|
|
|
|
$(".input-time input", $(this)).each(function(i, e) {
|
|
params += $(e).attr('name') + "=" + $(e).val() + "&";
|
|
});
|
|
// console.log('test1');
|
|
$(".slider-backcolor", $(this)).each(function(i, e) {
|
|
// console.log('test');
|
|
params += "background_color_" + langID + "=" + $(e).val() + "&";
|
|
});
|
|
});
|
|
$.ajax({
|
|
url: $(".slider-form").attr('action'),
|
|
dataType: "JSON",
|
|
type: "POST",
|
|
'data': params
|
|
}).done(function(json) {
|
|
if (json && json.hasError == true) {
|
|
alert(json.errors);
|
|
} else {
|
|
if (json.error == 2) {
|
|
// add, edit SLIDE
|
|
$('#content #leo_error').remove();
|
|
$('#content').prepend(json.text);
|
|
// $('body').scrollTo('#content #leo_error');
|
|
$('body').scrollTo('0');
|
|
} else if (json.error) {
|
|
alert(json.text);
|
|
} else {
|
|
if ($("#id_slide").length && $("#id_slide").val()) {
|
|
location.reload();
|
|
} else {
|
|
// console.log(admin_modules_link);
|
|
// console.log(json.text);
|
|
// location.reload();
|
|
location.assign(leo_admin_module_link + json.text);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
return false;
|
|
});
|
|
};
|
|
this.getFormsData = function(langID) {
|
|
var objects = new Object();
|
|
|
|
objects.params = new Object();
|
|
objects.video = new Object();
|
|
//get params
|
|
$.each($("#module_form").serializeArray(), function(_, e) {
|
|
if (e.name == "title_" + langID) {
|
|
objects.title = e.value;
|
|
} else if (e.name == "link_" + langID) {
|
|
objects.link = e.value;
|
|
} else if (e.name == "thumbnail_" + langID) {
|
|
objects.thumbnail = e.value;
|
|
} else if (e.name == "image_" + langID) {
|
|
objects.image = e.value;
|
|
} else if (e.name == "active_slide") {
|
|
objects.active = e.value;
|
|
}
|
|
//video
|
|
else if (e.name == "usevideo_" + langID) {
|
|
objects.video["usevideo"] = e.value;
|
|
} else if (e.name == "videoid_" + langID) {
|
|
objects.video["videoid"] = e.value;
|
|
} else if (e.name == "videoauto_" + langID) {
|
|
objects.video["videoauto"] = e.value;
|
|
}
|
|
//param
|
|
else if (e.name.indexOf("slider") != -1) {
|
|
e.name = e.name.replace("slider[", "");
|
|
e.name = e.name.replace("]", "");
|
|
objects.params[e.name] = e.value;
|
|
}
|
|
|
|
});
|
|
|
|
var i = 0;
|
|
objects.layers = new Object();
|
|
$(".slider-editor .draggable-item", $("#slider-form_" + langID)).each(function() {
|
|
var iobject = new Object();
|
|
$.each($(this).data("data-form"), function(_, e) {
|
|
if ($(this).attr('name').indexOf('layer_time') == -1) {
|
|
var content_e = e.value;
|
|
// console.log(content_e);
|
|
content_e = content_e.replace(/"/g, "_LEO_DOUBLE_QUOTE_");
|
|
content_e = content_e.replace(/\\/g, "_LEO_BACKSLASH_");
|
|
// console.log(content_e);
|
|
iobject[e.name] = content_e;
|
|
}
|
|
});
|
|
|
|
|
|
iobject.time_start = $("#input-islider_" + iobject.layer_id).val();
|
|
|
|
objects.layers[i] = iobject;
|
|
i++;
|
|
});
|
|
|
|
objects.background_color = $('.slider-backcolor[data-lang=' + langID + ']').val();
|
|
|
|
objects.times = new Object();
|
|
|
|
// console.log(objects);
|
|
return (JSON.stringify(objects));
|
|
}
|
|
this.preview = function() {
|
|
|
|
langID = findActiveLang();
|
|
var params = this.getFormsData(langID);
|
|
// console.log(params);
|
|
url = $("#btn-preview-slider").attr("data-link") + "&content_only=1&preview=1";
|
|
url = url.replace("id_lang=" + $("#current_language").val(), "id_lang=" + langID);
|
|
|
|
var field = 'input-layer-class';
|
|
var $class = $("#" + field).val();
|
|
|
|
$('#dialog').remove();
|
|
|
|
$('#content').prepend('<div id="dialog" style="padding: 3px 0px 0px 0px;"><form action="' + url + '&field=' +
|
|
encodeURIComponent(field) + '" method="post" target="iframename" id="formid"><input type="hidden" name="slider_preview_data" id="slider-preview-data"></form><iframe name="iframename" src="' + url + '&field=' +
|
|
encodeURIComponent(field) + '" style="padding:0; margin: 0; display: block; width: 100%; height: 100%;" frameborder="no" scrolling="auto"></iframe></div>');
|
|
|
|
$("#slider-preview-data").val(params);
|
|
$('#dialog').dialog({
|
|
title: 'Preview Management',
|
|
close: function(event, ui) {
|
|
|
|
},
|
|
bgiframe: false,
|
|
width: 1024,
|
|
height: 780,
|
|
resizable: true,
|
|
draggable: false,
|
|
modal: true
|
|
});
|
|
$("#formid").submit();
|
|
};
|
|
|
|
this.insertTypo = function() {
|
|
var $this = this;
|
|
$(".btn-insert-typo").click(function() {
|
|
langID = findActiveLang()
|
|
var field = 'input-layer-class_' + langID;
|
|
var $class = $("#" + field).val();
|
|
$('#dialog').remove();
|
|
|
|
$('#content').prepend('<div id="dialog" style="padding: 3px 0px 0px 0px;"><iframe src="' + ajaxfilelink + '&typo=1&field=' + encodeURIComponent(field) + '" style="padding:0; margin: 0; display: block; width: 100%; height: 100%;" frameborder="no" scrolling="auto"></iframe></div>');
|
|
|
|
$('#dialog').dialog({
|
|
title: 'Typo Management',
|
|
close: function(event, ui) {
|
|
if ($("#" + field).val()) {
|
|
$this.currentLayer.removeClass($class).addClass($("#" + field).val());
|
|
$this.storeCurrentLayerData(langID);
|
|
}
|
|
},
|
|
bgiframe: false,
|
|
width: 1024,
|
|
height: 780,
|
|
resizable: true,
|
|
modal: false
|
|
});
|
|
});
|
|
}
|
|
|
|
/**
|
|
*
|
|
*/
|
|
this.showDialogVideo = function() {
|
|
$("#dialog-video_" + findActiveLang()).show();
|
|
this.videoDialogProcess('');
|
|
}
|
|
this.videoDialogProcess = function(videoID, langID) {
|
|
var $this = this;
|
|
$("#apply_this_video_" + langID).hide();
|
|
var error = false;
|
|
|
|
if (videoID != "") {
|
|
|
|
if ($("#layer_video_type_" + langID).val() == 'vimeo') {
|
|
$.getJSON('http://www.vimeo.com/api/v2/video/' + videoID + '.json?callback=?', {
|
|
format: "json"
|
|
}, function(data) {
|
|
|
|
$this.showVideoPreview(data[0].title, data[0].description, data[0].thumbnail_large, langID);
|
|
});
|
|
} else {
|
|
$.getJSON("https://api.unblockvideos.com/youtube_restrictions", {
|
|
part: "pretty_print=true",
|
|
id: videoID
|
|
}, function(data) {
|
|
$("#apply_this_video_" + langID).show();
|
|
// console.log(data[0].id);
|
|
// if (data.items.length === 0) {
|
|
// // Video not found.
|
|
// return;
|
|
// }
|
|
// $this.showVideoPreview(data.items['0'].snippet.title, data.items['0'].snippet.description, data.items['0'].snippet.thumbnails.high.url, langID)
|
|
});
|
|
}
|
|
}
|
|
};
|
|
|
|
this.showVideoPreview = function(title, description, image, langID) {
|
|
|
|
if (title) {
|
|
var html = '';
|
|
html += '<div class="video-title">' + title + '</div>';
|
|
html += '<img src="' + image + '">';
|
|
html += '<div class="video-description">' + description + '</div>';
|
|
$("#layer_video_thumb_" + langID).val(image);
|
|
$("#video-preview_" + langID).html(html);
|
|
$("#apply_this_video_" + langID).show();
|
|
} else {
|
|
$("#video-preview_" + langID).html('<div class="error">Could not find any thing</div>');
|
|
}
|
|
}
|
|
/**
|
|
* Set Current Layer is Actived And Show Form Setting For It.
|
|
*/
|
|
this.setCurrentLayerActive = function(layer, langID) {
|
|
// console.log($(layer));
|
|
//$(".draggable-item", this.seditor).removeClass("layer-active");
|
|
$('#slider-editor_' + langID).find(".draggable-item").removeClass("layer-active");
|
|
// console.log(this.seditor);
|
|
$(layer).addClass("layer-active");
|
|
// console.log($(layer));
|
|
|
|
//$(".layer-index", this.layers).removeClass("layer-active");
|
|
$('#layer-collection_' + langID).find(".layer-index").removeClass("layer-active");
|
|
// console.log(this.layers);
|
|
$("#i-" + layer.attr("id")).addClass("layer-active");
|
|
// console.log($("#i-" + layer.attr("id")));
|
|
this.currentLayer = layer;
|
|
// console.log(this.currentLayer);
|
|
this.showLayerForm(layer, langID);
|
|
// console.log(this.currentLayer);
|
|
};
|
|
|
|
/**
|
|
* Add Layer Having Type Text
|
|
*/
|
|
this.addLayerText = function(layer, ilayer, caption, langID) {
|
|
caption = caption.replace(/\_ASM_/g, '&');
|
|
layer.addClass('layer-text');
|
|
$(".caption-layer", layer).html(caption);
|
|
this.seditor.append(layer);
|
|
$("#layer_type_" + langID).val('text');
|
|
this.ilayers.append(ilayer);
|
|
$(".layer-index-caption", ilayer).html(caption);
|
|
};
|
|
|
|
/**
|
|
* Add Layer Having Type Video: Support YouTuBe And Vimeo.
|
|
*/
|
|
this.addLayerVideo = function(layer, ilayer, caption, langID) {
|
|
caption = caption.replace(/\_ASM_/g, '&');
|
|
layer.addClass('layer-content');
|
|
$(".caption-layer", layer).html(caption);
|
|
this.seditor.append(layer);
|
|
|
|
this.ilayers.append(ilayer);
|
|
$(".layer-index-caption", ilayer).html(caption);
|
|
|
|
$("#layer_type_" + langID).val('video');
|
|
layer.append('<div class="layer_video" id="' + 'video-' + layer.attr('id') + '"><div class="content-sample"></div></div><div class="btn-change-video">Change Video</div>');
|
|
|
|
};
|
|
|
|
/**
|
|
* Add Layer Having Type Image.
|
|
*/
|
|
this.addLayerImage = function(layer, ilayer, caption, langID) {
|
|
caption = caption.replace(/\_ASM_/g, '&');
|
|
layer.addClass('layer-content');
|
|
$(".caption-layer", layer).html(caption);
|
|
layer.append('<div class="layer_image" id="' + 'img-' + layer.attr('id') + '"><div class="content-sample"></div></div><div class="btn-change-img">Change Image</div>');
|
|
this.seditor.append(layer);
|
|
|
|
this.ilayers.append(ilayer);
|
|
$(".layer-index-caption", ilayer).html(caption);
|
|
|
|
$("#layer_type_" + langID).val('image');
|
|
$("#layer_content_" + langID).val('');
|
|
// show input form
|
|
|
|
};
|
|
|
|
|
|
this.showDialogImage = function(thumb) {
|
|
var $this = this;
|
|
var field = 'layer_content_' + findActiveLang();
|
|
var $url = this.adminURL;
|
|
dialog_param = {
|
|
window: window,
|
|
image_src: ''
|
|
};
|
|
|
|
$('#dialog').remove();
|
|
$('#content').prepend('<div id="dialog" style="padding: 3px 0px 0px 0px;"><iframe src="' + $url + '&field=' + encodeURIComponent(field) + '" style="padding:0; margin: 0; display: block; width: 100%; height: 100%;" frameborder="no" scrolling="auto"></iframe></div>');
|
|
$('#dialog').dialog({
|
|
title: 'Image Management',
|
|
close: function(event, ui) {
|
|
if ($('#' + field).val()) {
|
|
correctLink = $('#' + field).val();
|
|
$('#' + field).val(correctLink);
|
|
|
|
var image_src = psBaseModuleUri + $('#' + field).val();
|
|
if (dialog_param.image_src != '') {
|
|
var image_src = dialog_param.image_src;
|
|
}
|
|
|
|
$('#' + thumb).replaceWith('<img src="' + image_src + '" alt="" id="' + thumb + '" />');
|
|
$this.storeCurrentLayerData(findActiveLang());
|
|
} else {
|
|
$this.storeCurrentLayerData(findActiveLang());
|
|
$this.deleteCurrentLayer(); // Close image
|
|
}
|
|
},
|
|
bgiframe: false,
|
|
width: 1024,
|
|
height: 780,
|
|
resizable: true,
|
|
modal: false
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Delete Current Layer: Remove HTML and Data. Hidden Form When Delete All Layers.
|
|
*/
|
|
this.deleteCurrentLayer = function() {
|
|
var $this = this;
|
|
if ($this.currentLayer) {
|
|
$("#i-" + $this.currentLayer.attr("id")).remove();
|
|
$this.currentLayer.remove();
|
|
$this.currentLayer.data("data-form", null);
|
|
$this.currentLayer = null;
|
|
// if( $(".draggable-item",$this.seditor).length <= 0 ) {
|
|
$this.lform.hide();
|
|
$('#dialog').remove();
|
|
$('#dialog-video').hide();
|
|
// }
|
|
} else {
|
|
alert($(".text-alert").data("delete"));
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Set Default Value For Data Element Form Of Layer With Default Setting Or Sepecified Data.
|
|
*/
|
|
this.createDefaultLayerData = function(layer, data, langID) {
|
|
var $this = this;
|
|
if (data != null && data) {
|
|
$.each(data, function(key, valu) {
|
|
if (key != 'layer_slider') {
|
|
if (key == 'layer_caption' || key == 'layer_link') {
|
|
if (valu)
|
|
valu = valu.replace(/_ASM_/g, '&').replace(/'/g, "'");
|
|
}
|
|
|
|
$('[name="' + key + '"]', '#slider-form_' + langID).val(valu);
|
|
}
|
|
|
|
if (key == 'layer_top') {
|
|
$this.currentLayer.css('top', valu + 'px');
|
|
}
|
|
if (key == 'layer_left') {
|
|
$this.currentLayer.css('left', valu + 'px');
|
|
}
|
|
});
|
|
|
|
if (data['layer_type'] == 'image') {
|
|
var thumb = 'img-' + $this.currentLayer.attr('id');
|
|
//var src = $this.siteURL+"image/"+data['layer_content_'+langID];
|
|
|
|
|
|
var image_src = psBaseModuleUri + data['layer_content'];
|
|
//window.console.log(image_src);
|
|
if (((data['layer_content'].substr(0, 4) == 'http')) || ((data['layer_content'].substr(0, 10) == 'data:image'))) {
|
|
image_src = decodeURIComponent(data['layer_content']);
|
|
}
|
|
|
|
$('#' + thumb).replaceWith('<img src="' + image_src + '" alt="" id="' + thumb + '" />');
|
|
// this.siteURL
|
|
}
|
|
if (data['layer_type'] == 'video') {
|
|
var thumb = 'video-' + $this.currentLayer.attr('id');
|
|
var src = data['layer_video_thumb'];
|
|
$(".content-sample", $this.currentLayer).html('<img height="' + data['layer_video_height'] + '" width="' + data['layer_video_width'] + '" src="' + src + '"/>');
|
|
// this.siteURL
|
|
}
|
|
if (data['layer_type'] == 'text') {
|
|
$this.currentLayer.addClass(data['layer_class']);
|
|
|
|
|
|
$('[name="layer_font_size"]', '#slider-form_' + langID).trigger('change');
|
|
$('[name="layer_background_color"]', '#slider-form_' + langID).css('background-color', $('[name="layer_background_color"]', '#slider-form_' + langID).val());
|
|
$('[name="layer_background_color"]', '#slider-form_' + langID).trigger('change');
|
|
$('[name="layer_color"]', '#slider-form_' + langID).css('background-color', $('[name="layer_color"]', '#slider-form_' + langID).val());
|
|
$('[name="layer_color"]', '#slider-form_' + langID).trigger('change');
|
|
|
|
$this.currentLayer.addClass(data['layer_class']);
|
|
}
|
|
|
|
if (data['layer_caption'])
|
|
data['layer_caption'] = data['layer_caption'].replace(/_ASM_/g, '&').replace(/'/g, "'");
|
|
if (data['layer_link'] != undefined)
|
|
data['layer_link'] = data['layer_link'].replace(/_ASM_/g, '&').replace(/'/g, "'");
|
|
|
|
$(".caption-layer", $this.currentLayer).html(data['layer_caption']);
|
|
|
|
$(".layer-index-caption", '#i-slayerID' + data['layer_id']).text($(".caption-layer", $this.currentLayer).text());
|
|
|
|
$('[name="layer_time[' + data['layer_id'] + ']"]', '#slider-form_' + langID).val(data['time_start']);
|
|
$("#islider_" + data['layer_id']).slider('value', data['time_start']);
|
|
|
|
//$this.currentLayer = layer;
|
|
} else {
|
|
// Add new layer
|
|
$('[name="layer_caption"]', '#slider-form_' + langID).val($(".caption-layer", layer).html()).trigger('change');
|
|
$('[name="layer_left"]', '#slider-form_' + langID).val(0);
|
|
$('[name="layer_top"]', '#slider-form_' + langID).val(0);
|
|
$('[name="layer_class"]', '#slider-form_' + langID).val('');
|
|
$('[name="layer_font_size"]', '#slider-form_' + langID).val('');
|
|
$('[name="layer_background_color"]', '#slider-form_' + langID).val('');
|
|
$('[name="layer_background_color"]', '#slider-form_' + langID).trigger('change');
|
|
$('[name="layer_color"]', '#slider-form_' + langID).val('');
|
|
$('[name="layer_color"]', '#slider-form_' + langID).trigger('change');
|
|
$('[name="layer_link"]', '#slider-form_' + langID).val('');
|
|
$('[name="layer_speed"]', '#slider-form_' + langID).val(350);
|
|
$('[name="layer_endtime"]', '#slider-form_' + langID).val(0);
|
|
$('[name="layer_endspeed"]', '#slider-form_' + langID).val(300);
|
|
$('[name="layer_endanimation"]', '#slider-form_' + langID).val('auto');
|
|
$('[name="layer_endeasing"]', '#slider-form_' + langID).val('nothing');
|
|
$('[name="layer_status"]', '#slider-form_' + langID).val('1');
|
|
}
|
|
this.storeCurrentLayerData(langID);
|
|
|
|
};
|
|
|
|
/**
|
|
* Update Position In Element Form Of Current When Draping.
|
|
*/
|
|
this.updatePosition = function(left, top) {
|
|
langID = findActiveLang();
|
|
$('[name="layer_top"]', '#slider-form_' + langID).val(parseInt(top));
|
|
$('[name="layer_left"]', '#slider-form_' + langID).val(parseInt(left));
|
|
this.storeCurrentLayerData(langID);
|
|
};
|
|
|
|
/**
|
|
* Show Layer Form When A Layer Is Actived.
|
|
* Set data to form
|
|
*/
|
|
this.showLayerForm = function(layer, langID) {
|
|
// restore data form for
|
|
var $currentLayer = this.currentLayer;
|
|
if ($currentLayer.data("data-form")) {
|
|
$.each($currentLayer.data("data-form"), function(_, kv) {
|
|
if ($(this).attr('name').indexOf('layer_time') == -1) {
|
|
$('[name="' + kv.name + '"]', '#slider-form_' + langID).val(kv.value);
|
|
//console.log('[name="'+kv.name+'"]' + ' : ' + kv);
|
|
}
|
|
});
|
|
}
|
|
// Change color 2 button
|
|
$('[name="layer_color"]', '#slider-form_' + langID).css('background-color', $('[name="layer_color"]', '#slider-form_' + langID).val());
|
|
$('[name="layer_background_color"]', '#slider-form_' + langID).css('background-color', $('[name="layer_background_color"]', '#slider-form_' + langID).val());
|
|
$("#layer-form_" + langID).show();
|
|
};
|
|
|
|
/**
|
|
* Set Current Layer Data.
|
|
*/
|
|
this.storeCurrentLayerData = function(langID) {
|
|
this.state = false;
|
|
|
|
this.currentLayer.data("data-form", $('#slider-form_' + langID).serializeArray());
|
|
|
|
};
|
|
|
|
//THIS IS VERY IMPORTANT TO KEEP AT THE END
|
|
return this;
|
|
};
|
|
|
|
})(jQuery);
|
|
/***/
|
|
function background_upload(field, thumb, ajaxfilelink, psBaseModuleUri) {
|
|
$('#dialog').remove();
|
|
|
|
$('#content').prepend('<div id="dialog" style="padding: 3px 0px 0px 0px;"><iframe src="' + ajaxfilelink + '&field=' + encodeURIComponent(field) + '" style="padding:0; margin: 0; display: block; width: 100%; height: 100%;" frameborder="no" scrolling="auto"></iframe></div>');
|
|
|
|
$('#dialog').dialog({
|
|
title: 'Select Background',
|
|
close: function(event, ui) {
|
|
correctLink = $('#' + field).val();
|
|
$('#' + field).val(correctLink);
|
|
$('#' + thumb).attr("src", psBaseModuleUri + correctLink);
|
|
$('#' + thumb).show();
|
|
},
|
|
bgiframe: false,
|
|
width: 1024,
|
|
height: 780,
|
|
resizable: true,
|
|
modal: false
|
|
});
|
|
return false;
|
|
}
|
|
$(document).ready(function() {
|
|
$(".leo-w-option").click(function() {
|
|
widthVal = $(this).data("width");
|
|
html = $(this).html() + '<span class="caret"></span>';
|
|
elementDiv = $(this).closest("div");
|
|
$(".col-val", $(elementDiv)).val(widthVal);
|
|
$("button", $(elementDiv)).html(html);
|
|
});
|
|
$(".choise-class").click(function() {
|
|
$(this).parent().find('input[type=checkbox]').trigger("click");
|
|
});
|
|
$(".leo-col-class input[type=radio]").click(function() {
|
|
if (!$(this).hasClass('active')) {
|
|
// classChk = $(this).attr("name").replace("col_", "");
|
|
classChk = $(this).data("name");
|
|
elementText = $(this).closest('.well').find('.group-class').first();
|
|
if ($(elementText).val() != "") {
|
|
var check_class_exists = false;
|
|
if ($(".leo-col-class input[type=radio]:checked").length) {
|
|
// console.log($(".leo-col-class input[type=radio]:checked").data("name"));
|
|
// console.log($(elementText).val());
|
|
|
|
$(".leo-col-class input[type=radio]:not(:checked)").each(function() {
|
|
// console.log($(this).data("name"));
|
|
// console.log($(elementText).val());
|
|
var e_val = $(elementText).val();
|
|
// $(elementText).val(e_val.replace($(this).data("name"),""));
|
|
// console.log($(elementText).val());
|
|
//console.log(e_val.indexOf($(this).data("name")));
|
|
if (e_val.indexOf($(this).data("name")) != -1) {
|
|
$(elementText).val(e_val.replace($(this).data("name"), classChk));
|
|
check_class_exists = true;
|
|
}
|
|
})
|
|
}
|
|
if (check_class_exists == false) {
|
|
// $(elementText).val($(elementText).val() + " " + classChk);
|
|
if ($(elementText).val() != "") {
|
|
$(elementText).val($(elementText).val() + " " + classChk);
|
|
} else {
|
|
$(elementText).val(classChk);
|
|
}
|
|
}
|
|
|
|
|
|
} else {
|
|
$(elementText).val(classChk);
|
|
}
|
|
$(".leo-col-class input.active").removeClass('active');
|
|
$(this).addClass('active');
|
|
}
|
|
// $(elementText).val('');
|
|
// $(elementText).val(classChk);
|
|
//add
|
|
// if ($(this).is(':checked')) {
|
|
// if ($(elementText).val().indexOf(classChk) == -1) {
|
|
// if ($(elementText).val() != "") {
|
|
// $(elementText).val($(elementText).val() + " " + classChk);
|
|
// } else {
|
|
// $(elementText).val(classChk);
|
|
// }
|
|
// }
|
|
// } else {
|
|
//remove
|
|
// if ($(elementText).val().indexOf(classChk) != -1) {
|
|
// $(elementText).val($(elementText).val().replace(classChk + " ", ""));
|
|
// $(elementText).val($(elementText).val().replace(" " + classChk, ""));
|
|
// $(elementText).val($(elementText).val().replace(classChk, ""));
|
|
// }
|
|
// }
|
|
});
|
|
|
|
$(".group-class").change(function() {
|
|
elementChk = $(this).closest('.well').find('input[type=checkbox]');
|
|
classText = $(this).val();
|
|
$(elementChk).each(function() {
|
|
classChk = $(this).attr("name").replace("col_", "");
|
|
if (classText.indexOf(classChk) != -1) {
|
|
if (!$(this).is(':checked'))
|
|
$(this).prop("checked", true);
|
|
} else {
|
|
$(this).prop("checked", false);
|
|
}
|
|
});
|
|
});
|
|
|
|
$(".group-class").trigger('change');
|
|
$(".slideshow-mode").change(function() {
|
|
classShow = "mode-" + $(this).val();
|
|
$('.mode-width').each(function() {
|
|
if ($(this).hasClass(classShow))
|
|
$(this).closest('.form-group').show();
|
|
else
|
|
$(this).closest('.form-group').hide();
|
|
});
|
|
});
|
|
$(".slideshow-mode").trigger('change');
|
|
|
|
//DONGND:: move form javascript inline
|
|
if (typeof leo_slider_list_link != 'undefined' && leo_slider_list_link.length) {
|
|
var $mySlides = $("#slides");
|
|
$mySlides.sortable({
|
|
opacity: 0.6,
|
|
cursor: "move",
|
|
update: function() {
|
|
var order = $(this).sortable("serialize") + "&action=updateSlidesPosition";
|
|
$.post(leo_slider_list_link, order).done(function() {
|
|
showSuccessMessage(update_success_msg);
|
|
});
|
|
}
|
|
});
|
|
$mySlides.hover(function() {
|
|
$(this).css("cursor", "move");
|
|
},
|
|
function() {
|
|
$(this).css("cursor", "auto");
|
|
});
|
|
}
|
|
|
|
$("#module_form .translatable-field").each(function() {
|
|
$('<a href="javascript:void(0)" title="Click on it to copy text to other language" class="btn btn-success slide-copy-lang">Duplicate</a>').insertAfter($(this).find('.dropdown-toggle')).click(function() {
|
|
input = $(this).closest('.translatable-field').find('div').first().find('input').first();
|
|
textarea = $(this).closest('.translatable-field').find('div').first().find('textarea').first();
|
|
//ifame = $(this).closest('.translatable-field').find('div').first().find('iframe').first();
|
|
image = $(this).closest('.translatable-field').find('div').first().find('img').first();
|
|
isvideo = 0
|
|
if (isvideo = $(this).closest('.translatable-field').find("select[name^='usevideo']").length) {
|
|
usevideo = $(this).closest('.translatable-field').find("select[name^='usevideo']").val();
|
|
videoauto = $(this).closest('.translatable-field').find("select[name^='videoauto']").val();
|
|
}
|
|
|
|
$(this).closest('.translatable-field').parent().closest('.form-group').find('.translatable-field').each(function() {
|
|
$(this).find('div').first().find('input').each(function() {
|
|
$(this).val($(input).val());
|
|
});
|
|
|
|
$(this).find('div').first().find('textarea').each(function() {
|
|
$(this).val($(textarea).val());
|
|
});
|
|
$(this).find('div').first().find('img').each(function() {
|
|
$(this).attr('src', $(image).attr('src'));
|
|
$(this).attr('data-img', $(image).attr('data-img'));
|
|
});
|
|
|
|
$(this).find('div').first().find('img').each(function() {
|
|
$(this).attr('src', $(image).attr('src'));
|
|
$(this).attr('data-img', $(image).attr('data-img'));
|
|
});
|
|
if (isvideo) {
|
|
$(this).find('div').first().find("select[name^='usevideo']").each(function() {
|
|
$(this).val(usevideo);
|
|
});
|
|
$(this).find('div').first().find("select[name^='videoauto']").each(function() {
|
|
$(this).val(videoauto);
|
|
});
|
|
}
|
|
})
|
|
});
|
|
|
|
});
|
|
|
|
}); |