94 lines
3.1 KiB
JavaScript
94 lines
3.1 KiB
JavaScript
/**
|
|
* 2007-2018 PrestaShop
|
|
*
|
|
* NOTICE OF LICENSE
|
|
*
|
|
* This source file is subject to the Open Software License (OSL 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/OSL-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.
|
|
*
|
|
* DISCLAIMER
|
|
*
|
|
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
|
|
* versions in the future. If you wish to customize PrestaShop for your
|
|
* needs please refer to http://www.prestashop.com for more information.
|
|
*
|
|
* @author PrestaShop SA <contact@prestashop.com>
|
|
* @copyright 2007-2018 PrestaShop SA
|
|
* @license https://opensource.org/licenses/OSL-3.0 Open Software License (OSL 3.0)
|
|
* International Registered Trademark & Property of PrestaShop SA
|
|
*/
|
|
import Vue from 'vue';
|
|
import serp from './serp';
|
|
const $ = window.$;
|
|
|
|
/**
|
|
* Vue component displaying a search page result, Google style.
|
|
* Requires a tag with the id "#serp-app" to be present in the DOM to run it.
|
|
* The component is automatically updated by watching several inputs.
|
|
* Set the proper class to link a input to a part of the panel.
|
|
*/
|
|
class SerpApp {
|
|
constructor() {
|
|
// If the selector cannot be found, we do not load the Vue app
|
|
if (0 === $('#serp-app').length) {
|
|
return;
|
|
}
|
|
|
|
this.defaultTitle = $('.serp-default-title:input');
|
|
this.watchedTitle = $('.serp-watched-title:input');
|
|
this.defaultDescription = $('.serp-default-description');
|
|
this.watchedDescription = $('.serp-watched-description');
|
|
this.defaultUrl = $('.serp-default-url:input');
|
|
|
|
this.vm = new Vue({
|
|
el: '#serp-app',
|
|
template: '<serp ref="serp" />',
|
|
components: { serp },
|
|
});
|
|
|
|
this.attachEvents(this.vm.$refs.serp);
|
|
}
|
|
|
|
attachEvents(app) {
|
|
// Specific rules for updating the search result preview
|
|
const updateSerpTitle = () => {
|
|
const title1 = this.watchedTitle.length ? this.watchedTitle.val() : '';
|
|
const title2 = this.defaultTitle.length ? this.defaultTitle.val() : '';
|
|
app.setTitle(title1 || title2);
|
|
};
|
|
const updateSerpUrl = () => {
|
|
if (this.defaultUrl.length) {
|
|
app.setUrl(this.defaultUrl.val());
|
|
}
|
|
};
|
|
const updateSerpDescription = () => {
|
|
const desc1 = this.watchedDescription.length ? $(this.watchedDescription.val()).text() || this.watchedDescription.val() : '';
|
|
const desc2 = this.defaultDescription.length ? $(this.defaultDescription.val()).text() || this.defaultDescription.val() : '';
|
|
app.setDescription(desc1 || desc2);
|
|
};
|
|
this.watchedTitle.on('keyup change', updateSerpTitle);
|
|
this.defaultTitle.on('keyup change', updateSerpTitle);
|
|
|
|
this.watchedDescription.on('keyup change', updateSerpDescription);
|
|
this.defaultDescription.on('keyup change', updateSerpDescription);
|
|
|
|
updateSerpTitle();
|
|
updateSerpUrl();
|
|
updateSerpDescription();
|
|
}
|
|
|
|
/**
|
|
* @returns {boolean}
|
|
*/
|
|
isActive() {
|
|
return (undefined !== this.vm);
|
|
}
|
|
}
|
|
|
|
export default SerpApp;
|