Skip to content

Instantly share code, notes, and snippets.

@seanmcn
Created December 3, 2014 05:40
Show Gist options
  • Save seanmcn/91518672fbfba8d9f0b9 to your computer and use it in GitHub Desktop.
Save seanmcn/91518672fbfba8d9f0b9 to your computer and use it in GitHub Desktop.
Product Customiser for
/*
* Product Customiser for Celtic Commemorations
* @Documentation: http://lmgtfy.com/?q=jquery+documentationl=1
*/
var popupStatus = 0; //0 means disabled; 1 means enabled;
var page = 0;
var text = 0;
var textAreaStatus = 0;
var currentTextAreas = 0;
var maxTextAreas = 3;
var lastLayout = 'none';
var lastAlignment = 0;
//Delete All Modifications
function deleteAll() {
$('.box').empty();
$('.textArea').detach();
currentTextAreas = 0;
}
function capitaliseFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
function unCapitaliseFirstLetter(string) {
return string.charAt(0).toLowerCase() + string.slice(1);
}
function strip_tags(input, allowed) {
allowed = (((allowed || "") + "").toLowerCase().match(/<[a-z][a-z0-9]*>/g) || []).join(''); // making sure the allowed arg is a string containing only tags in lowercase (<a><b><c>)
var tags = /<\/?([a-z][a-z0-9]*)\b[^>]*>/gi,
commentsAndPhpTags = /<!--[\s\S]*?-->|<\?(?:php)?[\s\S]*?\?>/gi;
return input.replace(commentsAndPhpTags, '').replace(tags, function ($0, $1) {
return allowed.indexOf('<' + $1.toLowerCase() + '>') > -1 ? $0 : '';
});
}
//Load Main Overlay
function loadPopup() {
//loads popup only if it is disabled
if (popupStatus === 0) {
$("#backgroundOverlay").css({
"opacity": "0.7"
});
$("#backgroundOverlay").fadeIn("slow");
$(".popupOverlay").fadeIn("slow");
popupStatus = 1;
}
}
//Disable Text Overlay
function disableTextOverlay() {
//disables only if it is enabled
if (textAreaStatus === 1) {
$("#backgroundTextOverlay").fadeOut("slow");
$("#textOverlay").fadeOut("slow");
textAreaStatus = 0;
}
}
//Disable Main Overlay
function disablePopup() {
//disables popup only if it is enabled
if (popupStatus === 1) {
$("#backgroundOverlay").fadeOut("slow");
$(".popupOverlay").fadeOut("slow");
popupStatus = 0;
}
deleteAll();
disableTextOverlay();
}
//Center Main Overlay
function centerPopup() {
//request data for centering
var windowWidth, windowHeight, popupHeight, popupWidth;
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
popupHeight = $(".popupOverlay").height();
popupWidth = $(".popupOverlay").width();
//centering
$(".popupOverlay").css({
"position": "absolute",
"top": windowHeight / 2 - popupHeight / 2,
"left": windowWidth / 2 - popupWidth / 2
});
//only need force for IE6
$("#backgroundOverlay").css({
"height": windowHeight
});
}
//Setup font preview
function fontPreviewSetup() {
var font, fontName;
fontName = $('#font_select :selected').text();
font = $('#font_select :selected').val();
//Font Preview Area
$('#fontDisplay').empty();
$('#fontDisplay').append(fontName);
Cufon.set('fontSize', '16px').replace('#fontDisplay', { fontFamily: font, hover: true });
}
//Load Text Overlay
function loadTextOverlay(textAreaID) {
var more;
fontPreviewSetup();
$('#enterTheText').val('');
//loads overlay only if it is disabled
if (textAreaStatus === 0) {
if (!$.browser.msie) {
$("#backgroundTextOverlay").css({
"opacity": "0.7"
});
$("#backgroundTextOverlay").fadeIn("slow");
}
$("#textOverlay").fadeIn("slow");
textAreaStatus = 1;
}
}
//Center the text Overlay
function centerTextOverlay() {
//request data for centering
var windowWidth, windowHeight, popupHeight, popupWidth;
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
popupHeight = $("#textOverlay").height();
popupWidth = $("#textOverlay").width();
//centering
$("#textOverlay").css({
"position": "absolute",
"top": windowHeight / 2 - popupHeight / 2,
"left": windowWidth / 2 - popupWidth / 2
});
//only need force for IE6
$("#backgroundTextOverlay").css({
"height": windowHeight
});
}
//Main Images Page
function paginationMain() {
$("img.library_image#inactive").each(function () {
$(this).css("display", "block");
});
page = 1;
$("#more").html("Corner Images ->");
}
//Corner Images Page
function paginationCorner() {
$("img.corner_image#inactive").each(function () {
$(this).css("display", "block");
});
page = 0;
$("#more").html("<- Main Images");
}
//Paginiation, which page check
function pagination() {
$("img#inactive").each(function () {
$(this).css("display", "none");
});
if (page === 0) {
paginationMain();
} else {
paginationCorner();
}
}
//Save All Modifications
function saveAll() {
var a, p, alignment, productType, left, right, center, topLeft, topRight, bottomLeft, bottomRight, bottom, box, productId, font, fontSize, landscapeUrnLeft, landscapeUrnRight, landscapeUrnBottom, landscapePlaqueBottom, landscapePlaqueLeft, landscapePlaqueRight, portraitPlaqueTop, portraitPlaqueCenter, portraitPlaqueBottom, post;
a = $('.box_image').attr("data-alignment");
p = $("#productType").html();
alignment = capitaliseFirstLetter(a);
productType = unCapitaliseFirstLetter(p);
left = $("#" + productType + alignment + "Left img").attr("data-id");
right = $("#" + productType + alignment + "Right img").attr("data-id");
center = $("#" + productType + alignment + "Center img").attr("data-id");
topLeft = $("#" + productType + alignment + "TopLeft img").attr("data-id");
topRight = $("#" + productType + alignment + "TopRight img").attr("data-id");
bottomLeft = $("#" + productType + alignment + "BottomLeft img").attr("data-id");
bottomRight = $("#" + productType + alignment + "BottomRight img").attr("data-id");
if (alignment === "portrait") {
bottom = $("#" + productType + alignment + "Bottom img").attr("data-id");
} else {
bottom = "undefined";
}
box = $('.box_image').attr("id");
productId = $('#productId').html();
font = $('#font_select :selected').val();
fontSize = $('#font_size :selected').val();
landscapeUrnLeft = $(".dropText#landscapeUrnLeft .textArea#save").html();
landscapeUrnRight = $(".dropText#landscapeUrnRight .textArea#save").html();
landscapeUrnBottom = $(".dropText#landscapeUrnBottom .textArea#save").html();
landscapePlaqueBottom = $(".dropText#landscapePlaqueBottom .textArea#save").html();
landscapePlaqueLeft = $(".dropText#landscapePlaqueLeft .textArea#save").html();
landscapePlaqueRight = $(".dropText#landscapePlaqueRight .textArea#save").html();
portraitPlaqueTop = $(".dropText#portraitPlaqueTop .textArea#save").html();
portraitPlaqueCenter = $(".dropText#portraitPlaqueCenter .textArea#save").html();
portraitPlaqueBottom = $(".dropText#portraitPlaqueBottom .textArea#save").html();
//Strip HTMl, keep <br>s
if (landscapeUrnLeft !== undefined) {
landscapeUrnLeft = strip_tags(landscapeUrnLeft, "<br><br />");
}
if (landscapeUrnBottom !== undefined) {
landscapeUrnBottom = strip_tags(landscapeUrnBottom, "<br><br />");
}
if (landscapeUrnRight !== undefined) {
landscapeUrnRight = strip_tags(landscapeUrnRight, "<br><br />");
}
if (landscapePlaqueBottom !== undefined) {
landscapePlaqueBottom = strip_tags(landscapePlaqueBottom, "<br><br />");
}
if (landscapePlaqueLeft !== undefined) {
landscapePlaqueLeft = strip_tags(landscapePlaqueLeft, "<br><br />");
}
if (landscapePlaqueRight !== undefined) {
landscapePlaqueRight = strip_tags(landscapePlaqueRight, "<br><br />");
}
if (portraitPlaqueTop !== undefined) {
portraitPlaqueTop = strip_tags(portraitPlaqueTop, "<br><br />");
}
if (portraitPlaqueCenter !== undefined) {
portraitPlaqueCenter = strip_tags(portraitPlaqueCenter, "<br><br />");
}
if (portraitPlaqueBottom !== undefined) {
portraitPlaqueBottom = strip_tags(portraitPlaqueBottom, "<br><br />");
}
/* Post Data */
post = $('<form action="add-me.php" method="post" id="submitForm">' +
/* Images */
'<input type="hidden" name="left" value="' + left + '">' +
'<input type="hidden" name="right" value="' + right + '">' +
'<input type="hidden" name="center" value="' + center + '">' +
'<input type="hidden" name="bottom" value="' + bottom + '">' +
'<input type="hidden" name="topLeft" value="' + topLeft + '">' +
'<input type="hidden" name="topRight" value="' + topRight + '">' +
'<input type="hidden" name="bottomLeft" value="' + bottomLeft + '">' +
'<input type="hidden" name="bottomRight" value="' + bottomRight + '">' +
/* Text */
'<input type="hidden" name="landscapeUrnLeft" value="' + landscapeUrnLeft + '">' +
'<input type="hidden" name="landscapeUrnBottom" value="' + landscapeUrnBottom + '">' +
'<input type="hidden" name="landscapeUrnRight" value="' + landscapeUrnRight + '">' +
'<input type="hidden" name="landscapePlaqueLeft" value="' + landscapePlaqueLeft + '">' +
'<input type="hidden" name="landscapePlaqueBottom" value="' + landscapePlaqueBottom + '">' +
'<input type="hidden" name="landscapePlaqueRight" value="' + landscapePlaqueRight + '">' +
'<input type="hidden" name="portraitPlaqueTop" value="' + portraitPlaqueTop + '">' +
'<input type="hidden" name="portraitPlaqueCenter" value="' + portraitPlaqueCenter + '">' +
'<input type="hidden" name="portraitPlaqueBottom" value="' + portraitPlaqueBottom + '">' +
/* Box */
'<input type="hidden" name="box" value="' + box + '">' +
'<input type="hidden" name="alignment" value="' + alignment + '">' +
'<input type="hidden" name="productType" value="' + productType + '">' +
'<input type="hidden" name="font" value="' + font + '">' +
'<input type="hidden" name="fontSize" value="' + fontSize + '">' +
'<input type="hidden" name="id_prd" value="' + productId + '">' +
'</form>').appendTo('#formArea').submit();
}
//Switch Font
function fontSwitch() {
var font, fontName;
fontName = $('#font_select :selected').text();
font = $('#font_select :selected').val();
$('#fontDisplay').empty();
$('#fontDisplay').append(fontName);
Cufon.set('fontSize', '16px').replace('#fontDisplay', { fontFamily: font, hover: true });
}
function resetDropTextCSS() {
$(".dropText").css({"width": "", "height": ""});
$(".dropTextHelper").css({"width": "", "height": ""});
$(".textArea").css("width", "");
}
/*Sets up droppable text areas */
function setupTextAreas(userChoice) {
var alignment, productType;
alignment = $('.box_image').attr("data-alignment");
productType = $('#productType').html();
if (lastLayout !== userChoice && lastAlignment !== alignment) {
$(".dropText, .dropTextHelper, .textArea").detach();
currentTextAreas = 1;
}
if (alignment === "landscape" && productType === "Urn") {
switch (userChoice) {
case 1:
$('<div class="dropText" id="landscapeUrnLeft"></div>"').appendTo("#overlayRight");
$('<div class="dropText" id="landscapeUrnBottom"></div>"').appendTo("#overlayRight");
$('<div class="dropTextHelper" id="landscapeUrnLeft"></div>"').appendTo("#overlayRight");
$('<div class="dropTextHelper" id="landscapeUrnBottom"></div>"').appendTo("#overlayRight");
resetDropTextCSS();
break;
case 2:
$('<div class="dropText" id="landscapeUrnRight"></div>"').appendTo("#overlayRight");
$('<div class="dropText" id="landscapeUrnBottom"></div>"').appendTo("#overlayRight");
$('<div class="dropTextHelper" id="landscapeUrnRight"></div>"').appendTo("#overlayRight");
$('<div class="dropTextHelper" id="landscapeUrnBottom"></div>"').appendTo("#overlayRight");
resetDropTextCSS();
break;
}
} else if (alignment === "landscape" && productType === "Plaque") {
switch (userChoice) {
case 1:
$('<div class="dropText" id="landscapePlaqueLeft"></div>"').appendTo("#overlayRight");
$('<div class="dropText" id="landscapePlaqueBottom"></div>"').appendTo("#overlayRight");
$('<div class="dropTextHelper" id="landscapePlaqueLeft"></div>"').appendTo("#overlayRight");
$('<div class="dropTextHelper" id="landscapePlaqueBottom"></div>"').appendTo("#overlayRight");
resetDropTextCSS();
break;
case 2:
$('<div class="dropText" id="landscapePlaqueRight"></div>"').appendTo("#overlayRight");
$('<div class="dropText" id="landscapePlaqueBottom"></div>"').appendTo("#overlayRight");
$('<div class="dropTextHelper" id="landscapePlaqueRight"></div>"').appendTo("#overlayRight");
$('<div class="dropTextHelper" id="landscapePlaqueBottom"></div>"').appendTo("#overlayRight");
resetDropTextCSS();
break;
}
} else if (alignment === "portrait" && productType === "Plaque") {
//Portrait doesnt care about user choice
$('<div class="dropText" id="portraitPlaqueTop"></div>"').appendTo("#overlayRight");
$('<div class="dropText" id="portraitPlaqueCenter"></div>"').appendTo("#overlayRight");
$('<div class="dropText" id="portraitPlaqueBottom"></div>"').appendTo("#overlayRight");
$('<div class="dropTextHelper" id="portraitPlaqueTop"></div>"').appendTo("#overlayRight");
$('<div class="dropTextHelper" id="portraitPlaqueCenter"></div>"').appendTo("#overlayRight");
$('<div class="dropTextHelper" id="portraitPlaqueBottom"></div>"').appendTo("#overlayRight");
$(".dropText").css({"width": "220px", "height": "110px"});
$(".dropTextHelper").css({"width": "220px", "height": "110px"});
}
lastLayout = userChoice;
lastAlignment = alignment;
//Setup Droppable
$(".dropText").droppable({
tolerance: "intersect",
greedy: true,
accept: '.textArea',
drop: function (event, ui) {
$(this).droppable('option', 'accept', ui.draggable);
$(ui.draggable).clone(false).appendTo(this).attr('id', 'save').hide();
},
out: function (event, ui) {
$(this).droppable('option', 'accept', '.textArea');
},
revert: function (event, ui) {
$(this).droppable('option', 'accept', ui.draggable);
}
});
}
//Save font & update display
function fontSave() {
var userChoice, enteredText, font, fontSize;
if (currentTextAreas === maxTextAreas) {
alert("Please delete a text area to add another");
return;
}
currentTextAreas++;
userChoice = $('#text_alignment :selected').val();
setupTextAreas(Number(userChoice));
enteredText = $('textarea#enterTheText').val().replace(/\r\n|\r|\n/g, "<br />");
font = $('#font_select :selected').val();
fontSize = $('#font_size :selected').val();
//Add with text
$('<div class="textArea" id=' + currentTextAreas + '></div>"').appendTo("#overlayRight");
$('.textArea#' + currentTextAreas).append(enteredText);
Cufon.set('fontSize', fontSize).replace('.textArea#' + currentTextAreas, { fontFamily: font, hover: true });
//Make Draggable
//setTextAlignment();
$('.textArea').draggable({
revert: "invalid",
grid: [20, 10],
start: function (event, ui) {
$(".dropTextHelper").fadeIn();
$("#deleteArea").fadeIn();
},
stop: function (event, ui) {
$(".dropTextHelper").fadeOut();
$("#deleteArea").fadeOut();
}
}).fadeIn(); //RESIZABLE()
disableTextOverlay();
alert("Please drag your text to a suitable area");
}
function setTextAlignment() {
var alignment = $('.box_image').attr("data-alignment");
if (alignment === "portrait") {
$(".textArea").css("text-align", "center");
} else {
$(".textArea").css("text-align", "");
}
}
//Setup Droppable Boxes
function setupBoxes(alignment) {
var userChoice, productType;
userChoice = $('#text_alignment :selected').val();
//(Number(userChoice));
productType = $("#productType").html();
if (alignment === "undefined") {
alignment = $('.box_image').attr("data-alignment");
}
$(".box, .boxHelper").remove();
if (alignment === "portrait" && productType === "Plaque") {
//CSS
$("img.box_image").css("margin-left", "32%");
$("img.box_image").css("margin-top", "20px");
//Boxes
$('<div class="box" id="plaquePortraitCenter"></div>"').appendTo("#box");
$('<div class="box" id="plaquePortraitBottom"></div>"').appendTo("#box");
$('<div class="box" id="plaquePortraitTopLeft"></div>"').appendTo("#box");
$('<div class="box" id="plaquePortraitTopRight"></div>"').appendTo("#box");
$('<div class="box" id="plaquePortraitBottomLeft"></div>"').appendTo("#box");
$('<div class="box" id="plaquePortraitBottomRight"></div>"').appendTo("#box");
$('<div class="boxHelper" id="plaquePortraitCenter"></div>"').appendTo("#box");
$('<div class="boxHelper" id="plaquePortraitBottom"></div>"').appendTo("#box");
$('<div class="boxHelper" id="plaquePortraitTopLeft"></div>"').appendTo("#box");
$('<div class="boxHelper" id="plaquePortraitTopRight"></div>"').appendTo("#box");
$('<div class="boxHelper" id="plaquePortraitBottomLeft"></div>"').appendTo("#box");
$('<div class="boxHelper" id="plaquePortraitBottomRight"></div>"').appendTo("#box");
} else if (alignment === "landscape" && productType === "Plaque") {
//CSS
$("img.box_image").css("margin-left", "5%");
$("img.box_image").css("margin-top", "10%");
//Boxes
$('<div class="box" id="plaqueLandscapeLeft"></div>"').appendTo("#box");
$('<div class="box" id="plaqueLandscapeCenter"></div>"').appendTo("#box");
$('<div class="box" id="plaqueLandscapeRight"></div>"').appendTo("#box");
$('<div class="box" id="plaqueLandscapeTopLeft"></div>"').appendTo("#box");
$('<div class="box" id="plaqueLandscapeTopRight"></div>"').appendTo("#box");
$('<div class="box" id="plaqueLandscapeBottomLeft"></div>"').appendTo("#box");
$('<div class="box" id="plaqueLandscapeBottomRight"></div>"').appendTo("#box");
$('<div class="boxHelper" id="plaqueLandscapeLeft"></div>"').appendTo("#box");
$('<div class="boxHelper" id="plaqueLandscapeCenter"></div>"').appendTo("#box");
$('<div class="boxHelper" id="plaqueLandscapeRight"></div>"').appendTo("#box");
$('<div class="boxHelper" id="plaqueLandscapeTopLeft"></div>"').appendTo("#box");
$('<div class="boxHelper" id="plaqueLandscapeTopRight"></div>"').appendTo("#box");
$('<div class="boxHelper" id="plaqueLandscapeBottomLeft"></div>"').appendTo("#box");
$('<div class="boxHelper" id="plaqueLandscapeBottomRight"></div>"').appendTo("#box");
} else {
//CSS
$("img.box_image").css("margin-left", "5%");
$("img.box_image").css("margin-top", "20%");
//Boxes
$('<div class="box" id="urnLandscapeLeft"></div>"').appendTo("#box");
$('<div class="box" id="urnLandscapeCenter"></div>"').appendTo("#box");
$('<div class="box" id="urnLandscapeRight"></div>"').appendTo("#box");
$('<div class="box" id="urnLandscapeTopLeft"></div>"').appendTo("#box");
$('<div class="box" id="urnLandscapeTopRight"></div>"').appendTo("#box");
$('<div class="box" id="urnLandscapeBottomLeft"></div>"').appendTo("#box");
$('<div class="box" id="urnLandscapeBottomRight"></div>"').appendTo("#box");
$('<div class="boxHelper" id="urnLandscapeLeft"></div>"').appendTo("#box");
$('<div class="boxHelper" id="urnLandscapeCenter"></div>"').appendTo("#box");
$('<div class="boxHelper" id="urnLandscapeRight"></div>"').appendTo("#box");
$('<div class="boxHelper" id="urnLandscapeTopLeft"></div>"').appendTo("#box");
$('<div class="boxHelper" id="urnLandscapeTopRight"></div>"').appendTo("#box");
$('<div class="boxHelper" id="urnLandscapeBottomLeft"></div>"').appendTo("#box");
$('<div class="boxHelper" id="urnLandscapeBottomRight"></div>"').appendTo("#box");
}
//Setup Droppables for Main Images
$('.box#urnLandscapeLeft, .box#urnLandscapeCenter, .box#urnLandscapeRight, .box#plaqueLandscapeLeft, .box#plaqueLandscapeCenter, .box#plaqueLandscapeRight, .box#plaquePortraitTop, .box#plaquePortraitCenter, .box#plaquePortraitBottom').droppable({
tolerance: "intersect",
revert: "invalid",
greedy: true,
accept: ".library_image",
drop: function (event, ui) {
if (ui.draggable.attr('id') !== "active") {
//Check to see if box is already being used.
if ($(this).is(':empty')) {
$(ui.draggable).clone(false).draggable({
revert: true,
start: function (event, ui) {
$("#deleteArea").fadeIn();
},
stop : function (event, ui) {
$("#deleteArea").fadeOut();
}
}).appendTo(this);
var id = ui.draggable.attr("data-id");
$("#box img").attr("id", "active"); //Setting active for removal later
}
}
}
});
//Setup Droppables for Corner Images
$(".box#urnLandscapeTopLeft, .box#urnLandscapeTopRight, .box#urnLandscapeBottomLeft, .box#urnLandscapeBottomRight, .box#plaqueLandscapeTopLeft, .box#plaqueLandscapeTopRight, .box#plaqueLandscapeBottomLeft, .box#plaqueLandscapeBottomRight, .box#plaquePortraitTopLeft, .box#plaquePortraitTopRight, .box#plaquePortraitBottomLeft, .box#plaquePortraitBottomRight").droppable({
tolerance: "intersect",
revert: "invalid",
greedy: true,
accept: ".corner_image",
drop: function (event, ui) {
if (ui.draggable.attr('id') !== "active") {
//Check to see if box is already being used.
if ($(this).is(':empty')) {
$(ui.draggable).clone(false).draggable({
revert: true,
start: function (event, ui) {
$("#deleteArea").fadeIn();
},
stop : function (event, ui) {
$("#deleteArea").fadeOut();
}
}).appendTo(this);
var id = ui.draggable.attr("data-id");
$("#box img").css("padding", "0px");
$("#box img").attr("id", "active");//Setting active for removal later
}
}
}
});
}
function changeProductID() {
var id_prd = $('#wood_select :selected').attr("data-id");
$('#productId').html(id_prd);
}
function setProduct(id, url, alignment) {
$('img.box_image').attr("src", "images/boxes/" + url).attr("id", id).attr("data-alignment", alignment);
$('#productId').html(id);
page = 0;
}
function editText(id) {
loadTextOverlay(id);
}
//Document Ready Time
$(document).ready(function () {
$('a#showCustomiser').click(function () {
var id, url, alignment;
id = $(this).attr("data-id");
url = $(this).attr("data-url");
alignment = $(this).attr("data-alignment");
setProduct(id, url, alignment);
centerPopup();
loadPopup();
pagination();
setupBoxes(alignment);
$( "#dialog-message" ).dialog({
modal: true,
minWidth: 400,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
});
//Pagination
$("#more").on("click", pagination);
$("#save_all").on("click", saveAll);
$("#popupOverlayClose").on("click", disablePopup);
$("#backgroundOverlay").on("click", disablePopup);
$("#font_select").on("click", fontSwitch);
$("#delete_all").on("click", deleteAll);
$("#font_save").on("click", fontSave);
$("#backgroundTextOverlay").on("click", disableTextOverlay);
//If esc key pressed
$(document).keydown(function (e) {
if (e.keyCode === 27 && popupStatus === 1) {
disablePopup();
}
});
//Add Text
$("#add_text").click(function () {
centerTextOverlay();
loadTextOverlay();
});
//Draggable
$(".library_image").draggable({
revert: "invalid",
helper: "clone",
scroll: false,
containment: "#box",
appendTo: "#box",
start: function (event, ui) {
$('.boxHelper#urnLandscapeLeft, .boxHelper#urnLandscapeCenter, .boxHelper#urnLandscapeRight, .boxHelper#plaqueLandscapeLeft, .boxHelper#plaqueLandscapeCenter, .boxHelper#plaqueLandscapeRight, .boxHelper#plaquePortraitTop, .boxHelper#plaquePortraitCenter, .boxHelper#plaquePortraitBottom').fadeIn();
//$('#overlayLeft').css("outline", "none");
},
stop: function (event, ui) {
$('.boxHelper#urnLandscapeLeft, .boxHelper#urnLandscapeCenter, .boxHelper#urnLandscapeRight, .boxHelper#plaqueLandscapeLeft, .boxHelper#plaqueLandscapeCenter, .boxHelper#plaqueLandscapeRight, .boxHelper#plaquePortraitTop, .boxHelper#plaquePortraitCenter, .boxHelper#plaquePortraitBottom').fadeOut();
//$('#overlayLeft').css("outline", "");
}
});
$(".corner_image").draggable({
revert: "invalid",
helper: "clone",
scroll: false,
start: function (event, ui) {
$(".boxHelper#urnLandscapeTopLeft, .boxHelper#urnLandscapeTopRight, .boxHelper#urnLandscapeBottomLeft, .boxHelper#urnLandscapeBottomRight, .boxHelper#plaqueLandscapeTopLeft, .boxHelper#plaqueLandscapeTopRight, .boxHelper#plaqueLandscapeBottomLeft, .boxHelper#plaqueLandscapeBottomRight, .boxHelper#plaquePortraitTopLeft, .boxHelper#plaquePortraitTopRight, .boxHelper#plaquePortraitBottomLeft, .boxHelper#plaquePortraitBottomRight").fadeIn();
},
stop: function (event, ui) {
$(".boxHelper#urnLandscapeTopLeft, .boxHelper#urnLandscapeTopRight, .boxHelper#urnLandscapeBottomLeft, .boxHelper#urnLandscapeBottomRight, .boxHelper#plaqueLandscapeTopLeft, .boxHelper#plaqueLandscapeTopRight, .boxHelper#plaqueLandscapeBottomLeft, .boxHelper#plaqueLandscapeBottomRight, .boxHelper#plaquePortraitTopLeft, .boxHelper#plaquePortraitTopRight, .boxHelper#plaquePortraitBottomLeft, .boxHelper#plaquePortraitBottomRight").fadeOut();
}
});
//Drop Back
$("#overlayLeft, #deleteArea").droppable({
drop: function (event, ui) {
//Make sure active so we don't remove all.
var textArea = $(ui.draggable).hasClass('textArea');
if (ui.draggable.attr('id') === "active") {
$(ui.draggable).remove();
$("#deleteArea").fadeOut();
} else if (textArea === true) {
$(ui.draggable).remove();
currentTextAreas--;
$("#deleteArea").fadeOut();
$(".dropTextHelper").fadeOut();
}
}
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment