Skip to content

Commit 0557a39

Browse files
cybtachyoncybtachyon
committed
Adds image preview to image upload
feat(patternkit.jsoneditor.js)
1 parent ab1e33a commit 0557a39

File tree

2 files changed

+45
-119
lines changed

2 files changed

+45
-119
lines changed

‎js/patternkit.jsoneditor.js

Lines changed: 43 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -28,9 +28,16 @@
2828

2929
// This forces Drupal to re-attach
3030
$(window).on('dialog:afterclose', function (e, dialog, $element) {
31-
Drupal.attachBehaviors($(':root'), settings);
31+
Drupal.attachBehaviors();
3232
});
3333

34+
var saveSchema = function () {
35+
$('#schema_instance_config').val(JSON.stringify(window.patternkitEditor.getValue()));
36+
if (window.M) {
37+
window.M.updateTextFields();
38+
}
39+
};
40+
3441
var $target = $('#editor-shadow-injection-target', context);
3542
$target.once('patternkit-editor').each(function () {
3643
var shadow = this.attachShadow({mode: 'open'});
@@ -91,6 +98,12 @@
9198
'&media_library_remaining=1' +
9299
'&' + encodeURIComponent('media_library_opener_parameters[field_widget_id]') + '=' + this.path;
93100

101+
this.urlfield.addEventListener('change', function(e) {
102+
e.preventDefault();
103+
e.stopPropagation();
104+
self.value = this.value;
105+
self.refreshPreview();
106+
});
94107
this.button.addEventListener('click', function(e) {
95108
e.preventDefault();
96109
e.stopPropagation();
@@ -115,136 +128,63 @@
115128
this.container.appendChild(this.button);
116129
}
117130

118-
window.requestAnimationFrame(function() {
131+
window.requestAnimationFrame(function () {
119132
if (self.value) {
120133
var img = document.createElement('img');
121134
img.style.maxWidth = '100%';
122135
img.style.maxHeight = '100px';
123136
img.onload = function (event) {
124137
self.preview.appendChild(img);
125138
};
126-
img.onerror = function(error) {
127-
window.console.error('upload error', error);
128-
};
129139
img.src = self.container.querySelector('a').href;
130140
}
131141
});
132-
133142
},
134-
refreshPreview: function() {
135-
if (this.last_preview === this.preview_value) {
143+
refreshPreview: function () {
144+
if (this.last_preview === this.value) {
136145
return;
137146
}
138-
this.last_preview = this.preview_value;
139-
147+
this.last_preview = this.value;
140148
this.preview.innerHTML = '';
141-
142-
if (!this.preview_value) {
149+
if (!this.value) {
143150
return;
144151
}
145152

146-
var self = this;
147-
148-
var mime = this.preview_value.match(/^data:([^;,]+)[;,]/);
149-
if (mime) {
150-
mime = mime[1];
151-
}
152-
else {
153-
mime = 'unknown';
154-
}
155-
156-
var file = this.urlfield.files[0];
157-
158-
this.preview.innerHTML = '<strong>Type:</strong> '+mime+', <strong>Size:</strong> '+file.size+' bytes';
159-
if(mime.substr(0,5)==="image") {
160-
this.preview.innerHTML += '<br>';
161-
var img = document.createElement('img');
162-
img.style.maxWidth = '100%';
163-
img.style.maxHeight = '100px';
164-
img.src = this.preview_value;
165-
this.preview.appendChild(img);
166-
}
167-
168-
this.preview.innerHTML += '<br>';
169-
var uploadButton = this.getButton('Upload', 'upload', 'Upload');
170-
this.preview.appendChild(uploadButton);
171-
uploadButton.addEventListener('click',function(event) {
172-
event.preventDefault();
173-
174-
uploadButton.setAttribute("disabled", "disabled");
175-
self.theme.removeInputError(self.uploader);
176-
177-
if (self.theme.getProgressBar) {
178-
self.progressBar = self.theme.getProgressBar();
179-
self.preview.appendChild(self.progressBar);
180-
}
181-
182-
self.jsoneditor.options.upload(self.path, file, {
183-
success: function(url) {
184-
self.setValue(url);
185-
186-
if (self.parent) {
187-
self.parent.onChildEditorChange(self);
188-
}
189-
else {
190-
self.jsoneditor.onChange();
191-
}
192-
193-
if (self.progressBar) {
194-
self.preview.removeChild(self.progressBar);
195-
}
196-
uploadButton.removeAttribute("disabled");
197-
},
198-
failure: function(error) {
199-
self.theme.addInputError(self.uploader, error);
200-
if (self.progressBar) {
201-
self.preview.removeChild(self.progressBar);
202-
}
203-
uploadButton.removeAttribute("disabled");
204-
},
205-
updateProgress: function(progress) {
206-
if (self.progressBar) {
207-
if (progress) {
208-
self.theme.updateProgressBar(self.progressBar, progress);
209-
}
210-
else {
211-
self.theme.updateProgressBarUnknown(self.progressBar);
212-
}
213-
}
214-
}
215-
});
216-
});
217-
218-
if(this.jsoneditor.options.auto_upload || this.schema.options.auto_upload) {
219-
uploadButton.dispatchEvent(new MouseEvent('click'));
220-
this.preview.removeChild(uploadButton);
221-
}
153+
var img = document.createElement('img');
154+
img.style.maxWidth = '100%';
155+
img.style.maxHeight = '100px';
156+
img.src = this.value;
157+
this.preview.appendChild(img);
222158
},
223-
enable: function() {
224-
if(!this.always_disabled) {
225-
if(this.urlfield) {
159+
enable: function () {
160+
if (!this.always_disabled) {
161+
if (this.urlfield) {
226162
this.urlfield.disabled = false;
227163
}
228164
this._super();
229165
}
230166
},
231-
disable: function(always_disabled) {
232-
if(always_disabled) {
167+
disable: function (always_disabled) {
168+
if (always_disabled) {
233169
this.always_disabled = true;
234170
}
235-
if(this.urlfield) {
171+
if (this.urlfield) {
236172
this.urlfield.disabled = true;
237173
}
174+
if (this.button) {
175+
this.button.disabled = true;
176+
}
238177
this._super();
239178
},
240-
setValue: function(val) {
241-
if(this.value !== val) {
179+
setValue: function (val) {
180+
if (this.value !== val) {
242181
this.value = val;
243182
this.urlfield.value = this.value;
244-
this.onChange();
183+
this.refreshPreview();
184+
this.onChange(true);
245185
}
246186
},
247-
destroy: function() {
187+
destroy: function () {
248188
if(this.preview && this.preview.parentNode) {
249189
this.preview.parentNode.removeChild(this.preview);
250190
}
@@ -261,7 +201,7 @@
261201
this._super();
262202
}
263203
});
264-
JSONEditor.defaults.resolvers.unshift(function(schema) {
204+
JSONEditor.defaults.resolvers.unshift(function (schema) {
265205
if (schema.type === 'string' && schema.format === 'image') {
266206
return 'drupal_image';
267207
}
@@ -339,12 +279,6 @@
339279
}
340280
window.patternkitEditor = new JSONEditor($target[0].shadowRoot.getElementById('editor_holder'), config);
341281
JSONEditor.plugins.sceditor.emoticonsEnabled = false;
342-
var saveSchema = function () {
343-
$('#schema_instance_config').val(JSON.stringify(window.patternkitEditor.getValue()));
344-
if (window.M) {
345-
window.M.updateTextFields();
346-
}
347-
};
348282

349283
window.patternkitEditor.on('ready', function () {
350284
if (window.M) {
@@ -359,20 +293,13 @@
359293
// This is before allowing other events, so we need to add a pre-hook
360294
// to trigger the editor update with latest field values.
361295
// @TODO Add handling for AJAX errors and re-attach.
362-
var beforeSubmitHandler = Drupal.Ajax.prototype.beforeSubmit;
363-
Drupal.Ajax.prototype.beforeSubmit = function(formValues, element, options) {
364-
if ( $(element).parents("#editor_holder").length !== 1 ) {
365-
return beforeSubmitHandler(formValues, element, options);
366-
}
296+
$('#edit-actions-submit').parent().submit(function (e) {
297+
e.preventDefault();
367298
window.patternkitEditor.disable();
368299
saveSchema();
369-
for (var v = 0; v < formValues.length; v++) {
370-
if (formValues[v].name === 'settings[instance_config]') {
371-
formValues[v].value = JSON.stringify(window.patternkitEditor.getValue());
372-
}
373-
}
374300
window.patternkitEditor.destroy();
375-
};
301+
$(this).unbind('submit').submit();
302+
});
376303
});
377304
}
378305
};

‎src/MediaLibraryJSONLibraryOpener.php

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@
1010
use Drupal\media_library\MediaLibraryOpenerInterface;
1111
use Drupal\media_library\MediaLibraryState;
1212
use Drupal\patternkit\AJAX\PatternkitEditorUpdateCommand;
13-
use Exception;
1413

1514
/**
1615
* The media library opener for field widgets.
@@ -62,7 +61,7 @@ public function getSelectionResponse(MediaLibraryState $state, array $selected_i
6261
$fid = $media->getSource()->getSourceFieldValue($media);
6362
$file = $this->entityTypeManager->getStorage('file')->load($fid);
6463
}
65-
catch (Exception $exception) {
64+
catch (\Exception $exception) {
6665
return $response;
6766
}
6867
if (!$file) {
@@ -80,7 +79,7 @@ public function getSelectionResponse(MediaLibraryState $state, array $selected_i
8079
}
8180
$response->addCommand(new PatternkitEditorUpdateCommand($widget_id, $url));
8281
}
83-
catch (Exception $exception) {
82+
catch (\Exception $exception) {
8483
return $response;
8584
}
8685

0 commit comments

Comments
 (0)