function enablePWImageDialogButtons() { var $buttonPane = parent.jQuery(".ui-dialog-buttonpane"); $buttonPane.find('button').button("enable"); return; } function disablePWImageDialogButtons() { var $buttonPane = parent.jQuery(".ui-dialog-buttonpane"); $buttonPane.find('button').button("disable"); return; } function closePWImageDialog() { parent.jQuery('iframe.ui-dialog-content').dialog('close'); } function setupProcessSaveReloaded(fileID, isNew) { if(isNew) { var offsetTop = parent.jQuery('#' + fileID).offset().top - 20; parent.jQuery('html, body').animate({ scrollTop: offsetTop }, 1000, 'swing'); parent.jQuery('#' + fileID).hide(); setTimeout(function() { parent.jQuery('#' + fileID).slideDown(); }, 900); } else { parent.jQuery('#' + fileID).find('img').hide(); setTimeout(function() { parent.jQuery('#' + fileID).find('img').fadeIn('normal', function() { parent.jQuery('#' + fileID).find('.gridImage__edit').trigger('click'); }); //if($item2.length) $item2.fadeIn(); }, 500); } closePWImageDialog(); } function setupProcessSave(fieldName, fileID, isNew) { var finished = false; var $inputfield = parent.jQuery('#wrap_Inputfield_' + fieldName); if(!$inputfield.length) { $inputfield = parent.jQuery('#' + fileID).closest('.InputfieldImage'); } $inputfield.trigger('reload'); parent.jQuery('.Inputfield').on('reloaded', function() { if(finished) return; finished = true; if(fileID.length > 0) { setTimeout(function () { setupProcessSaveReloaded(fileID, isNew); }, 250); } }); } function refreshPageEditField(fieldName) { parent.jQuery('#wrap_Inputfield_' + fieldName).trigger('reload'); } function setupExecuteVariations() { $(document).on('click', 'input#delete_all', function(event) { if($(this).is(":checked")) { $("input.delete").prop('checked', true); } else { $("input.delete").prop('checked', false); } event.stopPropagation(); }); var magnificOptions = { type: 'image', closeOnContentClick: true, closeBtnInside: true }; $("a.preview").magnificPopup(magnificOptions); // update variation counter in parent window var $varcnt = $("#varcnt_id"); var varcntID = $varcnt.val(); var varcnt = $varcnt.attr('data-cnt'); window.parent.jQuery("#" + varcntID).text(varcnt); } function setupSelectedImage() { var croppingActive = false; var inputPixelsActive = false; var $form = $("#selected_image_settings"); var $container = $("#selected_image_container"); var $img = $("#selected_image"); var $hidpi = $("#selected_image_hidpi"); var fullWidth; // full/original width when not resized var minWidth = 0; //parseInt($("#input_width").data('min')); var minHeight = 0; // parseInt($("#input_height").data('min')); function setupImage($img) { var originalWidth = $img.width(); var maxWidth = 9999; // $("#input_width").data('max'); var maxHeight = 9999; // $("#input_height").data('max'); function updateHidpiCheckbox(w) { if(w < (fullWidth - (fullWidth * 0.2))) { if(!$hidpi.is(":visible")) $hidpi.closest('label').fadeIn(); $hidpi.prop('disabled', false); } else { $hidpi.prop('disabled', true); if($hidpi.is(":visible")) $hidpi.closest('label').fadeOut(); } } function populateResizeDimensions() { var w = Math.round($img.width()); var h = Math.round($img.height()); var $link = $("#wrap_link_original"); if((h >= maxHeight || w >= maxWidth) && $form.hasClass('croppable')) { w = maxWidth; h = maxHeight; // $("#selected_image_link").removeAttr('checked'); // JQM $("#selected_image_link").prop('checked', false); $link.hide(); } else { if(!$link.is(":visible")) { $link.fadeIn(); if($link.attr('data-was-checked') == 1) { // $link.attr('checked', 'checked'); // JQM $link.prop('checked', true); } } } $("#input_width").val(w); $("#input_height").val(h); $img.attr('width', w); $img.attr('height', h); updateHidpiCheckbox(w); var $latin = $("#latin"); if($latin.is(":visible")) $latin.height(h); if(!$form.hasClass('rte')) { var $useResize = $("#selected_image_resize"); if (originalWidth <= w) { $useResize.hide(); } else { if (!$useResize.is(":visible")) $useResize.fadeIn(); } } } function setupImageResizable() { //$img.resizable('destroy'); $img.resizable({ aspectRatio: true, handles: "n, ne, e, se, s, sw, w", alsoResize: "#selected_image_container", maxWidth: maxWidth, maxHeight: maxHeight, minWidth: 10, //minWidth < 10 ? 10 : minWidth, minHeight: 10, //minHeight < 10 ? 10 : minHeight, start: function() { $form.addClass('resizing_active'); }, stop: function() { $img.attr('width', $img.width()).attr('height', $img.height()); if(originalWidth != $img.width()) { $img.addClass('resized'); if(!$form.hasClass('rte')) { var $resizeYes = $("#selected_image_resize_yes"); if (!$resizeYes.is(":checked")) { // $resizeYes.attr('checked', 'checked'); // JQM $resizeYes.prop('checked', true); // $("#selected_image_resize_no").removeAttr('checked'); // JQM $("#selected_image_resize_no").prop('checked', false); } } } $form.removeClass('resizing_active'); if($("#resize_action").hasClass('on')) $("#resize_action").trigger('click').mouseout(); }, resize: populateResizeDimensions }); $img.addClass('resizable_setup'); } var cropData = null; function setupImageCroppable() { var cropButtons = [ { html: $("#button_crop").html(), click: function() { $("#button_crop").trigger('click'); } }, { html: $("#button_cancel_crop").html(), click: function() { $("#button_cancel_crop").trigger('click'); }, 'class': 'ui-priority-secondary' }]; $(".show_when_crop").hide(); $("#crop_action, .crop_trigger").on('click', function(e) { var recrop = $(this).attr('data-recrop'); if(recrop && recrop.length > 0) { // redirect to crop original window.location.assign(recrop); return true; } if(!$form.hasClass('croppable')) return; if(croppingActive) return false; croppingActive = true; $("#selected_image_settings").addClass('cropping_active'); $(".hide_when_crop").hide(); $(".show_when_crop").show(); if($img.hasClass('resizable_setup')) $img.resizable('destroy'); var cropSettings = { autoCrop: true, autoCropArea: 0.35, zoomable: false, rotatable: false, maxWidth: $img.attr('data-origwidth'), maxHeight: $img.attr('data-origheight'), minCropBoxWidth: (minWidth < 2 ? 0 : minWidth), minCropBoxHeight: (minHeight < 2 ? 0 : minHeight), minWidth: (minWidth < 2 ? 0 : minWidth), minHeight: (minHeight < 2 ? 0 : minHeight), done: function(data) { $("#crop_x").val(Math.floor(data.x)); $("#crop_y").val(Math.floor(data.y)); $("#crop_w").val(Math.floor(data.width)); $("#crop_h").val(Math.floor(data.height)); cropData = data; } }; // predefined crop settings var crop = $img.attr('data-crop'); if(crop && crop.length > 0) { crop = crop.split(','); cropSettings.data = { x: crop[0], y: crop[1], width: crop[2], height: crop[3] } setTimeout(function() { disablePWImageDialogButtons(cropButtons); }, 1000); } else { disablePWImageDialogButtons(cropButtons); } $img.cropper(cropSettings); setTimeout(function() { // adjustment for width/height error on images under 190px in either dimension $(".cropper-canvas").width($(".cropper-container").width()) .height($(".cropper-container").height()); }, 500); var cropCoordinatesChange = function() { var data = { x: parseInt($("#crop_x").val()), y: parseInt($("#crop_y").val()), width: parseInt($("#crop_w").val()), height: parseInt($("#crop_h").val()), rotate: 0 }; $img.cropper('setData', data); } $("#crop_coordinates input").on('change', cropCoordinatesChange); }); function stopCrop() { $img.cropper("destroy"); $(".show_when_crop").hide(); $(".hide_when_crop").show(); croppingActive = false; $("#selected_image_settings").removeClass('cropping_active'); setupImageResizable(); enablePWImageDialogButtons(); } $("#button_cancel_crop").on('click', function() { stopCrop(); }); $("#button_crop").on('click', function() { if($form.hasClass('processing')) return false; $form.addClass('processing'); return true; }); // see if there's a defined pre-crop to start with if($img.attr('data-crop')) { $("#crop_action").trigger('click'); } } function inputPixelsChange(event) { if(inputPixelsActive) return; if($(this).parents("#crop_coordinates").length) return; inputPixelsActive = true; var w, h, abort = false, noChange = false, oldWidth = $img.attr('width'), oldHeight = $img.attr('height'), origWidth = parseInt($img.attr('data-origwidth')), origHeight = parseInt($img.attr('data-origheight')); oldWidth = typeof oldWidth == "undefined" ? $img.width() : parseInt(oldWidth); oldHeight = typeof oldHeight == "undefined" ? $img.height() : parseInt(oldHeight); if($(this).attr('id') == 'input_width') { w = parseInt($(this).val()); h = (origHeight / (origWidth / w)); if(w == oldWidth) noChange = true; } else { h = parseInt($(this).val()); w = Math.round((h / oldHeight) * oldWidth); w = (origWidth / (origHeight / h)); if(h == oldHeight) noChange = true; } if(w < 1 || h < 1 || noChange) { // requested dimension too small, or image already at requested dimension abort = 1; } else if(maxWidth > 0 && w > maxWidth) { // requested dimension exceeds maximum abort = 2; } else if((minWidth > 1 && w < minWidth) || (minHeight > 1 && h < minHeight)) { // requested dimension smaller than minimum allowed abort = 3; } if(abort) { $("#input_width").val(Math.round(oldWidth)); $("#input_height").val(Math.round(oldHeight)); inputPixelsActive = false; return false; } var wRounded = Math.round(w); var hRounded = Math.round(h); setupImageResizable(); $("#input_height").val(hRounded); $container.width(w).height(h); $img.parent('.ui-wrapper').width(w).height(h); $img.width(w).height(h) .attr('width', wRounded).attr('height', hRounded) .addClass('resized'); populateResizeDimensions(); inputPixelsActive = false; } function alignClassChange() { var resized = $img.is(".resized"); $img.attr('class', $(this).val()); $container.attr('class', $(this).val()); if(resized) $img.addClass('resized'); var _float = $container.css('float'); var $latin = $("#latin"); if(_float == 'left' || _float == 'right') { if(!$latin.is(":visible")) { $latin.height($container.height()); $latin.fadeIn(); } } else { if($latin.is(":visible")) $latin.hide(); } setupImageResizable(); } function setupImageActions() { $('#max_action').on('click', function() { var origWidth = parseInt($img.attr('data-origwidth')); if(origWidth > maxWidth) origWidth = maxWidth; //console.log('origWidth=' + origWidth); if(origWidth > $(window).width()) { // new width exceeds window size $('#content').css('overflow-x', 'auto'); } $("#input_width").val(origWidth).trigger('change'); }); $('#min_action').on('click', function() { var imgWidth = $img.width(); var imgHeight = $img.height(); var windowWidth = $(window).width() - 30; var windowHeight = $(window).height() - $("#wrap_info").height() - 60; var updated = false; if(imgHeight > windowHeight) { $("#input_height").val(windowHeight).trigger('change'); updated = true; } if(imgWidth > windowWidth) { $("#input_width").val(windowWidth).trigger('change'); updated = true; } if(!updated) { // downscale 50% $("#input_width").val(Math.ceil(imgWidth / 2)).trigger('change'); } }); $("#align_left_action, #align_center_action, #align_right_action").on('click', function() { var $select = $("#selected_image_class"); var labelKey = $(this).attr('data-label'); if($(this).hasClass('on')) { // remove alignment $select.children("option").removeAttr('selected'); $(this).removeClass('on'); } else { // set alignment $(this).siblings('.on').removeClass('on'); $select.children("option").removeAttr('selected'); $select.find("option[data-label=" + labelKey + "]").attr('selected', 'selected'); $(this).addClass('on'); } $select.trigger('change'); }); // set current 'on' alignment icon var labelKey = $("#selected_image_class").find("option[selected=selected]").attr('data-label'); if(labelKey) $("#action_icons").find("span[data-label=" + labelKey + "]").addClass('on'); $("#resize_action").on('mouseenter', function() { if($(this).hasClass('on')) return; $("#resize_tips").show(); $("#input_width, #input_height").addClass('ui-state-highlight'); }).on('mouseleave', function() { if($(this).hasClass('on')) return; $("#resize_tips").hide(); $("#input_width, #input_height").removeClass('ui-state-highlight'); }).on('click', function() { if($(this).hasClass('on')) { $(this).removeClass('on'); $("#input_width, #input_height").removeClass('ui-state-highlight'); } else { $(this).addClass('on'); $("#input_width, #input_height").addClass('ui-state-highlight'); } }); $("#description_action").on('click', function() { if($(this).hasClass('on')) { $(this).removeClass('on'); $("#wrap_description").slideUp('fast'); } else { $(this).addClass('on'); $("#wrap_description").slideDown('fast'); } }); /* $("#rotate_right_action, #rotate_left_action").on('click', function() { $img.resizable('destroy'); var w = $img.width(); var h = $img.height(); var rotate = parseInt($("#selected_image_rotate").val()); if($(this).is("#rotate_right_action")) rotate += 90; else rotate -= 90; if(rotate > 270) rotate = 0; if(rotate < -270) rotate = 0; $("#selected_image_rotate").val(rotate); $img.css('margin', 0); if(w != h) { if (Math.abs(rotate) == 90 || Math.abs(rotate) == 270) { var diff = (w - h) / 2; $img.css('margin-left', (-1 * diff) + 'px'); $img.css('margin-top', diff + 'px'); $container.width(h).height(w); $img.parent().width(h).height(w); } else { $container.width(w).height(h); $img.parent().width(w).height(h); } } if (Math.abs(rotate) == 90 || Math.abs(rotate) == 270) { $("#resize_action, #crop_action, #min_action, #max_action").hide(); } else { $("#resize_action, #crop_action, #min_action, #max_action").show(); } $img.removeClass('rotate90 rotate180 rotate270 rotate-90 rotate-180 rotate-270 rotate0') .addClass("rotate" + rotate); // setupImageResizable(); }); $("#flip_vertical_action").on('click', function() { $img.removeClass('flip_horizontal').toggleClass('flip_vertical'); $(this).toggleClass('on'); $("#flip_horizontal_action").removeClass('on'); }); $("#flip_horizontal_action").on('click', function() { $img.removeClass('flip_vertical').toggleClass('flip_horizontal'); $(this).toggleClass('on'); $("#flip_vertical_action").removeClass('on'); }); */ } function setupImageCaption() { $("#selected_image_caption").on('change', function() { if($form.hasClass('cropping_active')) return; var $caption = $("#caption_preview"); if($(this).is(":checked")) { $caption.fadeIn(); } else if($caption.is(":visible")) { $caption.fadeOut(); } }).trigger('change'); } function fitImageToWindow() { var winwidth = $(window).width() - 30; var winheight = $(window).height() - ($("#wrap_info").height() + 60); if($img.width() > winwidth) { $img.width(winwidth).css('height', 'auto').removeAttr('height'); $img.removeAttr('height'); } if($img.height() > winheight) { $img.removeAttr('width').css('width', 'auto').height(winheight); } $container.width($img.width()).height($img.height()); } /*** INIT: setupImage ******************************************************/ // adjust height of wrap_info so that there is no change when crop buttons are turned on //var $wrapInfo = $("#wrap_info"); //$wrapInfo.css('min-height', $wrapInfo.height() + 'px'); //$wrapInfo.children("span").css("min-height", $wrapInfo.height() + 'px'); $("#loading_button").hide(); if($img.attr('data-fit')) { fitImageToWindow(); } else { $container.width($img.width()).height($img.height()); } // assign change events $("#selected_image_settings .input_pixels").on('change', inputPixelsChange); $("#selected_image_class").on('change', alignClassChange).trigger('change'); fullWidth = $img.attr('data-origwidth'); populateResizeDimensions(); setupImageCroppable(); setupImageActions(); setupImageCaption(); $("button.submit_save_copy, button.submit_save_replace").on('click', function() { $form.addClass('processing'); disablePWImageDialogButtons(); }); }; /*** INIT **********************************************************************/ if($img.length > 0) { $img = $img.first(); if($img.width() > 0 && $img.height() > 0) { setupImage($img); } else { $img.on('load', function() { $img = $(this); setupImage($img); }); } } } // setupSelectedImage() $(document).ready(function() { var $page_id = $("#page_id"); if($page_id.length > 0) { var page_id = $page_id.val(); $page_id.on("pageSelected", function (event, data) { if (data.id == page_id) return; window.location = "./?id=" + data.id + "&modal=1"; }); } if($("#selected_image").length > 0) { setTimeout(function() { setupSelectedImage(); }, 250); } else if($("#ImageVariations").length > 0) { setupExecuteVariations(); } enablePWImageDialogButtons(); // prevent enter from submitting any of our forms $(window).on('keydown', function(event){ if(event.keyCode == 13) { event.preventDefault(); return false; } }); });