449 lines
14 KiB
JavaScript
449 lines
14 KiB
JavaScript
'use strict';
|
|
/**
|
|
* 2007-2020 PrestaShop and Contributors
|
|
*
|
|
* NOTICE OF LICENSE
|
|
*
|
|
* This source file is subject to the Academic Free License 3.0 (AFL-3.0)
|
|
* that is bundled with this package in the file LICENSE.txt.
|
|
* It is also available through the world-wide-web at this URL:
|
|
* https://opensource.org/licenses/AFL-3.0
|
|
* If you did not receive a copy of the license and are unable to
|
|
* obtain it through the world-wide-web, please send an email
|
|
* to license@prestashop.com so we can send you a copy immediately.
|
|
*
|
|
* @author PrestaShop SA <contact@prestashop.com>
|
|
* @copyright 2007-2020 PrestaShop SA and Contributors
|
|
* @license https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
|
|
* International Registered Trademark & Property of PrestaShop SA
|
|
*/
|
|
|
|
var mbo = {};
|
|
|
|
(function() {
|
|
var pageMapDefault = {
|
|
toolbarButtonsContainer: '#toolbar-nav',
|
|
toolbarButtons: '#toolbar-nav > li > a.toolbar_btn',
|
|
toolbarHelpButton: '#toolbar-nav li:last-of-type > a.btn-help',
|
|
toolbarLastElement: '#toolbar-nav li:last-of-type',
|
|
recommendedModulesButton: '#recommended-modules-button',
|
|
fancybox: '.fancybox-quick-view',
|
|
contentContainer: '#content',
|
|
modulesListModal: '#modules_list_container',
|
|
modulesListModalContent: '#modules_list_container_tab_modal',
|
|
modulesListLoader: '#modules_list_loader',
|
|
};
|
|
|
|
var pageMapNewTheme = {
|
|
toolbarButtonsContainer: '.toolbar-icons .wrapper',
|
|
toolbarHelpButton: '.toolbar-icons a.btn-help',
|
|
toolbarLastElement: '.toolbar-icons a:last-of-type',
|
|
recommendedModulesButton: '#recommended-modules-button',
|
|
oldButton: '#page-header-desc-configuration-modules-list',
|
|
contentContainer: '#main-div .content-div .container:last',
|
|
modulesListModal: '#modules_list_container',
|
|
modulesListModalContainer: '#main-div .content-div',
|
|
modulesListModalContent: '#modules_list_container_tab_modal',
|
|
modulesListLoader: '#modules_list_loader',
|
|
};
|
|
|
|
/**
|
|
* Handles page interactions
|
|
*
|
|
* @param {object} pageMap
|
|
* @constructor
|
|
*/
|
|
var Page = function(pageMap) {
|
|
|
|
/**
|
|
* Indicates if the help button is the last one in the toolbar
|
|
* @return {boolean}
|
|
*/
|
|
var lastElementIsHelpButton = function() {
|
|
return $(pageMap.toolbarHelpButton).length > 0;
|
|
};
|
|
|
|
/**
|
|
* Inserts the button before the help one
|
|
* @param {RecommendedModulesButton} button
|
|
*/
|
|
var insertItBeforeHelpButton = function(button) {
|
|
$(pageMap.toolbarLastElement).before(button.getMarkup());
|
|
};
|
|
|
|
/**
|
|
* Inserts the button as the last item in the toolbar
|
|
* @param {RecommendedModulesButton} button
|
|
*/
|
|
var insertItLastInToolbar = function(button) {
|
|
$(pageMap.toolbarButtonsContainer).append(button.getMarkup());
|
|
};
|
|
|
|
/**
|
|
* Remove core-generated "recommended module" button in PS < 1.7.6.0
|
|
* @return this
|
|
*/
|
|
this.removeOldButton = function() {
|
|
if (pageMap.toolbarButtons) {
|
|
// default theme
|
|
$(pageMap.toolbarButtons).filter(
|
|
function() {
|
|
var buttonIdPattern = /^page-header-desc-[a-z-_]+-modules-list$/;
|
|
return String($(this).attr('id'))
|
|
.match(buttonIdPattern);
|
|
}
|
|
).parent().remove();
|
|
}
|
|
|
|
if (pageMap.oldButton) {
|
|
// new theme
|
|
$(pageMap.oldButton).remove();
|
|
}
|
|
|
|
return this;
|
|
};
|
|
|
|
/**
|
|
* Inserts the provided button in the toolbar
|
|
*
|
|
* @param {RecommendedModulesButton} button
|
|
* @return this
|
|
*/
|
|
this.insertToolbarButton = function(button) {
|
|
if (lastElementIsHelpButton()) {
|
|
insertItBeforeHelpButton(button);
|
|
} else {
|
|
insertItLastInToolbar(button);
|
|
}
|
|
|
|
return this;
|
|
};
|
|
|
|
/**
|
|
* Inserts the recommended modules in the DOM
|
|
*
|
|
* @param {object} config
|
|
* @param {array} config.translations
|
|
* @param {string} config.recommendedModulesUrl
|
|
* @param {boolean} config.shouldAttachRecommendedModulesAfterContent
|
|
* @param {boolean} config.shouldAttachRecommendedModulesButton
|
|
* @param {boolean} config.shouldUseLegacyTheme
|
|
*
|
|
* @return this
|
|
*/
|
|
this.insertRecommendedModules = function(config) {
|
|
if (pageMap.contentContainer) {
|
|
var recommendedModulesRequest = $.ajax({
|
|
type: 'GET',
|
|
dataType: 'json',
|
|
url: config.recommendedModulesUrl,
|
|
});
|
|
|
|
recommendedModulesRequest.done(function(data) {
|
|
var recommendedModulesContainer = new RecommendedModulesContainer(config, data.content);
|
|
|
|
$(pageMap.contentContainer).append(recommendedModulesContainer.getMarkup());
|
|
});
|
|
|
|
recommendedModulesRequest.fail(function(jqXHR, textStatus, errorThrown) {
|
|
var recommendedModulesAlertMessage = new RecommendedModulesAlertMessage(config, 'danger', errorThrown);
|
|
var content = recommendedModulesAlertMessage.getMarkup().get(0).outerHTML;
|
|
if (undefined !== jqXHR.responseJSON && undefined !== jqXHR.responseJSON.content) {
|
|
content += jqXHR.responseJSON.content;
|
|
}
|
|
var recommendedModulesContainer = new RecommendedModulesContainer(config, content);
|
|
|
|
$(pageMap.contentContainer).append(recommendedModulesContainer.getMarkup().get(0).outerHTML);
|
|
});
|
|
}
|
|
|
|
return this;
|
|
};
|
|
};
|
|
|
|
/**
|
|
* Handles markup for the Recommended modules button
|
|
*
|
|
* @param {object} config
|
|
* @param {array} config.translations
|
|
* @param {string} config.recommendedModulesUrl
|
|
* @param {boolean} config.shouldAttachRecommendedModulesAfterContent
|
|
* @param {boolean} config.shouldAttachRecommendedModulesButton
|
|
* @param {boolean} config.shouldUseLegacyTheme
|
|
* @constructor
|
|
*/
|
|
var RecommendedModulesButton = function(config) {
|
|
var label = config.translations['Recommended Modules and Services'];
|
|
var buttonId = 'recommended-modules-button';
|
|
var $markup;
|
|
|
|
if (config.shouldUseLegacyTheme) {
|
|
$markup = $(
|
|
'<li id="recommended-modules-button-container">\n' +
|
|
' <a id="' + buttonId + '" class="toolbar_btn pointer" href="' + config.recommendedModulesUrl + '" title="' + label + '">\n' +
|
|
' <i class="process-icon-modules-list"></i>\n' +
|
|
' <div>' + label + '</div>\n' +
|
|
' </a>\n' +
|
|
'</li>'
|
|
);
|
|
} else {
|
|
$markup = $(
|
|
'<a class="btn btn-outline-secondary" id="' + buttonId + '" href="' + config.recommendedModulesUrl + '" title="' + label + '">\n' +
|
|
label +
|
|
'</a>'
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Returns the button's markup
|
|
* @return {jQuery|HTMLElement}
|
|
*/
|
|
this.getMarkup = function() {
|
|
return $markup;
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Handles markup for the Recommended modules container
|
|
*
|
|
* @param {object} config
|
|
* @param {array} config.translations
|
|
* @param {string} config.recommendedModulesUrl
|
|
* @param {boolean} config.shouldAttachRecommendedModulesAfterContent
|
|
* @param {boolean} config.shouldAttachRecommendedModulesButton
|
|
* @param {boolean} config.shouldUseLegacyTheme
|
|
* @param {jQuery|HTMLElement} content
|
|
* @constructor
|
|
*/
|
|
var RecommendedModulesContainer = function(config, content) {
|
|
var containerTitle = config.translations['Recommended Modules and Services'];
|
|
var containerId = 'recommended-modules-container';
|
|
var $markup;
|
|
|
|
if (config.shouldUseLegacyTheme) {
|
|
$markup = $(
|
|
'<div class="panel" id="' + containerId + '">\n' +
|
|
' <h3>\n' +
|
|
' <i class="icon-puzzle-piece"></i>\n' +
|
|
' ' + containerTitle + '\n' +
|
|
' </h3>\n' +
|
|
' <div class="modules_list_container_tab row">\n' +
|
|
' ' + content +'\n' +
|
|
' </div>\n' +
|
|
'</div>'
|
|
);
|
|
} else {
|
|
$markup = $(
|
|
'<div class="row" id="' + containerId + '">\n' +
|
|
' <div class="col">\n' +
|
|
' <div class="card">\n' +
|
|
' <h3 class="card-header">\n' +
|
|
' <i class="material-icons">extension</i>\n' +
|
|
' ' + containerTitle + '\n' +
|
|
' </h3>\n' +
|
|
' <div class="card-block">\n' +
|
|
' ' + content +'\n' +
|
|
' </div>\n' +
|
|
' </div>\n' +
|
|
' </div>\n' +
|
|
'</div>'
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Returns the button's markup
|
|
* @return {jQuery|HTMLElement}
|
|
*/
|
|
this.getMarkup = function() {
|
|
return $markup;
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Handles markup for the Recommended modules container
|
|
*
|
|
* @param {object} config
|
|
* @param {array} config.translations
|
|
* @param {string} config.recommendedModulesUrl
|
|
* @param {boolean} config.shouldAttachRecommendedModulesAfterContent
|
|
* @param {boolean} config.shouldAttachRecommendedModulesButton
|
|
* @param {boolean} config.shouldUseLegacyTheme
|
|
* @param {string} type
|
|
* @param {string} text
|
|
* @constructor
|
|
*/
|
|
var RecommendedModulesAlertMessage = function(config, type, text) {
|
|
var $markup = $(
|
|
'<div class="alert alert-' + type + '" role="alert">\n' +
|
|
' <p class="alert-text">\n' +
|
|
' ' + text + '\n' +
|
|
' </p>\n' +
|
|
'</div>'
|
|
);
|
|
|
|
/**
|
|
* Returns the button's markup
|
|
* @return {jQuery|HTMLElement}
|
|
*/
|
|
this.getMarkup = function() {
|
|
return $markup;
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Handles markup for the Recommended modules container
|
|
*
|
|
* @param {object} pageMap
|
|
* @param {object} config
|
|
* @param {array} config.translations
|
|
* @param {string} config.recommendedModulesUrl
|
|
* @param {boolean} config.shouldAttachRecommendedModulesAfterContent
|
|
* @param {boolean} config.shouldAttachRecommendedModulesButton
|
|
* @param {boolean} config.shouldUseLegacyTheme
|
|
* @constructor
|
|
*/
|
|
var RecommendedModulesModal = function(pageMap, config) {
|
|
var $markup;
|
|
|
|
if (!config.shouldUseLegacyTheme) {
|
|
$markup = $(
|
|
'<div id="modules_list_container" class="modal modal-vcenter fade" role="dialog">\n' +
|
|
' <div class="modal-dialog">\n' +
|
|
' <div class="modal-content">\n' +
|
|
' <div class="modal-header">\n' +
|
|
' <h4 class="modal-title module-modal-title">\n' +
|
|
' ' + config.translations['Recommended Modules and Services'] + '\n' +
|
|
' </h4>\n' +
|
|
' <button type="button" class="close" data-dismiss="modal" aria-label="' + config.translations['Close'] + '">\n' +
|
|
' <span aria-hidden="true">×</span>\n' +
|
|
' </button>\n' +
|
|
' </div>\n' +
|
|
' <div class="modal-body row">\n' +
|
|
' <div id="modules_list_container_tab_modal" class="col-md-12" style="display:none;"></div>\n' +
|
|
' <div id="modules_list_loader" class="col-md-12 text-center">\n' +
|
|
' <button class="btn-primary-reverse onclick unbind spinner"></button>\n' +
|
|
' </div>\n' +
|
|
' </div>\n' +
|
|
' </div>\n' +
|
|
' </div>\n' +
|
|
'</div>'
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Returns the button's markup
|
|
* @return {jQuery|HTMLElement}
|
|
*/
|
|
this.getMarkup = function() {
|
|
return $markup;
|
|
}
|
|
};
|
|
|
|
/**
|
|
* @param {object} pageMap
|
|
* @param {object} config
|
|
* @param {array} config.translations
|
|
* @param {string} config.recommendedModulesUrl
|
|
* @param {boolean} config.shouldAttachRecommendedModulesAfterContent
|
|
* @param {boolean} config.shouldAttachRecommendedModulesButton
|
|
* @param {boolean} config.shouldUseLegacyTheme
|
|
* @constructor
|
|
*/
|
|
var RecommendedModulesPopinHandler = function(pageMap, config) {
|
|
|
|
var initPopin = function() {
|
|
if (config.shouldUseLegacyTheme) {
|
|
$(pageMap.fancybox).fancybox({
|
|
type: 'ajax',
|
|
autoDimensions: false,
|
|
autoSize: false,
|
|
width: 600,
|
|
height: 'auto',
|
|
helpers: {
|
|
overlay: {
|
|
locked: false
|
|
}
|
|
}
|
|
});
|
|
} else {
|
|
if (!$(pageMap.modulesListModal).length) {
|
|
var modal = new RecommendedModulesModal(pageMap, config);
|
|
$(pageMap.modulesListModalContainer).append(modal.getMarkup().get(0).outerHTML);
|
|
}
|
|
}
|
|
};
|
|
|
|
var openModulesList = function() {
|
|
var recommendedModulesRequest = $.ajax({
|
|
type: 'GET',
|
|
dataType: 'json',
|
|
url: config.recommendedModulesUrl,
|
|
});
|
|
|
|
$(pageMap.modulesListModal).modal('show');
|
|
|
|
recommendedModulesRequest.done(function (data) {
|
|
$(pageMap.modulesListModalContent).html(data.content).slideDown();
|
|
$(pageMap.modulesListLoader).hide();
|
|
});
|
|
|
|
recommendedModulesRequest.fail(function(jqXHR, textStatus, errorThrown) {
|
|
var recommendedModulesAlertMessage = new RecommendedModulesAlertMessage(config, 'danger', errorThrown);
|
|
var content = recommendedModulesAlertMessage.getMarkup().get(0).outerHTML;
|
|
if (undefined !== jqXHR.responseJSON && undefined !== jqXHR.responseJSON.content) {
|
|
content += jqXHR.responseJSON.content;
|
|
}
|
|
|
|
$(pageMap.modulesListModalContent).html(content).slideDown();
|
|
$(pageMap.modulesListLoader).hide();
|
|
});
|
|
};
|
|
|
|
var bindButtonEvents = function() {
|
|
// wait for dom ready
|
|
$(document).on('click', pageMap.recommendedModulesButton, function(event) {
|
|
event.preventDefault();
|
|
openModulesList();
|
|
});
|
|
};
|
|
|
|
this.initialize = function() {
|
|
// wait for dom ready
|
|
$(function() {
|
|
initPopin();
|
|
bindButtonEvents();
|
|
});
|
|
};
|
|
|
|
};
|
|
|
|
/**
|
|
* Inserts the recommended modules button in the toolbar
|
|
*
|
|
* @param {object} config
|
|
* @param {array} config.translations
|
|
* @param {string} config.recommendedModulesUrl
|
|
* @param {boolean} config.shouldAttachRecommendedModulesAfterContent
|
|
* @param {boolean} config.shouldAttachRecommendedModulesButton
|
|
* @param {boolean} config.shouldUseLegacyTheme
|
|
*/
|
|
mbo.initialize = function(config) {
|
|
var pageMap = config.shouldUseLegacyTheme ? pageMapDefault : pageMapNewTheme;
|
|
var page = new Page(pageMap);
|
|
|
|
page.removeOldButton();
|
|
|
|
if (config.shouldAttachRecommendedModulesButton) {
|
|
var button = new RecommendedModulesButton(config);
|
|
var recommendedModulesPopinHandler = new RecommendedModulesPopinHandler(pageMap, config);
|
|
page.insertToolbarButton(button);
|
|
recommendedModulesPopinHandler.initialize();
|
|
}
|
|
|
|
if (config.shouldAttachRecommendedModulesAfterContent) {
|
|
page.insertRecommendedModules(config);
|
|
}
|
|
};
|
|
|
|
})();
|