312 lines
12 KiB
JavaScript
312 lines
12 KiB
JavaScript
/**
|
|
* TinyMceController class
|
|
*
|
|
* @author Aivars Žukovskis <info@brsystems.lv>
|
|
* @category TinyMceController
|
|
*/
|
|
var TinyMceController = (function() {
|
|
|
|
function TinyMceController(jqObj, vAdditionalCfg) {
|
|
var _this = this;
|
|
|
|
$.extend(_this.vAdditionalCfg, defaultVal(vAdditionalCfg, {}));
|
|
_this.jqModuleObj = $.isDefined(jqObj) ? jqObj : $(".form-data");
|
|
|
|
_this.oBlank = CBase.jsModule.oTable.oBlank;
|
|
_this.bindEvents();
|
|
}
|
|
|
|
TinyMceController.prototype.jqModuleObj = {};
|
|
TinyMceController.prototype.oBlank = {};
|
|
TinyMceController.prototype.vAdditionalCfg = {};
|
|
|
|
/**
|
|
* Function to bind tinyMceController base events
|
|
*
|
|
* @author Aivars Žukovskis <info@brsystems.lv>
|
|
* @category TinyMceController
|
|
*/
|
|
TinyMceController.prototype.bindEvents = function(){
|
|
var _this = this;
|
|
|
|
// Load TinyMceController
|
|
if($.fn.tinymce){
|
|
_this.addTinyMceControl();
|
|
|
|
|
|
// ---------------------------------------------------------------------------------------------------------
|
|
// BIND ALL IMAGE DATA HANDLERS
|
|
// ---------------------------------------------------------------------------------------------------------
|
|
|
|
// Sortable;
|
|
_this.jqModuleObj.find(".prod-img > ul").sortable({distance: 10, opacity: 0.6, cancel : ".click-to-addimg", tolerance: "pointer"});
|
|
|
|
// Bind insert youtube link
|
|
_this.jqModuleObj.find(".prod-img li .youtube")
|
|
.css({opacity : 0})
|
|
.click(function(){ _this.addFileToTinyMceTextField($(this).closest("li"), "insertYoutubeImg"); });
|
|
|
|
// Bind insert simple image;
|
|
_this.jqModuleObj.find(".prod-img li .pic")
|
|
.css({opacity : 0})
|
|
.click(function(){ _this.addFileToTinyMceTextField($(this).closest("li"), "insertFile"); });
|
|
|
|
// Bind insert download link;
|
|
_this.jqModuleObj.find(".prod-img li .download")
|
|
.css({opacity : 0})
|
|
.click(function(){ _this.insertDownloadLinkInTinyMceTextField($(this).closest("li")); });
|
|
|
|
// Bind insert inline fancybox element
|
|
_this.jqModuleObj.find(".prod-img li .inline")
|
|
.css({opacity : 0})
|
|
.click(function(){ _this.insertInlineElementInTinyMceTextField($(this).closest("li")); });
|
|
|
|
// Bind hover functions;
|
|
_this.jqModuleObj.find(".prod-img li").bind({
|
|
mouseenter : function(){ $(this).find(".delete, .youtube, .pic, .download, .link").stop(true, true).fadeTo(200, 0.8); },
|
|
mouseleave : function(){ $(this).find(".delete, .youtube, .pic, .download, .link").stop(true, true).fadeTo(200, 0); }
|
|
});
|
|
|
|
|
|
}else{
|
|
pr("TinyMceController js not loaded!");
|
|
}
|
|
|
|
};
|
|
|
|
/**
|
|
* Base Function to add tinyMceController to text field
|
|
*
|
|
* @author Aivars Žukovskis <info@brsystems.lv>
|
|
* @category TinyMceController
|
|
*/
|
|
TinyMceController.prototype.addTinyMceControl = function(){
|
|
var _this = this;
|
|
var iInitiated = 0, iTextAreaCount = $('textarea.tinymce').length;
|
|
var vAdditionalCfg = $.extend(true, {}, _this.vAdditionalCfg);
|
|
|
|
CBase.oForm.disableShow = true;
|
|
CBase.ajaxLoader.disabledFadeOut = true;
|
|
|
|
//Init tinyMce v5.0.0
|
|
tinymce.remove();
|
|
var vBaseCfg = {
|
|
selector: 'textarea.tinymce', // Select all textareas with class tinymce
|
|
height: 450, // set the heigh of element
|
|
|
|
// Premium plugins powerpaste
|
|
plugins: [
|
|
'advlist anchor autolink',
|
|
'code codesample charmap',
|
|
'directionality',
|
|
'fullscreen',
|
|
'help hr',
|
|
'image insertdatetime imagetools',
|
|
'lists link',
|
|
'media',
|
|
'nonbreaking',
|
|
'paste pagebreak print preview',
|
|
'searchreplace',
|
|
'table template textpattern toc',
|
|
'visualblocks visualchars',
|
|
'wordcount'
|
|
],
|
|
toolbar: 'undo redo | formatselect | fontsizeselect | bold italic strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | removeformat | code',
|
|
|
|
menubar: false,
|
|
statusbar: false,
|
|
resize: true,
|
|
|
|
//skin: "oxide",
|
|
skin: "oxide-dark",
|
|
content_css : '/css/cms-tinymce.css?V=4',
|
|
|
|
setup: function (editor) {
|
|
editor.on('init', function() {
|
|
iInitiated++;
|
|
|
|
// The Editor has initialized - upon last loaded show form
|
|
if(iInitiated == iTextAreaCount) {
|
|
CBase.ajaxLoader.hideLoader(true);
|
|
CBase.oForm.disableShow = false;
|
|
CBase.oForm.show();
|
|
}
|
|
});
|
|
editor.on('blur', function () {
|
|
tinyMCE.activeEditor.save();
|
|
});
|
|
editor.on('focus', function () {
|
|
CBase.oForm.jqBlank.find("#"+editor.id).parent().find(".tox-tinymce").addClass("tox-tinymce-focus");
|
|
});
|
|
editor.on('blur', function () {
|
|
CBase.oForm.jqBlank.find("#"+editor.id).parent().find(".tox-tinymce").removeClass("tox-tinymce-focus");
|
|
});
|
|
|
|
// Bind save shortcuts
|
|
// "meta" maps to Command on Mac and Ctrl on PC
|
|
editor.shortcuts.add('meta+s', "Save form data", function() {
|
|
tinyMCE.activeEditor.save();
|
|
CBase.oTable.oBlank.saveBlankView();
|
|
});
|
|
|
|
if($("textarea#" + editor.id).is(":disabled"))
|
|
editor.setMode('readonly');
|
|
|
|
},
|
|
valid_children: "+a[div|span|img],+div[figure],+span[*]"
|
|
};
|
|
|
|
if($.isFunction(vAdditionalCfg.setup)){
|
|
var fCustomSetup = vAdditionalCfg.setup;
|
|
var fBaseSetup = vBaseCfg.setup;
|
|
vBaseCfg.setup = function(editor){
|
|
fBaseSetup(editor);
|
|
fCustomSetup(editor);
|
|
};
|
|
delete vAdditionalCfg.setup;
|
|
}
|
|
|
|
tinymce.init($.extend(true, {}, vBaseCfg, vAdditionalCfg));
|
|
};
|
|
|
|
/**
|
|
* Function to insert uploaded images in tinyMceController text field
|
|
*
|
|
* @author Aivars Žukovskis <info@brsystems.lv>
|
|
* @category TinyMceController
|
|
*/
|
|
TinyMceController.prototype.addFileToTinyMceTextField = function(jqCaller, sCase){
|
|
var _this = this;
|
|
var $link = jqCaller.find("input#img").val();
|
|
|
|
var re = /(?:\.([^.]+))?$/;
|
|
var ext = re.exec($link)[1];
|
|
|
|
switch(sCase) {
|
|
case "insertFile":
|
|
if(CBase.dt.prevExt.indexOf(ext) != -1)
|
|
tinymce.activeEditor.execCommand('mceInsertContent', false, '<img src="'+$link+'"> ' );
|
|
break;
|
|
case "insertYoutubeImg":
|
|
|
|
if(CBase.dt.prevExt.indexOf(ext) != -1) {
|
|
let videoId = _this.sanitizeVideoId(window.prompt('Enter YouTube video ID', ''));
|
|
if (!videoId) break;
|
|
|
|
let div =
|
|
'<div class="product-detail-video section-pt">' +
|
|
'<div class="container">' +
|
|
'<div class="product-video" data-animate="animate__fadeIn">' +
|
|
' <div class="video position-relative">' +
|
|
'<div class="video-loader position-absolute w-100 h-100 z-1">' +
|
|
'<span class="h-100 d-flex justify-content-center">' +
|
|
'<svg aria-hidden="true" focusable="false" role="presentation" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg"><circle fill="none" stroke="var(--heading-font-color)" stroke-width="1" cx="33" cy="33" r="30"></circle></svg>' +
|
|
'</span>' +
|
|
'</div>' +
|
|
'<div class="video-img banner-img position-relative br-hidden">' +
|
|
'<button type="button" class="video-btn position-absolute top-50 start-50 translate-middle z-1" data-video-id="' + videoId + '" aria-label="Video button"><span class="banner-video-icon heading-color icon-16 width-80 height-80 d-flex align-items-center justify-content-center body-bg rounded-circle"><i class="ri-play-large-fill d-block lh-1"></i></span></button>' +
|
|
'<img src="' + $link + '" class="w-100 img-fluid" alt="video">' +
|
|
'</div>' +
|
|
'<div class="video-frame position-absolute top-0 start-0 w-100 h-100 br-hidden"></div>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>';
|
|
tinymce.activeEditor.execCommand('mceInsertContent', false, div);
|
|
}
|
|
break;
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Function to insert download link for tinyMceController text field
|
|
*
|
|
* @author Aivars Žukovskis <info@brsystems.lv>
|
|
* @category TinyMceController
|
|
*/
|
|
TinyMceController.prototype.insertDownloadLinkInTinyMceTextField = function(jqObj){
|
|
|
|
CBase.jsModule.oTable.sendAjaxActionAdvanced({
|
|
action : "getFileLink",
|
|
link : jqObj.find("input#img").val(),
|
|
file_id : jqObj.find("input#img_id").val()
|
|
}, function(d){
|
|
if(d && d.jsonok){
|
|
tinymce.activeEditor.execCommand('mceInsertContent', false, '<a class="download_file_link" href="'+ d.link +'" target="_blank"> File title goes here...</a> ' );
|
|
jqObj.find("input#img_id").val(d.id);
|
|
}
|
|
});
|
|
|
|
};
|
|
|
|
/**
|
|
* Function to insert inline a element
|
|
*
|
|
* @author Aivars Žukovskis <info@brsystems.lv>
|
|
* @category TinyMceController
|
|
*/
|
|
TinyMceController.prototype.insertInlineElementInTinyMceTextField = function(jqCaller){
|
|
|
|
var $link = jqCaller.find("input#img").val();
|
|
var re = /(?:\.([^.]+))?$/;
|
|
var ext = re.exec($link)[1];
|
|
if(CBase.dt.prevExt.indexOf(ext) != -1)
|
|
tinymce.activeEditor.execCommand('mceInsertContent', false, '<a class="fcbox_inline" data-fancybox-type="iframe" href="'+ $link +'">Click me!</a>');
|
|
|
|
|
|
};
|
|
|
|
TinyMceController.prototype.sanitizeVideoId = function (value) {
|
|
return String(value || '').replace(/[^a-zA-Z0-9_-]/g, '');
|
|
};
|
|
|
|
TinyMceController.prototype.insertTopLevelBlock = function (html) {
|
|
var editor = this.editor || tinymce.activeEditor;
|
|
if (!editor) return;
|
|
|
|
var body = editor.getBody();
|
|
var doc = editor.getDoc();
|
|
var buffer = doc.createElement('div');
|
|
var anchor = editor.selection.getNode(); // Selected node
|
|
var lastInsertedNode = null;
|
|
|
|
buffer.innerHTML = html;
|
|
|
|
while (anchor && anchor.parentNode !== body) {
|
|
anchor = anchor.parentNode;
|
|
}
|
|
|
|
editor.undoManager.transact(function () {
|
|
if (anchor && anchor.parentNode === body) {
|
|
var nextSibling = anchor.nextSibling;
|
|
while (buffer.firstChild) {
|
|
lastInsertedNode = buffer.firstChild;
|
|
body.insertBefore(lastInsertedNode, nextSibling);
|
|
}
|
|
} else {
|
|
while (buffer.firstChild) {
|
|
lastInsertedNode = buffer.firstChild;
|
|
body.appendChild(lastInsertedNode);
|
|
}
|
|
}
|
|
});
|
|
|
|
editor.focus();
|
|
if (lastInsertedNode) {
|
|
var range = editor.dom.createRng();
|
|
range.setStartAfter(lastInsertedNode);
|
|
range.setEndAfter(lastInsertedNode);
|
|
editor.selection.setRng(range);
|
|
} else {
|
|
editor.selection.select(body, true);
|
|
editor.selection.collapse(false);
|
|
}
|
|
editor.nodeChanged();
|
|
};
|
|
|
|
TinyMceController.prototype.buildUid = function (prefix) {
|
|
return prefix + '-' + Date.now().toString(36) + Math.random().toString(36).slice(2, 7);
|
|
};
|
|
|
|
return TinyMceController;
|
|
})(); |