silverstripe-cms/client/src/legacy/SiteTreeURLSegmentField.js
Chris Joe d2a5d073e2 Upgrade to webpack2 and cleanup config file (#1833)
* Enhancement switch to the shared webpack config

* upgrade to new webpack-config
2017-05-29 17:24:48 +12:00

138 lines
3.4 KiB
JavaScript

import $ from 'jquery';
$.entwine('ss', function($) {
/**
* Class: .field.urlsegment
*
* Provides enhanced functionality (read-only/edit switch) and
* input validation on the URLSegment field
*/
$('.field.urlsegment:not(.readonly)').entwine({
// Roughly matches the field width including edit button
MaxPreviewLength: 55,
Ellipsis: '...',
onmatch : function() {
// Only initialize the field if it contains an editable field.
// This ensures we don't get bogus previews on readonly fields.
if(this.find(':text').length) this.toggleEdit(false);
this.redraw();
this._super();
},
redraw: function() {
var field = this.find(':text'),
url = decodeURI(field.data('prefix') + field.val()),
previewUrl = url;
// Truncate URL if required (ignoring the suffix, retaining the full value)
if(url.length > this.getMaxPreviewLength()) {
previewUrl = this.getEllipsis() + url.substr(url.length - this.getMaxPreviewLength(), url.length);
}
// Transfer current value to holder
this.find('.URL-link').attr('href', encodeURI(url + field.data('suffix'))).text(previewUrl);
},
/**
* @param Boolean
*/
toggleEdit: function(toggle) {
var field = this.find(':text');
this.find('.preview-holder')[toggle ? 'hide' : 'show']();
this.find('.edit-holder')[toggle ? 'show' : 'hide']();
if(toggle) {
field.data("origval", field.val()); //retain current value for cancel
field.focus();
}
},
/**
* Commits the change of the URLSegment to the field
* Optional: pass in (String) to update the URLSegment
*/
update: function() {
var self = this,
field = this.find(':text'),
currentVal = field.data('origval'),
title = arguments[0],
updateVal = (title && title !== "") ? title : field.val();
if (currentVal != updateVal) {
this.addClass('loading');
this.suggest(updateVal, function(data) {
field.val(decodeURIComponent(data.value));
self.toggleEdit(false);
self.removeClass('loading');
self.redraw();
});
} else {
this.toggleEdit(false);
this.redraw();
}
},
/**
* Cancels any changes to the field
*/
cancel: function() {
var field = this.find(':text');
field.val(field.data("origval"));
this.toggleEdit(false);
},
/**
* Return a value matching the criteria.
*
* @param (String)
* @param (Function)
*/
suggest: function(val, callback) {
var self = this,
field = self.find(':text'),
urlParts = $.path.parseUrl(self.closest('form').attr('action')),
url = urlParts.hrefNoSearch + '/field/' + field.attr('name') + '/suggest/?value=' + encodeURIComponent(val);
if(urlParts.search) url += '&' + urlParts.search.replace(/^\?/, '');
$.ajax({
url: url,
success: function(data) {
callback.apply(this, arguments);
},
error: function(xhr, status) {
xhr.statusText = xhr.responseText;
},
complete: function() {
self.removeClass('loading');
}
});
}
});
$('.field.urlsegment .edit').entwine({
onclick: function(e) {
e.preventDefault();
this.closest('.field').toggleEdit(true);
}
});
$('.field.urlsegment .update').entwine({
onclick: function(e) {
e.preventDefault();
this.closest('.field').update();
}
});
$('.field.urlsegment .cancel').entwine({
onclick: function(e) {
e.preventDefault();
this.closest('.field').cancel();
}
});
});