123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262 |
- import $ from 'jquery';
- import Finder from '../../utils/finderjs';
- import { config as gravConfig } from 'grav-config';
- let XHRUUID = 0;
- export const Instances = {};
- export class Parents {
- constructor(container, field, data) {
- this.container = $(container);
- this.fieldName = field.attr('name');
- this.field = $(`[name="${this.fieldName}"]`);
- this.data = data;
- this.parentLabel = $(`[data-parents-field-label="${this.fieldName}"]`);
- this.parentName = $(`[data-parents-field-name="${this.fieldName}"]`);
- const dataLoad = this.dataLoad;
- this.finder = new Finder(
- this.container,
- (parent, callback) => {
- return dataLoad.call(this, parent, callback);
- },
- {
- labelKey: 'name',
- defaultPath: this.field.val(),
- createItemContent: function(item) {
- return Parents.createItemContent(this.config, item);
- }
- }
- );
- /*
- this.finder.$emitter.on('leaf-selected', (item) => {
- console.log('selected', item);
- this.finder.emit('create-column', () => this.createSimpleColumn(item));
- });
- this.finder.$emitter.on('item-selected', (selected) => {
- console.log('selected', selected);
- // for future use only - create column-card creation for file with details like in macOS finder
- // this.finder.$emitter('create-column', () => this.createSimpleColumn(selected));
- }); */
- this.finder.$emitter.on('column-created', () => {
- this.container[0].scrollLeft = this.container[0].scrollWidth - this.container[0].clientWidth;
- });
- }
- static createItemContent(config, item) {
- const frag = document.createDocumentFragment();
- const label = $(`<span title="${item[config.labelKey]}" />`);
- const infoContainer = $('<span class="info-container" />');
- const iconPrepend = $('<i />');
- const iconAppend = $('<i />');
- const badge = $('<span class="badge" />');
- const prependClasses = ['fa'];
- const appendClasses = ['fa'];
- // prepend icon
- if (item.children || item.type === 'dir') {
- prependClasses.push('fa-folder');
- } else if (item.type === 'root') {
- prependClasses.push('fa-sitemap');
- } else if (item.type === 'file') {
- prependClasses.push('fa-file-o');
- }
- iconPrepend.addClass(prependClasses.join(' '));
- // text label
- label.text(item[config.labelKey]).prepend(iconPrepend);
- label.appendTo(frag);
- // append icon
- if (item.children || item['has-children']) {
- appendClasses.push('fa-caret-right');
- badge.text(item.size || item.count || 0);
- badge.appendTo(infoContainer);
- }
- iconAppend.addClass(appendClasses.join(' '));
- iconAppend.appendTo(infoContainer);
- infoContainer.appendTo(frag);
- return frag;
- }
- static createLoadingColumn() {
- return $(`
- <div class="fjs-col leaf-col" style="overflow: hidden;">
- <div class="leaf-row">
- <div class="grav-loading"><div class="grav-loader">Loading...</div></div>
- </div>
- </div>
- `);
- }
- static createErrorColumn(error) {
- return $(`
- <div class="fjs-col leaf-col" style="overflow: hidden;">
- <div class="leaf-row error">
- <i class="fa fa-fw fa-warning"></i>
- <span>${error}</span>
- </div>
- </div>
- `);
- }
- createSimpleColumn(item) {}
- dataLoad(parent, callback) {
- if (!parent) {
- return callback(this.data);
- }
- if (parent.type !== 'dir' || !parent['has-children']) {
- return false;
- }
- const UUID = ++XHRUUID;
- this.startLoader();
- $.ajax({
- url: `${gravConfig.current_url}`,
- method: 'post',
- data: Object.assign({}, getExtraFormData(this.container), {
- route: b64_encode_unicode(parent.value),
- field: this.field.data('fieldName'),
- action: 'getLevelListing',
- 'admin-nonce': gravConfig.admin_nonce
- }),
- success: (response) => {
- this.stopLoader();
- if (response.status === 'error') {
- this.finder.$emitter.emit('create-column', Parents.createErrorColumn(response.message)[0]);
- return false;
- }
- // stale request
- if (UUID !== XHRUUID) {
- return false;
- }
- return callback(response.data);
- }
- });
- }
- startLoader() {
- this.loadingIndicator = Parents.createLoadingColumn();
- this.finder.$emitter.emit('create-column', this.loadingIndicator[0]);
- return this.loadingIndicator;
- }
- stopLoader() {
- return this.loadingIndicator && this.loadingIndicator.remove();
- }
- }
- export const b64_encode_unicode = (str) => {
- return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g,
- function toSolidBytes(match, p1) {
- return String.fromCharCode('0x' + p1);
- }));
- };
- export const b64_decode_unicode = (str) => {
- return decodeURIComponent(atob(str).split('').map(function(c) {
- return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
- }).join(''));
- };
- const getExtraFormData = (container) => {
- let form = container.closest('form');
- if (container.closest('[data-remodal-id]').length) {
- form = $('form#blueprints');
- }
- const data = {};
- const unique_id = form.find('[name="__unique_form_id__"]');
- data['__form-name__'] = form.find('[name="__form-name__"]').val();
- data['form-nonce'] = form.find('[name="form-nonce"]').val();
- if (unique_id.length) {
- data['__unique_form_id__'] = unique_id.val();
- }
- return data;
- };
- $(document).on('click', '[data-parents]', (event) => {
- event.preventDefault();
- event.stopPropagation();
- const target = $(event.currentTarget);
- let field = target.closest('.parents-wrapper').find('input[name]');
- let fieldName = field.attr('name');
- if (!field.length) {
- fieldName = target.data('parents');
- field = $(`[name="${target.data('parents')}"]`).first();
- }
- const modal = $(`[data-remodal-id="${target.data('remodalTarget') || 'parents'}"]`);
- const loader = modal.find('.grav-loading');
- const content = modal.find('.parents-content');
- loader.css('display', 'block');
- content.html('');
- $.ajax({
- url: `${gravConfig.current_url}`,
- method: 'post',
- data: Object.assign({}, getExtraFormData(target), {
- route: b64_encode_unicode(field.val()),
- field: field.data('fieldName'),
- action: 'getLevelListing',
- 'admin-nonce': gravConfig.admin_nonce,
- initial: true
- }),
- success(response) {
- loader.css('display', 'none');
- if (response.status === 'error') {
- content.html(response.message);
- return true;
- }
- if (!Instances[`${fieldName}-${modal.data('remodalId')}`]) {
- Instances[`${fieldName}-${modal.data('remodalId')}`] = new Parents(content, field, response.data);
- } else {
- Instances[`${fieldName}-${modal.data('remodalId')}`].finder.reload(response.data);
- }
- modal.data('parents', Instances[`${fieldName}-${modal.data('remodalId')}`]);
- }
- });
- });
- // apply finder selection to field
- $(document).on('click', '[data-remodal-id].parents-container [data-parents-select]', (event) => {
- const modal = $(event.currentTarget).closest('[data-remodal-id]');
- const parents = modal.data('parents');
- const finder = parents.finder;
- const field = parents.field;
- const parentLabel = parents.parentLabel;
- const parentName = parents.parentName;
- const selection = finder.findLastActive().item[0];
- const value = selection._item[finder.config.valueKey];
- const name = selection._item[finder.config.labelKey];
- field.val(value);
- parentLabel.text(value);
- parentName.text(name);
- finder.config.defaultPath = value;
- const remodal = $.remodal.lookup[$(`[data-remodal-id="${modal.data('remodalId')}"]`).data('remodal')];
- remodal.close();
- });
|