-
Notifications
You must be signed in to change notification settings - Fork 333
/
SiteTreeURLSegmentField.js
138 lines (119 loc) · 3.49 KB
/
SiteTreeURLSegmentField.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
(function($) {
$.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('.preview').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();
}
});
});
}(jQuery));