TPS
/
ORIENT
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refit the media manager implementation 

Refs #2005
This commit is contained in:
Samuel Georges 2016-05-21 12:38:04 +10:00
parent 5a63fb292a
commit 79446aa464
7 changed files with 597 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
modules/backend/formwidgets/richeditor/assets/css/richeditor.css
View File

@ -398,7 +398,7 @@ to{left:100%}
.field-richeditor.stretch .fr-box:not(.fr-fullscreen) .fr-wrapper .fr-view{min-height:0}
.field-richeditor.stretch .fr-box:not(.fr-fullscreen) .fr-view,.field-richeditor.stretch .fr-box:not(.fr-fullscreen) textarea{height:100%}
.field-richeditor.stretch .fr-box:not(.fr-fullscreen) .fr-placeholder{top:20px;left:20px}
.control-richeditor figure[data-ui-block]{display:block;margin:0 0 15px 0;padding:10px 10px 10px 36px;border:2px dotted #bdc3c7;background:white;position:relative;cursor:pointer;color:#6c7071;font:15px sans-serif;font-weight:500;line-height:150%;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box}
.control-richeditor figure[data-ui-block]{display:inline-block;margin:0 0 15px 0;padding:10px 10px 10px 36px;border:2px dotted #bdc3c7;background:white;position:relative;cursor:pointer;color:#6c7071;font:15px sans-serif;font-weight:500;line-height:150%;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box}
.control-richeditor figure[data-ui-block]:focus,.control-richeditor figure[data-ui-block].inspector-open{border-color:#2581b8;border-style:solid;outline:none}
.control-richeditor figure[data-video],.control-richeditor figure[data-audio]{padding-left:13px}
.control-richeditor figure[data-video]:after,.control-richeditor figure[data-audio]:after{content:attr(data-label)}

262
modules/backend/formwidgets/richeditor/assets/js/build-min.js vendored
View File

File diff suppressed because one or more lines are too long

4
modules/backend/formwidgets/richeditor/assets/js/build.js
View File

@ -16,7 +16,7 @@
=require ../vendor/froala_drm/js/plugins/paragraph_format.min.js
=require ../vendor/froala_drm/js/plugins/align.min.js
=require ../vendor/froala_drm/js/plugins/lists.min.js
=require ../vendor/froala_drm/js/plugins/file.min.js
=require ../vendor/froala_drm/js/plugins/file_extended.js
=require ../vendor/froala_drm/js/plugins/image.min.js
// Cannot be minified twice
@ -24,6 +24,7 @@
=require ../vendor/froala_drm/js/plugins/table.min.js
=require ../vendor/froala_drm/js/plugins/video.min.js
=require ../vendor/froala_drm/js/plugins/audio.js
=require ../vendor/froala_drm/js/plugins/quote.min.js
=require ../vendor/froala_drm/js/plugins/font_size.min.js
=require ../vendor/froala_drm/js/plugins/font_family.min.js
@ -37,6 +38,7 @@
=require ../vendor/froala_drm/js/plugins/draggable.min.js
=require ../vendor/froala_drm/js/plugins/code_beautifier.min.js
=require plugins/mediamanager.js
=require plugins/figures.js
=require richeditor.js

50
modules/backend/formwidgets/richeditor/assets/js/plugins/figures.js
View File

@ -9,11 +9,14 @@
/**
* Insert UI Blocks
*/
function insert($el) {
function insertElement($el) {
var html = $('<div />').append($el.clone()).remove().html()
editor.html.insert(html)
// Make sure we have focus.
editor.events.focus(true)
editor.selection.restore()
editor.html.insert(html)
editor.html.cleanEmptyTags()
// Clean up wrapping paragraphs or empty paragraphs
@ -22,14 +25,45 @@
$parent = $this.parent('p'),
$next = $this.next('p')
// If block is inserted to a paragraph, insert it afterwards.
if (!!$parent.length) {
$this.unwrap()
$this.insertAfter($parent)
}
// Inserting a figure tag will put an empty paragraph tag
// directly after it, strip these instances out
if (!!$next.length && $.trim($next.text()).length == 0) {
$next.remove()
}
})
editor.undo.saveStep()
}
function _makeUiBlockElement() {
var $node = $('<figure contenteditable="false" tabindex="0" data-ui-block="true">&nbsp;</figure>')
$node.get(0).contentEditable = false
return $node
}
function insertVideo(url, text) {
var $node = _makeUiBlockElement()
$node.attr('data-video', url)
$node.attr('data-label', text)
insertElement($node)
}
function insertAudio(url, text) {
var $node = _makeUiBlockElement()
$node.attr('data-audio', url)
$node.attr('data-label', text)
insertElement($node)
}
/**
@ -183,10 +217,14 @@
return $domTree.html()
}
// The start point for your plugin.
/**
* Init.
*/
function _init () {
editor.events.on('initialized', _initUiBlocks)
editor.events.on('html.set', _initUiBlocks)
editor.events.on('html.get', _onSync)
editor.events.on('keydown', _onKeydown)
@ -205,7 +243,9 @@
return {
_init: _init,
insert: insert
insert: insertElement,
insertVideo: insertVideo,
insertAudio: insertAudio
}
}
})(jQuery);

283
modules/backend/formwidgets/richeditor/assets/js/plugins/mediamanager.js Normal file
View File

@ -0,0 +1,283 @@
(function ($) {
$.FroalaEditor.PLUGINS.mediaManager = function (editor) {
function onInsertFile() {
new $.oc.mediaManager.popup({
alias: 'ocmediamanager',
cropAndInsertButton: false,
onInsert: function(items) {
if (!items.length) {
$.oc.alert($.oc.lang.get('mediamanager.invalid_file_empty_insert'))
return
}
if (items.length > 1) {
$.oc.alert($.oc.lang.get('mediamanager.invalid_file_single_insert'))
return
}
var link,
text = editor.selection.text(),
textIsEmpty = $.trim(text) === ''
for (var i=0, len=items.length; i<len; i++) {
var text = textIsEmpty ? items[i].title : text
link = items[i].publicUrl
}
// Focus in the editor.
editor.events.focus(true);
editor.selection.restore();
// Insert the link.
editor.html.insert('<a href="' + link + '" id="fr-inserted-file" class="fr-file">' + text + '</a>');
// Get the file.
var $file = editor.$el.find('#fr-inserted-file');
$file.removeAttr('id');
editor.undo.saveStep()
this.hide()
}
})
}
function onInsertImage() {
var $currentImage = editor.image.get()
new $.oc.mediaManager.popup({
alias: 'ocmediamanager',
cropAndInsertButton: true,
onInsert: function(items) {
if (!items.length) {
$.oc.alert($.oc.lang.get('mediamanager.invalid_image_empty_insert'))
return
}
var imagesInserted = 0
for (var i=0, len=items.length; i<len; i++) {
if (items[i].documentType !== 'image') {
$.oc.alert($.oc.lang.get('mediamanager.invalid_image_invalid_insert', 'The file "'+items[i].title+'" is not an image.'))
continue
}
editor.image.insert(items[i].publicUrl, false, {}, $currentImage)
imagesInserted++
if (imagesInserted == 1) {
$currentImage = null
}
}
if (imagesInserted !== 0) {
this.hide()
editor.undo.saveStep()
}
}
})
}
function onInsertVideo() {
new $.oc.mediaManager.popup({
alias: 'ocmediamanager',
cropAndInsertButton: false,
onInsert: function(items) {
if (!items.length) {
$.oc.alert($.oc.lang.get('mediamanager.invalid_video_empty_insert'))
return
}
if (items.length > 1) {
$.oc.alert($.oc.lang.get('mediamanager.invalid_file_single_insert'))
return
}
var item = items[0]
if (item.documentType !== 'video') {
$.oc.alert($.oc.lang.get('mediamanager.invalid_video_invalid_insert', 'The file "'+item.title+'" is not a video.'))
return
}
var $richEditorNode = editor.$el.closest('[data-control="richeditor"]')
$richEditorNode.richEditor('insertVideo', item.publicUrl, item.title)
this.hide()
}
})
}
function onInsertAudio() {
new $.oc.mediaManager.popup({
alias: 'ocmediamanager',
cropAndInsertButton: false,
onInsert: function(items) {
if (!items.length) {
$.oc.alert($.oc.lang.get('mediamanager.invalid_audio_empty_insert'))
return
}
if (items.length > 1) {
$.oc.alert($.oc.lang.get('mediamanager.invalid_file_single_insert'))
return
}
var item = items[0]
if (item.documentType !== 'audio') {
$.oc.alert($.oc.lang.get('mediamanager.invalid_audio_invalid_insert', 'The file "'+item.title+'" is not an audio file.'))
return
}
var $richEditorNode = editor.$el.closest('[data-control="richeditor"]')
$richEditorNode.richEditor('insertAudio', item.publicUrl, item.title)
this.hide()
}
})
}
function _insertVideoFallback(link) {
var $richEditorNode = editor.$el.closest('[data-control="richeditor"]')
var title = link.substring(link.lastIndexOf('/') + 1)
$richEditorNode.richEditor('insertVideo', link, title)
editor.popups.hide('video.insert')
}
function _insertAudioFallback(link) {
var $richEditorNode = editor.$el.closest('[data-control="richeditor"]')
var title = link.substring(link.lastIndexOf('/') + 1)
$richEditorNode.richEditor('insertAudio', link, title)
editor.popups.hide('audio.insert')
}
/**
* Init.
*/
function _init () {
editor.events.on('destroy', _destroy, true)
editor.events.on('video.linkError', _insertVideoFallback)
editor.events.on('audio.linkError', _insertAudioFallback)
}
/**
* Destroy.
*/
function _destroy () {
editor.$el.off('keydown', 'figure', _onFigureKeydown)
}
// Expose public methods. If _init is not public then the plugin won't be initialized.
// Public method can be accessed through the editor API:
// $('.selector').froalaEditor('mediaManager.publicMethod');
return {
_init: _init,
insertFile: onInsertFile,
insertImage: onInsertImage,
insertVideo: onInsertVideo,
insertAudio: onInsertAudio
}
}
if (!$.FE.PLUGINS.link || !$.FE.PLUGINS.file || !$.FE.PLUGINS.image || !$.FE.PLUGINS.video) {
throw new Error('Media manager plugin requires link, file, image and video plugin.');
}
//
// Image
//
$.FE.DEFAULTS.imageInsertButtons.push('mmImageManager');
$.FE.RegisterCommand('mmImageManager', {
title: 'Browse',
undo: false,
focus: false,
callback: function () {
this.mediaManager.insertImage();
},
plugin: 'mediaManager'
})
// Add the font size icon.
$.FE.DefineIcon('mmImageManager', {
NAME: 'folder'
});
//
// File
//
$.FE.DEFAULTS.fileInsertButtons.push('mmFileManager');
$.FE.RegisterCommand('mmFileManager', {
title: 'Browse',
undo: false,
focus: false,
callback: function () {
this.mediaManager.insertFile();
},
plugin: 'mediaManager'
})
// Add the font size icon.
$.FE.DefineIcon('mmFileManager', {
NAME: 'folder'
});
//
// Video
//
$.FE.DEFAULTS.videoInsertButtons.push('mmVideoManager');
$.FE.RegisterCommand('mmVideoManager', {
title: 'Browse',
undo: false,
focus: false,
callback: function () {
this.mediaManager.insertVideo();
},
plugin: 'mediaManager'
})
// Add the font size icon.
$.FE.DefineIcon('mmVideoManager', {
NAME: 'folder'
});
//
// Audio
//
$.FE.DEFAULTS.audioInsertButtons.push('mmAudioManager');
$.FE.RegisterCommand('mmAudioManager', {
title: 'Browse',
undo: false,
focus: false,
callback: function () {
this.mediaManager.insertAudio();
},
plugin: 'mediaManager'
})
// Add the font size icon.
$.FE.DefineIcon('mmAudioManager', {
NAME: 'folder'
});
})(jQuery);

9
modules/backend/formwidgets/richeditor/assets/js/richeditor.js
View File

@ -82,6 +82,7 @@
'insertLink',
'insertImage',
'insertVideo',
'insertAudio',
'insertFile',
'insertHR',
'fullscreen',
@ -223,6 +224,14 @@
this.$textarea.froalaEditor('figures.insert', $node)
}
RichEditor.prototype.insertVideo = function(url, title) {
this.$textarea.froalaEditor('figures.insertVideo', url, title)
}
RichEditor.prototype.insertAudio = function(url, title) {
this.$textarea.froalaEditor('figures.insertAudio', url, title)
}
// EVENT HANDLERS
// ============================

2
modules/backend/formwidgets/richeditor/assets/less/richeditor.less
View File

@ -136,7 +136,7 @@
.control-richeditor {
.richeditor-snippet() {
display: block;
display: inline-block;
margin: 0 0 15px 0;
padding: 10px 10px 10px 36px;
border: 2px dotted #bdc3c7;