mirror_php/formwork
1
0
Fork 0
mirror of https://github.com/getformwork/formwork.git synced 2025-02-24 09:42:43 +01:00
Code Issues Packages Projects Releases Wiki Activity

Use image picker when inserting an image from editor toolbar

Browse Source
This commit is contained in:
Giuseppe Criscione 2018-10-14 01:16:59 +02:00
parent f475ba3a91
commit 1a2e28eafe
4 changed files with 51 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
admin/assets/js/app.js
View File

@ -162,7 +162,16 @@ Formwork.Editor = function(id) {
});
$('[data-command=image]', $toolbar).click(function() {
insertAtCursor(prependSequence() + '![](', ')');
Formwork.Modals.show('imagesModal', null, function($modal) {
$('.image-picker-thumbnail.selected', $modal).removeClass('selected');
$('.image-picker-confirm', $modal).data('target', function(filename) {
if (filename !== undefined) {
insertAtCursor(prependSequence() + '![', '](' + filename + ')');
} else {
insertAtCursor(prependSequence() + '![](', ')');
}
});
});
});
$('[data-command=summary]', $toolbar).click(function() {
@ -363,14 +372,11 @@ Formwork.Forms = {
var $this = $(this);
var value = $this.val();
Formwork.Modals.show('imagesModal', null, function($modal) {
$modal.find('.image-picker-confirm').data('target', $this);
$modal.find('.image-picker-thumbnail').each(function() {
var $thumbnail = $(this);
if ($thumbnail.data('text') == value) {
$thumbnail.addClass('selected');
return false;
}
});
$('.image-picker-confirm', $modal).data('target', $this);
$('.image-picker-thumbnail.selected', $modal).removeClass('selected');
if (value) {
$('.image-picker-thumbnail[data-filename="' + value + '"]', $modal).addClass('selected');
}
});
});
@ -382,8 +388,8 @@ Formwork.Forms = {
for (var i = 0; i < options.length; i++) {
$('<div>', {
class: 'image-picker-thumbnail',
'data-value': options[i].value,
'data-text': options[i].text
'data-uri': options[i].value,
'data-filename': options[i].text
}).css({
'background-image': 'url(' + options[i].value + ')'
}).appendTo(container);
@ -396,14 +402,20 @@ Formwork.Forms = {
$('.image-picker-confirm').click(function() {
var $this = $(this);
$this.data('target').val($this.parent().find('.image-picker-thumbnail.selected').data('text'));
var target = $this.data('target');
var filename = $('.image-picker-thumbnail.selected', $this.parent()).data('filename');
if (typeof target === 'function') {
target(filename);
} else {
$this.data('target').val(filename);
}
});
$('.image-picker-thumbnail').click(function() {
var $this = $(this);
$this.siblings().removeClass('selected');
$this.addClass('selected');
$this.parent().siblings('.image-input').val($this.data('value'));
$this.parent().siblings('.image-input').val($this.data('uri'));
});
$('.image-picker-thumbnail').dblclick(function() {

2
admin/assets/js/app.min.js vendored
View File

File diff suppressed because one or more lines are too long

11
admin/assets/js/src/components/editor.js
View File

@ -48,7 +48,16 @@ Formwork.Editor = function(id) {
});
$('[data-command=image]', $toolbar).click(function() {
insertAtCursor(prependSequence() + '![](', ')');
Formwork.Modals.show('imagesModal', null, function($modal) {
$('.image-picker-thumbnail.selected', $modal).removeClass('selected');
$('.image-picker-confirm', $modal).data('target', function(filename) {
if (filename !== undefined) {
insertAtCursor(prependSequence() + '![', '](' + filename + ')');
} else {
insertAtCursor(prependSequence() + '![](', ')');
}
});
});
});
$('[data-command=summary]', $toolbar).click(function() {

27
admin/assets/js/src/components/forms.js
View File

@ -57,14 +57,11 @@ Formwork.Forms = {
var $this = $(this);
var value = $this.val();
Formwork.Modals.show('imagesModal', null, function($modal) {
$modal.find('.image-picker-confirm').data('target', $this);
$modal.find('.image-picker-thumbnail').each(function() {
var $thumbnail = $(this);
if ($thumbnail.data('text') == value) {
$thumbnail.addClass('selected');
return false;
}
});
$('.image-picker-confirm', $modal).data('target', $this);
$('.image-picker-thumbnail.selected', $modal).removeClass('selected');
if (value) {
$('.image-picker-thumbnail[data-filename="' + value + '"]', $modal).addClass('selected');
}
});
});
@ -76,8 +73,8 @@ Formwork.Forms = {
for (var i = 0; i < options.length; i++) {
$('<div>', {
class: 'image-picker-thumbnail',
'data-value': options[i].value,
'data-text': options[i].text
'data-uri': options[i].value,
'data-filename': options[i].text
}).css({
'background-image': 'url(' + options[i].value + ')'
}).appendTo(container);
@ -90,14 +87,20 @@ Formwork.Forms = {
$('.image-picker-confirm').click(function() {
var $this = $(this);
$this.data('target').val($this.parent().find('.image-picker-thumbnail.selected').data('text'));
var target = $this.data('target');
var filename = $('.image-picker-thumbnail.selected', $this.parent()).data('filename');
if (typeof target === 'function') {
target(filename);
} else {
$this.data('target').val(filename);
}
});
$('.image-picker-thumbnail').click(function() {
var $this = $(this);
$this.siblings().removeClass('selected');
$this.addClass('selected');
$this.parent().siblings('.image-input').val($this.data('value'));
$this.parent().siblings('.image-input').val($this.data('uri'));
});
$('.image-picker-thumbnail').dblclick(function() {