mirror/php-e107
1
0
Fork 0
mirror of https://github.com/e107inc/e107.git synced 2025-08-04 21:57:51 +02:00
Code Issues Releases Wiki Activity

Media Manager JS cleanup.

Browse Source
This commit is contained in:
lonalore
2017-02-02 11:13:19 +01:00
parent 2a6c01f58c
commit 08a4804e8d
2 changed files with 563 additions and 587 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
e107_web/js/core/all.jquery.js
View File

@@ -642,7 +642,7 @@ var e107 = e107 || {'settings': {}, 'behaviors': {}};
* Example usage:
* @code
* $(window).resize(function () {
* waitForFinalEvent(function(){
* e107.callbacks.waitForFinalEvent(function(){
* alert('Resize...');
* //...
* }, 500, "some unique string");
@@ -1347,61 +1347,6 @@ $(document).ready(function()
});
/**
* TODO:
* This function is only used by mediaNav() in mediaManager.js. So need to rewrite mediaManager.js to use
* e107.behaviors, and e107.callbacks.eNav() could be used instead of this function.
*
* dynamic next/prev
* @param e object (eg. from selector)
* @param navid - class with data-src that needs 'from=' value updated. (often 2 of them eg. next/prev)
*/
function eNav(e,navid)
{
var src = $(e).attr("data-src");
var inc = parseInt($(e).attr("data-nav-inc"));
var dir = $(e).attr("data-nav-dir");
var tot = parseInt($(e).attr("data-nav-total"));
var val = src.match(/from=(\d+)/);
var amt = parseInt(val[1]);
var oldVal = 'from='+ amt;
var sub = amt - inc;
var add = amt + inc;
$(e).show();
if(add > tot)
{
add = amt;
// $(e).hide();
}
if(sub < 0)
{
sub = 0
}
if(dir == 'down')
{
var newVal = 'from='+ sub;
}
else
{
var newVal = 'from='+ add;
}
src = src.replace(oldVal, newVal);
$(navid).attr("data-src",src);
}
// Legacy Stuff to be converted.
// BC Expandit() function

579
e107_web/js/core/mediaManager.js
View File

@@ -1,24 +1,95 @@
$(document).ready(function()
var e107 = e107 || {'settings': {}, 'behaviors': {}};
(function ($)
{
'use strict';
e107.mediaManager = e107.mediaManager || {};
/**
* Behavior to initialize Media Manager.
*
* @type {{attach: e107.behaviors.initMediaManager.attach}}
*/
e107.behaviors.initMediaManager = {
attach: function (context, settings)
{
$(context).find('body').once('init-media-manager').each(function ()
{
e107.mediaManager.setEventListeners();
e107.mediaManager.initPlUpload();
});
}
};
$(".e-media-attribute").keyup(function () {
eMediaAttribute();
/**
* Add event listeners to the Media Manager elements.
*/
e107.mediaManager.setEventListeners = function ()
{
$(".e-media-attribute").keyup(function ()
{
e107.mediaManager.eMediaAttribute(this);
});
$("#float").change(function () {
eMediaAttribute();
$("#float").change(function ()
{
e107.mediaManager.eMediaAttribute(this);
});
function eMediaAttribute(e, bbcode)
$(".e-media-select-file-none").click(function ()
{
e107.mediaManager.eMediaSelectFileNone(this);
});
$(".e-media-select").click(function ()
{
e107.mediaManager.eMediaSelect(this);
});
// Must be defined after e-media-select.
$(".e-dialog-save").click(function ()
{
e107.mediaManager.eDialogSave(this);
});
// Must be defined after e-media-select.
$(".e-media-nav").click(function ()
{
e107.mediaManager.mediaNav(this, '.e-media-nav');
});
$("#media-search").keyup(function ()
{
var that = this;
e107.callbacks.waitForFinalEvent(function ()
{
e107.mediaManager.mediaNav(that, null);
}, 300, "mediaSearch");
});
// Ajax keyup search. Used by media-browser.
$(".e-ajax-keyup").keyup(function ()
{
var that = this;
e107.callbacks.waitForFinalEvent(function ()
{
e107.mediaManager.eAjaxKeyUp(that);
}, 300, "eAjaxKeyUp");
});
};
/**
* @param {object} that
* DOM element that was clicked, changed... etc.
* @param {string} bbcode
* bbCode tag-name.
*/
e107.mediaManager.eMediaAttribute = function (that, bbcode)
{
var $this = $(that);
var style = '';
var bb = '';
@@ -36,8 +107,10 @@ $(document).ready(function()
var _float = $('#float').val();
var alt = $('#alt').val();
var target = $(e).attr('data-target');
var target = $this.attr('data-target');
var $htmlHolder = $('#html_holder');
var $bbcodeHolder = $('#bbcode_holder');
if(margin_right != '' && margin_right !== undefined)
{
@@ -75,9 +148,17 @@ $(document).ready(function()
}
// Set the Html / Wysiwyg Value.
var html = '<img class="img-rounded" style=\"' + style + '\" src=\"'+ src +'\" alt=\"\" width=\"' + width + '\" height=\"' + height + '\" />';
$('#html_holder').val(html);
var $img = $('<img/>');
$img.attr('style', style);
$img.attr('src', src);
$img.attr('alt', alt);
$img.attr('width', width);
$img.attr('height', height);
if($htmlHolder.length > 0)
{
$htmlHolder.val($img.prop('outerHTML'));
}
// Only Do width/height styling on bbcodes --
if(width != '' && width !== undefined)
@@ -129,102 +210,151 @@ $(document).ready(function()
}
else
{
$('#bbcode_holder').val(bb); // Set the BBcode Value.
if($bbcodeHolder.length > 0)
{
$bbcodeHolder.val(bb); // Set the BBcode Value.
}
}
}
}
};
/**
* @param {object} that
* Element that was clicked.
*/
e107.mediaManager.eMediaSelectFileNone = function (that)
{
var $this = $(that);
var target = $this.attr('data-target');
var label = $this.attr('data-target-label');
var $parentInput = parent.$('input#' + target);
var $parentInputID = parent.$('input#' + target + '-id');
var $parentInputPath = parent.$('input#' + target + '-path');
var $parentInputName = parent.$('input#' + target + '-name');
var $parentTarget = parent.$('#' + target + '_prev');
// var html = '<img style=\"' + style + '\" src=\"'+ src +'\" />';
if($parentInput.length > 0)
{
$parentInput.val('');
}
if($parentInputID.length > 0)
{
$parentInputID.val('');
}
$(document).on("click", ".e-media-select-file-none", function(){
if($parentInputPath.length > 0)
{
$parentInputPath.val('');
}
var target = $(this).attr('data-target');
var label = $(this).attr('data-target-label');
if($parentInputName.length > 0)
{
$parentInputName.val('');
}
parent.$('input#'+target).val(null);
parent.$('input#'+target+'-id').val(null);
parent.$('input#'+target+'-path').val(null);
parent.$('input#'+target+'-name').val(null);
parent.$('#'+target+'_prev').text(label);
if($parentTarget.length > 0)
{
$parentTarget.text(label);
}
};
});
/**
* @param {object} that
* Element that was clicked.
*
* @returns {boolean}
*/
e107.mediaManager.eMediaSelect = function (that)
{
var $this = $(that);
// ID of the Media Manager Item.
var id = $this.attr('data-id');
var target = $this.attr('data-target');
// Path of the Media Manager Item.
var path = $this.attr('data-path');
var preview = $this.attr('data-preview');
var src = $this.attr('data-src');
// TinyMce/Textarea insert mode-
var bbcode = $this.attr('data-bbcode');
// Title of the Media Manager Item.
var name = $this.attr('data-name');
var width = $this.attr('data-width');
// Disable for now - will be updated by bb parser.
// var height = $this.attr('data-height');
var height = '';
var type = $this.attr('data-type');
var alt = $this.attr('data-alt');
var bbpath = '';
// $(".e-media-select").click(function () {
$(document).on("click", ".e-media-select", function(){
var $bbcodeHolder = $('#bbcode_holder');
var $htmlHolder = $('#html_holder');
var $src = $('#src');
var $preview = $('#preview');
var $path = $('#path');
// console.log(this);
var id = $(this).attr('data-id'); // id of the mm item
var target = $(this).attr('data-target');
var path = $(this).attr('data-path'); // path of the mm item
var preview = $(this).attr('data-preview');
var src = $(this).attr('data-src');
var bbcode = $(this).attr('data-bbcode'); // TinyMce/Textarea insert mode
var name = $(this).attr('data-name'); // title of the mm item
var width = $(this).attr('data-width');
var height = ''; // disable for now - will be updated by bb parser. // $(this).attr('data-height');
var type = $(this).attr('data-type');
var alt = $(this).attr('data-alt');
// return;
// alert(width);
$(this).addClass("media-select-active");
$(this).closest("img").addClass("active");
$this.addClass("media-select-active");
$this.closest("img").addClass("active");
if(bbcode == "file") // not needed for Tinymce
{
bbpath = '[file=' + id + ']' + name + '[/file]';
$('#bbcode_holder').val(bbpath);
// alert(bbpath); //FIXME bbcode - Insert into correct caret in text-area.
return;
// $('input#' + target, window.top.document).attr('value',path); // set new value
// $('textarea#' + target, window.top.document).attr('value',bbpath);
}
// if(bbcode == 'wysiwyg')
if($bbcodeHolder.length > 0)
{
//alert('hello');
$bbcodeHolder.val(bbpath);
}
return;
}
if(bbcode == "video" || bbcode == 'glyph')
{
bbpath = '[' + bbcode + ']' + path + '[/' + bbcode + ']';
$('#bbcode_holder').val(bbpath);
if($bbcodeHolder.length > 0)
{
$bbcodeHolder.val(bbpath);
}
}
if($src.length > 0)
{
$src.attr('value', src); // working old
$src.attr('src', src); // working old
}
if($preview.length > 0)
{
$preview.attr('src', preview); // working old
}
$('#src').attr('value',src); // working old
$('#preview').attr('src',preview); // working old
$('#path').attr('value',path); // working old
$('#src').attr('src',src); // working old
if($path.length > 0)
{
$path.attr('value', path); // working old
}
$('#width').val(width);
$('#height').val(height);
$('#alt').val(alt);
$('img#' + target + "_prev", window.top.document).attr('src', preview); // set new value
if(type == 'glyph')
{
preview = "<span class='" + src + "'>&nbsp;</span>";
$('#html_holder').val(preview) + '&nbsp;';
$('#path').attr('value',path);
if($htmlHolder.length > 0)
{
$htmlHolder.val(preview);
}
if($path.length > 0)
{
$path.attr('value', path);
}
}
else if(type == 'file')
{
@@ -232,10 +362,15 @@ $(document).ready(function()
}
else // image and video
{
eMediaAttribute(this,bbcode);
preview = $('#html_holder').val();
}
e107.mediaManager.eMediaAttribute($this, bbcode);
preview = '';
if($htmlHolder.length > 0)
{
preview = $htmlHolder.val();
}
}
$('div#' + target + "_prev", window.top.document).html(preview); // set new value
$('span#' + target + "_prev", window.top.document).html(preview); // set new value
@@ -248,13 +383,11 @@ $(document).ready(function()
$('input#' + target, window.top.document).attr('value', path); // set new value
}
// array mode :
// Array mode:
var pathTarget = target + '-path';
var nameTarget = target + '-name';
var idTarget = target + '-id';
if($('input#' + pathTarget) !== undefined)
{
$('input#' + pathTarget, window.top.document).attr('value', path); // set new value
@@ -269,156 +402,51 @@ $(document).ready(function()
{
$('input#' + idTarget, window.top.document).attr('value', id); // set new value
}
}
// $(this).parent('#src').attr('value',preview); // set new value
// $(this).parent('#preview').attr('src',preview); // set new value
return false;
};
});
// Must be defined after e-media-select
$(document).on("click", ".e-dialog-save", function(){// FIXME TODO missing caret , text selection overwrite etc.
/**
* @param {object} that
* Element that was clicked.
*
* @returns {boolean}
*/
e107.mediaManager.eDialogSave = function (that)
{
var $this = $(that);
// FIXME TODO missing caret , text selection overwrite etc.
var newval = $('#bbcode_holder').val();
var target = $(this).attr('data-target');
var bbcode = $(this).attr('data-bbcode'); // TinyMce/Textarea insert mode
var close = $(this).attr('data-close');
var target = $this.attr('data-target');
var bbcode = $this.attr('data-bbcode'); // TinyMce/Textarea insert mode
var close = $this.attr('data-close');
if(!target || !bbcode){ return true; }
if(!target || !bbcode)
{
return true;
}
$('#' + target, window.top.document).atCaret('insert', newval); // http://code.google.com/p/jquery-at-caret/wiki/GettingStarted
// http://code.google.com/p/jquery-at-caret/wiki/GettingStarted
$('#' + target, window.top.document).atCaret('insert', newval);
if(close == 'true')
{
parent.$('.modal').modal('hide');
}
//var cursorIndex = $('#' + target, window.top.document).attr("selectionStart");
//var lStr = $('#' + target, window.top.document).attr('value').substr(0,cursorIndex) + " " + newval + " ";
//var rStr = $('#' + target, window.top.document).attr('value').substr(cursorIndex);
//$('#' + target, window.top.document).attr('value',lStr+rStr);
//$('#' + target, window.top.document).attr("selectionStart",lStr.length);
//('#' + target, window.top.document).insertAtCaret(newVal);
// $('#' + target, window.parent.document).append(newval); //FIXME caret!!
// var t = $('#' + target, window.parent.document).text();
//$('#' + target, window.top.document).attr('value',newval); // set new value
// inserttext(newval,target);
// alert(newval);
});
$(".e-media-nav").click(function(){
return mediaNav(this,'.e-media-nav');
/*
var id = $(this).attr("href");
var src = $(this).attr("data-src");
var target = $(this).attr("data-target"); // support for input buttons etc.
var loading = $(this).attr('data-loading'); // image to show loading.
var search = $('#media-search').val(); // image to show loading.
if(target != null)
{
id = '#' + target;
}
if(loading != null)
{
$(id).html("<img src='"+loading+"' alt='' />");
}
if(src === null) // old way - href='myscript.php#id-to-target
{
var tmp = src.split('#');
id = tmp[1];
src = tmp[0];
}
if(search !== null)
{
src = src + '&search='+search;
}
// var effect = $(this).attr("data-effect");
// alert(src);
$(id).load(src,function() {
// alert(src);
// $(this).hide();
// $(this).SlideUp();
});
*/
});
$("#media-search").keyup(function(){
mediaNav(this,null);
});
// Ajax keyup search. Used by media-browser.
var delay = (function(){
var timer = 0;
return function(callback, ms){
clearTimeout (timer);
timer = setTimeout(callback, ms);
};
})();
$(".e-ajax-keyup").keyup(function(){
var id = $(this).attr("data-target");
var src = $(this).attr("data-src");
var search = $(this).val();
if(search !== null)
{
search = search.replace('https://','url:');
search = search.replace('http://','url:');
src = src + '&search=' + encodeURIComponent(search);
}
// alert(src);
$('#'+id).fadeOut('fast');
delay(function(){
// if((search.length) >= 3) {
$('#'+id).load(src,function() {
// alert(src);
$('#'+id).fadeIn('fast'); // .slideLeft();
});
// }
}, 300 );
});
function mediaNav(e,navid)
/**
* @param {object} e
* Element that was clicked.
* @param {string} navid
* Class with 'data-src' that needs 'from=' value updated. (often 2 of them eg. next/prev)
*
* @returns {boolean}
*/
e107.mediaManager.mediaNav = function (e, navid)
{
var id = $(e).attr("href");
var target = $(e).attr("data-target"); // support for input buttons etc.
var loading = $(e).attr('data-loading'); // image to show loading.
var search = $('#media-search').val(); // image to show loading.
@@ -426,23 +454,22 @@ $(document).ready(function()
var dir = $(e).attr('data-nav-dir');
var curTotal = $('#admin-ui-media-select-count-hidden').attr('data-media-select-current-limit');
var total = $(e).attr('data-nav-total');
var outDir;
var inDir;
var newVal;
if(nav !== null && navid !== null)
{
eNav(e,navid);
e107.callbacks.eNav(e, navid);
}
if(dir == 'down' && curTotal == 20)
{
// $('#admin-ui-media-nav-down').prop("disabled",false);
return false;
}
if(dir == 'up' && curTotal == total)
{
// $('#admin-ui-media-nav-up').prop("disabled",false);
return false;
}
@@ -473,11 +500,9 @@ $(document).ready(function()
{
outDir = 'right';
inDir = 'left';
}
else
{
outDir = 'left';
inDir = 'right';
}
@@ -485,60 +510,72 @@ $(document).ready(function()
$('#e-modal-loading', window.parent.document).show();
$('iframe', window.parent.document).attr('scrolling', 'no'); // hide the scrollbar.
$(id).hide('slide', { direction: outDir }, 1500, function(){ });
$(id).hide('slide', {direction: outDir}, 1500, function ()
{
});
$.get(src, function( data ) {
// alert('done');
$.get(src, function (data)
{
$(id).html(data);
newVal = $('#admin-ui-media-select-count-hidden').text();
$('#admin-ui-media-select-count').text(newVal).fadeIn();
$(id).show('slide', { direction: inDir },500,function(){
$(id).show('slide', {direction: inDir}, 500, function ()
{
$('#e-modal-loading', window.parent.document).hide();
});
});
$('iframe', window.parent.document).attr('scrolling', 'auto');
return false;
};
/*
//TODO Animate.
$(id).load(src,function() {
// alert(src);
// $(id).fadeIn('fast');
$(id).show('slow');
// $(this).show('slow'); // ;
});
/**
* @param {object} that
* Input element.
*/
e107.mediaManager.eAjaxKeyUp = function (that)
{
var $this = $(that);
var id = $this.attr("data-target");
var src = $this.attr("data-src");
var search = $this.val();
if(search !== null)
{
search = search.replace('https://', 'url:');
search = search.replace('http://', 'url:');
src = src + '&search=' + encodeURIComponent(search);
}
var $target = $('#' + id);
// ----------------- Upload --------------------------------------
$target.fadeOut('fast');
var upath = $("#uploader").attr("rel"),
extImg = $("#uploader").attr("extimg"),
extArchive = $("#uploader").attr("extarch"),
extDoc = $("#uploader").attr("extdoc");
$target.load(src, function ()
{
$target.fadeIn('fast'); // .slideLeft();
});
};
$("#uploader").pluploadQueue({
/**
* Initializes 'plupload' plugin.
*/
e107.mediaManager.initPlUpload = function ()
{
var $uploader = $("#uploader");
var upath = $uploader.attr("rel");
var extImg = $uploader.attr("extimg");
var extArchive = $uploader.attr("extarch");
var extDoc = $uploader.attr("extdoc");
$uploader.pluploadQueue({
// General settings
runtimes: "html5,html4",
url: upath,
max_file_size : $("#uploader").attr("data-max-size"),
max_file_size: $uploader.attr("data-max-size"),
chunk_size: "1mb",
unique_names: false,
@@ -554,46 +591,40 @@ $(document).ready(function()
{title: "Other files", extensions: 'torrent,txt'}
],
preinit: {
Init: function(up, info) {
Init: function (up, info)
{
//log('[Init]', 'Info:', info, 'Features:', up.features);
}
},
init: {
FilesAdded: function(up, files) {
FilesAdded: function (up, files)
{
},
FileUploaded: function(up, file, info) { // Called when a file has finished uploading
//log('[FileUploaded] File:', file, "Info:", info);
FileUploaded: function (up, file, info)
{
// Called when a file has finished uploading
},
UploadProgress: function(up, file) { // Called while a file is being uploaded
// console.log(up.total);
// console.log('[UploadProgress]', 'File:', file, "Total:", up.total);
UploadProgress: function (up, file)
{
// Called while a file is being uploaded
},
UploadComplete: function(up, files){
UploadComplete: function (up, files)
{
document.location.reload(); // refresh the page.
},
ChunkUploaded: function(up, file, info) { // Called when a file chunk has finished uploading
//log('[ChunkUploaded] File:', file, "Info:", info);
// console.log(info);
ChunkUploaded: function (up, file, info)
{
// Called when a file chunk has finished uploading
},
Error: function(up, args) { // Called when a error has occured
Error: function (up, args)
{
// Called when a error has occured
alert('There was an error');
// console.log(args);
}
}
});
};
})(jQuery);
// -----------------------------------------------------------------
});