PHP Classes

File: public/js/dragndrop/dragndrop.js

Recommend this page to a friend!
  Classes of Fabrice Fesch   Melis CMS   public/js/dragndrop/dragndrop.js   Download  
File: public/js/dragndrop/dragndrop.js
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: Melis CMS
Content management system that provides its tools
Author: By
Last change:
Date: 1 year ago
Size: 28,097 bytes
 

Contents

Class file image Download
var melisDragnDrop = (function($, window) { var centerWindow, placeholderWidth, $body = $("body"), scrollBool = true, scrollH = window.parent.$("body")[0].scrollHeight, currentFrame = window.parent.$("iframe[data-iframe-id='"+melisActivePageId+"']"); /* ================================== Binding Events ====================================*/ $body.on("click", "#melisPluginBtn", showPluginMenu); $body.on("click", ".melis-cms-filter-btn", showPlugLists); $body.on("click", ".melis-cms-category-btn", showCatPlugLists); /* ================================== Drag & Drop ====================================*/ $(".melis-cms-plugin-snippets").draggable({ connectWith: ".melis-draggable", connectToSortable: ".melis-dragdropzone", revert: true, helper: "clone", start: function( event, ui ) { $(ui.helper).find('.melis-plugin-tooltip').hide(); $(".melis-dragdropzone").addClass("highlight").removeClass("no-content"); $(".ui-sortable-placeholder").css("background", "#fff"); }, stop: function( event, ui ) { $(".melis-dragdropzone").removeClass("highlight"); melisPluginEdition.pluginDetector(); } }); $(".melis-dragdropzone").sortable({ connectWith: ".melis-float-plugins, .melis-dragdropzone", connectToSortable: ".melis-float-plugins", handle: ".m-move-handle", cursor: "move", cursorAt: { top: 0, left: 0 }, zIndex: 999999, placeholder: "ui-state-highlight", tolerance: "pointer", items: ".melis-ui-outlined", start: function(event, ui) { $(".melis-dragdropzone").sortable("refresh"); // hide tinyMCE panel $(".mce-tinymce.mce-panel.mce-floatpanel").hide(); // highlight dragdropzone $(".melis-dragdropzone").addClass("highlight"); $(".ui-sortable-helper").css("z-index", "9999999"); // get item percentage width var placeholderWidth = ( 100 * parseFloat($(ui.helper[0]).css("width")) / parseFloat($(ui.helper[0]).parent().css('width')) ) + '%'; $(ui.placeholder[0]).css("width", placeholderWidth); // change its css to fit for theme design specific for the melismenitemplate var ddn = $(ui.helper[0]).attr("data-module-name"); if ( ddn == "MelisMiniTemplate" ) { $(ui.helper[0]).css({ "height" : "auto", "padding-left" : "10px", "padding-right" : "10px" }); } // detect if browser is in desktop if( $(window).width() >= 768) { $(window).mousemove(function (e) { var top; var frameTop = window.parent.$("#" + parent.activeTabId).find(".melis-iframe").offset().top + 10; if (window.parent.$(".sticky-pageactions")) { top = $(window.parent).scrollTop() - 130; } else { top = 0; } // check if there is a plugin being drag if ($('.ui-sortable-helper') && $('.ui-sortable-helper').length > 0) { var bottom = $(window.parent).height(); // hide plugin panel when dragging a plugin if ($(".melis-cms-dnd-box").hasClass("show")) { $(".melis-cms-dnd-box").removeClass("show"); } if (e.clientY >= ($(window.parent).scrollTop() + $(window.parent).height() - frameTop)) { // detect IE8 and above, and edge if (document.documentMode || /Edge/.test(navigator.userAgent)) { // activate scrollTop on IE window.parent.$('html').css({'overflow': 'auto', 'height': 'auto'}); } window.parent.$('html, body').animate({ scrollTop: $(window.parent).scrollTop() + ($(window.parent).height() / 2) }, 300); } else if (e.clientY <= top && $(window.parent).scrollTop() > 0) { // detect IE8 and above, and edge if (document.documentMode || /Edge/.test(navigator.userAgent)) { // activate scrollTop on IE window.parent.$('html').css({'overflow': 'auto', 'height': 'auto'}); } window.parent.$('html, body').animate({ scrollTop: $(window.parent).scrollTop() - ($(window.parent).height() / 2) }, 300); } else { window.parent.$('html, body').stop(); } } else { // detect IE8 and above, and edge if (document.documentMode || /Edge/.test(navigator.userAgent)) { // activate scrollTop on IE window.parent.$('html').css({'overflow': 'hidden', 'height': '100%'}); } } }); } else { $(".melis-cms-dnd-box").removeClass("show"); } }, receive: function( event, ui ) { var tabId; // check if ui is from pluginMenu if(ui.helper && $(ui.helper).hasClass('melis-cms-plugin-snippets')) { // modal confirmation window.parent.melisCoreTool.confirm( translations.tr_meliscms_common_yes, translations.tr_meliscms_common_no, translations.tr_meliscms_drag_and_drop_modal_title, // title translations.tr_meliscms_drag_and_drop_modal_content, // message function() { var moduleName = $(ui.helper[0]).data("module-name"); var pluginName = $(ui.helper[0]).data("plugin-name"); var siteModule = $(ui.helper[0]).data("plugin-site-module"); // get id of current dragzone var dropzone = $(event.target).data("dragdropzone-id"); tabId = window.parent.$("#"+parent.activeTabId).find(".melis-iframe").data("iframe-id"); var dataKeysfromdragdropzone = $(ui.helper[0]).data("melis-fromdragdropzone"); var dropLocation = ui.helper[0]; // remove Clone // ui.helper[0].remove(); setTimeout(function() { if(moduleName !== undefined) { requestPlugin(moduleName, pluginName, dropzone, tabId, dropLocation, siteModule); } }, 300); }); // bind on bootstrap hidden modal event window.parent.$('body').on('hidden.bs.modal', window.parent.$('.modal.bootstrap-dialog.in'), function (e) { // check if loader exists if( !$(ui.helper[0]).parent().find('.overlay-loader').length ) { // remove clone element ui.helper[0].remove(); } }); } if(ui.sender[0]) { var dragZoneSender = ui.sender[0]; var dragZoneSenderPluginId = $(dragZoneSender).data("plugin-id"); // send dragndrop list melisPluginEdition.sendDragnDropList(dragZoneSenderPluginId, tabId) } }, update: function( event, ui ) { $(".ui-sortable-helper").remove(); }, over: function( event, ui) { setPluginWidth(ui); melisPluginEdition.pluginDetector(); }, change: function( event, ui ) { setPluginWidth(ui); }, }); // set plugin container width by placeholder function setPluginWidth(ui) { var data = $(ui.item[0]).data(); if ( data.pluginName == "MelisFrontBlockSectionPlugin" ) { $(ui.placeholder[0]).css("width", "100%"); } var prevSibling = $(".ui-sortable-placeholder.ui-state-highlight").prev(); if ( $(".melis-dragdropzone .melis-ui-outlined").length == 0 ) { $(ui.placeholder[0]).css("width", "100%"); } if ( $(prevSibling).hasClass("melis-cms-plugin-snippets") ) { prevSibling = $(prevSibling).prev(); } var prevSiblingWidth = ( 100 * parseFloat($(prevSibling).css("width")) / parseFloat($(prevSibling).parent().css('width')) ); var availableSpace; if ( $(ui.item[0]).hasClass("melis-cms-plugin-snippets") && prevSiblingWidth > 90 ) { $(ui.placeholder[0]).css("width", "100%"); } if ( $(ui.item[0]).hasClass("melis-cms-plugin-snippets") && prevSiblingWidth < 90 && data.pluginName != "MelisFrontBlockSectionPlugin" ) { availableSpace = 100 - prevSiblingWidth - 2 ; $(ui.placeholder[0]).css("width", availableSpace + "%"); } placeholderWidth = $(ui.placeholder[0]); } // jQuery Tooltip @ https://jqueryui.com/tooltip/#custom-style $(".melis-cms-plugin-snippets").tooltip({ position: { my: "left center", at: "left+115% center", using: function( position, feedback ) { var $this = $(this); $this.css( position ); $this .addClass( "melis-plugin-tooltip" ) .addClass( feedback.vertical ) .addClass( feedback.horizontal ) .appendTo( this ); } }, }); $(".melis-cms-plugin-snippets").hover(function() { var $this = $(this); $this.children(".melis-plugin-tooltip").fadeIn(); }); $body.on('click', ".melis-cms-filter-btn-sub-category", function(){ var elem = $(this), next = elem.next(), textVal = elem.text(), activeMenu = elem.parent().find('.active'); if ( activeMenu.length > 0 ) { activeMenu.next().slideUp(); activeMenu.removeClass('active'); //activeMenu.find('.melis-plugins-icon-new-sub-child').removeClass('reverse-color'); if ( activeMenu.text() !== textVal ) { next.slideDown(); elem.addClass('active'); //elem.find('.melis-plugins-icon-new-sub-child').addClass('reverse-color'); } } else { // show menu if ( elem.hasClass('active') ) { next.slideUp(); elem.removeClass('active'); //elem.find('.melis-plugins-icon-new-sub-child').removeClass('reverse-color'); } else { elem.addClass('active'); //elem.find('.melis-plugins-icon-new-sub-child').addClass('reverse-color'); next.slideDown(); } } }); $body.on('click', ".melis-cms-filter-btn-mini-tpl-category", function() { var elem = $(this), next = elem.next(), textVal = elem.text(), activeMenu = elem.parent().find('.melis-cms-filter-btn-mini-tpl-category.active'); if (activeMenu.length > 0) { activeMenu.next().slideUp(); activeMenu.removeClass('active'); //activeMenu.find('.melis-plugins-icon-new-sub-child').removeClass('reverse-color'); if (activeMenu.text() !== textVal) { next.slideDown(); elem.addClass('active'); //elem.find('.melis-plugins-icon-new-sub-child').addClass('reverse-color'); } } else { // show menu if (elem.hasClass('active')) { next.slideUp(); elem.removeClass('active'); //elem.find('.melis-plugins-icon-new-sub-child').removeClass('reverse-color'); } else { elem.addClass('active'); //elem.find('.melis-plugins-icon-new-sub-child').addClass('reverse-color'); next.slideDown(); } } }); // $( ".melis-editable" ).resizable({ disabled: true, handles: 'e' }); function requestPlugin(module, plugin, dropzone, pageId, dropLocation, siteModule) { // locate plugin location var layout = $('div[data-dragdropzone-id='+ dropzone +']'); // add the temp loader var tempLoader = '<div id="loader" class="overlay-loader"><img class="loader-icon spinning-cog" src="/MelisCore/assets/images/cog12.svg" data-cog="cog12"></div>'; $(layout).addClass("melis-loader").prepend(tempLoader); $.ajax({ type: 'GET', url: "/melispluginrenderer?module="+module+"&pluginName="+plugin+"&pageId="+pageId+"&fromDragDropZone=1&melisSite="+siteModule }).done(function(plugins) { var loadedPlug = false, $link = $("link"), $script = $("script"), el, elAttribute; // hide the loader $('.loader-icon').removeClass('spinning-cog').addClass('shrinking-cog'); if ( plugins.success ) { var elType, dataPluginID, idPlugin, jsUrl; // iterate object plugin = plugins.datas; // get the html var vhtml = plugin.html, melisIdPage = window.parent.$("#"+ parent.activeTabId).find('iframe').data('iframe-id'), pluginToolBox = $(vhtml).find(".melis-plugin-tools-box"), pluginData = pluginToolBox.data(), pluginHardCodedConfigEl = $(vhtml).find(".plugin-hardcoded-conf"); // extract the data keys var melisPluginModuleName = typeof pluginToolBox.data("module") != "undefined" ? pluginToolBox.data("module") : '', melisPluginName = typeof pluginToolBox.data("plugin") != "undefined" ? pluginToolBox.data("plugin") : '', melisPluginID = typeof pluginToolBox.data("plugin-id") != "undefined" ? pluginToolBox.data("plugin-id") : '', melisPluginTag = typeof pluginToolBox.data("melis-tag") != "undefined" ? pluginToolBox.data("melis-tag") : '', melisSiteModule = typeof pluginToolBox.data("site-module"), melisPluginHardCodedConfig = $.trim(pluginHardCodedConfigEl.text()); // dataPluginID = pluginToolBox.next().attr("id"); var pluginOutlined = pluginToolBox.closest(".melis-ui-outlined"); dataPluginID = pluginOutlined.find("[id*='"+melisPluginID+"']").attr("id"); if ( typeof dataPluginID !== "undefined" ) { // get plugin id idPlugin = dataPluginID; } // create array of objects var datastring = [], uiPlaceHolderWidth = placeholderWidth.css('width'); // re set the plugin width setTimeout(function() { var pluginId = "#" + $(plugin.html).attr('id'); $(pluginId).removeClass(function(index, css) { return (css.match (/\bplugin-width\S+/g) || []).join(' '); // removes anything that starts with "plugin-width-" }); var pluginClass = "." + $(pluginId).attr("class"); uiPlaceHolderWidth = uiPlaceHolderWidth.slice(0, -1); var strPlaceholderWidth = parseFloat(uiPlaceHolderWidth).toFixed(2); // check if dragndrop mobile, tablet, desktop // check if resize in mobile if(currentFrame.width() <= 480) { $(pluginId).addClass(" plugin-width-md-100-00 plugin-width-lg-100-00 plugin-width-xs-100-00"); //uiPlaceHolderWidth } // check if resize in tablet if(currentFrame.width() > 490 && currentFrame.width() <= 980) { $(pluginId).addClass(" plugin-width-xs-100-00 plugin-width-lg-100-00 plugin-width-md-100-00"); //uiPlaceHolderWidth } // check if resize in desktop if(currentFrame.width() >= 981) { $(pluginId).addClass(" plugin-width-xs-100-00 plugin-width-md-100-00 plugin-width-lg-100-00"); //uiPlaceHolderWidth } }, 100); if ( melisPluginModuleName && melisPluginName && melisPluginID && melisPluginHardCodedConfig != "" ) { datastring.push({name: "melisIdPage", value: melisIdPage}); datastring.push({name: "melisModule", value: melisPluginModuleName}); datastring.push({name: "melisPluginName", value: melisPluginName}); datastring.push({name: "melisPluginId", value: melisPluginID}); datastring.push({name: "melisPluginTag", value: melisPluginTag}); datastring.push({name: "melisPluginMobileWidth", value: 100 }); datastring.push({name: "melisPluginTabletWidth", value: 100 }); datastring.push({name: "melisPluginDesktopWidth", value: 100}); // pass it in savePluginUpdate melisPluginEdition.savePluginUpdate(datastring, siteModule); } // adding plugin in dropzone // $('div[data-dragdropzone-id='+ dropzone +']').append(plugin.html); var dropPlugin = $(plugin.html).insertAfter(dropLocation); // Processing the plugin resources and initialization melisPluginEdition.processPluginResources(plugin.init, idPlugin); // Init Resizable if ( parent.pluginResizable == 1 ) { melisPluginEdition.initResizable(); } // remove plugin $(dropLocation).remove(); // send new plugin list melisPluginEdition.sendDragnDropList(dropzone, pageId); $(layout).removeClass("melis-loader"); $("#loader").remove(); melisPluginEdition.calcFrameHeight(); melisPluginEdition.disableLinks('a'); melisPluginEdition.pluginDetector(); melisPluginEdition.moveResponsiveClass(); // disable for now } }).fail(function(xhr, textStatus, errorThrown) { alert( translations.tr_meliscore_error_message ); }); } function showPluginMenu() { $(this).parent().toggleClass("show"); } function showPlugLists() { var $this = $(this); if ( $this.hasClass("active") ) { $this.siblings('.melis-cms-plugin-snippets-box').find(".melis-cms-category-btn.active"); // $(this).find('.melis-plugins-icon-new-parent').removeClass('reverse-color'); $this.removeClass("active").siblings(".melis-cms-plugin-snippets-box").slideUp(); $this.siblings(".melis-cms-plugin-snippets-box").find(".melis-cms-category-btn.active").removeClass("active").siblings(".melis-cms-category-plugins-box").slideUp(); } else { //$(".melis-cms-filter-btn.active").find('.melis-plugins-icon-new-parent').removeClass('reverse-color'); $(".melis-cms-filter-btn.active").removeClass("active").siblings(".melis-cms-plugin-snippets-box").slideUp(); $this.addClass("active"); //$(this).find('.melis-plugins-icon-new-parent').addClass('reverse-color'); $(".melis-cms-filter-btn.active").siblings(".melis-cms-plugin-snippets-box").slideDown(); } } function showCatPlugLists() { var $this = $(this); if ( $this.hasClass("active") ) { $this.removeClass("active").siblings(".melis-cms-category-plugins-box").slideUp(); //$(this).find('.melis-plugins-icon-new-child').removeClass('reverse-color'); } else { //$(".melis-cms-category-btn.active").find('.melis-plugins-icon-new-child').removeClass('reverse-color'); $(".melis-cms-category-btn.active").removeClass("active").siblings(".melis-cms-category-plugins-box").slideUp(); $this.addClass("active"); //$(this).find('.melis-plugins-icon-new-child').addClass('reverse-color'); $(".melis-cms-category-btn.active").siblings(".melis-cms-category-plugins-box").slideDown(); } } function pluginScrollPos() { // if( $(currentFrame).length ) { var dndHeight = $(window.parent).height() - currentFrame.offset().top - 5, stickyHead = window.parent.$("#"+melisActivePageId+"_id_meliscms_page").find(".bg-white.innerAll"), widgetHeight = window.parent.$("#"+melisActivePageId+"_id_meliscms_page").find(".widget-head.nav"); $(".melis-cms-dnd-box").css("height", "100vh" ); // default height // Chrome, Firefox etc browser $(window.parent).scroll(function() { if( (stickyHead.offset().top + stickyHead.height() + 30) >= currentFrame.offset().top ) { $(".melis-cms-dnd-box").css("top", stickyHead.offset().top - currentFrame.offset().top + stickyHead.height() + 30); dndHeight = $(window.parent).height() - stickyHead.height() - widgetHeight.height() - 15; //console.log("dndHeight: ", dndHeight); $(".melis-cms-dnd-box").height(dndHeight); } else { if( $(window).width() <= 767){ var mobileHeader =(mobileHeader !== 'undefined') ? window.parent.$('body').find("#id_meliscore_header") : ''; if( $(mobileHeader).length ) { $(".melis-cms-dnd-box").css("height", "100vh" ); var topPosition = window.parent.$('body').find("#id_meliscore_header").offset().top - currentFrame.offset().top + window.parent.$('body').find("#id_meliscore_header").height() ; if(topPosition > 0) { $(".melis-cms-dnd-box").css("top", topPosition ); $(".melis-cms-dnd-box").height($(window.parent).height() - window.parent.$('body').find("#id_meliscore_header").height() - 5); } } } else { dndHeight = $(window.parent).height() - currentFrame.offset().top - 5; $(".melis-cms-dnd-box").css("top", 0); $(".melis-cms-dnd-box").height(dndHeight); } } }); // For IE scroll giving different value if (window.parent) { window.parent.$("body").scroll(function() { if( (stickyHead.offset().top + stickyHead.height() + 30) >= currentFrame.offset().top ) { $(".melis-cms-dnd-box").css("top", stickyHead.offset().top - currentFrame.offset().top + stickyHead.height() + 30); } else { $(".melis-cms-dnd-box").css({"top": 0, "height": $(window.parent).height() - stickyHead.height() - widgetHeight.height() - 15}); } }); } $(".melis-cms-dnd-box").height(dndHeight); } if( $(currentFrame).length ) { pluginScrollPos(); } return { requestPlugin : requestPlugin, showPluginMenu : showPluginMenu, pluginScrollPos : pluginScrollPos, } })(jQuery, window);