mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-10-22 14:05:37 +02:00
ENHANCEMENT: SSF-38 initial rearranging of the insert image form to allow uploads as well as choosing an image from the CMS (and you can pick and choose from both)
This commit is contained in:
parent
cbb0259dd7
commit
9f9dc25338
@ -369,25 +369,53 @@ class HtmlEditorField_Toolbar extends RequestHandler {
|
|||||||
));
|
));
|
||||||
|
|
||||||
$numericLabelTmpl = '<span class="step-label"><span class="flyout">%d</span><span class="arrow"></span><strong class="title">%s</strong></span>';
|
$numericLabelTmpl = '<span class="step-label"><span class="flyout">%d</span><span class="arrow"></span><strong class="title">%s</strong></span>';
|
||||||
$fields = new FieldList(
|
|
||||||
new LiteralField(
|
|
||||||
'Heading',
|
|
||||||
sprintf('<h3>%s</h3>', _t('HtmlEditorField.IMAGE', 'Image'))
|
|
||||||
),
|
|
||||||
|
|
||||||
$contentComposite = new CompositeField(
|
$fromCMS = new CompositeField(
|
||||||
new LiteralField('headerSelect', '<h4 class="field header-select">' . sprintf($numericLabelTmpl, '1', _t('HtmlEditorField.Find', 'Find')) . '</h4>'),
|
new LiteralField('headerSelect', '<h4 class="field header-select">' . sprintf($numericLabelTmpl, '1', _t('HtmlEditorField.Find', 'Find')) . '</h4>'),
|
||||||
$selectComposite = new CompositeField(
|
$selectComposite = new CompositeField(
|
||||||
new TreeDropdownField('ParentID', _t('HtmlEditorField.FOLDER', 'Folder'), 'Folder'),
|
new TreeDropdownField('ParentID', _t('HtmlEditorField.FOLDER', 'Folder'), 'Folder'),
|
||||||
$fileField
|
$fileField
|
||||||
),
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
$fromCMS->addExtraClass('content');
|
||||||
|
$selectComposite->addExtraClass('content-select');
|
||||||
|
|
||||||
|
Requirements::css(SAPPHIRE_DIR . '/css/AssetUploadField.css');
|
||||||
|
$computerUploadField = Object::create('UploadField', 'AssetUploadField', '');
|
||||||
|
$computerUploadField->setConfig('previewMaxWidth', 40);
|
||||||
|
$computerUploadField->setConfig('previewMaxHeight', 30);
|
||||||
|
$computerUploadField->addExtraClass('ss-assetuploadfield');
|
||||||
|
$computerUploadField->removeExtraClass('ss-uploadfield');
|
||||||
|
$computerUploadField->setTemplate('AssetUploadField');
|
||||||
|
$computerUploadField->setFolderName(Upload::$uploads_folder);
|
||||||
|
|
||||||
|
$tabSet = new TabSet(
|
||||||
|
"MediaFormInsertImageTabs",
|
||||||
|
new Tab(
|
||||||
|
'From your computer',
|
||||||
|
$computerUploadField
|
||||||
|
),
|
||||||
|
new Tab(
|
||||||
|
'From the CMS',
|
||||||
|
$fromCMS
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
$allFields = new CompositeField(
|
||||||
|
$tabSet,
|
||||||
new LiteralField('headerEdit', '<h4 class="field header-edit">' . sprintf($numericLabelTmpl, '2', _t('HtmlEditorField.EditDetails', 'Edit details')) . '</h4>'),
|
new LiteralField('headerEdit', '<h4 class="field header-edit">' . sprintf($numericLabelTmpl, '2', _t('HtmlEditorField.EditDetails', 'Edit details')) . '</h4>'),
|
||||||
$editComposite = new CompositeField(
|
$editComposite = new CompositeField(
|
||||||
new LiteralField('contentEdit', '<div class="content-edit"></div>')
|
new LiteralField('contentEdit', '<div class="content-edit"></div>')
|
||||||
)
|
)
|
||||||
|
);
|
||||||
|
|
||||||
)
|
$fields = new FieldList(
|
||||||
|
new LiteralField(
|
||||||
|
'Heading',
|
||||||
|
sprintf('<h3>%s</h3>', _t('HtmlEditorField.IMAGE', 'Insert Image'))
|
||||||
|
),
|
||||||
|
$allFields
|
||||||
);
|
);
|
||||||
|
|
||||||
$actions = new FieldList(
|
$actions = new FieldList(
|
||||||
@ -404,8 +432,6 @@ class HtmlEditorField_Toolbar extends RequestHandler {
|
|||||||
$actions
|
$actions
|
||||||
);
|
);
|
||||||
|
|
||||||
$contentComposite->addExtraClass('content');
|
|
||||||
$selectComposite->addExtraClass('content-select');
|
|
||||||
|
|
||||||
$form->unsetValidator();
|
$form->unsetValidator();
|
||||||
$form->disableSecurityToken();
|
$form->disableSecurityToken();
|
||||||
|
@ -696,6 +696,30 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE;
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Show the second step after uploading an image
|
||||||
|
*/
|
||||||
|
$('.ss-assetuploadfield').entwine({
|
||||||
|
onmatch: function() {
|
||||||
|
this._super();
|
||||||
|
|
||||||
|
// Always hide the "second step" part, we don't need it here
|
||||||
|
this.find('.ss-uploadfield-editandorganize').hide();
|
||||||
|
|
||||||
|
},
|
||||||
|
onfileuploadstop: function(e) {
|
||||||
|
//get the uploaded file ID when this event triggers, signaling the upload has compeleted successfully
|
||||||
|
//always use the last one uploaded
|
||||||
|
var uploadedFileID = $('ul.ss-uploadfield-files').children('li.ss-uploadfield-item').last().data('fileid');
|
||||||
|
|
||||||
|
//trigger the detail view for filling out details about the file we are about to insert into TinyMCE
|
||||||
|
var form = this.closest('form');
|
||||||
|
form.closest('form').showFileView(uploadedFileID);
|
||||||
|
form.redraw();
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Represents a single selected file, together with a set of form fields to edit its properties.
|
* Represents a single selected file, together with a set of form fields to edit its properties.
|
||||||
* Overload this based on the media type to determine how the HTML should be created.
|
* Overload this based on the media type to determine how the HTML should be created.
|
||||||
|
Loading…
Reference in New Issue
Block a user