- \n
- \n
- \n \n\n \n
\n \n
\n
| {{ T.imageHeader }} | \n\n {{ T.nameHeader }}\n | \n \n {{ T.lastModifyHeader }} \n | \n \n \n {{ T.sizeHeader }}\n | \n \n \n {{ T.typeHeader }}\n | \n
|---|---|---|---|---|
| \n \n \n | \n \n \n {{ media.name }} \n \n \n | \n \n {{ printDateTime(media.lastModify) }} \n | \n \n {{ isNaN(media.size)? 0 : Math.round(media.size / 1024) }} KB \n | \n \n {{ media.mime }} \n | \n
\n \n \n
\n ",
- props: {
- sourceItems: Array
- },
- data: function data() {
- return {
- pageSize: 10,
- pageSizeOptions: [10, 30, 50, 100],
- current: 0,
- T: {}
- };
- },
- created: function created() {
- var self = this;
-
- // retrieving localized strings from view
- self.T.pagerFirstButton = $('#t-pager-first-button').val();
- self.T.pagerPreviousButton = $('#t-pager-previous-button').val();
- self.T.pagerNextButton = $('#t-pager-next-button').val();
- self.T.pagerLastButton = $('#t-pager-last-button').val();
- self.T.pagerPageSizeLabel = $('#t-pager-page-size-label').val();
- self.T.pagerPageLabel = $('#t-pager-page-label').val();
- self.T.pagerTotalLabel = $('#t-pager-total-label').val();
- },
- methods: {
- next: function next() {
- this.current = this.current + 1;
- },
- previous: function previous() {
- this.current = this.current - 1;
+ _handleFileTreeEntry: function _handleFileTreeEntry(entry, path) {
+ var that = this,
+ dfd = $.Deferred(),
+ entries = [],
+ dirReader,
+ errorHandler = function errorHandler(e) {
+ if (e && !e.entry) {
+ e.entry = entry;
+ }
+ // Since $.when returns immediately if one
+ // Deferred is rejected, we use resolve instead.
+ // This allows valid files and invalid items
+ // to be returned together in one set:
+ dfd.resolve([e]);
+ },
+ successHandler = function successHandler(entries) {
+ that._handleFileTreeEntries(entries, path + entry.name + '/').done(function (files) {
+ dfd.resolve(files);
+ }).fail(errorHandler);
+ },
+ readEntries = function readEntries() {
+ dirReader.readEntries(function (results) {
+ if (!results.length) {
+ successHandler(entries);
+ } else {
+ entries = entries.concat(results);
+ readEntries();
+ }
+ }, errorHandler);
+ };
+ // eslint-disable-next-line no-param-reassign
+ path = path || '';
+ if (entry.isFile) {
+ if (entry._file) {
+ // Workaround for Chrome bug #149735
+ entry._file.relativePath = path;
+ dfd.resolve(entry._file);
+ } else {
+ entry.file(function (file) {
+ file.relativePath = path;
+ dfd.resolve(file);
+ }, errorHandler);
+ }
+ } else if (entry.isDirectory) {
+ dirReader = entry.createReader();
+ readEntries();
+ } else {
+ // Return an empty list for file system items
+ // other than files or directories:
+ dfd.resolve([]);
+ }
+ return dfd.promise();
},
- goFirst: function goFirst() {
- this.current = 0;
+ _handleFileTreeEntries: function _handleFileTreeEntries(entries, path) {
+ var that = this;
+ return $.when.apply($, $.map(entries, function (entry) {
+ return that._handleFileTreeEntry(entry, path);
+ }))[this._promisePipe](function () {
+ return Array.prototype.concat.apply([], arguments);
+ });
},
- goLast: function goLast() {
- this.current = this.totalPages - 1;
+ _getDroppedFiles: function _getDroppedFiles(dataTransfer) {
+ // eslint-disable-next-line no-param-reassign
+ dataTransfer = dataTransfer || {};
+ var items = dataTransfer.items;
+ if (items && items.length && (items[0].webkitGetAsEntry || items[0].getAsEntry)) {
+ return this._handleFileTreeEntries($.map(items, function (item) {
+ var entry;
+ if (item.webkitGetAsEntry) {
+ entry = item.webkitGetAsEntry();
+ if (entry) {
+ // Workaround for Chrome bug #149735:
+ entry._file = item.getAsFile();
+ }
+ return entry;
+ }
+ return item.getAsEntry();
+ }));
+ }
+ return $.Deferred().resolve($.makeArray(dataTransfer.files)).promise();
},
- goTo: function goTo(targetPage) {
- this.current = targetPage;
- }
- },
- computed: {
- total: function total() {
- return this.sourceItems ? this.sourceItems.length : 0;
+ _getSingleFileInputFiles: function _getSingleFileInputFiles(fileInput) {
+ // eslint-disable-next-line no-param-reassign
+ fileInput = $(fileInput);
+ var entries = fileInput.prop('entries'),
+ files,
+ value;
+ if (entries && entries.length) {
+ return this._handleFileTreeEntries(entries);
+ }
+ files = $.makeArray(fileInput.prop('files'));
+ if (!files.length) {
+ value = fileInput.prop('value');
+ if (!value) {
+ return $.Deferred().resolve([]).promise();
+ }
+ // If the files property is not available, the browser does not
+ // support the File API and we add a pseudo File object with
+ // the input value as name with path information removed:
+ files = [{
+ name: value.replace(/^.*\\/, '')
+ }];
+ } else if (files[0].name === undefined && files[0].fileName) {
+ // File normalization for Safari 4 and Firefox 3:
+ $.each(files, function (index, file) {
+ file.name = file.fileName;
+ file.size = file.fileSize;
+ });
+ }
+ return $.Deferred().resolve(files).promise();
},
- totalPages: function totalPages() {
- var pages = Math.ceil(this.total / this.pageSize);
- return pages > 0 ? pages : 1;
+ _getFileInputFiles: function _getFileInputFiles(fileInput) {
+ if (!(fileInput instanceof $) || fileInput.length === 1) {
+ return this._getSingleFileInputFiles(fileInput);
+ }
+ return $.when.apply($, $.map(fileInput, this._getSingleFileInputFiles))[this._promisePipe](function () {
+ return Array.prototype.concat.apply([], arguments);
+ });
},
- isLastPage: function isLastPage() {
- return this.current + 1 >= this.totalPages;
+ _onChange: function _onChange(e) {
+ var that = this,
+ data = {
+ fileInput: $(e.target),
+ form: $(e.target.form)
+ };
+ this._getFileInputFiles(data.fileInput).always(function (files) {
+ data.files = files;
+ if (that.options.replaceFileInput) {
+ that._replaceFileInput(data);
+ }
+ if (that._trigger('change', $.Event('change', {
+ delegatedEvent: e
+ }), data) !== false) {
+ that._onAdd(e, data);
+ }
+ });
},
- isFirstPage: function isFirstPage() {
- return this.current === 0;
+ _onPaste: function _onPaste(e) {
+ var items = e.originalEvent && e.originalEvent.clipboardData && e.originalEvent.clipboardData.items,
+ data = {
+ files: []
+ };
+ if (items && items.length) {
+ $.each(items, function (index, item) {
+ var file = item.getAsFile && item.getAsFile();
+ if (file) {
+ data.files.push(file);
+ }
+ });
+ if (this._trigger('paste', $.Event('paste', {
+ delegatedEvent: e
+ }), data) !== false) {
+ this._onAdd(e, data);
+ }
+ }
},
- canDoNext: function canDoNext() {
- return !this.isLastPage;
+ _onDrop: function _onDrop(e) {
+ e.dataTransfer = e.originalEvent && e.originalEvent.dataTransfer;
+ var that = this,
+ dataTransfer = e.dataTransfer,
+ data = {};
+ if (dataTransfer && dataTransfer.files && dataTransfer.files.length) {
+ e.preventDefault();
+ this._getDroppedFiles(dataTransfer).always(function (files) {
+ data.files = files;
+ if (that._trigger('drop', $.Event('drop', {
+ delegatedEvent: e
+ }), data) !== false) {
+ that._onAdd(e, data);
+ }
+ });
+ }
},
- canDoPrev: function canDoPrev() {
- return !this.isFirstPage;
+ _onDragOver: getDragHandler('dragover'),
+ _onDragEnter: getDragHandler('dragenter'),
+ _onDragLeave: getDragHandler('dragleave'),
+ _initEventHandlers: function _initEventHandlers() {
+ if (this._isXHRUpload(this.options)) {
+ this._on(this.options.dropZone, {
+ dragover: this._onDragOver,
+ drop: this._onDrop,
+ // event.preventDefault() on dragenter is required for IE10+:
+ dragenter: this._onDragEnter,
+ // dragleave is not required, but added for completeness:
+ dragleave: this._onDragLeave
+ });
+ this._on(this.options.pasteZone, {
+ paste: this._onPaste
+ });
+ }
+ if ($.support.fileInput) {
+ this._on(this.options.fileInput, {
+ change: this._onChange
+ });
+ }
},
- canDoFirst: function canDoFirst() {
- return !this.isFirstPage;
+ _destroyEventHandlers: function _destroyEventHandlers() {
+ this._off(this.options.dropZone, 'dragenter dragleave dragover drop');
+ this._off(this.options.pasteZone, 'paste');
+ this._off(this.options.fileInput, 'change');
},
- canDoLast: function canDoLast() {
- return !this.isLastPage;
+ _destroy: function _destroy() {
+ this._destroyEventHandlers();
},
- // this computed is only to have a central place where we detect changes and leverage Vue JS reactivity to raise our event.
- // That event will be handled by the parent media app to display the items in the page.
- // this logic will not run if the computed property is not used in the template. We use a dummy "data-computed-trigger" attribute for that.
- itemsInCurrentPage: function itemsInCurrentPage() {
- var start = this.pageSize * this.current;
- var end = start + this.pageSize;
- var result = this.sourceItems.slice(start, end);
- bus.$emit('pagerEvent', result);
- return result;
+ _setOption: function _setOption(key, value) {
+ var reinit = $.inArray(key, this._specialOptions) !== -1;
+ if (reinit) {
+ this._destroyEventHandlers();
+ }
+ this._super(key, value);
+ if (reinit) {
+ this._initSpecialOptions();
+ this._initEventHandlers();
+ }
},
- pageLinks: function pageLinks() {
- var links = [];
- links.push(this.current + 1);
-
- // Add 2 items before current
- var beforeCurrent = this.current > 0 ? this.current : -1;
- links.unshift(beforeCurrent);
- var beforeBeforeCurrent = this.current > 1 ? this.current - 1 : -1;
- links.unshift(beforeBeforeCurrent);
-
- // Add 2 items after current
- var afterCurrent = this.totalPages - this.current > 1 ? this.current + 2 : -1;
- links.push(afterCurrent);
- var afterAfterCurrent = this.totalPages - this.current > 2 ? this.current + 3 : -1;
- links.push(afterAfterCurrent);
- return links;
- }
- },
- watch: {
- sourceItems: function sourceItems() {
- this.current = 0; // resetting current page after receiving a new list of unpaged items
+ _initSpecialOptions: function _initSpecialOptions() {
+ var options = this.options;
+ if (options.fileInput === undefined) {
+ options.fileInput = this.element.is('input[type="file"]') ? this.element : this.element.find('input[type="file"]');
+ } else if (!(options.fileInput instanceof $)) {
+ options.fileInput = $(options.fileInput);
+ }
+ if (!(options.dropZone instanceof $)) {
+ options.dropZone = $(options.dropZone);
+ }
+ if (!(options.pasteZone instanceof $)) {
+ options.pasteZone = $(options.pasteZone);
+ }
},
-
- pageSize: function pageSize() {
- this.current = 0;
- }
- }
-});
-// \n \n \n
\n ",
- props: {
- colname: String,
- selectedcolname: String,
- asc: Boolean
- },
- computed: {
- isActive: function isActive() {
- return this.colname.toLowerCase() == this.selectedcolname.toLowerCase();
- }
- }
-});
-function initializeAttachedMediaField(el, idOfUploadButton, uploadAction, mediaItemUrl, allowMultiple, allowMediaText, allowAnchors, tempUploadFolder, maxUploadChunkSize) {
- var target = $(document.getElementById($(el).data('for')));
- var initialPaths = target.data("init");
- var mediaFieldEditor = $(el);
- var idprefix = mediaFieldEditor.attr("id");
- var mediaFieldApp;
- mediaFieldApps.push(mediaFieldApp = new Vue({
- el: mediaFieldEditor.get(0),
- data: {
- mediaItems: [],
- selectedMedia: null,
- smallThumbs: false,
- idPrefix: idprefix,
- initialized: false,
- allowMediaText: allowMediaText,
- backupMediaText: '',
- allowAnchors: allowAnchors,
- backupAnchor: null,
- mediaTextmodal: null,
- anchoringModal: null
+ _getRegExp: function _getRegExp(str) {
+ var parts = str.split('/'),
+ modifiers = parts.pop();
+ parts.shift();
+ return new RegExp(parts.join('/'), modifiers);
},
- created: function created() {
- var self = this;
- self.currentPrefs = JSON.parse(localStorage.getItem('mediaFieldPrefs'));
+ _isRegExpOption: function _isRegExpOption(key, value) {
+ return key !== 'url' && $.type(value) === 'string' && /^\/.*\/[igm]{0,3}$/.test(value);
},
- computed: {
- paths: {
- get: function get() {
- var mediaPaths = [];
- if (!this.initialized) {
- return JSON.stringify(initialPaths);
+ _initDataAttributes: function _initDataAttributes() {
+ var that = this,
+ options = this.options,
+ data = this.element.data();
+ // Initialize options set via HTML5 data-attributes:
+ $.each(this.element[0].attributes, function (index, attr) {
+ var key = attr.name.toLowerCase(),
+ value;
+ if (/^data-/.test(key)) {
+ // Convert hyphen-ated key to camelCase:
+ key = key.slice(5).replace(/-[a-z]/g, function (str) {
+ return str.charAt(1).toUpperCase();
+ });
+ value = data[key];
+ if (that._isRegExpOption(key, value)) {
+ value = that._getRegExp(value);
}
- this.mediaItems.forEach(function (x) {
- if (x.mediaPath === 'not-found') {
+ options[key] = value;
+ }
+ });
+ },
+ _create: function _create() {
+ this._initDataAttributes();
+ this._initSpecialOptions();
+ this._slots = [];
+ this._sequence = this._getXHRPromise(true);
+ this._sending = this._active = 0;
+ this._initProgressObject(this);
+ this._initEventHandlers();
+ },
+ // This method is exposed to the widget API and allows to query
+ // the number of active uploads:
+ active: function active() {
+ return this._active;
+ },
+ // This method is exposed to the widget API and allows to query
+ // the widget upload progress.
+ // It returns an object with loaded, total and bitrate properties
+ // for the running uploads:
+ progress: function progress() {
+ return this._progress;
+ },
+ // This method is exposed to the widget API and allows adding files
+ // using the fileupload API. The data parameter accepts an object which
+ // must have a files property and can contain additional options:
+ // .fileupload('add', {files: filesList});
+ add: function add(data) {
+ var that = this;
+ if (!data || this.options.disabled) {
+ return;
+ }
+ if (data.fileInput && !data.files) {
+ this._getFileInputFiles(data.fileInput).always(function (files) {
+ data.files = files;
+ that._onAdd(null, data);
+ });
+ } else {
+ data.files = $.makeArray(data.files);
+ this._onAdd(null, data);
+ }
+ },
+ // This method is exposed to the widget API and allows sending files
+ // using the fileupload API. The data parameter accepts an object which
+ // must have a files or fileInput property and can contain additional options:
+ // .fileupload('send', {files: filesList});
+ // The method returns a Promise object for the file upload call.
+ send: function send(data) {
+ if (data && !this.options.disabled) {
+ if (data.fileInput && !data.files) {
+ var that = this,
+ dfd = $.Deferred(),
+ promise = dfd.promise(),
+ jqXHR,
+ aborted;
+ promise.abort = function () {
+ aborted = true;
+ if (jqXHR) {
+ return jqXHR.abort();
+ }
+ dfd.reject(null, 'abort', 'abort');
+ return promise;
+ };
+ this._getFileInputFiles(data.fileInput).always(function (files) {
+ if (aborted) {
return;
}
- mediaPaths.push({
- path: x.mediaPath,
- isRemoved: x.isRemoved,
- isNew: x.isNew,
- mediaText: x.mediaText,
- anchor: x.anchor,
- attachedFileName: x.attachedFileName
- });
- });
- return JSON.stringify(mediaPaths);
- },
- set: function set(values) {
- var self = this;
- var mediaPaths = values || [];
- var signal = $.Deferred();
- var items = [];
- var length = 0;
- mediaPaths.forEach(function (x, i) {
- items.push({
- name: ' ' + x.path,
- mime: '',
- mediaPath: '',
- anchor: x.anchor,
- attachedFileName: x.attachedFileName
- }); // don't remove the space. Something different is needed or it wont react when the real name arrives.
- promise = $.when(signal).done(function () {
- $.ajax({
- url: mediaItemUrl + "?path=" + encodeURIComponent(x.path),
- method: 'GET',
- success: function success(data) {
- data.vuekey = data.name + i.toString(); // Because a unique key is required by Vue on v-for
- data.mediaText = x.mediaText; // This value is not returned from the ajax call.
- data.anchor = x.anchor; // This value is not returned from the ajax call.
- data.attachedFileName = x.attachedFileName; // This value is not returned from the ajax call.
- items.splice(i, 1, data);
- if (items.length === ++length) {
- items.forEach(function (x) {
- self.mediaItems.push(x);
- });
- self.initialized = true;
- }
- },
- error: function error(_error) {
- console.log(JSON.stringify(_error));
- items.splice(i, 1, {
- name: x.path,
- mime: '',
- mediaPath: 'not-found',
- mediaText: '',
- anchor: {
- x: 0.5,
- y: 0.5
- },
- attachedFileName: x.attachedFileName
- });
- if (items.length === ++length) {
- items.forEach(function (x) {
- self.mediaItems.push(x);
- });
- self.initialized = true;
- }
- }
- });
+ if (!files.length) {
+ dfd.reject();
+ return;
+ }
+ data.files = files;
+ jqXHR = that._onSend(null, data);
+ jqXHR.then(function (result, textStatus, jqXHR) {
+ dfd.resolve(result, textStatus, jqXHR);
+ }, function (jqXHR, textStatus, errorThrown) {
+ dfd.reject(jqXHR, textStatus, errorThrown);
});
});
- signal.resolve();
+ return this._enhancePromise(promise);
}
- },
- fileSize: function fileSize() {
- return Math.round(this.selectedMedia.size / 1024);
- },
- canAddMedia: function canAddMedia() {
- var nonRemovedMediaItems = [];
- for (var i = 0; i < this.mediaItems.length; i++) {
- if (!this.mediaItems[i].isRemoved) {
- nonRemovedMediaItems.push(this.mediaItems[i]);
- }
- }
- return nonRemovedMediaItems.length === 0 || nonRemovedMediaItems.length > 0 && allowMultiple;
- },
- thumbSize: function thumbSize() {
- return this.smallThumbs ? 120 : 240;
- },
- currentPrefs: {
- get: function get() {
- return {
- smallThumbs: this.smallThumbs
- };
- },
- set: function set(newPrefs) {
- if (!newPrefs) {
- return;
- }
- this.smallThumbs = newPrefs.smallThumbs;
+ data.files = $.makeArray(data.files);
+ if (data.files.length) {
+ return this._onSend(null, data);
}
}
- },
- mounted: function mounted() {
- var self = this;
- self.paths = initialPaths;
- self.$on('selectAndDeleteMediaRequested', function (media) {
- self.selectAndDeleteMedia(media);
- });
- self.$on('selectMediaRequested', function (media) {
- self.selectMedia(media);
- });
- var selector = '#' + idOfUploadButton;
- var editorId = mediaFieldEditor.attr('id');
- var chunkedFileUploadId = randomUUID();
- $(selector).fileupload({
- limitConcurrentUploads: 20,
- dropZone: $('#' + editorId),
- dataType: 'json',
- url: uploadAction,
- maxChunkSize: maxUploadChunkSize,
- add: function add(e, data) {
- var count = data.files.length;
- var i;
- for (i = 0; i < count; i++) {
- data.files[i].uploadName = self.getUniqueId() + data.files[i].name;
- data.files[i].attachedFileName = data.files[i].name;
+ return this._getXHRPromise(false, data && data.context);
+ }
+ });
+});
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+/*
+ * jQuery Iframe Transport Plugin
+ * https://github.com/blueimp/jQuery-File-Upload
+ *
+ * Copyright 2011, Sebastian Tschan
+ * https://blueimp.net
+ *
+ * Licensed under the MIT license:
+ * https://opensource.org/licenses/MIT
+ */
+
+/* global define, require */
+
+(function (factory) {
+ 'use strict';
+
+ if (typeof define === 'function' && define.amd) {
+ // Register as an anonymous AMD module:
+ define(['jquery'], factory);
+ } else if ((typeof exports === "undefined" ? "undefined" : _typeof(exports)) === 'object') {
+ // Node/CommonJS:
+ factory(require('jquery'));
+ } else {
+ // Browser globals:
+ factory(window.jQuery);
+ }
+})(function ($) {
+ 'use strict';
+
+ // Helper variable to create unique names for the transport iframes:
+ var counter = 0,
+ jsonAPI = $,
+ jsonParse = 'parseJSON';
+ if ('JSON' in window && 'parse' in JSON) {
+ jsonAPI = JSON;
+ jsonParse = 'parse';
+ }
+
+ // The iframe transport accepts four additional options:
+ // options.fileInput: a jQuery collection of file input fields
+ // options.paramName: the parameter name for the file form data,
+ // overrides the name property of the file input field(s),
+ // can be a string or an array of strings.
+ // options.formData: an array of objects with name and value properties,
+ // equivalent to the return data of .serializeArray(), e.g.:
+ // [{name: 'a', value: 1}, {name: 'b', value: 2}]
+ // options.initialIframeSrc: the URL of the initial iframe src,
+ // by default set to "javascript:false;"
+ $.ajaxTransport('iframe', function (options) {
+ if (options.async) {
+ // javascript:false as initial iframe src
+ // prevents warning popups on HTTPS in IE6:
+ // eslint-disable-next-line no-script-url
+ var initialIframeSrc = options.initialIframeSrc || 'javascript:false;',
+ form,
+ iframe,
+ addParamChar;
+ return {
+ send: function send(_, completeCallback) {
+ form = $('');
+ form.attr('accept-charset', options.formAcceptCharset);
+ addParamChar = /\?/.test(options.url) ? '&' : '?';
+ // XDomainRequest only supports GET and POST:
+ if (options.type === 'DELETE') {
+ options.url = options.url + addParamChar + '_method=DELETE';
+ options.type = 'POST';
+ } else if (options.type === 'PUT') {
+ options.url = options.url + addParamChar + '_method=PUT';
+ options.type = 'POST';
+ } else if (options.type === 'PATCH') {
+ options.url = options.url + addParamChar + '_method=PATCH';
+ options.type = 'POST';
}
- data.submit();
- },
- formData: function formData() {
- var antiForgeryToken = $("input[name=__RequestVerificationToken]").val();
- return [{
- name: 'path',
- value: tempUploadFolder
- }, {
- name: '__RequestVerificationToken',
- value: antiForgeryToken
- }, {
- name: '__chunkedFileUploadId',
- value: chunkedFileUploadId
- }];
- },
- done: function done(e, data) {
- var newMediaItems = [];
- var errormsg = "";
- if (data.result.files.length > 0) {
- for (var i = 0; i < data.result.files.length; i++) {
- data.result.files[i].isNew = true;
- //if error is defined probably the file type is not allowed
- if (data.result.files[i].error === undefined || data.result.files[i].error === null) {
- data.result.files[i].attachedFileName = data.files[i].attachedFileName;
- newMediaItems.push(data.result.files[i]);
- } else errormsg += data.result.files[i].error + "\n";
+ // IE versions below IE8 cannot set the name property of
+ // elements that have already been added to the DOM,
+ // so we set the name along with the iframe HTML markup:
+ counter += 1;
+ iframe = $('').on('load', function () {
+ var fileInputClones,
+ paramNames = $.isArray(options.paramName) ? options.paramName : [options.paramName];
+ iframe.off('load').on('load', function () {
+ var response;
+ // Wrap in a try/catch block to catch exceptions thrown
+ // when trying to access cross-domain iframe contents:
+ try {
+ response = iframe.contents();
+ // Google Chrome and Firefox do not throw an
+ // exception when calling iframe.contents() on
+ // cross-domain requests, so we unify the response:
+ if (!response.length || !response[0].firstChild) {
+ throw new Error();
+ }
+ } catch (e) {
+ response = undefined;
+ }
+ // The complete callback returns the
+ // iframe content document as response object:
+ completeCallback(200, 'success', {
+ iframe: response
+ });
+ // Fix for IE endless progress bar activity bug
+ // (happens on form submits to iframe targets):
+ $('').appendTo(form);
+ window.setTimeout(function () {
+ // Removing the form in a setTimeout call
+ // allows Chrome's developer tools to display
+ // the response result
+ form.remove();
+ }, 0);
+ });
+ form.prop('target', iframe.prop('name')).prop('action', options.url).prop('method', options.type);
+ if (options.formData) {
+ $.each(options.formData, function (index, field) {
+ $('').prop('name', field.name).val(field.value).appendTo(form);
+ });
}
+ if (options.fileInput && options.fileInput.length && options.type === 'POST') {
+ fileInputClones = options.fileInput.clone();
+ // Insert a clone for each file input field:
+ options.fileInput.after(function (index) {
+ return fileInputClones[index];
+ });
+ if (options.paramName) {
+ options.fileInput.each(function (index) {
+ $(this).prop('name', paramNames[index] || options.paramName);
+ });
+ }
+ // Appending the file input fields to the hidden form
+ // removes them from their original location:
+ form.append(options.fileInput).prop('enctype', 'multipart/form-data')
+ // enctype must be set as encoding for IE:
+ .prop('encoding', 'multipart/form-data');
+ // Remove the HTML5 form attribute from the input(s):
+ options.fileInput.removeAttr('form');
+ }
+ window.setTimeout(function () {
+ // Submitting the form in a setTimeout call fixes an issue with
+ // Safari 13 not triggering the iframe load event after resetting
+ // the load event handler, see also:
+ // https://github.com/blueimp/jQuery-File-Upload/issues/3633
+ form.submit();
+ // Insert the file input fields at their original location
+ // by replacing the clones with the originals:
+ if (fileInputClones && fileInputClones.length) {
+ options.fileInput.each(function (index, input) {
+ var clone = $(fileInputClones[index]);
+ // Restore the original name and form properties:
+ $(input).prop('name', clone.prop('name')).attr('form', clone.attr('form'));
+ clone.replaceWith(input);
+ });
+ }
+ }, 0);
+ });
+ form.append(iframe).appendTo(document.body);
+ },
+ abort: function abort() {
+ if (iframe) {
+ // javascript:false as iframe src aborts the request
+ // and prevents warning popups on HTTPS in IE6.
+ iframe.off('load').prop('src', initialIframeSrc);
}
- if (errormsg !== "") {
- alert(errormsg);
- return;
- }
- console.log(newMediaItems);
- if (newMediaItems.length > 1 && allowMultiple === false) {
- alert($('#onlyOneItemMessage').val());
- mediaFieldApp.mediaItems.push(newMediaItems[0]);
- mediaFieldApp.initialized = true;
- } else {
- mediaFieldApp.mediaItems = mediaFieldApp.mediaItems.concat(newMediaItems);
- mediaFieldApp.initialized = true;
+ if (form) {
+ form.remove();
}
- },
- error: function error(jqXHR, textStatus, errorThrown) {
- console.log('Error on upload.');
- console.log(jqXHR);
- console.log(textStatus);
- console.log(errorThrown);
}
- }).on('fileuploadchunkbeforesend', function (e, options) {
- var file = options.files[0];
- // Here we replace the blob with a File object to ensure the file name and others are preserved for the backend.
- options.blob = new File([options.blob], file.name, {
- type: file.type,
- lastModified: file.lastModified
- });
- });
- },
- methods: {
- selectMedia: function selectMedia(media) {
- this.selectedMedia = media;
- },
- getUniqueId: function getUniqueId() {
- return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
- var r = Math.random() * 16 | 0,
- v = c === 'x' ? r : r & 0x3 | 0x8;
- return v.toString(16);
- });
- },
- removeSelected: function removeSelected(event) {
- var removed = {};
- if (this.selectedMedia) {
- var index = this.mediaItems && this.mediaItems.indexOf(this.selectedMedia);
- if (index > -1) {
- removed = this.mediaItems[index];
- removed.isRemoved = true;
- //this.mediaItems.splice([index], 1, removed);
- this.mediaItems.splice(index, 1);
- }
- } else {
- // The remove button can also remove a unique media item
- if (this.mediaItems.length === 1) {
- removed = this.mediaItems[index];
- removed.isRemoved = true;
- //this.mediaItems.splice(0, 1, removed);
- this.mediaItems.splice(0, 1);
- }
- }
- this.selectedMedia = null;
- },
- showMediaTextModal: function showMediaTextModal(event) {
- this.mediaTextModal = new bootstrap.Modal(this.$refs.mediaTextModal);
- this.mediaTextModal.show();
- this.backupMediaText = this.selectedMedia.mediaText;
- },
- cancelMediaTextModal: function cancelMediaTextModal(event) {
- this.mediaTextModal.hide();
- this.selectedMedia.mediaText = this.backupMediaText;
- },
- showAnchorModal: function showAnchorModal(event) {
- this.anchoringModal = new bootstrap.Modal(this.$refs.anchoringModal);
- this.anchoringModal.show();
- // Cause a refresh to recalc heights.
- this.selectedMedia.anchor = {
- x: this.selectedMedia.anchor.x,
- y: this.selectedMedia.anchor.y
- };
- this.backupAnchor = this.selectedMedia.anchor;
- },
- cancelAnchoringModal: function cancelAnchoringModal(event) {
- this.anchoringModal.hide();
- this.selectedMedia.anchor = this.backupAnchor;
- },
- resetAnchor: function resetAnchor(event) {
- this.selectedMedia.anchor = {
- x: 0.5,
- y: 0.5
- };
- },
- onAnchorDrop: function onAnchorDrop(event) {
- var image = this.$refs.anchorImage;
- this.selectedMedia.anchor = {
- x: event.offsetX / image.clientWidth,
- y: event.offsetY / image.clientHeight
- };
- },
- anchorLeft: function anchorLeft() {
- if (this.$refs.anchorImage && this.$refs.modalBody && this.selectedMedia) {
- // When image is shrunk compare against the modal body.
- var offset = (this.$refs.modalBody.clientWidth - this.$refs.anchorImage.clientWidth) / 2;
- var position = this.selectedMedia.anchor.x * this.$refs.anchorImage.clientWidth + offset;
- if (position < 17) {
- // Adjust so the target doesn't show outside image.
- position = 17;
- } else {
- position = position - 8; // Adjust to hit the mouse pointer.
- }
-
- return position + 'px';
- } else {
- return '0';
- }
- },
- anchorTop: function anchorTop() {
- if (this.$refs.anchorImage && this.selectedMedia) {
- var position = this.selectedMedia.anchor.y * this.$refs.anchorImage.clientHeight;
- if (position < 15) {
- // Adjustment so the target doesn't show outside image.
- position = 15;
- } else {
- position = position + 5; // Adjust to hit the mouse pointer.
- }
+ };
+ }
+ });
- return position + 'px';
- } else {
- return '0';
- }
+ // The iframe transport returns the iframe content document as response.
+ // The following adds converters from iframe to text, json, html, xml
+ // and script.
+ // Please note that the Content-Type for JSON responses has to be text/plain
+ // or text/html, if the browser doesn't include application/json in the
+ // Accept header, else IE will show a download dialog.
+ // The Content-Type for XML responses on the other hand has to be always
+ // application/xml or text/xml, so IE properly parses the XML response.
+ // See also
+ // https://github.com/blueimp/jQuery-File-Upload/wiki/Setup#content-type-negotiation
+ $.ajaxSetup({
+ converters: {
+ 'iframe text': function iframeText(iframe) {
+ return iframe && $(iframe[0].body).text();
},
- setAnchor: function setAnchor(event) {
- var image = this.$refs.anchorImage;
- this.selectedMedia.anchor = {
- x: event.offsetX / image.clientWidth,
- y: event.offsetY / image.clientHeight
- };
+ 'iframe json': function iframeJson(iframe) {
+ return iframe && jsonAPI[jsonParse]($(iframe[0].body).text());
},
- addMediaFiles: function addMediaFiles(files) {
- if (files.length > 1 && allowMultiple === false) {
- alert($('#onlyOneItemMessage').val());
- mediaFieldApp.mediaItems.push(files[0]);
- mediaFieldApp.initialized = true;
- } else {
- mediaFieldApp.mediaItems = mediaFieldApp.mediaItems.concat(files);
- mediaFieldApp.initialized = true;
- }
+ 'iframe html': function iframeHtml(iframe) {
+ return iframe && $(iframe[0].body).html();
},
- selectAndDeleteMedia: function selectAndDeleteMedia(media) {
- var self = this;
- self.selectedMedia = media;
- // setTimeout because sometimes
- // removeSelected was called even before the media was set.
- setTimeout(function () {
- self.removeSelected();
- }, 100);
- }
- },
- watch: {
- mediaItems: {
- deep: true,
- handler: function handler() {
- // Trigger preview rendering
- setTimeout(function () {
- $(document).trigger('contentpreview:render');
- }, 100);
- }
+ 'iframe xml': function iframeXml(iframe) {
+ var xmlDoc = iframe && iframe[0];
+ return xmlDoc && $.isXMLDoc(xmlDoc) ? xmlDoc : $.parseXML(xmlDoc.XMLDocument && xmlDoc.XMLDocument.xml || $(xmlDoc.body).html());
},
- currentPrefs: function currentPrefs(newPrefs) {
- localStorage.setItem('mediaFieldPrefs', JSON.stringify(newPrefs));
+ 'iframe script': function iframeScript(iframe) {
+ return iframe && $.globalEval($(iframe[0].body).text());
}
}
- }));
-}
-// \
- \
- \
- \
- \
- \
- \
-
\
- ',
- data: function data() {
- return {
- T: {}
- };
- },
- props: {
- mediaItems: Array,
- selectedMedia: Object,
- thumbSize: Number,
- idPrefix: String
- },
- created: function created() {
- var self = this;
-
- // retrieving localized strings from view
- self.T.mediaNotFound = $('#t-media-not-found').val();
- self.T.discardWarning = $('#t-discard-warning').val();
- self.T.noImages = $('#t-no-images').val();
- },
- methods: {
- selectAndDeleteMedia: function selectAndDeleteMedia(media) {
- this.$parent.$emit('selectAndDeleteMediaRequested', media);
- },
- selectMedia: function selectMedia(media) {
- this.$parent.$emit('selectMediaRequested', media);
- },
- buildMediaUrl: function buildMediaUrl(url, thumbSize) {
- return url + (url.indexOf('?') == -1 ? '?' : '&') + 'width=' + thumbSize + '&height=' + thumbSize;
- },
- getfontAwesomeClassNameForFileName: function getfontAwesomeClassNameForFilename(filename, thumbsize) {
- return getClassNameForFilename(filename) + ' ' + thumbsize;
- }
- }
+ });
});
-function initializeMediaField(el, modalBodyElement, mediaItemUrl, allowMultiple, allowMediaText, allowAnchors) {
- //BagPart create a script section without other DOM elements
- if (el === null) return;
- var target = $(document.getElementById($(el).data('for')));
- var initialPaths = target.data("init");
- var mediaFieldEditor = $(el);
- var idprefix = mediaFieldEditor.attr("id");
- var mediaFieldApp;
-
- //when hide modal detach media app to avoid issue on BagPart
- modalBodyElement.addEventListener('hidden.bs.modal', function (event) {
- $("#mediaApp").appendTo('body');
- $("#mediaApp").hide();
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function randomUUID() {
+ if ((typeof crypto === "undefined" ? "undefined" : _typeof(crypto)) === 'object' && typeof crypto.randomUUID === 'function') {
+ return crypto.randomUUID();
+ }
+ return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, function (c) {
+ return (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16);
});
- mediaFieldApps.push(mediaFieldApp = new Vue({
- el: mediaFieldEditor.get(0),
- data: {
- mediaItems: [],
- selectedMedia: null,
- smallThumbs: false,
- idPrefix: idprefix,
- initialized: false,
- allowMediaText: allowMediaText,
- backupMediaText: '',
- allowAnchors: allowAnchors,
- backupAnchor: null,
- mediaTextModal: null,
- anchoringModal: null
- },
- created: function created() {
- var self = this;
- self.currentPrefs = JSON.parse(localStorage.getItem('mediaFieldPrefs'));
- },
- computed: {
- paths: {
- get: function get() {
- var mediaPaths = [];
- if (!this.initialized) {
- return JSON.stringify(initialPaths);
- }
- this.mediaItems.forEach(function (x) {
- if (x.mediaPath === 'not-found') {
- return;
- }
- mediaPaths.push({
- path: x.mediaPath,
- mediaText: x.mediaText,
- anchor: x.anchor
- });
- });
- return JSON.stringify(mediaPaths);
+}
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+var initialized;
+var mediaApp;
+var bus = new Vue();
+function initializeMediaApplication(displayMediaApplication, mediaApplicationUrl, pathBase) {
+ if (initialized) {
+ return;
+ }
+ initialized = true;
+ if (!mediaApplicationUrl) {
+ console.error('mediaApplicationUrl variable is not defined');
+ }
+ $.ajax({
+ url: mediaApplicationUrl,
+ method: 'GET',
+ success: function success(content) {
+ $('.ta-content').append(content);
+ $(document).trigger('mediaapplication:ready');
+ var _root = {
+ name: $('#t-mediaLibrary').text(),
+ path: '',
+ folder: '',
+ isDirectory: true,
+ canCreateFolder: $('#allowNewRootFolders').val() === 'true'
+ };
+ mediaApp = new Vue({
+ el: '#mediaApp',
+ data: {
+ selectedFolder: {},
+ mediaItems: [],
+ selectedMedias: [],
+ errors: [],
+ dragDropThumbnail: new Image(),
+ smallThumbs: false,
+ gridView: false,
+ mediaFilter: '',
+ sortBy: '',
+ sortAsc: true,
+ itemsInPage: []
},
- set: function set(values) {
+ created: function created() {
var self = this;
- var mediaPaths = values || [];
- var signal = $.Deferred();
- var items = [];
- var length = 0;
- mediaPaths.forEach(function (x, i) {
- items.push({
- name: ' ' + x.path,
- mime: '',
- mediaPath: ''
- }); // don't remove the space. Something different is needed or it wont react when the real name arrives.
- promise = $.when(signal).done(function () {
- $.ajax({
- url: mediaItemUrl + "?path=" + encodeURIComponent(x.path),
- method: 'GET',
- success: function success(data) {
- data.vuekey = data.name + i.toString();
- data.mediaText = x.mediaText; // This value is not returned from the ajax call.
- data.anchor = x.anchor; // This value is not returned from the ajax call.
- items.splice(i, 1, data);
- if (items.length === ++length) {
- items.forEach(function (y) {
- self.mediaItems.push(y);
- });
- self.initialized = true;
- }
- },
- error: function error(_error) {
- console.log(_error);
- items.splice(i, 1, {
- name: x.path,
- mime: '',
- mediaPath: 'not-found',
- mediaText: '',
- anchor: {
- x: 0,
- y: 0
- }
- });
- if (items.length === ++length) {
- items.forEach(function (x) {
- self.mediaItems.push(x);
- });
- self.initialized = true;
- }
- }
- });
- });
+ self.dragDropThumbnail.src = (pathBase || '') + '/OrchardCore.Media/Images/drag-thumbnail.png';
+ bus.$on('folderSelected', function (folder) {
+ self.selectedFolder = folder;
+ });
+ bus.$on('folderDeleted', function () {
+ self.selectRoot();
+ });
+ bus.$on('folderAdded', function (folder) {
+ self.selectedFolder = folder;
+ folder.selected = true;
+ });
+ bus.$on('mediaListMoved', function (errorInfo) {
+ self.loadFolder(self.selectedFolder);
+ if (errorInfo) {
+ self.errors.push(errorInfo);
+ }
+ });
+ bus.$on('mediaRenamed', function (newName, newPath, oldPath, newUrl) {
+ var media = self.mediaItems.filter(function (item) {
+ return item.mediaPath === oldPath;
+ })[0];
+ media.mediaPath = newPath;
+ media.name = newName;
+ media.url = newUrl;
+ });
+ bus.$on('createFolderRequested', function (media) {
+ self.createFolder();
+ });
+ bus.$on('deleteFolderRequested', function (media) {
+ self.deleteFolder();
});
- signal.resolve();
- }
- },
- fileSize: function fileSize() {
- return Math.round(this.selectedMedia.size / 1024);
- },
- canAddMedia: function canAddMedia() {
- return this.mediaItems.length === 0 || this.mediaItems.length > 0 && allowMultiple;
- },
- thumbSize: function thumbSize() {
- return this.smallThumbs ? 120 : 240;
- },
- currentPrefs: {
- get: function get() {
- return {
- smallThumbs: this.smallThumbs
- };
- },
- set: function set(newPrefs) {
- if (!newPrefs) {
- return;
- }
- this.smallThumbs = newPrefs.smallThumbs;
- }
- }
- },
- mounted: function mounted() {
- var self = this;
- self.paths = initialPaths;
- self.$on('selectAndDeleteMediaRequested', function (media) {
- self.selectAndDeleteMedia(media);
- });
- self.$on('selectMediaRequested', function (media) {
- self.selectMedia(media);
- });
- self.$on('filesUploaded', function (files) {
- self.addMediaFiles(files);
- });
- },
- methods: {
- selectMedia: function selectMedia(media) {
- this.selectedMedia = media;
- },
- showModal: function showModal(event) {
- var self = this;
- if (self.canAddMedia) {
- $("#mediaApp").appendTo($(modalBodyElement).find('.modal-body'));
- $("#mediaApp").show();
- var modal = new bootstrap.Modal(modalBodyElement);
- modal.show();
- $(modalBodyElement).find('.mediaFieldSelectButton').off('click').on('click', function (v) {
- self.addMediaFiles(mediaApp.selectedMedias);
- // we don't want the included medias to be still selected the next time we open the modal.
- mediaApp.selectedMedias = [];
- modal.hide();
- return true;
+ // common handlers for actions in both grid and table view.
+ bus.$on('sortChangeRequested', function (newSort) {
+ self.changeSort(newSort);
});
- }
- },
- showMediaTextModal: function showMediaTextModal(event) {
- this.mediaTextModal = new bootstrap.Modal(this.$refs.mediaTextModal);
- this.mediaTextModal.show();
- this.backupMediaText = this.selectedMedia.mediaText;
- },
- cancelMediaTextModal: function cancelMediaTextModal(event) {
- this.mediaTextModal.hide();
- this.selectedMedia.mediaText = this.backupMediaText;
- },
- showAnchorModal: function showAnchorModal(event) {
- this.anchoringModal = new bootstrap.Modal(this.$refs.anchoringModal);
- this.anchoringModal.show();
- // Cause a refresh to recalc heights.
- this.selectedMedia.anchor = {
- x: this.selectedMedia.anchor.x,
- y: this.selectedMedia.anchor.y
- };
- this.backupAnchor = this.selectedMedia.anchor;
- },
- cancelAnchoringModal: function cancelAnchoringModal(event) {
- this.anchoringModal.hide();
- this.selectedMedia.anchor = this.backupAnchor;
- },
- resetAnchor: function resetAnchor(event) {
- this.selectedMedia.anchor = {
- x: 0.5,
- y: 0.5
- };
- },
- onAnchorDrop: function onAnchorDrop(event) {
- var image = this.$refs.anchorImage;
- this.selectedMedia.anchor = {
- x: event.offsetX / image.clientWidth,
- y: event.offsetY / image.clientHeight
- };
- },
- anchorLeft: function anchorLeft() {
- if (this.$refs.anchorImage && this.$refs.modalBody && this.selectedMedia) {
- // When image is shrunk compare against the modal body.
- var offset = (this.$refs.modalBody.clientWidth - this.$refs.anchorImage.clientWidth) / 2;
- var position = this.selectedMedia.anchor.x * this.$refs.anchorImage.clientWidth + offset;
- var anchorIcon = Math.round(this.$refs.modalBody.querySelector('.icon-media-anchor').clientWidth);
- if (Number.isInteger(anchorIcon)) {
- position = position - anchorIcon / 2;
- }
- return position + 'px';
- } else {
- return '0';
- }
- },
- anchorTop: function anchorTop() {
- if (this.$refs.anchorImage && this.selectedMedia) {
- var position = this.selectedMedia.anchor.y * this.$refs.anchorImage.clientHeight;
- return position + 'px';
- } else {
- return '0';
- }
- },
- setAnchor: function setAnchor(event) {
- var image = this.$refs.anchorImage;
- this.selectedMedia.anchor = {
- x: event.offsetX / image.clientWidth,
- y: event.offsetY / image.clientHeight
- };
- },
- addMediaFiles: function addMediaFiles(files) {
- if (files.length > 1 && allowMultiple === false) {
- alert($('#onlyOneItemMessage').val());
- mediaFieldApp.mediaItems.push(files[0]);
- mediaFieldApp.initialized = true;
- } else {
- mediaFieldApp.mediaItems = mediaFieldApp.mediaItems.concat(files);
- mediaFieldApp.initialized = true;
- }
- },
- removeSelected: function removeSelected(event) {
- if (this.selectedMedia) {
- var index = this.mediaItems && this.mediaItems.indexOf(this.selectedMedia);
- if (index > -1) {
- this.mediaItems.splice(index, 1);
- }
- } else {
- // The remove button can also remove a unique media item
- if (this.mediaItems.length === 1) {
- this.mediaItems.splice(0, 1);
- }
- }
- this.selectedMedia = null;
- },
- selectAndDeleteMedia: function selectAndDeleteMedia(media) {
- var self = this;
- self.selectedMedia = media;
- // setTimeout because sometimes removeSelected was called even before the media was set.
- setTimeout(function () {
- self.removeSelected();
- }, 100);
- }
- },
- watch: {
- mediaItems: {
- deep: true,
- handler: function handler() {
- // Trigger preview rendering
- setTimeout(function () {
- $(document).trigger('contentpreview:render');
- }, 100);
- }
- },
- currentPrefs: function currentPrefs(newPrefs) {
- localStorage.setItem('mediaFieldPrefs', JSON.stringify(newPrefs));
- }
- }
- }));
-}
-// different media field editors will add themselves to this array
-var mediaFieldApps = [];
-// \
-
\
- \
- {{T.noImages}}\
-
\
- \
- \
-
\
- ',
- props: {
- model: Object,
- uploadInputId: String
- },
- mounted: function mounted() {
- var _self$uploadInputId;
- var self = this;
- var uploadInput = document.getElementById((_self$uploadInputId = self.uploadInputId) !== null && _self$uploadInputId !== void 0 ? _self$uploadInputId : 'fileupload');
- $(uploadInput).bind('fileuploadprogress', function (e, data) {
- if (data.files[0].name !== self.model.name) {
- return;
- }
- self.model.percentage = parseInt(data.loaded / data.total * 100, 10);
- });
- $(uploadInput).bind('fileuploaddone', function (e, data) {
- if (data.files[0].name !== self.model.name) {
- return;
- }
- if (data.result.files[0].error) {
- self.handleFailure(data.files[0].name, data.result.files[0].error);
- } else {
- bus.$emit('removalRequest', self.model);
- }
- });
- $(uploadInput).bind('fileuploadfail', function (e, data) {
- if (data.files[0].name !== self.model.name) {
- return;
- }
- self.handleFailure(data.files[0].name, $('#t-error').val());
- });
- },
- methods: {
- handleFailure: function handleFailure(fileName, message) {
- if (fileName !== this.model.name) {
- return;
- }
- this.model.errorMessage = message;
- bus.$emit('ErrorOnUpload', this.model);
- },
- dismissWarning: function dismissWarning() {
- bus.$emit('removalRequest', this.model);
- }
- }
-});
-// {{ model.name }}
\ - \
- \
- \
-
\
- \
-
\
- ',
- data: function data() {
- return {
- files: [],
- T: {},
- expanded: false,
- pendingCount: 0,
- errorCount: 0
- };
- },
- props: {
- uploadInputId: String
- },
- created: function created() {
- var self = this;
- // retrieving localized strings from view
- self.T.uploads = $('#t-uploads').val();
- self.T.errors = $('#t-errors').val();
- self.T.clearErrors = $('#t-clear-errors').val();
- },
- computed: {
- fileCount: function fileCount() {
- return this.files.length;
- }
- },
- mounted: function mounted() {
- var _self$uploadInputId;
- var self = this;
- var uploadInput = document.getElementById((_self$uploadInputId = self.uploadInputId) !== null && _self$uploadInputId !== void 0 ? _self$uploadInputId : 'fileupload');
- $(uploadInput).bind('fileuploadadd', function (e, data) {
- if (!data.files) {
- return;
- }
- data.files.forEach(function (newFile) {
- var alreadyInList = self.files.some(function (f) {
- return f.name == newFile.name;
- });
- if (!alreadyInList) {
- self.files.push({
- name: newFile.name,
- percentage: 0,
- errorMessage: ''
- });
- } else {
- console.error('A file with the same name is already on the queue:' + newFile.name);
- }
- });
- });
- bus.$on('removalRequest', function (fileUpload) {
- self.files.forEach(function (item, index, array) {
- if (item.name == fileUpload.name) {
- array.splice(index, 1);
- }
- });
- });
- bus.$on('ErrorOnUpload', function (fileUpload) {
- self.updateCount();
- });
- },
- methods: {
- updateCount: function updateCount() {
- this.errorCount = this.files.filter(function (item) {
- return item.errorMessage != '';
- }).length;
- this.pendingCount = this.files.length - this.errorCount;
- if (this.files.length < 1) {
- this.expanded = false;
- }
- },
- clearErrors: function clearErrors() {
- this.files = this.files.filter(function (item) {
- return item.errorMessage == '';
- });
- }
- },
- watch: {
- files: function files() {
- this.updateCount();
- }
- }
-});
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-function randomUUID() {
- if ((typeof crypto === "undefined" ? "undefined" : _typeof(crypto)) === 'object' && typeof crypto.randomUUID === 'function') {
- return crypto.randomUUID();
- }
- return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, function (c) {
- return (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16);
- });
-}
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-/*
- * jQuery File Upload Plugin
- * https://github.com/blueimp/jQuery-File-Upload
- *
- * Copyright 2010, Sebastian Tschan
- * https://blueimp.net
- *
- * Licensed under the MIT license:
- * https://opensource.org/licenses/MIT
- */
-
-/* global define, require */
-/* eslint-disable new-cap */
-
-(function (factory) {
- 'use strict';
-
- if (typeof define === 'function' && define.amd) {
- // Register as an anonymous AMD module:
- define(['jquery', 'jquery-ui/ui/widget'], factory);
- } else if ((typeof exports === "undefined" ? "undefined" : _typeof(exports)) === 'object') {
- // Node/CommonJS:
- factory(require('jquery'), require('./vendor/jquery.ui.widget'));
- } else {
- // Browser globals:
- factory(window.jQuery);
- }
-})(function ($) {
- 'use strict';
-
- // Detect file input support, based on
- // https://viljamis.com/2012/file-upload-support-on-mobile/
- $.support.fileInput = !(new RegExp(
- // Handle devices which give false positives for the feature detection:
- '(Android (1\\.[0156]|2\\.[01]))' + '|(Windows Phone (OS 7|8\\.0))|(XBLWP)|(ZuneWP)|(WPDesktop)' + '|(w(eb)?OSBrowser)|(webOS)' + '|(Kindle/(1\\.0|2\\.[05]|3\\.0))').test(window.navigator.userAgent) ||
- // Feature detection for all other devices:
- $('').prop('disabled'));
-
- // The FileReader API is not actually used, but works as feature detection,
- // as some Safari versions (5?) support XHR file uploads via the FormData API,
- // but not non-multipart XHR file uploads.
- // window.XMLHttpRequestUpload is not available on IE10, so we check for
- // window.ProgressEvent instead to detect XHR2 file upload capability:
- $.support.xhrFileUpload = !!(window.ProgressEvent && window.FileReader);
- $.support.xhrFormDataFileUpload = !!window.FormData;
-
- // Detect support for Blob slicing (required for chunked uploads):
- $.support.blobSlice = window.Blob && (Blob.prototype.slice || Blob.prototype.webkitSlice || Blob.prototype.mozSlice);
-
- /**
- * Helper function to create drag handlers for dragover/dragenter/dragleave
- *
- * @param {string} type Event type
- * @returns {Function} Drag handler
- */
- function getDragHandler(type) {
- var isDragOver = type === 'dragover';
- return function (e) {
- e.dataTransfer = e.originalEvent && e.originalEvent.dataTransfer;
- var dataTransfer = e.dataTransfer;
- if (dataTransfer && $.inArray('Files', dataTransfer.types) !== -1 && this._trigger(type, $.Event(type, {
- delegatedEvent: e
- })) !== false) {
- e.preventDefault();
- if (isDragOver) {
- dataTransfer.dropEffect = 'copy';
- }
- }
- };
- }
-
- // The fileupload widget listens for change events on file input fields defined
- // via fileInput setting and paste or drop events of the given dropZone.
- // In addition to the default jQuery Widget methods, the fileupload widget
- // exposes the "add" and "send" methods, to add or directly send files using
- // the fileupload API.
- // By default, files added via file input selection, paste, drag & drop or
- // "add" method are uploaded immediately, but it is possible to override
- // the "add" callback option to queue file uploads.
- $.widget('blueimp.fileupload', {
- options: {
- // The drop target element(s), by the default the complete document.
- // Set to null to disable drag & drop support:
- dropZone: $(document),
- // The paste target element(s), by the default undefined.
- // Set to a DOM node or jQuery object to enable file pasting:
- pasteZone: undefined,
- // The file input field(s), that are listened to for change events.
- // If undefined, it is set to the file input fields inside
- // of the widget element on plugin initialization.
- // Set to null to disable the change listener.
- fileInput: undefined,
- // By default, the file input field is replaced with a clone after
- // each input field change event. This is required for iframe transport
- // queues and allows change events to be fired for the same file
- // selection, but can be disabled by setting the following option to false:
- replaceFileInput: true,
- // The parameter name for the file form data (the request argument name).
- // If undefined or empty, the name property of the file input field is
- // used, or "files[]" if the file input name property is also empty,
- // can be a string or an array of strings:
- paramName: undefined,
- // By default, each file of a selection is uploaded using an individual
- // request for XHR type uploads. Set to false to upload file
- // selections in one request each:
- singleFileUploads: true,
- // To limit the number of files uploaded with one XHR request,
- // set the following option to an integer greater than 0:
- limitMultiFileUploads: undefined,
- // The following option limits the number of files uploaded with one
- // XHR request to keep the request size under or equal to the defined
- // limit in bytes:
- limitMultiFileUploadSize: undefined,
- // Multipart file uploads add a number of bytes to each uploaded file,
- // therefore the following option adds an overhead for each file used
- // in the limitMultiFileUploadSize configuration:
- limitMultiFileUploadSizeOverhead: 512,
- // Set the following option to true to issue all file upload requests
- // in a sequential order:
- sequentialUploads: false,
- // To limit the number of concurrent uploads,
- // set the following option to an integer greater than 0:
- limitConcurrentUploads: undefined,
- // Set the following option to true to force iframe transport uploads:
- forceIframeTransport: false,
- // Set the following option to the location of a redirect url on the
- // origin server, for cross-domain iframe transport uploads:
- redirect: undefined,
- // The parameter name for the redirect url, sent as part of the form
- // data and set to 'redirect' if this option is empty:
- redirectParamName: undefined,
- // Set the following option to the location of a postMessage window,
- // to enable postMessage transport uploads:
- postMessage: undefined,
- // By default, XHR file uploads are sent as multipart/form-data.
- // The iframe transport is always using multipart/form-data.
- // Set to false to enable non-multipart XHR uploads:
- multipart: true,
- // To upload large files in smaller chunks, set the following option
- // to a preferred maximum chunk size. If set to 0, null or undefined,
- // or the browser does not support the required Blob API, files will
- // be uploaded as a whole.
- maxChunkSize: undefined,
- // When a non-multipart upload or a chunked multipart upload has been
- // aborted, this option can be used to resume the upload by setting
- // it to the size of the already uploaded bytes. This option is most
- // useful when modifying the options object inside of the "add" or
- // "send" callbacks, as the options are cloned for each file upload.
- uploadedBytes: undefined,
- // By default, failed (abort or error) file uploads are removed from the
- // global progress calculation. Set the following option to false to
- // prevent recalculating the global progress data:
- recalculateProgress: true,
- // Interval in milliseconds to calculate and trigger progress events:
- progressInterval: 100,
- // Interval in milliseconds to calculate progress bitrate:
- bitrateInterval: 500,
- // By default, uploads are started automatically when adding files:
- autoUpload: true,
- // By default, duplicate file names are expected to be handled on
- // the server-side. If this is not possible (e.g. when uploading
- // files directly to Amazon S3), the following option can be set to
- // an empty object or an object mapping existing filenames, e.g.:
- // { "image.jpg": true, "image (1).jpg": true }
- // If it is set, all files will be uploaded with unique filenames,
- // adding increasing number suffixes if necessary, e.g.:
- // "image (2).jpg"
- uniqueFilenames: undefined,
- // Error and info messages:
- messages: {
- uploadedBytes: 'Uploaded bytes exceed file size'
- },
- // Translation function, gets the message key to be translated
- // and an object with context specific data as arguments:
- i18n: function i18n(message, context) {
- // eslint-disable-next-line no-param-reassign
- message = this.messages[message] || message.toString();
- if (context) {
- $.each(context, function (key, value) {
- // eslint-disable-next-line no-param-reassign
- message = message.replace('{' + key + '}', value);
+ bus.$on('mediaToggleRequested', function (media) {
+ self.toggleSelectionOfMedia(media);
});
- }
- return message;
- },
- // Additional form data to be sent along with the file uploads can be set
- // using this option, which accepts an array of objects with name and
- // value properties, a function returning such an array, a FormData
- // object (for XHR file uploads), or a simple object.
- // The form of the first fileInput is given as parameter to the function:
- formData: function formData(form) {
- return form.serializeArray();
- },
- // The add callback is invoked as soon as files are added to the fileupload
- // widget (via file input selection, drag & drop, paste or add API call).
- // If the singleFileUploads option is enabled, this callback will be
- // called once for each file in the selection for XHR file uploads, else
- // once for each file selection.
- //
- // The upload starts when the submit method is invoked on the data parameter.
- // The data object contains a files property holding the added files
- // and allows you to override plugin options as well as define ajax settings.
- //
- // Listeners for this callback can also be bound the following way:
- // .on('fileuploadadd', func);
- //
- // data.submit() returns a Promise object and allows to attach additional
- // handlers using jQuery's Deferred callbacks:
- // data.submit().done(func).fail(func).always(func);
- add: function add(e, data) {
- if (e.isDefaultPrevented()) {
- return false;
- }
- if (data.autoUpload || data.autoUpload !== false && $(this).fileupload('option', 'autoUpload')) {
- data.process().done(function () {
- data.submit();
+ bus.$on('renameMediaRequested', function (media) {
+ self.renameMedia(media);
});
- }
- },
- // Other callbacks:
-
- // Callback for the submit event of each file upload:
- // submit: function (e, data) {}, // .on('fileuploadsubmit', func);
-
- // Callback for the start of each file upload request:
- // send: function (e, data) {}, // .on('fileuploadsend', func);
-
- // Callback for successful uploads:
- // done: function (e, data) {}, // .on('fileuploaddone', func);
-
- // Callback for failed (abort or error) uploads:
- // fail: function (e, data) {}, // .on('fileuploadfail', func);
-
- // Callback for completed (success, abort or error) requests:
- // always: function (e, data) {}, // .on('fileuploadalways', func);
-
- // Callback for upload progress events:
- // progress: function (e, data) {}, // .on('fileuploadprogress', func);
-
- // Callback for global upload progress events:
- // progressall: function (e, data) {}, // .on('fileuploadprogressall', func);
-
- // Callback for uploads start, equivalent to the global ajaxStart event:
- // start: function (e) {}, // .on('fileuploadstart', func);
-
- // Callback for uploads stop, equivalent to the global ajaxStop event:
- // stop: function (e) {}, // .on('fileuploadstop', func);
-
- // Callback for change events of the fileInput(s):
- // change: function (e, data) {}, // .on('fileuploadchange', func);
-
- // Callback for paste events to the pasteZone(s):
- // paste: function (e, data) {}, // .on('fileuploadpaste', func);
-
- // Callback for drop events of the dropZone(s):
- // drop: function (e, data) {}, // .on('fileuploaddrop', func);
-
- // Callback for dragover events of the dropZone(s):
- // dragover: function (e) {}, // .on('fileuploaddragover', func);
-
- // Callback before the start of each chunk upload request (before form data initialization):
- // chunkbeforesend: function (e, data) {}, // .on('fileuploadchunkbeforesend', func);
-
- // Callback for the start of each chunk upload request:
- // chunksend: function (e, data) {}, // .on('fileuploadchunksend', func);
-
- // Callback for successful chunk uploads:
- // chunkdone: function (e, data) {}, // .on('fileuploadchunkdone', func);
-
- // Callback for failed (abort or error) chunk uploads:
- // chunkfail: function (e, data) {}, // .on('fileuploadchunkfail', func);
-
- // Callback for completed (success, abort or error) chunk upload requests:
- // chunkalways: function (e, data) {}, // .on('fileuploadchunkalways', func);
-
- // The plugin options are used as settings object for the ajax calls.
- // The following are jQuery ajax settings required for the file uploads:
- processData: false,
- contentType: false,
- cache: false,
- timeout: 0
- },
- // jQuery versions before 1.8 require promise.pipe if the return value is
- // used, as promise.then in older versions has a different behavior, see:
- // https://blog.jquery.com/2012/08/09/jquery-1-8-released/
- // https://bugs.jquery.com/ticket/11010
- // https://github.com/blueimp/jQuery-File-Upload/pull/3435
- _promisePipe: function () {
- var parts = $.fn.jquery.split('.');
- return Number(parts[0]) > 1 || Number(parts[1]) > 7 ? 'then' : 'pipe';
- }(),
- // A list of options that require reinitializing event listeners and/or
- // special initialization code:
- _specialOptions: ['fileInput', 'dropZone', 'pasteZone', 'multipart', 'forceIframeTransport'],
- _blobSlice: $.support.blobSlice && function () {
- var slice = this.slice || this.webkitSlice || this.mozSlice;
- return slice.apply(this, arguments);
- },
- _BitrateTimer: function _BitrateTimer() {
- this.timestamp = Date.now ? Date.now() : new Date().getTime();
- this.loaded = 0;
- this.bitrate = 0;
- this.getBitrate = function (now, loaded, interval) {
- var timeDiff = now - this.timestamp;
- if (!this.bitrate || !interval || timeDiff > interval) {
- this.bitrate = (loaded - this.loaded) * (1000 / timeDiff) * 8;
- this.loaded = loaded;
- this.timestamp = now;
- }
- return this.bitrate;
- };
- },
- _isXHRUpload: function _isXHRUpload(options) {
- return !options.forceIframeTransport && (!options.multipart && $.support.xhrFileUpload || $.support.xhrFormDataFileUpload);
- },
- _getFormData: function _getFormData(options) {
- var formData;
- if ($.type(options.formData) === 'function') {
- return options.formData(options.form);
- }
- if ($.isArray(options.formData)) {
- return options.formData;
- }
- if ($.type(options.formData) === 'object') {
- formData = [];
- $.each(options.formData, function (name, value) {
- formData.push({
- name: name,
- value: value
+ bus.$on('deleteMediaRequested', function (media) {
+ self.deleteMediaItem(media);
});
- });
- return formData;
- }
- return [];
- },
- _getTotal: function _getTotal(files) {
- var total = 0;
- $.each(files, function (index, file) {
- total += file.size || 1;
- });
- return total;
- },
- _initProgressObject: function _initProgressObject(obj) {
- var progress = {
- loaded: 0,
- total: 0,
- bitrate: 0
- };
- if (obj._progress) {
- $.extend(obj._progress, progress);
- } else {
- obj._progress = progress;
- }
- },
- _initResponseObject: function _initResponseObject(obj) {
- var prop;
- if (obj._response) {
- for (prop in obj._response) {
- if (Object.prototype.hasOwnProperty.call(obj._response, prop)) {
- delete obj._response[prop];
+ bus.$on('mediaDragStartRequested', function (media, e) {
+ self.handleDragStart(media, e);
+ });
+
+ // handler for pager events
+ bus.$on('pagerEvent', function (itemsInPage) {
+ self.itemsInPage = itemsInPage;
+ self.selectedMedias = [];
+ });
+ if (!localStorage.getItem('mediaApplicationPrefs')) {
+ self.selectedFolder = _root;
+ return;
}
- }
- } else {
- obj._response = {};
- }
- },
- _onProgress: function _onProgress(e, data) {
- if (e.lengthComputable) {
- var now = Date.now ? Date.now() : new Date().getTime(),
- loaded;
- if (data._time && data.progressInterval && now - data._time < data.progressInterval && e.loaded !== e.total) {
- return;
- }
- data._time = now;
- loaded = Math.floor(e.loaded / e.total * (data.chunkSize || data._progress.total)) + (data.uploadedBytes || 0);
- // Add the difference from the previously loaded state
- // to the global loaded counter:
- this._progress.loaded += loaded - data._progress.loaded;
- this._progress.bitrate = this._bitrateTimer.getBitrate(now, this._progress.loaded, data.bitrateInterval);
- data._progress.loaded = data.loaded = loaded;
- data._progress.bitrate = data.bitrate = data._bitrateTimer.getBitrate(now, loaded, data.bitrateInterval);
- // Trigger a custom progress event with a total data property set
- // to the file size(s) of the current upload and a loaded data
- // property calculated accordingly:
- this._trigger('progress', $.Event('progress', {
- delegatedEvent: e
- }), data);
- // Trigger a global progress event for all current file uploads,
- // including ajax calls queued for sequential file uploads:
- this._trigger('progressall', $.Event('progressall', {
- delegatedEvent: e
- }), this._progress);
- }
- },
- _initProgressListener: function _initProgressListener(options) {
- var that = this,
- xhr = options.xhr ? options.xhr() : $.ajaxSettings.xhr();
- // Access to the native XHR object is required to add event listeners
- // for the upload progress event:
- if (xhr.upload) {
- $(xhr.upload).on('progress', function (e) {
- var oe = e.originalEvent;
- // Make sure the progress event properties get copied over:
- e.lengthComputable = oe.lengthComputable;
- e.loaded = oe.loaded;
- e.total = oe.total;
- that._onProgress(e, options);
- });
- options.xhr = function () {
- return xhr;
- };
- }
- },
- _deinitProgressListener: function _deinitProgressListener(options) {
- var xhr = options.xhr ? options.xhr() : $.ajaxSettings.xhr();
- if (xhr.upload) {
- $(xhr.upload).off('progress');
- }
- },
- _isInstanceOf: function _isInstanceOf(type, obj) {
- // Cross-frame instanceof check
- return Object.prototype.toString.call(obj) === '[object ' + type + ']';
- },
- _getUniqueFilename: function _getUniqueFilename(name, map) {
- // eslint-disable-next-line no-param-reassign
- name = String(name);
- if (map[name]) {
- // eslint-disable-next-line no-param-reassign
- name = name.replace(/(?: \(([\d]+)\))?(\.[^.]+)?$/, function (_, p1, p2) {
- var index = p1 ? Number(p1) + 1 : 1;
- var ext = p2 || '';
- return ' (' + index + ')' + ext;
- });
- return this._getUniqueFilename(name, map);
- }
- map[name] = true;
- return name;
- },
- _initXHRData: function _initXHRData(options) {
- var that = this,
- formData,
- file = options.files[0],
- // Ignore non-multipart setting if not supported:
- multipart = options.multipart || !$.support.xhrFileUpload,
- paramName = $.type(options.paramName) === 'array' ? options.paramName[0] : options.paramName;
- options.headers = $.extend({}, options.headers);
- if (options.contentRange) {
- options.headers['Content-Range'] = options.contentRange;
- }
- if (!multipart || options.blob || !this._isInstanceOf('File', file)) {
- options.headers['Content-Disposition'] = 'attachment; filename="' + encodeURI(file.uploadName || file.name) + '"';
- }
- if (!multipart) {
- options.contentType = file.type || 'application/octet-stream';
- options.data = options.blob || file;
- } else if ($.support.xhrFormDataFileUpload) {
- if (options.postMessage) {
- // window.postMessage does not allow sending FormData
- // objects, so we just add the File/Blob objects to
- // the formData array and let the postMessage window
- // create the FormData object out of this array:
- formData = this._getFormData(options);
- if (options.blob) {
- formData.push({
- name: paramName,
- value: options.blob
- });
- } else {
- $.each(options.files, function (index, file) {
- formData.push({
- name: $.type(options.paramName) === 'array' && options.paramName[index] || paramName,
- value: file
- });
+ self.currentPrefs = JSON.parse(localStorage.getItem('mediaApplicationPrefs'));
+ },
+ computed: {
+ isHome: function isHome() {
+ return this.selectedFolder == _root;
+ },
+ parents: function parents() {
+ var p = [];
+ parentFolder = this.selectedFolder;
+ while (parentFolder && parentFolder.path != '') {
+ p.unshift(parentFolder);
+ parentFolder = parentFolder.parent;
+ }
+ return p;
+ },
+ root: function root() {
+ return _root;
+ },
+ filteredMediaItems: function filteredMediaItems() {
+ var self = this;
+ self.selectedMedias = [];
+ var filtered = self.mediaItems.filter(function (item) {
+ return item.name.toLowerCase().indexOf(self.mediaFilter.toLowerCase()) > -1;
});
+ switch (self.sortBy) {
+ case 'size':
+ filtered.sort(function (a, b) {
+ return self.sortAsc ? a.size - b.size : b.size - a.size;
+ });
+ break;
+ case 'mime':
+ filtered.sort(function (a, b) {
+ return self.sortAsc ? a.mime.toLowerCase().localeCompare(b.mime.toLowerCase()) : b.mime.toLowerCase().localeCompare(a.mime.toLowerCase());
+ });
+ break;
+ case 'lastModify':
+ filtered.sort(function (a, b) {
+ return self.sortAsc ? a.lastModify - b.lastModify : b.lastModify - a.lastModify;
+ });
+ break;
+ default:
+ filtered.sort(function (a, b) {
+ return self.sortAsc ? a.name.toLowerCase().localeCompare(b.name.toLowerCase()) : b.name.toLowerCase().localeCompare(a.name.toLowerCase());
+ });
+ }
+ return filtered;
+ },
+ hiddenCount: function hiddenCount() {
+ var result = 0;
+ result = this.mediaItems.length - this.filteredMediaItems.length;
+ return result;
+ },
+ thumbSize: function thumbSize() {
+ return this.smallThumbs ? 100 : 240;
+ },
+ currentPrefs: {
+ get: function get() {
+ return {
+ smallThumbs: this.smallThumbs,
+ selectedFolder: this.selectedFolder,
+ gridView: this.gridView
+ };
+ },
+ set: function set(newPrefs) {
+ if (!newPrefs) {
+ return;
+ }
+ this.smallThumbs = newPrefs.smallThumbs;
+ this.selectedFolder = newPrefs.selectedFolder;
+ this.gridView = newPrefs.gridView;
+ }
}
- } else {
- if (that._isInstanceOf('FormData', options.formData)) {
- formData = options.formData;
- } else {
- formData = new FormData();
- $.each(this._getFormData(options), function (index, field) {
- formData.append(field.name, field.value);
+ },
+ watch: {
+ currentPrefs: function currentPrefs(newPrefs) {
+ localStorage.setItem('mediaApplicationPrefs', JSON.stringify(newPrefs));
+ },
+ selectedFolder: function selectedFolder(newFolder) {
+ this.mediaFilter = '';
+ this.selectedFolder = newFolder;
+ this.loadFolder(newFolder);
+ }
+ },
+ mounted: function mounted() {
+ this.$refs.rootFolder.toggle();
+ },
+ methods: {
+ uploadUrl: function uploadUrl() {
+ if (!this.selectedFolder) {
+ return null;
+ }
+ var urlValue = $('#uploadFiles').val();
+ return urlValue + (urlValue.indexOf('?') == -1 ? '?' : '&') + "path=" + encodeURIComponent(this.selectedFolder.path);
+ },
+ selectRoot: function selectRoot() {
+ this.selectedFolder = this.root;
+ },
+ loadFolder: function loadFolder(folder) {
+ this.errors = [];
+ this.selectedMedias = [];
+ var self = this;
+ var mediaUrl = $('#getMediaItemsUrl').val();
+ console.log(folder.path);
+ $.ajax({
+ url: mediaUrl + (mediaUrl.indexOf('?') == -1 ? '?' : '&') + "path=" + encodeURIComponent(folder.path),
+ method: 'GET',
+ success: function success(data) {
+ data.forEach(function (item) {
+ item.open = false;
+ });
+ self.mediaItems = data;
+ self.selectedMedias = [];
+ self.sortBy = '';
+ self.sortAsc = true;
+ },
+ error: function error(_error) {
+ console.log('error loading folder:' + folder.path);
+ self.selectRoot();
+ }
+ });
+ },
+ selectAll: function selectAll() {
+ this.selectedMedias = [];
+ for (var i = 0; i < this.filteredMediaItems.length; i++) {
+ this.selectedMedias.push(this.filteredMediaItems[i]);
+ }
+ },
+ unSelectAll: function unSelectAll() {
+ this.selectedMedias = [];
+ },
+ invertSelection: function invertSelection() {
+ var temp = [];
+ for (var i = 0; i < this.filteredMediaItems.length; i++) {
+ if (this.isMediaSelected(this.filteredMediaItems[i]) == false) {
+ temp.push(this.filteredMediaItems[i]);
+ }
+ }
+ this.selectedMedias = temp;
+ },
+ toggleSelectionOfMedia: function toggleSelectionOfMedia(media) {
+ if (this.isMediaSelected(media) == true) {
+ this.selectedMedias.splice(this.selectedMedias.indexOf(media), 1);
+ } else {
+ this.selectedMedias.push(media);
+ }
+ },
+ isMediaSelected: function isMediaSelected(media) {
+ var result = this.selectedMedias.some(function (element, index, array) {
+ return element.url.toLowerCase() === media.url.toLowerCase();
});
- }
- if (options.blob) {
- formData.append(paramName, options.blob, file.uploadName || file.name);
- } else {
- $.each(options.files, function (index, file) {
- // This check allows the tests to run with
- // dummy objects:
- if (that._isInstanceOf('File', file) || that._isInstanceOf('Blob', file)) {
- var fileName = file.uploadName || file.name;
- if (options.uniqueFilenames) {
- fileName = that._getUniqueFilename(fileName, options.uniqueFilenames);
+ return result;
+ },
+ deleteFolder: function deleteFolder() {
+ var folder = this.selectedFolder;
+ var self = this;
+ // The root folder can't be deleted
+ if (folder == this.root.model) {
+ return;
+ }
+ confirmDialog(_objectSpread(_objectSpread({}, $("#deleteFolder").data()), {}, {
+ callback: function callback(resp) {
+ if (resp) {
+ $.ajax({
+ url: $('#deleteFolderUrl').val() + "?path=" + encodeURIComponent(folder.path),
+ method: 'POST',
+ data: {
+ __RequestVerificationToken: $("input[name='__RequestVerificationToken']").val()
+ },
+ success: function success(data) {
+ bus.$emit('deleteFolder', folder);
+ },
+ error: function error(_error2) {
+ console.error(_error2.responseText);
+ }
+ });
}
- formData.append($.type(options.paramName) === 'array' && options.paramName[index] || paramName, file, fileName);
}
- });
- }
- }
- options.data = formData;
- }
- // Blob reference is not needed anymore, free memory:
- options.blob = null;
- },
- _initIframeSettings: function _initIframeSettings(options) {
- var targetHost = $('').prop('href', options.url).prop('host');
- // Setting the dataType to iframe enables the iframe transport:
- options.dataType = 'iframe ' + (options.dataType || '');
- // The iframe transport accepts a serialized array as form data:
- options.formData = this._getFormData(options);
- // Add redirect url to form data on cross-domain uploads:
- if (options.redirect && targetHost && targetHost !== location.host) {
- options.formData.push({
- name: options.redirectParamName || 'redirect',
- value: options.redirect
- });
- }
- },
- _initDataSettings: function _initDataSettings(options) {
- if (this._isXHRUpload(options)) {
- if (!this._chunkedUpload(options, true)) {
- if (!options.data) {
- this._initXHRData(options);
- }
- this._initProgressListener(options);
- }
- if (options.postMessage) {
- // Setting the dataType to postmessage enables the
- // postMessage transport:
- options.dataType = 'postmessage ' + (options.dataType || '');
- }
- } else {
- this._initIframeSettings(options);
- }
- },
- _getParamName: function _getParamName(options) {
- var fileInput = $(options.fileInput),
- paramName = options.paramName;
- if (!paramName) {
- paramName = [];
- fileInput.each(function () {
- var input = $(this),
- name = input.prop('name') || 'files[]',
- i = (input.prop('files') || [1]).length;
- while (i) {
- paramName.push(name);
- i -= 1;
- }
- });
- if (!paramName.length) {
- paramName = [fileInput.prop('name') || 'files[]'];
- }
- } else if (!$.isArray(paramName)) {
- paramName = [paramName];
- }
- return paramName;
- },
- _initFormSettings: function _initFormSettings(options) {
- // Retrieve missing options from the input field and the
- // associated form, if available:
- if (!options.form || !options.form.length) {
- options.form = $(options.fileInput.prop('form'));
- // If the given file input doesn't have an associated form,
- // use the default widget file input's form:
- if (!options.form.length) {
- options.form = $(this.options.fileInput.prop('form'));
- }
- }
- options.paramName = this._getParamName(options);
- if (!options.url) {
- options.url = options.form.prop('action') || location.href;
- }
- // The HTTP request method must be "POST" or "PUT":
- options.type = (options.type || $.type(options.form.prop('method')) === 'string' && options.form.prop('method') || '').toUpperCase();
- if (options.type !== 'POST' && options.type !== 'PUT' && options.type !== 'PATCH') {
- options.type = 'POST';
- }
- if (!options.formAcceptCharset) {
- options.formAcceptCharset = options.form.attr('accept-charset');
- }
- },
- _getAJAXSettings: function _getAJAXSettings(data) {
- var options = $.extend({}, this.options, data);
- this._initFormSettings(options);
- this._initDataSettings(options);
- return options;
- },
- // jQuery 1.6 doesn't provide .state(),
- // while jQuery 1.8+ removed .isRejected() and .isResolved():
- _getDeferredState: function _getDeferredState(deferred) {
- if (deferred.state) {
- return deferred.state();
- }
- if (deferred.isResolved()) {
- return 'resolved';
- }
- if (deferred.isRejected()) {
- return 'rejected';
- }
- return 'pending';
- },
- // Maps jqXHR callbacks to the equivalent
- // methods of the given Promise object:
- _enhancePromise: function _enhancePromise(promise) {
- promise.success = promise.done;
- promise.error = promise.fail;
- promise.complete = promise.always;
- return promise;
- },
- // Creates and returns a Promise object enhanced with
- // the jqXHR methods abort, success, error and complete:
- _getXHRPromise: function _getXHRPromise(resolveOrReject, context, args) {
- var dfd = $.Deferred(),
- promise = dfd.promise();
- // eslint-disable-next-line no-param-reassign
- context = context || this.options.context || promise;
- if (resolveOrReject === true) {
- dfd.resolveWith(context, args);
- } else if (resolveOrReject === false) {
- dfd.rejectWith(context, args);
- }
- promise.abort = dfd.promise;
- return this._enhancePromise(promise);
- },
- // Adds convenience methods to the data callback argument:
- _addConvenienceMethods: function _addConvenienceMethods(e, data) {
- var that = this,
- getPromise = function getPromise(args) {
- return $.Deferred().resolveWith(that, args).promise();
- };
- data.process = function (resolveFunc, rejectFunc) {
- if (resolveFunc || rejectFunc) {
- data._processQueue = this._processQueue = (this._processQueue || getPromise([this]))[that._promisePipe](function () {
- if (data.errorThrown) {
- return $.Deferred().rejectWith(that, [data]).promise();
+ }));
+ },
+ createFolder: function createFolder() {
+ $('#createFolderModal-errors').empty();
+ var modal = bootstrap.Modal.getOrCreateInstance($('#createFolderModal'));
+ modal.show();
+ $('#createFolderModal .modal-body input').val('').focus();
+ },
+ renameMedia: function renameMedia(media) {
+ $('#renameMediaModal-errors').empty();
+ var modal = bootstrap.Modal.getOrCreateInstance($('#renameMediaModal'));
+ modal.show();
+ $('#old-item-name').val(media.name);
+ $('#renameMediaModal .modal-body input').val(media.name).focus();
+ },
+ selectAndDeleteMedia: function selectAndDeleteMedia(media) {
+ this.deleteMedia();
+ },
+ deleteMediaList: function deleteMediaList() {
+ var mediaList = this.selectedMedias;
+ var self = this;
+ if (mediaList.length < 1) {
+ return;
+ }
+ confirmDialog(_objectSpread(_objectSpread({}, $("#deleteMedia").data()), {}, {
+ callback: function callback(resp) {
+ if (resp) {
+ var paths = [];
+ for (var i = 0; i < mediaList.length; i++) {
+ paths.push(mediaList[i].mediaPath);
+ }
+ $.ajax({
+ url: $('#deleteMediaListUrl').val(),
+ method: 'POST',
+ data: {
+ __RequestVerificationToken: $("input[name='__RequestVerificationToken']").val(),
+ paths: paths
+ },
+ success: function success(data) {
+ for (var i = 0; i < self.selectedMedias.length; i++) {
+ var index = self.mediaItems && self.mediaItems.indexOf(self.selectedMedias[i]);
+ if (index > -1) {
+ self.mediaItems.splice(index, 1);
+ bus.$emit('mediaDeleted', self.selectedMedias[i]);
+ }
+ }
+ self.selectedMedias = [];
+ },
+ error: function error(_error3) {
+ console.error(_error3.responseText);
+ }
+ });
+ }
+ }
+ }));
+ },
+ deleteMediaItem: function deleteMediaItem(media) {
+ var self = this;
+ if (!media) {
+ return;
+ }
+ confirmDialog(_objectSpread(_objectSpread({}, $("#deleteMedia").data()), {}, {
+ callback: function callback(resp) {
+ if (resp) {
+ $.ajax({
+ url: $('#deleteMediaUrl').val() + "?path=" + encodeURIComponent(media.mediaPath),
+ method: 'POST',
+ data: {
+ __RequestVerificationToken: $("input[name='__RequestVerificationToken']").val()
+ },
+ success: function success(data) {
+ var index = self.mediaItems && self.mediaItems.indexOf(media);
+ if (index > -1) {
+ self.mediaItems.splice(index, 1);
+ bus.$emit('mediaDeleted', media);
+ }
+ //self.selectedMedia = null;
+ },
+
+ error: function error(_error4) {
+ console.error(_error4.responseText);
+ }
+ });
+ }
+ }
+ }));
+ },
+ handleDragStart: function handleDragStart(media, e) {
+ // first part of move media to folder:
+ // prepare the data that will be handled by the folder component on drop event
+ var mediaNames = [];
+ this.selectedMedias.forEach(function (item) {
+ mediaNames.push(item.name);
+ });
+
+ // in case the user drags an unselected item, we select it first
+ if (this.isMediaSelected(media) == false) {
+ mediaNames.push(media.name);
+ this.selectedMedias.push(media);
}
- return getPromise(arguments);
- })[that._promisePipe](resolveFunc, rejectFunc);
- }
- return this._processQueue || getPromise([this]);
- };
- data.submit = function () {
- if (this.state() !== 'pending') {
- data.jqXHR = this.jqXHR = that._trigger('submit', $.Event('submit', {
- delegatedEvent: e
- }), this) !== false && that._onSend(e, this);
- }
- return this.jqXHR || that._getXHRPromise();
- };
- data.abort = function () {
- if (this.jqXHR) {
- return this.jqXHR.abort();
+ e.dataTransfer.setData('mediaNames', JSON.stringify(mediaNames));
+ e.dataTransfer.setData('sourceFolder', this.selectedFolder.path);
+ e.dataTransfer.setDragImage(this.dragDropThumbnail, 10, 10);
+ e.dataTransfer.effectAllowed = 'move';
+ },
+ handleScrollWhileDrag: function handleScrollWhileDrag(e) {
+ if (e.clientY < 150) {
+ window.scrollBy(0, -10);
+ }
+ if (e.clientY > window.innerHeight - 100) {
+ window.scrollBy(0, 10);
+ }
+ },
+ changeSort: function changeSort(newSort) {
+ if (this.sortBy == newSort) {
+ this.sortAsc = !this.sortAsc;
+ } else {
+ this.sortAsc = true;
+ this.sortBy = newSort;
+ }
+ }
}
- this.errorThrown = 'abort';
- that._trigger('fail', null, this);
- return that._getXHRPromise(false);
- };
- data.state = function () {
- if (this.jqXHR) {
- return that._getDeferredState(this.jqXHR);
+ });
+ $('#create-folder-name').keypress(function (e) {
+ var key = e.which;
+ if (key == 13) {
+ // the enter key code
+ $('#modalFooterOk').click();
+ return false;
}
- if (this._processQueue) {
- return that._getDeferredState(this._processQueue);
+ });
+ $('#modalFooterOk').on('click', function (e) {
+ var name = $('#create-folder-name').val();
+ if (name === "") {
+ return;
}
- };
- data.processing = function () {
- return !this.jqXHR && this._processQueue && that._getDeferredState(this._processQueue) === 'pending';
- };
- data.progress = function () {
- return this._progress;
- };
- data.response = function () {
- return this._response;
- };
- },
- // Parses the Range header from the server response
- // and returns the uploaded bytes:
- _getUploadedBytes: function _getUploadedBytes(jqXHR) {
- var range = jqXHR.getResponseHeader('Range'),
- parts = range && range.split('-'),
- upperBytesPos = parts && parts.length > 1 && parseInt(parts[1], 10);
- return upperBytesPos && upperBytesPos + 1;
- },
- // Uploads a file in multiple, sequential requests
- // by splitting the file up in multiple blob chunks.
- // If the second parameter is true, only tests if the file
- // should be uploaded in chunks, but does not invoke any
- // upload requests:
- _chunkedUpload: function _chunkedUpload(options, testOnly) {
- options.uploadedBytes = options.uploadedBytes || 0;
- var that = this,
- file = options.files[0],
- fs = file.size,
- ub = options.uploadedBytes,
- mcs = options.maxChunkSize || fs,
- slice = this._blobSlice,
- dfd = $.Deferred(),
- promise = dfd.promise(),
- jqXHR,
- _upload;
- if (!(this._isXHRUpload(options) && slice && (ub || ($.type(mcs) === 'function' ? mcs(options) : mcs) < fs)) || options.data) {
- return false;
- }
- if (testOnly) {
- return true;
- }
- if (ub >= fs) {
- file.error = options.i18n('uploadedBytes');
- return this._getXHRPromise(false, options.context, [null, 'error', file.error]);
- }
- // The chunk upload method:
- _upload = function upload() {
- // Clone the options object for each chunk upload:
- var o = $.extend({}, options),
- currentLoaded = o._progress.loaded;
- o.blob = slice.call(file, ub, ub + ($.type(mcs) === 'function' ? mcs(o) : mcs), file.type);
- // Store the current chunk size, as the blob itself
- // will be dereferenced after data processing:
- o.chunkSize = o.blob.size;
- // Expose the chunk bytes position range:
- o.contentRange = 'bytes ' + ub + '-' + (ub + o.chunkSize - 1) + '/' + fs;
- // Trigger chunkbeforesend to allow form data to be updated for this chunk
- that._trigger('chunkbeforesend', null, o);
- // Process the upload data (the blob and potential form data):
- that._initXHRData(o);
- // Add progress listeners for this chunk upload:
- that._initProgressListener(o);
- jqXHR = (that._trigger('chunksend', null, o) !== false && $.ajax(o) || that._getXHRPromise(false, o.context)).done(function (result, textStatus, jqXHR) {
- ub = that._getUploadedBytes(jqXHR) || ub + o.chunkSize;
- // Create a progress event if no final progress event
- // with loaded equaling total has been triggered
- // for this chunk:
- if (currentLoaded + o.chunkSize - o._progress.loaded) {
- that._onProgress($.Event('progress', {
- lengthComputable: true,
- loaded: ub - o.uploadedBytes,
- total: ub - o.uploadedBytes
- }), o);
- }
- options.uploadedBytes = o.uploadedBytes = ub;
- o.result = result;
- o.textStatus = textStatus;
- o.jqXHR = jqXHR;
- that._trigger('chunkdone', null, o);
- that._trigger('chunkalways', null, o);
- if (ub < fs) {
- // File upload not yet complete,
- // continue with the next chunk:
- _upload();
- } else {
- dfd.resolveWith(o.context, [result, textStatus, jqXHR]);
+ $.ajax({
+ url: $('#createFolderUrl').val() + "?path=" + encodeURIComponent(mediaApp.selectedFolder.path) + "&name=" + encodeURIComponent(name),
+ method: 'POST',
+ data: {
+ __RequestVerificationToken: $("input[name='__RequestVerificationToken']").val()
+ },
+ success: function success(data) {
+ bus.$emit('addFolder', mediaApp.selectedFolder, data);
+ var modal = bootstrap.Modal.getOrCreateInstance($('#createFolderModal'));
+ modal.hide();
+ },
+ error: function error(_error5) {
+ $('#createFolderModal-errors').empty();
+ var errorMessage = JSON.parse(_error5.responseText).value;
+ $('').text(errorMessage).appendTo($('#createFolderModal-errors'));
}
- }).fail(function (jqXHR, textStatus, errorThrown) {
- o.jqXHR = jqXHR;
- o.textStatus = textStatus;
- o.errorThrown = errorThrown;
- that._trigger('chunkfail', null, o);
- that._trigger('chunkalways', null, o);
- dfd.rejectWith(o.context, [jqXHR, textStatus, errorThrown]);
- }).always(function () {
- that._deinitProgressListener(o);
});
- };
- this._enhancePromise(promise);
- promise.abort = function () {
- return jqXHR.abort();
- };
- _upload();
- return promise;
- },
- _beforeSend: function _beforeSend(e, data) {
- if (this._active === 0) {
- // the start callback is triggered when an upload starts
- // and no other uploads are currently running,
- // equivalent to the global ajaxStart event:
- this._trigger('start');
- // Set timer for global bitrate progress calculation:
- this._bitrateTimer = new this._BitrateTimer();
- // Reset the global progress values:
- this._progress.loaded = this._progress.total = 0;
- this._progress.bitrate = 0;
+ });
+ $('#renameMediaModalFooterOk').on('click', function (e) {
+ var newName = $('#new-item-name').val();
+ var oldName = $('#old-item-name').val();
+ if (newName === "") {
+ return;
+ }
+ var currentFolder = mediaApp.selectedFolder.path + "/";
+ if (currentFolder === "/") {
+ currentFolder = "";
+ }
+ var newPath = currentFolder + newName;
+ var oldPath = currentFolder + oldName;
+ if (newPath.toLowerCase() === oldPath.toLowerCase()) {
+ var modal = bootstrap.Modal.getOrCreateInstance($('#renameMediaModal'));
+ modal.hide();
+ return;
+ }
+ $.ajax({
+ url: $('#renameMediaUrl').val() + "?oldPath=" + encodeURIComponent(oldPath) + "&newPath=" + encodeURIComponent(newPath),
+ method: 'POST',
+ data: {
+ __RequestVerificationToken: $("input[name='__RequestVerificationToken']").val()
+ },
+ success: function success(data) {
+ var modal = bootstrap.Modal.getOrCreateInstance($('#renameMediaModal'));
+ modal.hide();
+ bus.$emit('mediaRenamed', newName, newPath, oldPath, data.newUrl);
+ },
+ error: function error(_error6) {
+ $('#renameMediaModal-errors').empty();
+ var errorMessage = JSON.parse(_error6.responseText).value;
+ $('').text(errorMessage).appendTo($('#renameMediaModal-errors'));
+ }
+ });
+ });
+ if (displayMediaApplication) {
+ document.getElementById('mediaApp').style.display = "";
}
- // Make sure the container objects for the .response() and
- // .progress() methods on the data object are available
- // and reset to their initial state:
- this._initResponseObject(data);
- this._initProgressObject(data);
- data._progress.loaded = data.loaded = data.uploadedBytes || 0;
- data._progress.total = data.total = this._getTotal(data.files) || 1;
- data._progress.bitrate = data.bitrate = 0;
- this._active += 1;
- // Initialize the global progress values:
- this._progress.loaded += data.loaded;
- this._progress.total += data.total;
+ $(document).trigger('mediaApp:ready');
},
- _onDone: function _onDone(result, textStatus, jqXHR, options) {
- var total = options._progress.total,
- response = options._response;
- if (options._progress.loaded < total) {
- // Create a progress event if no final progress event
- // with loaded equaling total has been triggered:
- this._onProgress($.Event('progress', {
- lengthComputable: true,
- loaded: total,
- total: total
- }), options);
- }
- response.result = options.result = result;
- response.textStatus = options.textStatus = textStatus;
- response.jqXHR = options.jqXHR = jqXHR;
- this._trigger('done', null, options);
+ error: function error(_error7) {
+ console.error(_error7.responseText);
+ }
+ });
+}
+$(document).on('mediaApp:ready', function () {
+ var chunkedFileUploadId = randomUUID();
+ $('#fileupload').fileupload({
+ dropZone: $('#mediaApp'),
+ limitConcurrentUploads: 20,
+ dataType: 'json',
+ url: $('#uploadFiles').val(),
+ maxChunkSize: Number($('#maxUploadChunkSize').val() || 0),
+ formData: function formData() {
+ var antiForgeryToken = $("input[name=__RequestVerificationToken]").val();
+ return [{
+ name: 'path',
+ value: mediaApp.selectedFolder.path
+ }, {
+ name: '__RequestVerificationToken',
+ value: antiForgeryToken
+ }, {
+ name: '__chunkedFileUploadId',
+ value: chunkedFileUploadId
+ }];
},
- _onFail: function _onFail(jqXHR, textStatus, errorThrown, options) {
- var response = options._response;
- if (options.recalculateProgress) {
- // Remove the failed (error or abort) file upload from
- // the global progress calculation:
- this._progress.loaded -= options._progress.loaded;
- this._progress.total -= options._progress.total;
- }
- response.jqXHR = options.jqXHR = jqXHR;
- response.textStatus = options.textStatus = textStatus;
- response.errorThrown = options.errorThrown = errorThrown;
- this._trigger('fail', null, options);
+ done: function done(e, data) {
+ $.each(data.result.files, function (index, file) {
+ if (!file.error) {
+ mediaApp.mediaItems.push(file);
+ }
+ });
+ }
+ }).on('fileuploadchunkbeforesend', function (e, options) {
+ var file = options.files[0];
+ // Here we replace the blob with a File object to ensure the file name and others are preserved for the backend.
+ options.blob = new File([options.blob], file.name, {
+ type: file.type,
+ lastModified: file.lastModified
+ });
+ });
+});
+$(document).bind('dragover', function (e) {
+ var dt = e.originalEvent.dataTransfer;
+ if (dt.types && (dt.types.indexOf ? dt.types.indexOf('Files') != -1 : dt.types.contains('Files'))) {
+ var dropZone = $('#customdropzone'),
+ timeout = window.dropZoneTimeout;
+ if (timeout) {
+ clearTimeout(timeout);
+ } else {
+ dropZone.addClass('in');
+ }
+ var hoveredDropZone = $(e.target).closest(dropZone);
+ window.dropZoneTimeout = setTimeout(function () {
+ window.dropZoneTimeout = null;
+ dropZone.removeClass('in');
+ }, 100);
+ }
+});
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+// \
- {{ T.uploads }} \
- (Pending: {{ pendingCount }}) \
- ( {{ T.errors }}: {{ errorCount }} / {{ T.clearErrors }} ) \
- \
-
\
- \
-
\
- \
-
\
- - \n
- \n
- \n \n\n \n
\n \n
\n
| {{ T.imageHeader }} | \n\n {{ T.nameHeader }}\n | \n \n {{ T.lastModifyHeader }} \n | \n \n \n {{ T.sizeHeader }}\n | \n \n \n {{ T.typeHeader }}\n | \n
|---|---|---|---|---|
| \n \n \n | \n \n \n {{ media.name }} \n \n \n | \n \n {{ printDateTime(media.lastModify) }} \n | \n \n {{ isNaN(media.size)? 0 : Math.round(media.size / 1024) }} KB \n | \n \n {{ media.mime }} \n | \n
\n \n \n
\n ",
+ props: {
+ sourceItems: Array
+ },
+ data: function data() {
+ return {
+ pageSize: 10,
+ pageSizeOptions: [10, 30, 50, 100],
+ current: 0,
+ T: {}
+ };
+ },
+ created: function created() {
+ var self = this;
+
+ // retrieving localized strings from view
+ self.T.pagerFirstButton = $('#t-pager-first-button').val();
+ self.T.pagerPreviousButton = $('#t-pager-previous-button').val();
+ self.T.pagerNextButton = $('#t-pager-next-button').val();
+ self.T.pagerLastButton = $('#t-pager-last-button').val();
+ self.T.pagerPageSizeLabel = $('#t-pager-page-size-label').val();
+ self.T.pagerPageLabel = $('#t-pager-page-label').val();
+ self.T.pagerTotalLabel = $('#t-pager-total-label').val();
+ },
+ methods: {
+ next: function next() {
+ this.current = this.current + 1;
+ },
+ previous: function previous() {
+ this.current = this.current - 1;
+ },
+ goFirst: function goFirst() {
+ this.current = 0;
+ },
+ goLast: function goLast() {
+ this.current = this.totalPages - 1;
+ },
+ goTo: function goTo(targetPage) {
+ this.current = targetPage;
+ }
+ },
+ computed: {
+ total: function total() {
+ return this.sourceItems ? this.sourceItems.length : 0;
+ },
+ totalPages: function totalPages() {
+ var pages = Math.ceil(this.total / this.pageSize);
+ return pages > 0 ? pages : 1;
+ },
+ isLastPage: function isLastPage() {
+ return this.current + 1 >= this.totalPages;
+ },
+ isFirstPage: function isFirstPage() {
+ return this.current === 0;
},
- _onPaste: function _onPaste(e) {
- var items = e.originalEvent && e.originalEvent.clipboardData && e.originalEvent.clipboardData.items,
- data = {
- files: []
- };
- if (items && items.length) {
- $.each(items, function (index, item) {
- var file = item.getAsFile && item.getAsFile();
- if (file) {
- data.files.push(file);
- }
- });
- if (this._trigger('paste', $.Event('paste', {
- delegatedEvent: e
- }), data) !== false) {
- this._onAdd(e, data);
- }
- }
+ canDoNext: function canDoNext() {
+ return !this.isLastPage;
},
- _onDrop: function _onDrop(e) {
- e.dataTransfer = e.originalEvent && e.originalEvent.dataTransfer;
- var that = this,
- dataTransfer = e.dataTransfer,
- data = {};
- if (dataTransfer && dataTransfer.files && dataTransfer.files.length) {
- e.preventDefault();
- this._getDroppedFiles(dataTransfer).always(function (files) {
- data.files = files;
- if (that._trigger('drop', $.Event('drop', {
- delegatedEvent: e
- }), data) !== false) {
- that._onAdd(e, data);
- }
- });
- }
+ canDoPrev: function canDoPrev() {
+ return !this.isFirstPage;
},
- _onDragOver: getDragHandler('dragover'),
- _onDragEnter: getDragHandler('dragenter'),
- _onDragLeave: getDragHandler('dragleave'),
- _initEventHandlers: function _initEventHandlers() {
- if (this._isXHRUpload(this.options)) {
- this._on(this.options.dropZone, {
- dragover: this._onDragOver,
- drop: this._onDrop,
- // event.preventDefault() on dragenter is required for IE10+:
- dragenter: this._onDragEnter,
- // dragleave is not required, but added for completeness:
- dragleave: this._onDragLeave
- });
- this._on(this.options.pasteZone, {
- paste: this._onPaste
- });
- }
- if ($.support.fileInput) {
- this._on(this.options.fileInput, {
- change: this._onChange
- });
- }
+ canDoFirst: function canDoFirst() {
+ return !this.isFirstPage;
},
- _destroyEventHandlers: function _destroyEventHandlers() {
- this._off(this.options.dropZone, 'dragenter dragleave dragover drop');
- this._off(this.options.pasteZone, 'paste');
- this._off(this.options.fileInput, 'change');
+ canDoLast: function canDoLast() {
+ return !this.isLastPage;
},
- _destroy: function _destroy() {
- this._destroyEventHandlers();
+ // this computed is only to have a central place where we detect changes and leverage Vue JS reactivity to raise our event.
+ // That event will be handled by the parent media app to display the items in the page.
+ // this logic will not run if the computed property is not used in the template. We use a dummy "data-computed-trigger" attribute for that.
+ itemsInCurrentPage: function itemsInCurrentPage() {
+ var start = this.pageSize * this.current;
+ var end = start + this.pageSize;
+ var result = this.sourceItems.slice(start, end);
+ bus.$emit('pagerEvent', result);
+ return result;
},
- _setOption: function _setOption(key, value) {
- var reinit = $.inArray(key, this._specialOptions) !== -1;
- if (reinit) {
- this._destroyEventHandlers();
- }
- this._super(key, value);
- if (reinit) {
- this._initSpecialOptions();
- this._initEventHandlers();
- }
+ pageLinks: function pageLinks() {
+ var links = [];
+ links.push(this.current + 1);
+
+ // Add 2 items before current
+ var beforeCurrent = this.current > 0 ? this.current : -1;
+ links.unshift(beforeCurrent);
+ var beforeBeforeCurrent = this.current > 1 ? this.current - 1 : -1;
+ links.unshift(beforeBeforeCurrent);
+
+ // Add 2 items after current
+ var afterCurrent = this.totalPages - this.current > 1 ? this.current + 2 : -1;
+ links.push(afterCurrent);
+ var afterAfterCurrent = this.totalPages - this.current > 2 ? this.current + 3 : -1;
+ links.push(afterAfterCurrent);
+ return links;
+ }
+ },
+ watch: {
+ sourceItems: function sourceItems() {
+ this.current = 0; // resetting current page after receiving a new list of unpaged items
},
- _initSpecialOptions: function _initSpecialOptions() {
- var options = this.options;
- if (options.fileInput === undefined) {
- options.fileInput = this.element.is('input[type="file"]') ? this.element : this.element.find('input[type="file"]');
- } else if (!(options.fileInput instanceof $)) {
- options.fileInput = $(options.fileInput);
- }
- if (!(options.dropZone instanceof $)) {
- options.dropZone = $(options.dropZone);
- }
- if (!(options.pasteZone instanceof $)) {
- options.pasteZone = $(options.pasteZone);
+
+ pageSize: function pageSize() {
+ this.current = 0;
+ }
+ }
+});
+// \n \n \n
\n ",
+ props: {
+ colname: String,
+ selectedcolname: String,
+ asc: Boolean
+ },
+ computed: {
+ isActive: function isActive() {
+ return this.colname.toLowerCase() == this.selectedcolname.toLowerCase();
+ }
+ }
+});
+function initializeAttachedMediaField(el, idOfUploadButton, uploadAction, mediaItemUrl, allowMultiple, allowMediaText, allowAnchors, tempUploadFolder, maxUploadChunkSize) {
+ var target = $(document.getElementById($(el).data('for')));
+ var initialPaths = target.data("init");
+ var mediaFieldEditor = $(el);
+ var idprefix = mediaFieldEditor.attr("id");
+ var mediaFieldApp;
+ mediaFieldApps.push(mediaFieldApp = new Vue({
+ el: mediaFieldEditor.get(0),
+ data: {
+ mediaItems: [],
+ selectedMedia: null,
+ smallThumbs: false,
+ idPrefix: idprefix,
+ initialized: false,
+ allowMediaText: allowMediaText,
+ backupMediaText: '',
+ allowAnchors: allowAnchors,
+ backupAnchor: null,
+ mediaTextmodal: null,
+ anchoringModal: null
+ },
+ created: function created() {
+ var self = this;
+ self.currentPrefs = JSON.parse(localStorage.getItem('mediaFieldPrefs'));
+ },
+ computed: {
+ paths: {
+ get: function get() {
+ var mediaPaths = [];
+ if (!this.initialized) {
+ return JSON.stringify(initialPaths);
+ }
+ this.mediaItems.forEach(function (x) {
+ if (x.mediaPath === 'not-found') {
+ return;
+ }
+ mediaPaths.push({
+ path: x.mediaPath,
+ isRemoved: x.isRemoved,
+ isNew: x.isNew,
+ mediaText: x.mediaText,
+ anchor: x.anchor,
+ attachedFileName: x.attachedFileName
+ });
+ });
+ return JSON.stringify(mediaPaths);
+ },
+ set: function set(values) {
+ var self = this;
+ var mediaPaths = values || [];
+ var signal = $.Deferred();
+ var items = [];
+ var length = 0;
+ mediaPaths.forEach(function (x, i) {
+ items.push({
+ name: ' ' + x.path,
+ mime: '',
+ mediaPath: '',
+ anchor: x.anchor,
+ attachedFileName: x.attachedFileName
+ }); // don't remove the space. Something different is needed or it wont react when the real name arrives.
+ promise = $.when(signal).done(function () {
+ $.ajax({
+ url: mediaItemUrl + "?path=" + encodeURIComponent(x.path),
+ method: 'GET',
+ success: function success(data) {
+ data.vuekey = data.name + i.toString(); // Because a unique key is required by Vue on v-for
+ data.mediaText = x.mediaText; // This value is not returned from the ajax call.
+ data.anchor = x.anchor; // This value is not returned from the ajax call.
+ data.attachedFileName = x.attachedFileName; // This value is not returned from the ajax call.
+ items.splice(i, 1, data);
+ if (items.length === ++length) {
+ items.forEach(function (x) {
+ self.mediaItems.push(x);
+ });
+ self.initialized = true;
+ }
+ },
+ error: function error(_error) {
+ console.log(JSON.stringify(_error));
+ items.splice(i, 1, {
+ name: x.path,
+ mime: '',
+ mediaPath: 'not-found',
+ mediaText: '',
+ anchor: {
+ x: 0.5,
+ y: 0.5
+ },
+ attachedFileName: x.attachedFileName
+ });
+ if (items.length === ++length) {
+ items.forEach(function (x) {
+ self.mediaItems.push(x);
+ });
+ self.initialized = true;
+ }
+ }
+ });
+ });
+ });
+ signal.resolve();
+ }
+ },
+ fileSize: function fileSize() {
+ return Math.round(this.selectedMedia.size / 1024);
+ },
+ canAddMedia: function canAddMedia() {
+ var nonRemovedMediaItems = [];
+ for (var i = 0; i < this.mediaItems.length; i++) {
+ if (!this.mediaItems[i].isRemoved) {
+ nonRemovedMediaItems.push(this.mediaItems[i]);
+ }
+ }
+ return nonRemovedMediaItems.length === 0 || nonRemovedMediaItems.length > 0 && allowMultiple;
+ },
+ thumbSize: function thumbSize() {
+ return this.smallThumbs ? 120 : 240;
+ },
+ currentPrefs: {
+ get: function get() {
+ return {
+ smallThumbs: this.smallThumbs
+ };
+ },
+ set: function set(newPrefs) {
+ if (!newPrefs) {
+ return;
+ }
+ this.smallThumbs = newPrefs.smallThumbs;
+ }
}
},
- _getRegExp: function _getRegExp(str) {
- var parts = str.split('/'),
- modifiers = parts.pop();
- parts.shift();
- return new RegExp(parts.join('/'), modifiers);
- },
- _isRegExpOption: function _isRegExpOption(key, value) {
- return key !== 'url' && $.type(value) === 'string' && /^\/.*\/[igm]{0,3}$/.test(value);
- },
- _initDataAttributes: function _initDataAttributes() {
- var that = this,
- options = this.options,
- data = this.element.data();
- // Initialize options set via HTML5 data-attributes:
- $.each(this.element[0].attributes, function (index, attr) {
- var key = attr.name.toLowerCase(),
- value;
- if (/^data-/.test(key)) {
- // Convert hyphen-ated key to camelCase:
- key = key.slice(5).replace(/-[a-z]/g, function (str) {
- return str.charAt(1).toUpperCase();
- });
- value = data[key];
- if (that._isRegExpOption(key, value)) {
- value = that._getRegExp(value);
+ mounted: function mounted() {
+ var self = this;
+ self.paths = initialPaths;
+ self.$on('selectAndDeleteMediaRequested', function (media) {
+ self.selectAndDeleteMedia(media);
+ });
+ self.$on('selectMediaRequested', function (media) {
+ self.selectMedia(media);
+ });
+ var selector = '#' + idOfUploadButton;
+ var editorId = mediaFieldEditor.attr('id');
+ var chunkedFileUploadId = randomUUID();
+ $(selector).fileupload({
+ limitConcurrentUploads: 20,
+ dropZone: $('#' + editorId),
+ dataType: 'json',
+ url: uploadAction,
+ maxChunkSize: maxUploadChunkSize,
+ add: function add(e, data) {
+ var count = data.files.length;
+ var i;
+ for (i = 0; i < count; i++) {
+ data.files[i].uploadName = self.getUniqueId() + data.files[i].name;
+ data.files[i].attachedFileName = data.files[i].name;
}
- options[key] = value;
+ data.submit();
+ },
+ formData: function formData() {
+ var antiForgeryToken = $("input[name=__RequestVerificationToken]").val();
+ return [{
+ name: 'path',
+ value: tempUploadFolder
+ }, {
+ name: '__RequestVerificationToken',
+ value: antiForgeryToken
+ }, {
+ name: '__chunkedFileUploadId',
+ value: chunkedFileUploadId
+ }];
+ },
+ done: function done(e, data) {
+ var newMediaItems = [];
+ var errormsg = "";
+ if (data.result.files.length > 0) {
+ for (var i = 0; i < data.result.files.length; i++) {
+ data.result.files[i].isNew = true;
+ //if error is defined probably the file type is not allowed
+ if (data.result.files[i].error === undefined || data.result.files[i].error === null) {
+ data.result.files[i].attachedFileName = data.files[i].attachedFileName;
+ newMediaItems.push(data.result.files[i]);
+ } else errormsg += data.result.files[i].error + "\n";
+ }
+ }
+ if (errormsg !== "") {
+ alert(errormsg);
+ return;
+ }
+ console.log(newMediaItems);
+ if (newMediaItems.length > 1 && allowMultiple === false) {
+ alert($('#onlyOneItemMessage').val());
+ mediaFieldApp.mediaItems.push(newMediaItems[0]);
+ mediaFieldApp.initialized = true;
+ } else {
+ mediaFieldApp.mediaItems = mediaFieldApp.mediaItems.concat(newMediaItems);
+ mediaFieldApp.initialized = true;
+ }
+ },
+ error: function error(jqXHR, textStatus, errorThrown) {
+ console.log('Error on upload.');
+ console.log(jqXHR);
+ console.log(textStatus);
+ console.log(errorThrown);
}
+ }).on('fileuploadchunkbeforesend', function (e, options) {
+ var file = options.files[0];
+ // Here we replace the blob with a File object to ensure the file name and others are preserved for the backend.
+ options.blob = new File([options.blob], file.name, {
+ type: file.type,
+ lastModified: file.lastModified
+ });
});
},
- _create: function _create() {
- this._initDataAttributes();
- this._initSpecialOptions();
- this._slots = [];
- this._sequence = this._getXHRPromise(true);
- this._sending = this._active = 0;
- this._initProgressObject(this);
- this._initEventHandlers();
- },
- // This method is exposed to the widget API and allows to query
- // the number of active uploads:
- active: function active() {
- return this._active;
- },
- // This method is exposed to the widget API and allows to query
- // the widget upload progress.
- // It returns an object with loaded, total and bitrate properties
- // for the running uploads:
- progress: function progress() {
- return this._progress;
- },
- // This method is exposed to the widget API and allows adding files
- // using the fileupload API. The data parameter accepts an object which
- // must have a files property and can contain additional options:
- // .fileupload('add', {files: filesList});
- add: function add(data) {
- var that = this;
- if (!data || this.options.disabled) {
- return;
- }
- if (data.fileInput && !data.files) {
- this._getFileInputFiles(data.fileInput).always(function (files) {
- data.files = files;
- that._onAdd(null, data);
+ methods: {
+ selectMedia: function selectMedia(media) {
+ this.selectedMedia = media;
+ },
+ getUniqueId: function getUniqueId() {
+ return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+ var r = Math.random() * 16 | 0,
+ v = c === 'x' ? r : r & 0x3 | 0x8;
+ return v.toString(16);
});
- } else {
- data.files = $.makeArray(data.files);
- this._onAdd(null, data);
+ },
+ removeSelected: function removeSelected(event) {
+ var removed = {};
+ if (this.selectedMedia) {
+ var index = this.mediaItems && this.mediaItems.indexOf(this.selectedMedia);
+ if (index > -1) {
+ removed = this.mediaItems[index];
+ removed.isRemoved = true;
+ //this.mediaItems.splice([index], 1, removed);
+ this.mediaItems.splice(index, 1);
+ }
+ } else {
+ // The remove button can also remove a unique media item
+ if (this.mediaItems.length === 1) {
+ removed = this.mediaItems[index];
+ removed.isRemoved = true;
+ //this.mediaItems.splice(0, 1, removed);
+ this.mediaItems.splice(0, 1);
+ }
+ }
+ this.selectedMedia = null;
+ },
+ showMediaTextModal: function showMediaTextModal(event) {
+ this.mediaTextModal = new bootstrap.Modal(this.$refs.mediaTextModal);
+ this.mediaTextModal.show();
+ this.backupMediaText = this.selectedMedia.mediaText;
+ },
+ cancelMediaTextModal: function cancelMediaTextModal(event) {
+ this.mediaTextModal.hide();
+ this.selectedMedia.mediaText = this.backupMediaText;
+ },
+ showAnchorModal: function showAnchorModal(event) {
+ this.anchoringModal = new bootstrap.Modal(this.$refs.anchoringModal);
+ this.anchoringModal.show();
+ // Cause a refresh to recalc heights.
+ this.selectedMedia.anchor = {
+ x: this.selectedMedia.anchor.x,
+ y: this.selectedMedia.anchor.y
+ };
+ this.backupAnchor = this.selectedMedia.anchor;
+ },
+ cancelAnchoringModal: function cancelAnchoringModal(event) {
+ this.anchoringModal.hide();
+ this.selectedMedia.anchor = this.backupAnchor;
+ },
+ resetAnchor: function resetAnchor(event) {
+ this.selectedMedia.anchor = {
+ x: 0.5,
+ y: 0.5
+ };
+ },
+ onAnchorDrop: function onAnchorDrop(event) {
+ var image = this.$refs.anchorImage;
+ this.selectedMedia.anchor = {
+ x: event.offsetX / image.clientWidth,
+ y: event.offsetY / image.clientHeight
+ };
+ },
+ anchorLeft: function anchorLeft() {
+ if (this.$refs.anchorImage && this.$refs.modalBody && this.selectedMedia) {
+ // When image is shrunk compare against the modal body.
+ var offset = (this.$refs.modalBody.clientWidth - this.$refs.anchorImage.clientWidth) / 2;
+ var position = this.selectedMedia.anchor.x * this.$refs.anchorImage.clientWidth + offset;
+ if (position < 17) {
+ // Adjust so the target doesn't show outside image.
+ position = 17;
+ } else {
+ position = position - 8; // Adjust to hit the mouse pointer.
+ }
+
+ return position + 'px';
+ } else {
+ return '0';
+ }
+ },
+ anchorTop: function anchorTop() {
+ if (this.$refs.anchorImage && this.selectedMedia) {
+ var position = this.selectedMedia.anchor.y * this.$refs.anchorImage.clientHeight;
+ if (position < 15) {
+ // Adjustment so the target doesn't show outside image.
+ position = 15;
+ } else {
+ position = position + 5; // Adjust to hit the mouse pointer.
+ }
+
+ return position + 'px';
+ } else {
+ return '0';
+ }
+ },
+ setAnchor: function setAnchor(event) {
+ var image = this.$refs.anchorImage;
+ this.selectedMedia.anchor = {
+ x: event.offsetX / image.clientWidth,
+ y: event.offsetY / image.clientHeight
+ };
+ },
+ addMediaFiles: function addMediaFiles(files) {
+ if (files.length > 1 && allowMultiple === false) {
+ alert($('#onlyOneItemMessage').val());
+ mediaFieldApp.mediaItems.push(files[0]);
+ mediaFieldApp.initialized = true;
+ } else {
+ mediaFieldApp.mediaItems = mediaFieldApp.mediaItems.concat(files);
+ mediaFieldApp.initialized = true;
+ }
+ },
+ selectAndDeleteMedia: function selectAndDeleteMedia(media) {
+ var self = this;
+ self.selectedMedia = media;
+ // setTimeout because sometimes
+ // removeSelected was called even before the media was set.
+ setTimeout(function () {
+ self.removeSelected();
+ }, 100);
}
},
- // This method is exposed to the widget API and allows sending files
- // using the fileupload API. The data parameter accepts an object which
- // must have a files or fileInput property and can contain additional options:
- // .fileupload('send', {files: filesList});
- // The method returns a Promise object for the file upload call.
- send: function send(data) {
- if (data && !this.options.disabled) {
- if (data.fileInput && !data.files) {
- var that = this,
- dfd = $.Deferred(),
- promise = dfd.promise(),
- jqXHR,
- aborted;
- promise.abort = function () {
- aborted = true;
- if (jqXHR) {
- return jqXHR.abort();
- }
- dfd.reject(null, 'abort', 'abort');
- return promise;
- };
- this._getFileInputFiles(data.fileInput).always(function (files) {
- if (aborted) {
- return;
- }
- if (!files.length) {
- dfd.reject();
- return;
- }
- data.files = files;
- jqXHR = that._onSend(null, data);
- jqXHR.then(function (result, textStatus, jqXHR) {
- dfd.resolve(result, textStatus, jqXHR);
- }, function (jqXHR, textStatus, errorThrown) {
- dfd.reject(jqXHR, textStatus, errorThrown);
- });
- });
- return this._enhancePromise(promise);
- }
- data.files = $.makeArray(data.files);
- if (data.files.length) {
- return this._onSend(null, data);
+ watch: {
+ mediaItems: {
+ deep: true,
+ handler: function handler() {
+ // Trigger preview rendering
+ setTimeout(function () {
+ $(document).trigger('contentpreview:render');
+ }, 100);
}
+ },
+ currentPrefs: function currentPrefs(newPrefs) {
+ localStorage.setItem('mediaFieldPrefs', JSON.stringify(newPrefs));
}
- return this._getXHRPromise(false, data && data.context);
}
- });
-});
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-/*
- * jQuery Iframe Transport Plugin
- * https://github.com/blueimp/jQuery-File-Upload
- *
- * Copyright 2011, Sebastian Tschan
- * https://blueimp.net
- *
- * Licensed under the MIT license:
- * https://opensource.org/licenses/MIT
- */
-
-/* global define, require */
-
-(function (factory) {
- 'use strict';
-
- if (typeof define === 'function' && define.amd) {
- // Register as an anonymous AMD module:
- define(['jquery'], factory);
- } else if ((typeof exports === "undefined" ? "undefined" : _typeof(exports)) === 'object') {
- // Node/CommonJS:
- factory(require('jquery'));
- } else {
- // Browser globals:
- factory(window.jQuery);
- }
-})(function ($) {
- 'use strict';
+ }));
+}
+// \
+ \
+ \
+ \
+ \
+ \
+ \
+
\
+ ',
+ data: function data() {
+ return {
+ T: {}
+ };
+ },
+ props: {
+ mediaItems: Array,
+ selectedMedia: Object,
+ thumbSize: Number,
+ idPrefix: String
+ },
+ created: function created() {
+ var self = this;
- // Helper variable to create unique names for the transport iframes:
- var counter = 0,
- jsonAPI = $,
- jsonParse = 'parseJSON';
- if ('JSON' in window && 'parse' in JSON) {
- jsonAPI = JSON;
- jsonParse = 'parse';
+ // retrieving localized strings from view
+ self.T.mediaNotFound = $('#t-media-not-found').val();
+ self.T.discardWarning = $('#t-discard-warning').val();
+ self.T.noImages = $('#t-no-images').val();
+ },
+ methods: {
+ selectAndDeleteMedia: function selectAndDeleteMedia(media) {
+ this.$parent.$emit('selectAndDeleteMediaRequested', media);
+ },
+ selectMedia: function selectMedia(media) {
+ this.$parent.$emit('selectMediaRequested', media);
+ },
+ buildMediaUrl: function buildMediaUrl(url, thumbSize) {
+ return url + (url.indexOf('?') == -1 ? '?' : '&') + 'width=' + thumbSize + '&height=' + thumbSize;
+ },
+ getfontAwesomeClassNameForFileName: function getfontAwesomeClassNameForFilename(filename, thumbsize) {
+ return getClassNameForFilename(filename) + ' ' + thumbsize;
+ }
}
+});
+function initializeMediaField(el, modalBodyElement, mediaItemUrl, allowMultiple, allowMediaText, allowAnchors) {
+ //BagPart create a script section without other DOM elements
+ if (el === null) return;
+ var target = $(document.getElementById($(el).data('for')));
+ var initialPaths = target.data("init");
+ var mediaFieldEditor = $(el);
+ var idprefix = mediaFieldEditor.attr("id");
+ var mediaFieldApp;
- // The iframe transport accepts four additional options:
- // options.fileInput: a jQuery collection of file input fields
- // options.paramName: the parameter name for the file form data,
- // overrides the name property of the file input field(s),
- // can be a string or an array of strings.
- // options.formData: an array of objects with name and value properties,
- // equivalent to the return data of .serializeArray(), e.g.:
- // [{name: 'a', value: 1}, {name: 'b', value: 2}]
- // options.initialIframeSrc: the URL of the initial iframe src,
- // by default set to "javascript:false;"
- $.ajaxTransport('iframe', function (options) {
- if (options.async) {
- // javascript:false as initial iframe src
- // prevents warning popups on HTTPS in IE6:
- // eslint-disable-next-line no-script-url
- var initialIframeSrc = options.initialIframeSrc || 'javascript:false;',
- form,
- iframe,
- addParamChar;
- return {
- send: function send(_, completeCallback) {
- form = $('');
- form.attr('accept-charset', options.formAcceptCharset);
- addParamChar = /\?/.test(options.url) ? '&' : '?';
- // XDomainRequest only supports GET and POST:
- if (options.type === 'DELETE') {
- options.url = options.url + addParamChar + '_method=DELETE';
- options.type = 'POST';
- } else if (options.type === 'PUT') {
- options.url = options.url + addParamChar + '_method=PUT';
- options.type = 'POST';
- } else if (options.type === 'PATCH') {
- options.url = options.url + addParamChar + '_method=PATCH';
- options.type = 'POST';
+ //when hide modal detach media app to avoid issue on BagPart
+ modalBodyElement.addEventListener('hidden.bs.modal', function (event) {
+ $("#mediaApp").appendTo('body');
+ $("#mediaApp").hide();
+ });
+ mediaFieldApps.push(mediaFieldApp = new Vue({
+ el: mediaFieldEditor.get(0),
+ data: {
+ mediaItems: [],
+ selectedMedia: null,
+ smallThumbs: false,
+ idPrefix: idprefix,
+ initialized: false,
+ allowMediaText: allowMediaText,
+ backupMediaText: '',
+ allowAnchors: allowAnchors,
+ backupAnchor: null,
+ mediaTextModal: null,
+ anchoringModal: null
+ },
+ created: function created() {
+ var self = this;
+ self.currentPrefs = JSON.parse(localStorage.getItem('mediaFieldPrefs'));
+ },
+ computed: {
+ paths: {
+ get: function get() {
+ var mediaPaths = [];
+ if (!this.initialized) {
+ return JSON.stringify(initialPaths);
}
- // IE versions below IE8 cannot set the name property of
- // elements that have already been added to the DOM,
- // so we set the name along with the iframe HTML markup:
- counter += 1;
- iframe = $('').on('load', function () {
- var fileInputClones,
- paramNames = $.isArray(options.paramName) ? options.paramName : [options.paramName];
- iframe.off('load').on('load', function () {
- var response;
- // Wrap in a try/catch block to catch exceptions thrown
- // when trying to access cross-domain iframe contents:
- try {
- response = iframe.contents();
- // Google Chrome and Firefox do not throw an
- // exception when calling iframe.contents() on
- // cross-domain requests, so we unify the response:
- if (!response.length || !response[0].firstChild) {
- throw new Error();
+ this.mediaItems.forEach(function (x) {
+ if (x.mediaPath === 'not-found') {
+ return;
+ }
+ mediaPaths.push({
+ path: x.mediaPath,
+ mediaText: x.mediaText,
+ anchor: x.anchor
+ });
+ });
+ return JSON.stringify(mediaPaths);
+ },
+ set: function set(values) {
+ var self = this;
+ var mediaPaths = values || [];
+ var signal = $.Deferred();
+ var items = [];
+ var length = 0;
+ mediaPaths.forEach(function (x, i) {
+ items.push({
+ name: ' ' + x.path,
+ mime: '',
+ mediaPath: ''
+ }); // don't remove the space. Something different is needed or it wont react when the real name arrives.
+ promise = $.when(signal).done(function () {
+ $.ajax({
+ url: mediaItemUrl + "?path=" + encodeURIComponent(x.path),
+ method: 'GET',
+ success: function success(data) {
+ data.vuekey = data.name + i.toString();
+ data.mediaText = x.mediaText; // This value is not returned from the ajax call.
+ data.anchor = x.anchor; // This value is not returned from the ajax call.
+ items.splice(i, 1, data);
+ if (items.length === ++length) {
+ items.forEach(function (y) {
+ self.mediaItems.push(y);
+ });
+ self.initialized = true;
+ }
+ },
+ error: function error(_error) {
+ console.log(_error);
+ items.splice(i, 1, {
+ name: x.path,
+ mime: '',
+ mediaPath: 'not-found',
+ mediaText: '',
+ anchor: {
+ x: 0,
+ y: 0
+ }
+ });
+ if (items.length === ++length) {
+ items.forEach(function (x) {
+ self.mediaItems.push(x);
+ });
+ self.initialized = true;
+ }
}
- } catch (e) {
- response = undefined;
- }
- // The complete callback returns the
- // iframe content document as response object:
- completeCallback(200, 'success', {
- iframe: response
});
- // Fix for IE endless progress bar activity bug
- // (happens on form submits to iframe targets):
- $('').appendTo(form);
- window.setTimeout(function () {
- // Removing the form in a setTimeout call
- // allows Chrome's developer tools to display
- // the response result
- form.remove();
- }, 0);
});
- form.prop('target', iframe.prop('name')).prop('action', options.url).prop('method', options.type);
- if (options.formData) {
- $.each(options.formData, function (index, field) {
- $('').prop('name', field.name).val(field.value).appendTo(form);
- });
- }
- if (options.fileInput && options.fileInput.length && options.type === 'POST') {
- fileInputClones = options.fileInput.clone();
- // Insert a clone for each file input field:
- options.fileInput.after(function (index) {
- return fileInputClones[index];
- });
- if (options.paramName) {
- options.fileInput.each(function (index) {
- $(this).prop('name', paramNames[index] || options.paramName);
- });
- }
- // Appending the file input fields to the hidden form
- // removes them from their original location:
- form.append(options.fileInput).prop('enctype', 'multipart/form-data')
- // enctype must be set as encoding for IE:
- .prop('encoding', 'multipart/form-data');
- // Remove the HTML5 form attribute from the input(s):
- options.fileInput.removeAttr('form');
- }
- window.setTimeout(function () {
- // Submitting the form in a setTimeout call fixes an issue with
- // Safari 13 not triggering the iframe load event after resetting
- // the load event handler, see also:
- // https://github.com/blueimp/jQuery-File-Upload/issues/3633
- form.submit();
- // Insert the file input fields at their original location
- // by replacing the clones with the originals:
- if (fileInputClones && fileInputClones.length) {
- options.fileInput.each(function (index, input) {
- var clone = $(fileInputClones[index]);
- // Restore the original name and form properties:
- $(input).prop('name', clone.prop('name')).attr('form', clone.attr('form'));
- clone.replaceWith(input);
- });
- }
- }, 0);
});
- form.append(iframe).appendTo(document.body);
+ signal.resolve();
+ }
+ },
+ fileSize: function fileSize() {
+ return Math.round(this.selectedMedia.size / 1024);
+ },
+ canAddMedia: function canAddMedia() {
+ return this.mediaItems.length === 0 || this.mediaItems.length > 0 && allowMultiple;
+ },
+ thumbSize: function thumbSize() {
+ return this.smallThumbs ? 120 : 240;
+ },
+ currentPrefs: {
+ get: function get() {
+ return {
+ smallThumbs: this.smallThumbs
+ };
},
- abort: function abort() {
- if (iframe) {
- // javascript:false as iframe src aborts the request
- // and prevents warning popups on HTTPS in IE6.
- iframe.off('load').prop('src', initialIframeSrc);
+ set: function set(newPrefs) {
+ if (!newPrefs) {
+ return;
}
- if (form) {
- form.remove();
+ this.smallThumbs = newPrefs.smallThumbs;
+ }
+ }
+ },
+ mounted: function mounted() {
+ var self = this;
+ self.paths = initialPaths;
+ self.$on('selectAndDeleteMediaRequested', function (media) {
+ self.selectAndDeleteMedia(media);
+ });
+ self.$on('selectMediaRequested', function (media) {
+ self.selectMedia(media);
+ });
+ self.$on('filesUploaded', function (files) {
+ self.addMediaFiles(files);
+ });
+ },
+ methods: {
+ selectMedia: function selectMedia(media) {
+ this.selectedMedia = media;
+ },
+ showModal: function showModal(event) {
+ var self = this;
+ if (self.canAddMedia) {
+ $("#mediaApp").appendTo($(modalBodyElement).find('.modal-body'));
+ $("#mediaApp").show();
+ var modal = new bootstrap.Modal(modalBodyElement);
+ modal.show();
+ $(modalBodyElement).find('.mediaFieldSelectButton').off('click').on('click', function (v) {
+ self.addMediaFiles(mediaApp.selectedMedias);
+
+ // we don't want the included medias to be still selected the next time we open the modal.
+ mediaApp.selectedMedias = [];
+ modal.hide();
+ return true;
+ });
+ }
+ },
+ showMediaTextModal: function showMediaTextModal(event) {
+ this.mediaTextModal = new bootstrap.Modal(this.$refs.mediaTextModal);
+ this.mediaTextModal.show();
+ this.backupMediaText = this.selectedMedia.mediaText;
+ },
+ cancelMediaTextModal: function cancelMediaTextModal(event) {
+ this.mediaTextModal.hide();
+ this.selectedMedia.mediaText = this.backupMediaText;
+ },
+ showAnchorModal: function showAnchorModal(event) {
+ this.anchoringModal = new bootstrap.Modal(this.$refs.anchoringModal);
+ this.anchoringModal.show();
+ // Cause a refresh to recalc heights.
+ this.selectedMedia.anchor = {
+ x: this.selectedMedia.anchor.x,
+ y: this.selectedMedia.anchor.y
+ };
+ this.backupAnchor = this.selectedMedia.anchor;
+ },
+ cancelAnchoringModal: function cancelAnchoringModal(event) {
+ this.anchoringModal.hide();
+ this.selectedMedia.anchor = this.backupAnchor;
+ },
+ resetAnchor: function resetAnchor(event) {
+ this.selectedMedia.anchor = {
+ x: 0.5,
+ y: 0.5
+ };
+ },
+ onAnchorDrop: function onAnchorDrop(event) {
+ var image = this.$refs.anchorImage;
+ this.selectedMedia.anchor = {
+ x: event.offsetX / image.clientWidth,
+ y: event.offsetY / image.clientHeight
+ };
+ },
+ anchorLeft: function anchorLeft() {
+ if (this.$refs.anchorImage && this.$refs.modalBody && this.selectedMedia) {
+ // When image is shrunk compare against the modal body.
+ var offset = (this.$refs.modalBody.clientWidth - this.$refs.anchorImage.clientWidth) / 2;
+ var position = this.selectedMedia.anchor.x * this.$refs.anchorImage.clientWidth + offset;
+ var anchorIcon = Math.round(this.$refs.modalBody.querySelector('.icon-media-anchor').clientWidth);
+ if (Number.isInteger(anchorIcon)) {
+ position = position - anchorIcon / 2;
}
+ return position + 'px';
+ } else {
+ return '0';
}
- };
- }
- });
-
- // The iframe transport returns the iframe content document as response.
- // The following adds converters from iframe to text, json, html, xml
- // and script.
- // Please note that the Content-Type for JSON responses has to be text/plain
- // or text/html, if the browser doesn't include application/json in the
- // Accept header, else IE will show a download dialog.
- // The Content-Type for XML responses on the other hand has to be always
- // application/xml or text/xml, so IE properly parses the XML response.
- // See also
- // https://github.com/blueimp/jQuery-File-Upload/wiki/Setup#content-type-negotiation
- $.ajaxSetup({
- converters: {
- 'iframe text': function iframeText(iframe) {
- return iframe && $(iframe[0].body).text();
},
- 'iframe json': function iframeJson(iframe) {
- return iframe && jsonAPI[jsonParse]($(iframe[0].body).text());
+ anchorTop: function anchorTop() {
+ if (this.$refs.anchorImage && this.selectedMedia) {
+ var position = this.selectedMedia.anchor.y * this.$refs.anchorImage.clientHeight;
+ return position + 'px';
+ } else {
+ return '0';
+ }
},
- 'iframe html': function iframeHtml(iframe) {
- return iframe && $(iframe[0].body).html();
+ setAnchor: function setAnchor(event) {
+ var image = this.$refs.anchorImage;
+ this.selectedMedia.anchor = {
+ x: event.offsetX / image.clientWidth,
+ y: event.offsetY / image.clientHeight
+ };
},
- 'iframe xml': function iframeXml(iframe) {
- var xmlDoc = iframe && iframe[0];
- return xmlDoc && $.isXMLDoc(xmlDoc) ? xmlDoc : $.parseXML(xmlDoc.XMLDocument && xmlDoc.XMLDocument.xml || $(xmlDoc.body).html());
+ addMediaFiles: function addMediaFiles(files) {
+ if (files.length > 1 && allowMultiple === false) {
+ alert($('#onlyOneItemMessage').val());
+ mediaFieldApp.mediaItems.push(files[0]);
+ mediaFieldApp.initialized = true;
+ } else {
+ mediaFieldApp.mediaItems = mediaFieldApp.mediaItems.concat(files);
+ mediaFieldApp.initialized = true;
+ }
},
- 'iframe script': function iframeScript(iframe) {
- return iframe && $.globalEval($(iframe[0].body).text());
+ removeSelected: function removeSelected(event) {
+ if (this.selectedMedia) {
+ var index = this.mediaItems && this.mediaItems.indexOf(this.selectedMedia);
+ if (index > -1) {
+ this.mediaItems.splice(index, 1);
+ }
+ } else {
+ // The remove button can also remove a unique media item
+ if (this.mediaItems.length === 1) {
+ this.mediaItems.splice(0, 1);
+ }
+ }
+ this.selectedMedia = null;
+ },
+ selectAndDeleteMedia: function selectAndDeleteMedia(media) {
+ var self = this;
+ self.selectedMedia = media;
+ // setTimeout because sometimes removeSelected was called even before the media was set.
+ setTimeout(function () {
+ self.removeSelected();
+ }, 100);
+ }
+ },
+ watch: {
+ mediaItems: {
+ deep: true,
+ handler: function handler() {
+ // Trigger preview rendering
+ setTimeout(function () {
+ $(document).trigger('contentpreview:render');
+ }, 100);
+ }
+ },
+ currentPrefs: function currentPrefs(newPrefs) {
+ localStorage.setItem('mediaFieldPrefs', JSON.stringify(newPrefs));
}
}
- });
+ }));
+}
+// different media field editors will add themselves to this array
+var mediaFieldApps = [];
+// \
+
\
+ \
+ {{T.noImages}}\
+
\
+ \
+ \
+
\
+ ',
+ props: {
+ model: Object,
+ uploadInputId: String
+ },
+ mounted: function mounted() {
+ var _self$uploadInputId;
+ var self = this;
+ var uploadInput = document.getElementById((_self$uploadInputId = self.uploadInputId) !== null && _self$uploadInputId !== void 0 ? _self$uploadInputId : 'fileupload');
+ $(uploadInput).bind('fileuploadprogress', function (e, data) {
+ if (data.files[0].name !== self.model.name) {
+ return;
+ }
+ self.model.percentage = parseInt(data.loaded / data.total * 100, 10);
+ });
+ $(uploadInput).bind('fileuploaddone', function (e, data) {
+ if (data.files[0].name !== self.model.name) {
+ return;
+ }
+ if (data.result.files[0].error) {
+ self.handleFailure(data.files[0].name, data.result.files[0].error);
+ } else {
+ bus.$emit('removalRequest', self.model);
+ }
+ });
+ $(uploadInput).bind('fileuploadfail', function (e, data) {
+ if (data.files[0].name !== self.model.name) {
+ return;
+ }
+ self.handleFailure(data.files[0].name, $('#t-error').val());
+ });
+ },
+ methods: {
+ handleFailure: function handleFailure(fileName, message) {
+ if (fileName !== this.model.name) {
+ return;
+ }
+ this.model.errorMessage = message;
+ bus.$emit('ErrorOnUpload', this.model);
+ },
+ dismissWarning: function dismissWarning() {
+ bus.$emit('removalRequest', this.model);
+ }
+ }
+});
+// {{ model.name }}
\ + \
+ \
+ \
+
\
+ \
+
\
+ ',
+ data: function data() {
+ return {
+ files: [],
+ T: {},
+ expanded: false,
+ pendingCount: 0,
+ errorCount: 0
+ };
+ },
+ props: {
+ uploadInputId: String
+ },
+ created: function created() {
+ var self = this;
+ // retrieving localized strings from view
+ self.T.uploads = $('#t-uploads').val();
+ self.T.errors = $('#t-errors').val();
+ self.T.clearErrors = $('#t-clear-errors').val();
+ },
+ computed: {
+ fileCount: function fileCount() {
+ return this.files.length;
+ }
+ },
+ mounted: function mounted() {
+ var _self$uploadInputId;
+ var self = this;
+ var uploadInput = document.getElementById((_self$uploadInputId = self.uploadInputId) !== null && _self$uploadInputId !== void 0 ? _self$uploadInputId : 'fileupload');
+ $(uploadInput).bind('fileuploadadd', function (e, data) {
+ if (!data.files) {
+ return;
+ }
+ data.files.forEach(function (newFile) {
+ var alreadyInList = self.files.some(function (f) {
+ return f.name == newFile.name;
+ });
+ if (!alreadyInList) {
+ self.files.push({
+ name: newFile.name,
+ percentage: 0,
+ errorMessage: ''
+ });
+ } else {
+ console.error('A file with the same name is already on the queue:' + newFile.name);
+ }
+ });
+ });
+ bus.$on('removalRequest', function (fileUpload) {
+ self.files.forEach(function (item, index, array) {
+ if (item.name == fileUpload.name) {
+ array.splice(index, 1);
+ }
+ });
+ });
+ bus.$on('ErrorOnUpload', function (fileUpload) {
+ self.updateCount();
+ });
+ },
+ methods: {
+ updateCount: function updateCount() {
+ this.errorCount = this.files.filter(function (item) {
+ return item.errorMessage != '';
+ }).length;
+ this.pendingCount = this.files.length - this.errorCount;
+ if (this.files.length < 1) {
+ this.expanded = false;
+ }
+ },
+ clearErrors: function clearErrors() {
+ this.files = this.files.filter(function (item) {
+ return item.errorMessage == '';
+ });
+ }
+ },
+ watch: {
+ files: function files() {
+ this.updateCount();
+ }
+ }
});
\ No newline at end of file
diff --git a/src/OrchardCore.Modules/OrchardCore.Media/wwwroot/Scripts/media.min.js b/src/OrchardCore.Modules/OrchardCore.Media/wwwroot/Scripts/media.min.js
index 370f38585d3..1d75e8cc62a 100644
--- a/src/OrchardCore.Modules/OrchardCore.Media/wwwroot/Scripts/media.min.js
+++ b/src/OrchardCore.Modules/OrchardCore.Media/wwwroot/Scripts/media.min.js
@@ -1 +1 @@
-function _typeof(e){return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},_typeof(e)}function ownKeys(e,t){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),i.push.apply(i,n)}return i}function _objectSpread(e){for(var t=1;t \
+ {{ T.uploads }} \
+ (Pending: {{ pendingCount }}) \
+ ( {{ T.errors }}: {{ errorCount }} / {{ T.clearErrors }} ) \
+ \
+
\
+ \
+
\
+ \
+
\
+ - \n
- \n
- \n \n\n \n
\n \n
\n
| {{ T.imageHeader }} | \n\n {{ T.nameHeader }}\n | \n \n {{ T.lastModifyHeader }} \n | \n \n \n {{ T.sizeHeader }}\n | \n \n \n {{ T.typeHeader }}\n | \n
|---|---|---|---|---|
| \n \n \n | \n \n \n {{ media.name }} \n \n \n | \n \n {{ printDateTime(media.lastModify) }} \n | \n \n {{ isNaN(media.size)? 0 : Math.round(media.size / 1024) }} KB \n | \n \n {{ media.mime }} \n | \n
\n \n \n
\n ',props:{sourceItems:Array},data:function(){return{pageSize:10,pageSizeOptions:[10,30,50,100],current:0,T:{}}},created:function(){var e=this;e.T.pagerFirstButton=$("#t-pager-first-button").val(),e.T.pagerPreviousButton=$("#t-pager-previous-button").val(),e.T.pagerNextButton=$("#t-pager-next-button").val(),e.T.pagerLastButton=$("#t-pager-last-button").val(),e.T.pagerPageSizeLabel=$("#t-pager-page-size-label").val(),e.T.pagerPageLabel=$("#t-pager-page-label").val(),e.T.pagerTotalLabel=$("#t-pager-total-label").val()},methods:{next:function(){this.current=this.current+1},previous:function(){this.current=this.current-1},goFirst:function(){this.current=0},goLast:function(){this.current=this.totalPages-1},goTo:function(e){this.current=e}},computed:{total:function(){return this.sourceItems?this.sourceItems.length:0},totalPages:function(){var e=Math.ceil(this.total/this.pageSize);return e>0?e:1},isLastPage:function(){return this.current+1>=this.totalPages},isFirstPage:function(){return 0===this.current},canDoNext:function(){return!this.isLastPage},canDoPrev:function(){return!this.isFirstPage},canDoFirst:function(){return!this.isFirstPage},canDoLast:function(){return!this.isLastPage},itemsInCurrentPage:function(){var e=this.pageSize*this.current,t=e+this.pageSize,i=this.sourceItems.slice(e,t);return bus.$emit("pagerEvent",i),i},pageLinks:function(){var e=[];e.push(this.current+1);var t=this.current>0?this.current:-1;e.unshift(t);var i=this.current>1?this.current-1:-1;e.unshift(i);var n=this.totalPages-this.current>1?this.current+2:-1;e.push(n);var a=this.totalPages-this.current>2?this.current+3:-1;return e.push(a),e}},watch:{sourceItems:function(){this.current=0},pageSize:function(){this.current=0}}}),Vue.component("sortIndicator",{template:'\n \n \n \n
\n ',props:{colname:String,selectedcolname:String,asc:Boolean},computed:{isActive:function(){return this.colname.toLowerCase()==this.selectedcolname.toLowerCase()}}}),Vue.component("mediaFieldThumbsContainer",{template:' {{T.noImages}}
{{ model.name }}
{{ T.uploads }} (Pending: {{ pendingCount }}) ( {{ T.errors }}: {{ errorCount }} / {{ T.clearErrors }} )
- \n
- \n
- \n \n\n \n
\n \n
\n
| {{ T.imageHeader }} | \n\n {{ T.nameHeader }}\n | \n \n {{ T.lastModifyHeader }} \n | \n \n \n {{ T.sizeHeader }}\n | \n \n \n {{ T.typeHeader }}\n | \n
|---|---|---|---|---|
| \n \n \n | \n \n \n {{ media.name }} \n \n \n | \n \n {{ printDateTime(media.lastModify) }} \n | \n \n {{ isNaN(media.size)? 0 : Math.round(media.size / 1024) }} KB \n | \n \n {{ media.mime }} \n | \n
\n \n \n
\n ',props:{sourceItems:Array},data:function(){return{pageSize:10,pageSizeOptions:[10,30,50,100],current:0,T:{}}},created:function(){var e=this;e.T.pagerFirstButton=$("#t-pager-first-button").val(),e.T.pagerPreviousButton=$("#t-pager-previous-button").val(),e.T.pagerNextButton=$("#t-pager-next-button").val(),e.T.pagerLastButton=$("#t-pager-last-button").val(),e.T.pagerPageSizeLabel=$("#t-pager-page-size-label").val(),e.T.pagerPageLabel=$("#t-pager-page-label").val(),e.T.pagerTotalLabel=$("#t-pager-total-label").val()},methods:{next:function(){this.current=this.current+1},previous:function(){this.current=this.current-1},goFirst:function(){this.current=0},goLast:function(){this.current=this.totalPages-1},goTo:function(e){this.current=e}},computed:{total:function(){return this.sourceItems?this.sourceItems.length:0},totalPages:function(){var e=Math.ceil(this.total/this.pageSize);return e>0?e:1},isLastPage:function(){return this.current+1>=this.totalPages},isFirstPage:function(){return 0===this.current},canDoNext:function(){return!this.isLastPage},canDoPrev:function(){return!this.isFirstPage},canDoFirst:function(){return!this.isFirstPage},canDoLast:function(){return!this.isLastPage},itemsInCurrentPage:function(){var e=this.pageSize*this.current,t=e+this.pageSize,i=this.sourceItems.slice(e,t);return bus.$emit("pagerEvent",i),i},pageLinks:function(){var e=[];e.push(this.current+1);var t=this.current>0?this.current:-1;e.unshift(t);var i=this.current>1?this.current-1:-1;e.unshift(i);var n=this.totalPages-this.current>1?this.current+2:-1;e.push(n);var a=this.totalPages-this.current>2?this.current+3:-1;return e.push(a),e}},watch:{sourceItems:function(){this.current=0},pageSize:function(){this.current=0}}}),Vue.component("sortIndicator",{template:'\n \n \n \n
\n ',props:{colname:String,selectedcolname:String,asc:Boolean},computed:{isActive:function(){return this.colname.toLowerCase()==this.selectedcolname.toLowerCase()}}}),Vue.component("mediaFieldThumbsContainer",{template:' {{T.noImages}}
{{ model.name }}
{{ T.uploads }} (Pending: {{ pendingCount }}) ( {{ T.errors }}: {{ errorCount }} / {{ T.clearErrors }} )