327 lines
8.0 KiB
JavaScript
327 lines
8.0 KiB
JavaScript
/**
|
|
*
|
|
* phpBB Studio - Advanced Shop System. An extension for the phpBB Forum Software package.
|
|
*
|
|
* @copyright (c) 2019, phpBB Studio, https://www.phpbbstudio.com
|
|
* @license GNU General Public License, version 2 (GPL-2.0)
|
|
*
|
|
*/
|
|
jQuery(function($) {
|
|
let studio = {
|
|
iconPicker: $('.aps-icon-picker'),
|
|
imageAddRow: $('#add_image_row'),
|
|
sortRows: $('[data-studio-sortable]'),
|
|
selects: $('[data-studio-select]'),
|
|
sliders: $('.shop-slider'),
|
|
panels: $('[data-studio-panel]'),
|
|
dates: {
|
|
format: 'DD/MM/YYYY HH:mm',
|
|
items: $('.shop-date'),
|
|
data: $('[data-shop-date]').data()
|
|
},
|
|
types: {
|
|
template: $('#type_template'),
|
|
select: $('#type')
|
|
},
|
|
title: $('#title'),
|
|
slug: $('#slug')
|
|
};
|
|
|
|
if (studio.iconPicker.length) {
|
|
studio.iconPicker.iconpicker({
|
|
collision: true,
|
|
placement: 'bottomRight',
|
|
component: '.aps-icon-picker + i',
|
|
locale: {
|
|
cancelLabel: 'Clear',
|
|
format: studio.dates.format
|
|
}
|
|
});
|
|
}
|
|
|
|
if (studio.selects.length) {
|
|
studio.selects.select2({
|
|
closeOnSelect: false,
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Load the requested Item type template.
|
|
*
|
|
* @return {void}
|
|
*/
|
|
studio.types.select.on('change', function() {
|
|
$.ajax({
|
|
url: studio.types.template.data('shop-url'),
|
|
type: 'POST',
|
|
data: {
|
|
type: $(this).val()
|
|
},
|
|
success: function(r) {
|
|
if (r.success) {
|
|
studio.ajaxifyFiles(studio.types.template.html(r.body));
|
|
} else if (r.error) {
|
|
phpbb.alert(r.MESSAGE_TITLE, r.MESSAGE_TEXT);
|
|
}
|
|
}
|
|
})
|
|
});
|
|
|
|
/**
|
|
* Create date range pickers.
|
|
*
|
|
* @return {void}
|
|
*/
|
|
studio.dates.items.each(function() {
|
|
let $input = $(this).find('input'),
|
|
$start = $input.first(),
|
|
$until = $input.last();
|
|
|
|
/**
|
|
* Localised language strings.
|
|
*
|
|
* @param studio.dates.data.sun
|
|
* @param studio.dates.data.mon
|
|
* @param studio.dates.data.tue
|
|
* @param studio.dates.data.wed
|
|
* @param studio.dates.data.thu
|
|
* @param studio.dates.data.fri
|
|
* @param studio.dates.data.sat
|
|
* @param studio.dates.data.january,
|
|
* @param studio.dates.data.february,
|
|
* @param studio.dates.data.march,
|
|
* @param studio.dates.data.april,
|
|
* @param studio.dates.data.may,
|
|
* @param studio.dates.data.june,
|
|
* @param studio.dates.data.july,
|
|
* @param studio.dates.data.august,
|
|
* @param studio.dates.data.september,
|
|
* @param studio.dates.data.october,
|
|
* @param studio.dates.data.november,
|
|
* @param studio.dates.data.december
|
|
*/
|
|
$start.daterangepicker({
|
|
startDate: $start.val() || false,
|
|
endDate: $until.val() || false,
|
|
timePicker: true,
|
|
timePicker24Hour: true,
|
|
autoUpdateInput: false,
|
|
showWeekNumbers: true,
|
|
applyButtonClasses: 'aps-button-green',
|
|
cancelButtonClasses: 'aps-button-red',
|
|
locale: {
|
|
applyLabel: studio.dates.data.apply,
|
|
cancelLabel: studio.dates.data.clear,
|
|
format: studio.dates.format,
|
|
firstDay: 1,
|
|
daysOfWeek: [
|
|
studio.dates.data.sun,
|
|
studio.dates.data.mon,
|
|
studio.dates.data.tue,
|
|
studio.dates.data.wed,
|
|
studio.dates.data.thu,
|
|
studio.dates.data.fri,
|
|
studio.dates.data.sat
|
|
],
|
|
monthNames: [
|
|
studio.dates.data.january,
|
|
studio.dates.data.february,
|
|
studio.dates.data.march,
|
|
studio.dates.data.april,
|
|
studio.dates.data.may,
|
|
studio.dates.data.june,
|
|
studio.dates.data.july,
|
|
studio.dates.data.august,
|
|
studio.dates.data.september,
|
|
studio.dates.data.october,
|
|
studio.dates.data.november,
|
|
studio.dates.data.december
|
|
],
|
|
}
|
|
}).on('apply.daterangepicker', function(e, picker) {
|
|
$start.val(picker.startDate.format(studio.dates.format));
|
|
$until.val(picker.endDate.format(studio.dates.format));
|
|
}).on('cancel.daterangepicker', function() {
|
|
$start.val('');
|
|
$until.val('');
|
|
});
|
|
|
|
$until.on('click', function() { $start.data('daterangepicker').show(); });
|
|
});
|
|
|
|
/**
|
|
* Automatically create a slug from a title/
|
|
*
|
|
* @return {void}
|
|
*/
|
|
if (studio.title.length && studio.slug.length) {
|
|
studio.title.on('blur', function() {
|
|
let title = $(this).val();
|
|
|
|
studio.slug.val(function(event, slug) {
|
|
return (slug) ? slug : title.toLowerCase().replace(/[^a-z0-9-_\s]/gi, '').trim().replace(/[\s]+/g, '-');
|
|
});
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Make the category and item tables sortables.
|
|
*
|
|
* @return {void}
|
|
*/
|
|
if (studio.sortRows.length) {
|
|
studio.sortRows.sortable({
|
|
axis: 'y',
|
|
containment: $(this).selector,
|
|
cursor: 'move',
|
|
delay: 150,
|
|
handle: '.aps-button-blue',
|
|
forcePlaceholderSize: true,
|
|
placeholder: 'panel',
|
|
tolerance: 'pointer',
|
|
update: function(e, ui) {
|
|
// On update (when rows changes position), save the order
|
|
$.ajax({
|
|
url: $(this).parents('form').attr('action') + '&action=move',
|
|
type: 'POST',
|
|
data: {
|
|
id: ui.item.data('id'),
|
|
order: ui.item.index(),
|
|
},
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Ajaxify the different panels in the Settings page.
|
|
*
|
|
* @return {void}
|
|
*/
|
|
studio.panels.each(function() {
|
|
let $banner = $(this).find('i.shop-panel-icon'),
|
|
$bannerSize = $(this).find('select[name$="banner_size"]'),
|
|
$bannerColour = $(this).find('select[name$="banner_colour"]'),
|
|
$iconColour = $(this).find('select[name$="icon_colour"]'),
|
|
$icon = $(this).find('.aps-icon-picker');
|
|
|
|
let updateBanner = function() {
|
|
let bg = $bannerColour.val(),
|
|
size = $bannerSize.val(),
|
|
color = $iconColour.val(),
|
|
icon = $icon.val();
|
|
|
|
size = size ? `shop-panel-icon-${size}` : '';
|
|
bg = bg ? `shop-panel-icon-${bg}` : '';
|
|
|
|
if ($.inArray(icon, ['', 'fa-li', 'fa-2x', 'fa-3x', 'fa-4x', 'fa-5x']) !== -1) {
|
|
$banner.hide();
|
|
} else {
|
|
$banner.attr('class', `icon ${icon} icon-${color} shop-panel-icon ${size} ${bg}`).show();
|
|
}
|
|
};
|
|
|
|
$bannerSize.add($bannerColour).add($iconColour).on('change', updateBanner);
|
|
$icon.on('iconpickerSelected keyup', updateBanner);
|
|
});
|
|
|
|
/**
|
|
* Show the slider value in the output element after it.
|
|
*
|
|
* @return {void}
|
|
*/
|
|
studio.sliders.on('mouseup input', function(e) {
|
|
if (e.type === 'mouseup') {
|
|
$(this).attr('value', this.value);
|
|
$(this).blur();
|
|
} else {
|
|
$(this).next('output').text(this.value);
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Add an additional item image input row.
|
|
*
|
|
* @return {void}
|
|
*/
|
|
studio.imageAddRow.on('click', function() {
|
|
let $parent = $(this).parent(),
|
|
$prev = $parent.prev(),
|
|
$row = $prev.clone(),
|
|
$input = $row.find('input');
|
|
|
|
/**
|
|
* Increment a number by one.
|
|
*
|
|
* @param {?} value
|
|
* @return {number}
|
|
*/
|
|
function increment(value) {
|
|
return parseInt(value) + 1;
|
|
}
|
|
|
|
// Increment the id="" and name="" attributes
|
|
$input.attr('id', $input.attr('id').replace(/\d+$/, increment));
|
|
$input.attr('name', $input.attr('name').replace(/\d+(?=]$)/, increment));
|
|
$input.val('');
|
|
|
|
// Ajaxify the file links
|
|
studio.ajaxifyLinks(0, $row);
|
|
|
|
// And insert the row
|
|
$row.insertBefore($parent)
|
|
});
|
|
|
|
/**
|
|
* Register shop file links as pop up requests.
|
|
*
|
|
* @param {jQuery=} context
|
|
* @return {void}
|
|
*/
|
|
studio.ajaxifyFiles = function(context) {
|
|
$('[data-shop-file]', context).each(studio.ajaxifyLinks);
|
|
};
|
|
|
|
/**
|
|
* Open a new pop up window for the shop file links.
|
|
*
|
|
* @param {number} i
|
|
* @param {HTMLElement} element
|
|
* @return {void}
|
|
*/
|
|
studio.ajaxifyLinks = function(i, element) {
|
|
let $this = $(element),
|
|
$input = $this.find('input');
|
|
|
|
$this.find('input').on('click', function() {
|
|
let url = $this.data('shop-file') + encodeURIComponent($input.val()) + '&input=' + encodeURIComponent($input.attr('id'));
|
|
|
|
window.open(url.replace(/&/g, '&'), 'file', 'height=570,resizable=yes,scrollbars=yes, width=760');
|
|
});
|
|
};
|
|
|
|
studio.ajaxifyFiles();
|
|
|
|
/**
|
|
* Add AJAX callback for resolving items.
|
|
*
|
|
* @return {void}
|
|
*/
|
|
phpbb.addAjaxCallback('shop_resolve', function() {
|
|
$(this).parents('fieldset').hide();
|
|
|
|
let $active = $('#active');
|
|
|
|
// If the item is not active, highlight the activate button.
|
|
if ($active.is(':checked') === false) {
|
|
let $span = $active.next('span');
|
|
|
|
$span.addClass('ass-button-pulse');
|
|
|
|
$active.on('change', function() {
|
|
$span.removeClass('ass-button-pulse');
|
|
});
|
|
}
|
|
});
|
|
});
|