/client/dist/js/GridField.js
JavaScript | 360 lines | 309 code | 51 blank | 0 comment | 44 complexity | de48b2a5a6a04fec141b381245a50025 MD5 | raw file
Possible License(s): BSD-3-Clause, MIT, CC-BY-3.0, GPL-2.0, AGPL-1.0, LGPL-2.1
- (function (global, factory) {
- if (typeof define === "function" && define.amd) {
- define('ss.GridField', ['jQuery', 'i18n'], factory);
- } else if (typeof exports !== "undefined") {
- factory(require('jQuery'), require('i18n'));
- } else {
- var mod = {
- exports: {}
- };
- factory(global.jQuery, global.i18n);
- global.ssGridField = mod.exports;
- }
- })(this, function (_jQuery, _i18n) {
- 'use strict';
- var _jQuery2 = _interopRequireDefault(_jQuery);
- var _i18n2 = _interopRequireDefault(_i18n);
- function _interopRequireDefault(obj) {
- return obj && obj.__esModule ? obj : {
- default: obj
- };
- }
- _jQuery2.default.entwine('ss', function ($) {
- $('.grid-field').entwine({
- reload: function reload(ajaxOpts, successCallback) {
- var self = this,
- form = this.closest('form'),
- focusedElName = this.find(':input:focus').attr('name'),
- data = form.find(':input').serializeArray();
- if (!ajaxOpts) ajaxOpts = {};
- if (!ajaxOpts.data) ajaxOpts.data = [];
- ajaxOpts.data = ajaxOpts.data.concat(data);
- if (window.location.search) {
- ajaxOpts.data = window.location.search.replace(/^\?/, '') + '&' + $.param(ajaxOpts.data);
- }
- form.addClass('loading');
- $.ajax($.extend({}, {
- headers: { "X-Pjax": 'CurrentField' },
- type: "POST",
- url: this.data('url'),
- dataType: 'html',
- success: function success(data) {
- self.empty().append($(data).children());
- if (focusedElName) self.find(':input[name="' + focusedElName + '"]').focus();
- if (self.find('.filter-header').length) {
- var content;
- if (ajaxOpts.data[0].filter == "show") {
- content = '<span class="non-sortable"></span>';
- self.addClass('show-filter').find('.filter-header').show();
- } else {
- content = '<button type="button" name="showFilter" class="btn font-icon-search btn--no-text btn--icon-large grid-field__filter-open ss-gridfield-button-filter trigger"></button>';
- self.removeClass('show-filter').find('.filter-header').hide();
- }
- self.find('.sortable-header th:last').html(content);
- }
- form.removeClass('loading');
- if (successCallback) successCallback.apply(this, arguments);
- self.trigger('reload', self);
- },
- error: function error(e) {
- alert(_i18n2.default._t('GRIDFIELD.ERRORINTRANSACTION'));
- form.removeClass('loading');
- }
- }, ajaxOpts));
- },
- showDetailView: function showDetailView(url) {
- window.location.href = url;
- },
- getItems: function getItems() {
- return this.find('.ss-gridfield-item');
- },
- setState: function setState(k, v) {
- var state = this.getState();
- state[k] = v;
- this.find(':input[name="' + this.data('name') + '[GridState]"]').val(JSON.stringify(state));
- },
- getState: function getState() {
- return JSON.parse(this.find(':input[name="' + this.data('name') + '[GridState]"]').val());
- }
- });
- $('.grid-field *').entwine({
- getGridField: function getGridField() {
- return this.closest('.grid-field');
- }
- });
- $('.grid-field :button[name=showFilter]').entwine({
- onclick: function onclick(e) {
- $('.filter-header').show('slow').find(':input:first').focus();
- this.closest('.grid-field').addClass('show-filter');
- this.parent().html('<span class="non-sortable"></span>');
- e.preventDefault();
- }
- });
- $('.grid-field .ss-gridfield-item').entwine({
- onclick: function onclick(e) {
- if ($(e.target).closest('.action').length) {
- this._super(e);
- return false;
- }
- var editLink = this.find('.edit-link');
- if (editLink.length) this.getGridField().showDetailView(editLink.prop('href'));
- },
- onmouseover: function onmouseover() {
- if (this.find('.edit-link').length) this.css('cursor', 'pointer');
- },
- onmouseout: function onmouseout() {
- this.css('cursor', 'default');
- }
- });
- $('.grid-field .action:button').entwine({
- onclick: function onclick(e) {
- var filterState = 'show';
- if (this.button('option', 'disabled')) {
- e.preventDefault();
- return;
- }
- if (this.hasClass('ss-gridfield-button-close') || !this.closest('.grid-field').hasClass('show-filter')) {
- filterState = 'hidden';
- }
- this.getGridField().reload({ data: [{ name: this.attr('name'), value: this.val(), filter: filterState }] });
- e.preventDefault();
- },
- actionurl: function actionurl() {
- var btn = this.closest(':button'),
- grid = this.getGridField(),
- form = this.closest('form'),
- data = form.find(':input.gridstate').serialize(),
- csrf = form.find('input[name="SecurityID"]').val();
- data += "&" + encodeURIComponent(btn.attr('name')) + '=' + encodeURIComponent(btn.val());
- if (csrf) {
- data += "&SecurityID=" + encodeURIComponent(csrf);
- }
- if (window.location.search) {
- data = window.location.search.replace(/^\?/, '') + '&' + data;
- }
- var connector = grid.data('url').indexOf('?') == -1 ? '?' : '&';
- return $.path.makeUrlAbsolute(grid.data('url') + connector + data, $('base').attr('href'));
- }
- });
- $('.grid-field .add-existing-autocompleter').entwine({
- onbuttoncreate: function onbuttoncreate() {
- var self = this;
- this.toggleDisabled();
- this.find('input[type="text"]').on('keyup', function () {
- self.toggleDisabled();
- });
- },
- onunmatch: function onunmatch() {
- this.find('input[type="text"]').off('keyup');
- },
- toggleDisabled: function toggleDisabled() {
- var $button = this.find('.ss-ui-button'),
- $input = this.find('input[type="text"]'),
- inputHasValue = $input.val() !== '',
- buttonDisabled = $button.is(':disabled');
- if (inputHasValue && buttonDisabled || !inputHasValue && !buttonDisabled) {
- $button.button("option", "disabled", !buttonDisabled);
- }
- }
- });
- $('.grid-field .grid-field__col-compact .action.gridfield-button-delete, .cms-edit-form .btn-toolbar button.action.action-delete').entwine({
- onclick: function onclick(e) {
- if (!confirm(_i18n2.default._t('TABLEFIELD.DELETECONFIRMMESSAGE'))) {
- e.preventDefault();
- return false;
- } else {
- this._super(e);
- }
- }
- });
- $('.grid-field .action.gridfield-button-print').entwine({
- UUID: null,
- onmatch: function onmatch() {
- this._super();
- this.setUUID(new Date().getTime());
- },
- onunmatch: function onunmatch() {
- this._super();
- },
- onclick: function onclick(e) {
- var url = this.actionurl();
- window.open(url);
- e.preventDefault();
- return false;
- }
- });
- $('.ss-gridfield-print-iframe').entwine({
- onmatch: function onmatch() {
- this._super();
- this.hide().bind('load', function () {
- this.focus();
- var ifWin = this.contentWindow || this;
- ifWin.print();
- });
- },
- onunmatch: function onunmatch() {
- this._super();
- }
- });
- $('.grid-field .action.no-ajax').entwine({
- onclick: function onclick(e) {
- window.location.href = this.actionurl();
- e.preventDefault();
- return false;
- }
- });
- $('.grid-field .action-detail').entwine({
- onclick: function onclick() {
- this.getGridField().showDetailView($(this).prop('href'));
- return false;
- }
- });
- $('.grid-field[data-selectable]').entwine({
- getSelectedItems: function getSelectedItems() {
- return this.find('.ss-gridfield-item.ui-selected');
- },
- getSelectedIDs: function getSelectedIDs() {
- return $.map(this.getSelectedItems(), function (el) {
- return $(el).data('id');
- });
- }
- });
- $('.grid-field[data-selectable] .ss-gridfield-items').entwine({
- onadd: function onadd() {
- this._super();
- this.selectable();
- },
- onremove: function onremove() {
- this._super();
- if (this.data('selectable')) this.selectable('destroy');
- }
- });
- $('.grid-field .filter-header :input').entwine({
- onmatch: function onmatch() {
- var filterbtn = this.closest('.extra').find('.ss-gridfield-button-filter'),
- resetbtn = this.closest('.extra').find('.ss-gridfield-button-reset');
- if (this.val()) {
- filterbtn.addClass('filtered');
- resetbtn.addClass('filtered');
- }
- this._super();
- },
- onunmatch: function onunmatch() {
- this._super();
- },
- onkeydown: function onkeydown(e) {
- if (this.closest('.ss-gridfield-button-reset').length) return;
- var filterbtn = this.closest('.extra').find('.ss-gridfield-button-filter'),
- resetbtn = this.closest('.extra').find('.ss-gridfield-button-reset');
- if (e.keyCode == '13') {
- var btns = this.closest('.filter-header').find('.ss-gridfield-button-filter');
- var filterState = 'show';
- if (this.hasClass('ss-gridfield-button-close') || !this.closest('.grid-field').hasClass('show-filter')) {
- filterState = 'hidden';
- }
- this.getGridField().reload({ data: [{ name: btns.attr('name'), value: btns.val(), filter: filterState }] });
- return false;
- } else {
- filterbtn.addClass('hover-alike');
- resetbtn.addClass('hover-alike');
- }
- }
- });
- $(".grid-field .relation-search").entwine({
- onfocusin: function onfocusin(event) {
- this.autocomplete({
- source: function source(request, response) {
- var searchField = $(this.element);
- var form = $(this.element).closest("form");
- $.ajax({
- headers: {
- "X-Pjax": 'Partial'
- },
- dataType: 'json',
- type: "GET",
- url: $(searchField).data('searchUrl'),
- data: encodeURIComponent(searchField.attr('name')) + '=' + encodeURIComponent(searchField.val()),
- success: response,
- error: function error(e) {
- alert(_i18n2.default._t('GRIDFIELD.ERRORINTRANSACTION', 'An error occured while fetching data from the server\n Please try again later.'));
- }
- });
- },
- select: function select(event, ui) {
- var hiddenField = $('<input type="hidden" name="relationID" class="action_gridfield_relationfind" />');
- hiddenField.val(ui.item.id);
- $(this).closest(".grid-field").find(".action_gridfield_relationfind").replaceWith(hiddenField);
- var addbutton = $(this).closest(".grid-field").find(".action_gridfield_relationadd");
- if (addbutton.data('button')) {
- addbutton.button('enable');
- } else {
- addbutton.removeAttr('disabled');
- }
- }
- });
- }
- });
- $(".grid-field .pagination-page-number input").entwine({
- onkeydown: function onkeydown(event) {
- if (event.keyCode == 13) {
- var newpage = parseInt($(this).val(), 10);
- var gridfield = $(this).getGridField();
- gridfield.setState('GridFieldPaginator', { currentPage: newpage });
- gridfield.reload();
- return false;
- }
- }
- });
- });
- });