108 lines
3.0 KiB
JavaScript
108 lines
3.0 KiB
JavaScript
/**
|
|
* form builder behaviour.
|
|
*/
|
|
|
|
import $ from 'jquery';
|
|
|
|
$.entwine('ss', () => {
|
|
let stickyHeaderInterval = null;
|
|
|
|
$('.uf-field-editor tbody').entwine({
|
|
onmatch: () => {
|
|
let i = 0;
|
|
let thisLevel = 0;
|
|
let depth = 0;
|
|
const $buttonrow = $('.uf-field-editor .ss-gridfield-buttonrow').addClass('sticky-buttons');
|
|
const navHeight = $('.cms-content-header.north').height()
|
|
+ parseInt($('.sticky-buttons').css('padding-top'), 10);
|
|
const fieldEditor = $('.uf-field-editor');
|
|
|
|
this._super();
|
|
|
|
// Loop through all rows and set necessary styles
|
|
this.find('.ss-gridfield-item').each(() => {
|
|
switch ($(this).data('class')) {
|
|
case 'EditableFormStep': {
|
|
depth = 0;
|
|
return;
|
|
}
|
|
case 'EditableFieldGroup': {
|
|
thisLevel = ++depth;
|
|
break;
|
|
}
|
|
case 'EditableFieldGroupEnd': {
|
|
thisLevel = depth--;
|
|
break;
|
|
}
|
|
default: {
|
|
thisLevel = depth;
|
|
}
|
|
}
|
|
|
|
$(this).toggleClass('infieldgroup', thisLevel > 0);
|
|
for (i = 1; i <= 5; i++) {
|
|
$(this).toggleClass(`infieldgroup-level-${i}`, thisLevel >= i);
|
|
}
|
|
});
|
|
|
|
// Make sure gridfield buttons stick to top of page when user scrolls down
|
|
stickyHeaderInterval = setInterval(() => {
|
|
const offsetTop = fieldEditor.offset().top;
|
|
$buttonrow.width('100%');
|
|
if (offsetTop > navHeight || offsetTop === 0) {
|
|
$buttonrow.removeClass('sticky-buttons');
|
|
} else {
|
|
$buttonrow.addClass('sticky-buttons');
|
|
}
|
|
}, 300);
|
|
},
|
|
onunmatch: () => {
|
|
this._super();
|
|
|
|
clearInterval(stickyHeaderInterval);
|
|
},
|
|
});
|
|
|
|
// When new fields are added.
|
|
$('.uf-field-editor .ss-gridfield-buttonrow .action').entwine({
|
|
onclick: (e) => {
|
|
this._super(e);
|
|
|
|
this.trigger('addnewinline');
|
|
},
|
|
});
|
|
|
|
$('.uf-field-editor').entwine({
|
|
onmatch: () => {
|
|
this._super();
|
|
|
|
// When the 'Add field' button is clicked set a one time listener.
|
|
// When the GridField is reloaded focus on the newly added field.
|
|
this.on('addnewinline', () => {
|
|
this.one('reload', () => {
|
|
// If fieldgroup, focus on the start marker
|
|
let $newField = this.find('.ss-gridfield-item').last();
|
|
let $groupEnd = null;
|
|
if ($newField.attr('data-class') === 'EditableFieldGroupEnd') {
|
|
$groupEnd = $newField;
|
|
$groupEnd.prev().find('.col-Title input').focus();
|
|
$newField = $groupEnd.add($groupEnd.prev());
|
|
$groupEnd.css('visibility', 'hidden');
|
|
} else {
|
|
$newField.find('.col-Title input').focus();
|
|
}
|
|
|
|
$newField.addClass('flashBackground');
|
|
$('.cms-content-fields').scrollTop($('.cms-content-fields')[0].scrollHeight);
|
|
if ($groupEnd) {
|
|
$groupEnd.css('visibility', 'visible');
|
|
}
|
|
});
|
|
});
|
|
},
|
|
onummatch: () => {
|
|
this._super();
|
|
},
|
|
});
|
|
});
|