Created
December 3, 2014 05:40
-
-
Save seanmcn/91518672fbfba8d9f0b9 to your computer and use it in GitHub Desktop.
Product Customiser for
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| * 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