269 lines
11 KiB
JavaScript
269 lines
11 KiB
JavaScript
(function(factory)
|
|
{
|
|
/* global define */
|
|
if (typeof define === 'function' && define.amd)
|
|
{
|
|
// AMD. Register as an anonymous module.
|
|
define(['jquery'], factory);
|
|
}
|
|
else if (typeof module === 'object' && module.exports)
|
|
{
|
|
// Node/CommonJS
|
|
module.exports = factory(require('jquery'));
|
|
}
|
|
else
|
|
{
|
|
// Browser globals
|
|
factory(window.jQuery);
|
|
}
|
|
}(function($)
|
|
{
|
|
|
|
// Extends plugins for adding gallery.
|
|
// - plugin is external module for customizing.
|
|
$.extend($.summernote.plugins,
|
|
{
|
|
/**
|
|
* @param {Object} context - context object has status of editor.
|
|
*/
|
|
'gallery': function(context)
|
|
{
|
|
var self = this;
|
|
|
|
// ui has renders to build ui elements.
|
|
// - you can create a button with `ui.button`
|
|
var ui = $.summernote.ui;
|
|
|
|
// add gallery button
|
|
context.memo('button.gallery', function()
|
|
{
|
|
// create button
|
|
var button = ui.button(
|
|
{
|
|
contents: '<i class="fa fa-image"></i>',
|
|
tooltip: 'Medien',
|
|
click: function()
|
|
{
|
|
self.fillModal();
|
|
self.$modal.modal();
|
|
}
|
|
});
|
|
|
|
// create jQuery object from button instance.
|
|
$gallery = button.render();
|
|
return $gallery;
|
|
});
|
|
|
|
// This events will be attached when editor is initialized.
|
|
this.events = {
|
|
// This will be called after modules are initialized.
|
|
'summernote.init': function(we, e)
|
|
{
|
|
self.editable = context.layoutInfo.editable; //contentEditable element
|
|
self.editor = this;
|
|
// get summernote onInit set parameters
|
|
self.image_dialog_images_url = $(this).data('image_dialog_images_url');
|
|
self.image_dialog_images_html = $(this).data('image_dialog_images_html');
|
|
self.image_dialog_title = $(this).data('image_dialog_title');
|
|
self.image_dialog_close_btn_text = $(this).data('image_dialog_close_btn_text');
|
|
self.image_dialog_ok_btn_text = $(this).data('image_dialog_ok_btn_text');
|
|
|
|
self.fillModal = function()
|
|
{
|
|
//fill modal with images whether from url or given html
|
|
if (typeof self.image_dialog_images_html !== "undefined")
|
|
{
|
|
self.setModalHtml(self.image_dialog_images_html)
|
|
self.setEvents();
|
|
}
|
|
else if (typeof self.image_dialog_images_url !== "undefined")
|
|
{
|
|
var next = self.setEvents;
|
|
self.getImagesFromUrl(next);
|
|
}
|
|
else
|
|
{
|
|
console.error("options image_dialog_images_html or image_dialog_images_url must be set");
|
|
}
|
|
|
|
};
|
|
self.setModalHtml = function(html)
|
|
{ // set variabl parts to modal html
|
|
var title = self.image_dialog_title;
|
|
var close = self.image_dialog_close_btn_text;
|
|
var ok = self.image_dialog_ok_btn_text;
|
|
|
|
if (self.image_dialog_title !== "undefined") self.$modal.find('.modal-title').html(title);
|
|
if (self.image_dialog_close_btn_text !== "undefined") self.$modal.find('#modal_iq_close').html(close);
|
|
if (self.image_dialog_ok_btn_text !== "undefined") self.$modal.find('#modal_iq_save').html(ok);
|
|
|
|
self.$modal.find('.modal-body').html(html);
|
|
LFileManager.initFileManager(true);
|
|
|
|
};
|
|
self.getImagesFromUrl = function(callback)
|
|
{
|
|
// get images html from url
|
|
$.get(self.image_dialog_images_url, function(html)
|
|
{
|
|
self.setModalHtml(html);
|
|
callback();
|
|
|
|
}).fail(function()
|
|
{
|
|
console.error("error loading from "+self.image_dialog_images_url);
|
|
})
|
|
};
|
|
self.setEvents = function()
|
|
{
|
|
// images click event to select image
|
|
/*self.$modal.find('img').click(function(event)
|
|
{
|
|
// $(this).toggleClass(self.select_class);
|
|
});*/
|
|
};
|
|
// set the focus to the last focused element in the editor
|
|
self.recoverEditorFocus = function ()
|
|
{
|
|
var last_focused_el = $(self.editor).data('last_focused_element');
|
|
if(typeof last_focused_el !== "undefined")
|
|
{
|
|
var editor = self.editable;
|
|
var range = document.createRange();
|
|
var sel = window.getSelection();
|
|
var cursor_position = last_focused_el.length;
|
|
|
|
range.setStart(last_focused_el, cursor_position);
|
|
range.collapse(true);
|
|
sel.removeAllRanges();
|
|
sel.addRange(range);
|
|
editor.focus();
|
|
}
|
|
};
|
|
self.saveLastFocusedElement = function()
|
|
{
|
|
var focused_element = window.getSelection().focusNode;
|
|
var parent = $(self.editable).get(0);
|
|
if ($.contains(parent, focused_element))
|
|
{
|
|
$(self.editor).data('last_focused_element', focused_element)
|
|
}
|
|
};
|
|
self.editorEvents = function () {
|
|
$(self.editable).on('keypress, mousemove', function()
|
|
{
|
|
self.saveLastFocusedElement();
|
|
})
|
|
};
|
|
self.editorEvents();
|
|
self.fillModal();
|
|
},
|
|
// This will be called when user releases a key on editable.
|
|
'summernote.keyup': function(we, e)
|
|
{
|
|
self.saveLastFocusedElement();
|
|
}
|
|
};
|
|
|
|
// This method will be called when editor is initialized by $('..').summernote();
|
|
// You can create elements for plugin
|
|
this.initialize = function()
|
|
{
|
|
var $modal = this.$modal = $('#modal_iq_assets').hide();
|
|
// add selected images to summernote editor
|
|
$modal.find("button#modal_iq_save").click(function(event)
|
|
{
|
|
var items = LFileManager.getSelectedItems();
|
|
|
|
$modal.modal('hide');
|
|
|
|
self.recoverEditorFocus();
|
|
|
|
items.forEach(function (item, index) {
|
|
var insert = self.insertHTML(item);
|
|
if(insert){
|
|
context.invoke('editor.pasteHTML', insert);
|
|
}
|
|
});
|
|
});
|
|
|
|
};
|
|
|
|
|
|
this.insertHTML = function(item){
|
|
var title = 'Bildtitel ...';
|
|
var description = '';
|
|
var author_name = '';
|
|
var img_title = '';
|
|
|
|
if(item.content !== null){
|
|
if(item.content.title !== undefined && item.content.title){
|
|
title = item.content.title;
|
|
img_title = item.content.title;
|
|
}
|
|
if(item.content.description !== undefined && item.content.description){
|
|
description = ' ' + item.content.description;
|
|
}
|
|
if(item.content.author_name !== undefined && item.content.author_name){
|
|
author_name = 'Bildquelle: ' + item.content.author_name;
|
|
if(img_title !== ''){
|
|
img_title = img_title + " | " + author_name;
|
|
}else{
|
|
img_title = author_name;
|
|
}
|
|
|
|
}
|
|
}
|
|
// console.log(item)
|
|
var insert = '';
|
|
|
|
if(item.is_file && item.is_image){
|
|
insert += '<div class="mediaA">'+
|
|
'<img src="'+item.url+'" alt="'+title+'" class="img-responsive" title="'+img_title+'" data-slug="'+item.slug+'" width="auto" height="auto">' +
|
|
'<div class="mediaInfo">\n' +
|
|
'<p class="infotext">' + title + '</p>\n' +
|
|
'</div>\n' +
|
|
'</div>';
|
|
return insert;
|
|
}
|
|
if(item.icon === "fab fa-youtube-square"){
|
|
|
|
|
|
insert += '<div class="mediaA" itemprop="video" itemscope itemtype="http://schema.org/VideoObject">\n' +
|
|
'<h2><span itemprop="name">'+ title +'</span></h2>\n' +
|
|
'<meta itemprop="duration" content="'+item.content.duration+'" />\n' +
|
|
'<meta itemprop="uploadDate" content="'+item.content.uploadDate+'"/>\n' +
|
|
'<meta itemprop="thumbnailURL" content="'+item.content.thumbnailURL+'" />\n' +
|
|
'<meta itemprop="embedURL" content="https://youtube.googleapis.com/v/'+item.content.id+'" />\n' +
|
|
'<div class="video-container">\n' +
|
|
'<iframe src="https://www.youtube.com/embed/'+item.content.id+'?rel=0&controls=0&showinfo=0" data-identifier="'+item.identifier+'" data-slug="'+item.slug+'" frameborder="0" allowfullscreen></iframe>\n' +
|
|
'</div>\n' +
|
|
'<div class="mediaInfo">\n' +
|
|
'<p class="infotext" itemprop="description">' + description + '</p>\n' +
|
|
'</div>\n' +
|
|
'</div>';
|
|
|
|
return insert;
|
|
}
|
|
if(item.is_file){
|
|
insert += '<a href="'+item.url+'" title="'+title+'" data-identifier="'+item.identifier+'">'+item.name+'</a>';
|
|
if(description !== ''){
|
|
insert += '<p>'+description+'</p>';
|
|
}
|
|
return insert;
|
|
}
|
|
|
|
return false;
|
|
};
|
|
|
|
// This methods will be called when editor is destroyed by $('..').summernote('destroy');
|
|
// You should remove elements on `initialize`.
|
|
this.destroy = function()
|
|
{
|
|
console.log("destroy");
|
|
// this.$panel.remove();
|
|
// this.$panel = null;
|
|
};
|
|
}
|
|
});
|
|
}));
|