mirror of
https://github.com/lsky-org/lsky-pro.git
synced 2025-01-08 11:57:52 +08:00
💄 替换上传组件
This commit is contained in:
WispX
parent
f91c4b2fbf
commit
3282c62b22
@ -30,7 +30,7 @@ class Controller extends BaseController
|
||||
'markdown_with_link' => '[](https://pic.iqy.ink/2021/12/12/e8cfd03eb787f.png)',
|
||||
];
|
||||
$status = true;
|
||||
$message = '上传失败，储存空间不足';
|
||||
$message = '上传成功';
|
||||
return compact('status', 'data', 'message');
|
||||
}
|
||||
}
|
||||
|
||||
87
package-lock.json
generated
87
package-lock.json
generated
@ -10,6 +10,10 @@
|
||||
"alpinejs": "^3.4.2",
|
||||
"autoprefixer": "^10.1.0",
|
||||
"axios": "^0.21",
|
||||
"blueimp-canvas-to-blob": "^3.29.0",
|
||||
"blueimp-file-upload": "^10.32.0",
|
||||
"blueimp-gallery": "^3.4.0",
|
||||
"blueimp-load-image": "^5.16.0",
|
||||
"deepmerge": "^4.2.2",
|
||||
"jquery": "^3.6.0",
|
||||
"laravel-mix": "^6.0.39",
|
||||
@ -2820,6 +2824,53 @@
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/blueimp-canvas-to-blob": {
|
||||
"version": "3.29.0",
|
||||
"resolved": "https://repo.huaweicloud.com/repository/npm/blueimp-canvas-to-blob/-/blueimp-canvas-to-blob-3.29.0.tgz",
|
||||
"integrity": "sha512-0pcSSGxC0QxT+yVkivxIqW0Y4VlO2XSDPofBAqoJ1qJxgH9eiUDLv50Rixij2cDuEfx4M6DpD9UGZpRhT5Q8qg==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/blueimp-file-upload": {
|
||||
"version": "10.32.0",
|
||||
"resolved": "https://repo.huaweicloud.com/repository/npm/blueimp-file-upload/-/blueimp-file-upload-10.32.0.tgz",
|
||||
"integrity": "sha512-3WMJw5Cbfz94Adl1OeyH+rRpGwHiNHzja+CR6aRWPoAtwrUwvP5gXKo0XdX+sdPE+iCU63Xmba88hoHQmzY8RQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optionalDependencies": {
|
||||
"blueimp-canvas-to-blob": "3",
|
||||
"blueimp-load-image": "5",
|
||||
"blueimp-tmpl": "3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"jquery": ">=1.7"
|
||||
}
|
||||
},
|
||||
"node_modules/blueimp-gallery": {
|
||||
"version": "3.4.0",
|
||||
"resolved": "https://repo.huaweicloud.com/repository/npm/blueimp-gallery/-/blueimp-gallery-3.4.0.tgz",
|
||||
"integrity": "sha512-t4zQ8XSlE3IuJK72gd6hnexHMUpndUZYRKcAYv+24TpYGom5YtP5yizWdH2cGwyb0MOTKojkwSWVweTo1rbDEw==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/blueimp-load-image": {
|
||||
"version": "5.16.0",
|
||||
"resolved": "https://repo.huaweicloud.com/repository/npm/blueimp-load-image/-/blueimp-load-image-5.16.0.tgz",
|
||||
"integrity": "sha512-3DUSVdOtlfNRk7moRZuTwDmA3NnG8KIJuLcq3c0J7/BIr6X3Vb/EpX3kUH1joxUhmoVF4uCpDfz7wHkz8pQajA==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/blueimp-tmpl": {
|
||||
"version": "3.20.0",
|
||||
"resolved": "https://repo.huaweicloud.com/repository/npm/blueimp-tmpl/-/blueimp-tmpl-3.20.0.tgz",
|
||||
"integrity": "sha512-g6ln9L+VX8ZA4WA8mgKMethYH+5teroJ2uOkCvcthy9Y9d9LrQ42OAMn+r3ECKu9CB+xe9GOChlIUJBSxwkI6g==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"bin": {
|
||||
"tmpl.js": "js/compile.js"
|
||||
}
|
||||
},
|
||||
"node_modules/bn.js": {
|
||||
"version": "5.2.0",
|
||||
"resolved": "https://repo.huaweicloud.com/repository/npm/bn.js/-/bn.js-5.2.0.tgz",
|
||||
@ -12504,6 +12555,42 @@
|
||||
"integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
|
||||
"dev": true
|
||||
},
|
||||
"blueimp-canvas-to-blob": {
|
||||
"version": "3.29.0",
|
||||
"resolved": "https://repo.huaweicloud.com/repository/npm/blueimp-canvas-to-blob/-/blueimp-canvas-to-blob-3.29.0.tgz",
|
||||
"integrity": "sha512-0pcSSGxC0QxT+yVkivxIqW0Y4VlO2XSDPofBAqoJ1qJxgH9eiUDLv50Rixij2cDuEfx4M6DpD9UGZpRhT5Q8qg==",
|
||||
"dev": true
|
||||
},
|
||||
"blueimp-file-upload": {
|
||||
"version": "10.32.0",
|
||||
"resolved": "https://repo.huaweicloud.com/repository/npm/blueimp-file-upload/-/blueimp-file-upload-10.32.0.tgz",
|
||||
"integrity": "sha512-3WMJw5Cbfz94Adl1OeyH+rRpGwHiNHzja+CR6aRWPoAtwrUwvP5gXKo0XdX+sdPE+iCU63Xmba88hoHQmzY8RQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"blueimp-canvas-to-blob": "3",
|
||||
"blueimp-load-image": "5",
|
||||
"blueimp-tmpl": "3"
|
||||
}
|
||||
},
|
||||
"blueimp-gallery": {
|
||||
"version": "3.4.0",
|
||||
"resolved": "https://repo.huaweicloud.com/repository/npm/blueimp-gallery/-/blueimp-gallery-3.4.0.tgz",
|
||||
"integrity": "sha512-t4zQ8XSlE3IuJK72gd6hnexHMUpndUZYRKcAYv+24TpYGom5YtP5yizWdH2cGwyb0MOTKojkwSWVweTo1rbDEw==",
|
||||
"dev": true
|
||||
},
|
||||
"blueimp-load-image": {
|
||||
"version": "5.16.0",
|
||||
"resolved": "https://repo.huaweicloud.com/repository/npm/blueimp-load-image/-/blueimp-load-image-5.16.0.tgz",
|
||||
"integrity": "sha512-3DUSVdOtlfNRk7moRZuTwDmA3NnG8KIJuLcq3c0J7/BIr6X3Vb/EpX3kUH1joxUhmoVF4uCpDfz7wHkz8pQajA==",
|
||||
"dev": true
|
||||
},
|
||||
"blueimp-tmpl": {
|
||||
"version": "3.20.0",
|
||||
"resolved": "https://repo.huaweicloud.com/repository/npm/blueimp-tmpl/-/blueimp-tmpl-3.20.0.tgz",
|
||||
"integrity": "sha512-g6ln9L+VX8ZA4WA8mgKMethYH+5teroJ2uOkCvcthy9Y9d9LrQ42OAMn+r3ECKu9CB+xe9GOChlIUJBSxwkI6g==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"bn.js": {
|
||||
"version": "5.2.0",
|
||||
"resolved": "https://repo.huaweicloud.com/repository/npm/bn.js/-/bn.js-5.2.0.tgz",
|
||||
|
||||
@ -15,6 +15,10 @@
|
||||
"alpinejs": "^3.4.2",
|
||||
"autoprefixer": "^10.1.0",
|
||||
"axios": "^0.21",
|
||||
"blueimp-canvas-to-blob": "^3.29.0",
|
||||
"blueimp-file-upload": "^10.32.0",
|
||||
"blueimp-gallery": "^3.4.0",
|
||||
"blueimp-load-image": "^5.16.0",
|
||||
"deepmerge": "^4.2.2",
|
||||
"jquery": "^3.6.0",
|
||||
"laravel-mix": "^6.0.39",
|
||||
|
||||
16
public/css/app.css
vendored
16
public/css/app.css
vendored
@ -414,6 +414,19 @@ Ensure the default browser behavior of the `hidden` attribute.
|
||||
--tw-shadow-colored: 0 0 #0000;
|
||||
}
|
||||
|
||||
.filter {
|
||||
--tw-blur: var(--tw-empty,/*!*/ /*!*/);
|
||||
--tw-brightness: var(--tw-empty,/*!*/ /*!*/);
|
||||
--tw-contrast: var(--tw-empty,/*!*/ /*!*/);
|
||||
--tw-grayscale: var(--tw-empty,/*!*/ /*!*/);
|
||||
--tw-hue-rotate: var(--tw-empty,/*!*/ /*!*/);
|
||||
--tw-invert: var(--tw-empty,/*!*/ /*!*/);
|
||||
--tw-saturate: var(--tw-empty,/*!*/ /*!*/);
|
||||
--tw-sepia: var(--tw-empty,/*!*/ /*!*/);
|
||||
--tw-drop-shadow: var(--tw-empty,/*!*/ /*!*/);
|
||||
--tw-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
||||
}
|
||||
|
||||
[type='text'],[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
@ -1356,6 +1369,9 @@ select {
|
||||
.ring-opacity-5 {
|
||||
--tw-ring-opacity: 0.05;
|
||||
}
|
||||
.filter {
|
||||
filter: var(--tw-filter);
|
||||
}
|
||||
.transition {
|
||||
transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
|
||||
transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
|
||||
|
||||
7
public/js/app.js
vendored
7
public/js/app.js
vendored
@ -5458,6 +5458,13 @@ window.utils = {
|
||||
sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
|
||||
i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i];
|
||||
},
|
||||
guid: function guid() {
|
||||
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);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
1604
public/js/jquery.fileupload.js
vendored
Normal file
1604
public/js/jquery.fileupload.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
227
public/js/jquery.iframe-transport.js
vendored
Normal file
227
public/js/jquery.iframe-transport.js
vendored
Normal file
@ -0,0 +1,227 @@
|
||||
/*
|
||||
* 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 === '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 (_, completeCallback) {
|
||||
form = $('<form style="display:none;"></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';
|
||||
}
|
||||
// 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 = $(
|
||||
'<iframe src="' +
|
||||
initialIframeSrc +
|
||||
'" name="iframe-transport-' +
|
||||
counter +
|
||||
'"></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):
|
||||
$('<iframe src="' + initialIframeSrc + '"></iframe>').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) {
|
||||
$('<input type="hidden"/>')
|
||||
.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 () {
|
||||
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 (form) {
|
||||
form.remove();
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
// 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 (iframe) {
|
||||
return iframe && $(iframe[0].body).text();
|
||||
},
|
||||
'iframe json': function (iframe) {
|
||||
return iframe && jsonAPI[jsonParse]($(iframe[0].body).text());
|
||||
},
|
||||
'iframe html': function (iframe) {
|
||||
return iframe && $(iframe[0].body).html();
|
||||
},
|
||||
'iframe xml': function (iframe) {
|
||||
var xmlDoc = iframe && iframe[0];
|
||||
return xmlDoc && $.isXMLDoc(xmlDoc)
|
||||
? xmlDoc
|
||||
: $.parseXML(
|
||||
(xmlDoc.XMLDocument && xmlDoc.XMLDocument.xml) ||
|
||||
$(xmlDoc.body).html()
|
||||
);
|
||||
},
|
||||
'iframe script': function (iframe) {
|
||||
return iframe && $.globalEval($(iframe[0].body).text());
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
805
public/js/jquery.ui.widget.js
vendored
Normal file
805
public/js/jquery.ui.widget.js
vendored
Normal file
@ -0,0 +1,805 @@
|
||||
/*! jQuery UI - v1.12.1+0b7246b6eeadfa9e2696e22f3230f6452f8129dc - 2020-02-20
|
||||
* http://jqueryui.com
|
||||
* Includes: widget.js
|
||||
* Copyright jQuery Foundation and other contributors; Licensed MIT */
|
||||
|
||||
/* global define, require */
|
||||
/* eslint-disable no-param-reassign, new-cap, jsdoc/require-jsdoc */
|
||||
|
||||
(function (factory) {
|
||||
'use strict';
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
// AMD. Register as an anonymous module.
|
||||
define(['jquery'], factory);
|
||||
} else if (typeof exports === 'object') {
|
||||
// Node/CommonJS
|
||||
factory(require('jquery'));
|
||||
} else {
|
||||
// Browser globals
|
||||
factory(window.jQuery);
|
||||
}
|
||||
})(function ($) {
|
||||
('use strict');
|
||||
|
||||
$.ui = $.ui || {};
|
||||
|
||||
$.ui.version = '1.12.1';
|
||||
|
||||
/*!
|
||||
* jQuery UI Widget 1.12.1
|
||||
* http://jqueryui.com
|
||||
*
|
||||
* Copyright jQuery Foundation and other contributors
|
||||
* Released under the MIT license.
|
||||
* http://jquery.org/license
|
||||
*/
|
||||
|
||||
//>>label: Widget
|
||||
//>>group: Core
|
||||
//>>description: Provides a factory for creating stateful widgets with a common API.
|
||||
//>>docs: http://api.jqueryui.com/jQuery.widget/
|
||||
//>>demos: http://jqueryui.com/widget/
|
||||
|
||||
// Support: jQuery 1.9.x or older
|
||||
// $.expr[ ":" ] is deprecated.
|
||||
if (!$.expr.pseudos) {
|
||||
$.expr.pseudos = $.expr[':'];
|
||||
}
|
||||
|
||||
// Support: jQuery 1.11.x or older
|
||||
// $.unique has been renamed to $.uniqueSort
|
||||
if (!$.uniqueSort) {
|
||||
$.uniqueSort = $.unique;
|
||||
}
|
||||
|
||||
var widgetUuid = 0;
|
||||
var widgetHasOwnProperty = Array.prototype.hasOwnProperty;
|
||||
var widgetSlice = Array.prototype.slice;
|
||||
|
||||
$.cleanData = (function (orig) {
|
||||
return function (elems) {
|
||||
var events, elem, i;
|
||||
// eslint-disable-next-line eqeqeq
|
||||
for (i = 0; (elem = elems[i]) != null; i++) {
|
||||
// Only trigger remove when necessary to save time
|
||||
events = $._data(elem, 'events');
|
||||
if (events && events.remove) {
|
||||
$(elem).triggerHandler('remove');
|
||||
}
|
||||
}
|
||||
orig(elems);
|
||||
};
|
||||
})($.cleanData);
|
||||
|
||||
$.widget = function (name, base, prototype) {
|
||||
var existingConstructor, constructor, basePrototype;
|
||||
|
||||
// ProxiedPrototype allows the provided prototype to remain unmodified
|
||||
// so that it can be used as a mixin for multiple widgets (#8876)
|
||||
var proxiedPrototype = {};
|
||||
|
||||
var namespace = name.split('.')[0];
|
||||
name = name.split('.')[1];
|
||||
var fullName = namespace + '-' + name;
|
||||
|
||||
if (!prototype) {
|
||||
prototype = base;
|
||||
base = $.Widget;
|
||||
}
|
||||
|
||||
if ($.isArray(prototype)) {
|
||||
prototype = $.extend.apply(null, [{}].concat(prototype));
|
||||
}
|
||||
|
||||
// Create selector for plugin
|
||||
$.expr.pseudos[fullName.toLowerCase()] = function (elem) {
|
||||
return !!$.data(elem, fullName);
|
||||
};
|
||||
|
||||
$[namespace] = $[namespace] || {};
|
||||
existingConstructor = $[namespace][name];
|
||||
constructor = $[namespace][name] = function (options, element) {
|
||||
// Allow instantiation without "new" keyword
|
||||
if (!this._createWidget) {
|
||||
return new constructor(options, element);
|
||||
}
|
||||
|
||||
// Allow instantiation without initializing for simple inheritance
|
||||
// must use "new" keyword (the code above always passes args)
|
||||
if (arguments.length) {
|
||||
this._createWidget(options, element);
|
||||
}
|
||||
};
|
||||
|
||||
// Extend with the existing constructor to carry over any static properties
|
||||
$.extend(constructor, existingConstructor, {
|
||||
version: prototype.version,
|
||||
|
||||
// Copy the object used to create the prototype in case we need to
|
||||
// redefine the widget later
|
||||
_proto: $.extend({}, prototype),
|
||||
|
||||
// Track widgets that inherit from this widget in case this widget is
|
||||
// redefined after a widget inherits from it
|
||||
_childConstructors: []
|
||||
});
|
||||
|
||||
basePrototype = new base();
|
||||
|
||||
// We need to make the options hash a property directly on the new instance
|
||||
// otherwise we'll modify the options hash on the prototype that we're
|
||||
// inheriting from
|
||||
basePrototype.options = $.widget.extend({}, basePrototype.options);
|
||||
$.each(prototype, function (prop, value) {
|
||||
if (!$.isFunction(value)) {
|
||||
proxiedPrototype[prop] = value;
|
||||
return;
|
||||
}
|
||||
proxiedPrototype[prop] = (function () {
|
||||
function _super() {
|
||||
return base.prototype[prop].apply(this, arguments);
|
||||
}
|
||||
|
||||
function _superApply(args) {
|
||||
return base.prototype[prop].apply(this, args);
|
||||
}
|
||||
|
||||
return function () {
|
||||
var __super = this._super;
|
||||
var __superApply = this._superApply;
|
||||
var returnValue;
|
||||
|
||||
this._super = _super;
|
||||
this._superApply = _superApply;
|
||||
|
||||
returnValue = value.apply(this, arguments);
|
||||
|
||||
this._super = __super;
|
||||
this._superApply = __superApply;
|
||||
|
||||
return returnValue;
|
||||
};
|
||||
})();
|
||||
});
|
||||
constructor.prototype = $.widget.extend(
|
||||
basePrototype,
|
||||
{
|
||||
// TODO: remove support for widgetEventPrefix
|
||||
// always use the name + a colon as the prefix, e.g., draggable:start
|
||||
// don't prefix for widgets that aren't DOM-based
|
||||
widgetEventPrefix: existingConstructor
|
||||
? basePrototype.widgetEventPrefix || name
|
||||
: name
|
||||
},
|
||||
proxiedPrototype,
|
||||
{
|
||||
constructor: constructor,
|
||||
namespace: namespace,
|
||||
widgetName: name,
|
||||
widgetFullName: fullName
|
||||
}
|
||||
);
|
||||
|
||||
// If this widget is being redefined then we need to find all widgets that
|
||||
// are inheriting from it and redefine all of them so that they inherit from
|
||||
// the new version of this widget. We're essentially trying to replace one
|
||||
// level in the prototype chain.
|
||||
if (existingConstructor) {
|
||||
$.each(existingConstructor._childConstructors, function (i, child) {
|
||||
var childPrototype = child.prototype;
|
||||
|
||||
// Redefine the child widget using the same prototype that was
|
||||
// originally used, but inherit from the new version of the base
|
||||
$.widget(
|
||||
childPrototype.namespace + '.' + childPrototype.widgetName,
|
||||
constructor,
|
||||
child._proto
|
||||
);
|
||||
});
|
||||
|
||||
// Remove the list of existing child constructors from the old constructor
|
||||
// so the old child constructors can be garbage collected
|
||||
delete existingConstructor._childConstructors;
|
||||
} else {
|
||||
base._childConstructors.push(constructor);
|
||||
}
|
||||
|
||||
$.widget.bridge(name, constructor);
|
||||
|
||||
return constructor;
|
||||
};
|
||||
|
||||
$.widget.extend = function (target) {
|
||||
var input = widgetSlice.call(arguments, 1);
|
||||
var inputIndex = 0;
|
||||
var inputLength = input.length;
|
||||
var key;
|
||||
var value;
|
||||
|
||||
for (; inputIndex < inputLength; inputIndex++) {
|
||||
for (key in input[inputIndex]) {
|
||||
value = input[inputIndex][key];
|
||||
if (
|
||||
widgetHasOwnProperty.call(input[inputIndex], key) &&
|
||||
value !== undefined
|
||||
) {
|
||||
// Clone objects
|
||||
if ($.isPlainObject(value)) {
|
||||
target[key] = $.isPlainObject(target[key])
|
||||
? $.widget.extend({}, target[key], value)
|
||||
: // Don't extend strings, arrays, etc. with objects
|
||||
$.widget.extend({}, value);
|
||||
|
||||
// Copy everything else by reference
|
||||
} else {
|
||||
target[key] = value;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return target;
|
||||
};
|
||||
|
||||
$.widget.bridge = function (name, object) {
|
||||
var fullName = object.prototype.widgetFullName || name;
|
||||
$.fn[name] = function (options) {
|
||||
var isMethodCall = typeof options === 'string';
|
||||
var args = widgetSlice.call(arguments, 1);
|
||||
var returnValue = this;
|
||||
|
||||
if (isMethodCall) {
|
||||
// If this is an empty collection, we need to have the instance method
|
||||
// return undefined instead of the jQuery instance
|
||||
if (!this.length && options === 'instance') {
|
||||
returnValue = undefined;
|
||||
} else {
|
||||
this.each(function () {
|
||||
var methodValue;
|
||||
var instance = $.data(this, fullName);
|
||||
|
||||
if (options === 'instance') {
|
||||
returnValue = instance;
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!instance) {
|
||||
return $.error(
|
||||
'cannot call methods on ' +
|
||||
name +
|
||||
' prior to initialization; ' +
|
||||
"attempted to call method '" +
|
||||
options +
|
||||
"'"
|
||||
);
|
||||
}
|
||||
|
||||
if (!$.isFunction(instance[options]) || options.charAt(0) === '_') {
|
||||
return $.error(
|
||||
"no such method '" +
|
||||
options +
|
||||
"' for " +
|
||||
name +
|
||||
' widget instance'
|
||||
);
|
||||
}
|
||||
|
||||
methodValue = instance[options].apply(instance, args);
|
||||
|
||||
if (methodValue !== instance && methodValue !== undefined) {
|
||||
returnValue =
|
||||
methodValue && methodValue.jquery
|
||||
? returnValue.pushStack(methodValue.get())
|
||||
: methodValue;
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}
|
||||
} else {
|
||||
// Allow multiple hashes to be passed on init
|
||||
if (args.length) {
|
||||
options = $.widget.extend.apply(null, [options].concat(args));
|
||||
}
|
||||
|
||||
this.each(function () {
|
||||
var instance = $.data(this, fullName);
|
||||
if (instance) {
|
||||
instance.option(options || {});
|
||||
if (instance._init) {
|
||||
instance._init();
|
||||
}
|
||||
} else {
|
||||
$.data(this, fullName, new object(options, this));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return returnValue;
|
||||
};
|
||||
};
|
||||
|
||||
$.Widget = function (/* options, element */) {};
|
||||
$.Widget._childConstructors = [];
|
||||
|
||||
$.Widget.prototype = {
|
||||
widgetName: 'widget',
|
||||
widgetEventPrefix: '',
|
||||
defaultElement: '<div>',
|
||||
|
||||
options: {
|
||||
classes: {},
|
||||
disabled: false,
|
||||
|
||||
// Callbacks
|
||||
create: null
|
||||
},
|
||||
|
||||
_createWidget: function (options, element) {
|
||||
element = $(element || this.defaultElement || this)[0];
|
||||
this.element = $(element);
|
||||
this.uuid = widgetUuid++;
|
||||
this.eventNamespace = '.' + this.widgetName + this.uuid;
|
||||
|
||||
this.bindings = $();
|
||||
this.hoverable = $();
|
||||
this.focusable = $();
|
||||
this.classesElementLookup = {};
|
||||
|
||||
if (element !== this) {
|
||||
$.data(element, this.widgetFullName, this);
|
||||
this._on(true, this.element, {
|
||||
remove: function (event) {
|
||||
if (event.target === element) {
|
||||
this.destroy();
|
||||
}
|
||||
}
|
||||
});
|
||||
this.document = $(
|
||||
element.style
|
||||
? // Element within the document
|
||||
element.ownerDocument
|
||||
: // Element is window or document
|
||||
element.document || element
|
||||
);
|
||||
this.window = $(
|
||||
this.document[0].defaultView || this.document[0].parentWindow
|
||||
);
|
||||
}
|
||||
|
||||
this.options = $.widget.extend(
|
||||
{},
|
||||
this.options,
|
||||
this._getCreateOptions(),
|
||||
options
|
||||
);
|
||||
|
||||
this._create();
|
||||
|
||||
if (this.options.disabled) {
|
||||
this._setOptionDisabled(this.options.disabled);
|
||||
}
|
||||
|
||||
this._trigger('create', null, this._getCreateEventData());
|
||||
this._init();
|
||||
},
|
||||
|
||||
_getCreateOptions: function () {
|
||||
return {};
|
||||
},
|
||||
|
||||
_getCreateEventData: $.noop,
|
||||
|
||||
_create: $.noop,
|
||||
|
||||
_init: $.noop,
|
||||
|
||||
destroy: function () {
|
||||
var that = this;
|
||||
|
||||
this._destroy();
|
||||
$.each(this.classesElementLookup, function (key, value) {
|
||||
that._removeClass(value, key);
|
||||
});
|
||||
|
||||
// We can probably remove the unbind calls in 2.0
|
||||
// all event bindings should go through this._on()
|
||||
this.element.off(this.eventNamespace).removeData(this.widgetFullName);
|
||||
this.widget().off(this.eventNamespace).removeAttr('aria-disabled');
|
||||
|
||||
// Clean up events and states
|
||||
this.bindings.off(this.eventNamespace);
|
||||
},
|
||||
|
||||
_destroy: $.noop,
|
||||
|
||||
widget: function () {
|
||||
return this.element;
|
||||
},
|
||||
|
||||
option: function (key, value) {
|
||||
var options = key;
|
||||
var parts;
|
||||
var curOption;
|
||||
var i;
|
||||
|
||||
if (arguments.length === 0) {
|
||||
// Don't return a reference to the internal hash
|
||||
return $.widget.extend({}, this.options);
|
||||
}
|
||||
|
||||
if (typeof key === 'string') {
|
||||
// Handle nested keys, e.g., "foo.bar" => { foo: { bar: ___ } }
|
||||
options = {};
|
||||
parts = key.split('.');
|
||||
key = parts.shift();
|
||||
if (parts.length) {
|
||||
curOption = options[key] = $.widget.extend({}, this.options[key]);
|
||||
for (i = 0; i < parts.length - 1; i++) {
|
||||
curOption[parts[i]] = curOption[parts[i]] || {};
|
||||
curOption = curOption[parts[i]];
|
||||
}
|
||||
key = parts.pop();
|
||||
if (arguments.length === 1) {
|
||||
return curOption[key] === undefined ? null : curOption[key];
|
||||
}
|
||||
curOption[key] = value;
|
||||
} else {
|
||||
if (arguments.length === 1) {
|
||||
return this.options[key] === undefined ? null : this.options[key];
|
||||
}
|
||||
options[key] = value;
|
||||
}
|
||||
}
|
||||
|
||||
this._setOptions(options);
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
_setOptions: function (options) {
|
||||
var key;
|
||||
|
||||
for (key in options) {
|
||||
this._setOption(key, options[key]);
|
||||
}
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
_setOption: function (key, value) {
|
||||
if (key === 'classes') {
|
||||
this._setOptionClasses(value);
|
||||
}
|
||||
|
||||
this.options[key] = value;
|
||||
|
||||
if (key === 'disabled') {
|
||||
this._setOptionDisabled(value);
|
||||
}
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
_setOptionClasses: function (value) {
|
||||
var classKey, elements, currentElements;
|
||||
|
||||
for (classKey in value) {
|
||||
currentElements = this.classesElementLookup[classKey];
|
||||
if (
|
||||
value[classKey] === this.options.classes[classKey] ||
|
||||
!currentElements ||
|
||||
!currentElements.length
|
||||
) {
|
||||
continue;
|
||||
}
|
||||
|
||||
// We are doing this to create a new jQuery object because the _removeClass() call
|
||||
// on the next line is going to destroy the reference to the current elements being
|
||||
// tracked. We need to save a copy of this collection so that we can add the new classes
|
||||
// below.
|
||||
elements = $(currentElements.get());
|
||||
this._removeClass(currentElements, classKey);
|
||||
|
||||
// We don't use _addClass() here, because that uses this.options.classes
|
||||
// for generating the string of classes. We want to use the value passed in from
|
||||
// _setOption(), this is the new value of the classes option which was passed to
|
||||
// _setOption(). We pass this value directly to _classes().
|
||||
elements.addClass(
|
||||
this._classes({
|
||||
element: elements,
|
||||
keys: classKey,
|
||||
classes: value,
|
||||
add: true
|
||||
})
|
||||
);
|
||||
}
|
||||
},
|
||||
|
||||
_setOptionDisabled: function (value) {
|
||||
this._toggleClass(
|
||||
this.widget(),
|
||||
this.widgetFullName + '-disabled',
|
||||
null,
|
||||
!!value
|
||||
);
|
||||
|
||||
// If the widget is becoming disabled, then nothing is interactive
|
||||
if (value) {
|
||||
this._removeClass(this.hoverable, null, 'ui-state-hover');
|
||||
this._removeClass(this.focusable, null, 'ui-state-focus');
|
||||
}
|
||||
},
|
||||
|
||||
enable: function () {
|
||||
return this._setOptions({ disabled: false });
|
||||
},
|
||||
|
||||
disable: function () {
|
||||
return this._setOptions({ disabled: true });
|
||||
},
|
||||
|
||||
_classes: function (options) {
|
||||
var full = [];
|
||||
var that = this;
|
||||
|
||||
options = $.extend(
|
||||
{
|
||||
element: this.element,
|
||||
classes: this.options.classes || {}
|
||||
},
|
||||
options
|
||||
);
|
||||
|
||||
function bindRemoveEvent() {
|
||||
options.element.each(function (_, element) {
|
||||
var isTracked = $.map(that.classesElementLookup, function (elements) {
|
||||
return elements;
|
||||
}).some(function (elements) {
|
||||
return elements.is(element);
|
||||
});
|
||||
|
||||
if (!isTracked) {
|
||||
that._on($(element), {
|
||||
remove: '_untrackClassesElement'
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function processClassString(classes, checkOption) {
|
||||
var current, i;
|
||||
for (i = 0; i < classes.length; i++) {
|
||||
current = that.classesElementLookup[classes[i]] || $();
|
||||
if (options.add) {
|
||||
bindRemoveEvent();
|
||||
current = $(
|
||||
$.uniqueSort(current.get().concat(options.element.get()))
|
||||
);
|
||||
} else {
|
||||
current = $(current.not(options.element).get());
|
||||
}
|
||||
that.classesElementLookup[classes[i]] = current;
|
||||
full.push(classes[i]);
|
||||
if (checkOption && options.classes[classes[i]]) {
|
||||
full.push(options.classes[classes[i]]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (options.keys) {
|
||||
processClassString(options.keys.match(/\S+/g) || [], true);
|
||||
}
|
||||
if (options.extra) {
|
||||
processClassString(options.extra.match(/\S+/g) || []);
|
||||
}
|
||||
|
||||
return full.join(' ');
|
||||
},
|
||||
|
||||
_untrackClassesElement: function (event) {
|
||||
var that = this;
|
||||
$.each(that.classesElementLookup, function (key, value) {
|
||||
if ($.inArray(event.target, value) !== -1) {
|
||||
that.classesElementLookup[key] = $(value.not(event.target).get());
|
||||
}
|
||||
});
|
||||
|
||||
this._off($(event.target));
|
||||
},
|
||||
|
||||
_removeClass: function (element, keys, extra) {
|
||||
return this._toggleClass(element, keys, extra, false);
|
||||
},
|
||||
|
||||
_addClass: function (element, keys, extra) {
|
||||
return this._toggleClass(element, keys, extra, true);
|
||||
},
|
||||
|
||||
_toggleClass: function (element, keys, extra, add) {
|
||||
add = typeof add === 'boolean' ? add : extra;
|
||||
var shift = typeof element === 'string' || element === null,
|
||||
options = {
|
||||
extra: shift ? keys : extra,
|
||||
keys: shift ? element : keys,
|
||||
element: shift ? this.element : element,
|
||||
add: add
|
||||
};
|
||||
options.element.toggleClass(this._classes(options), add);
|
||||
return this;
|
||||
},
|
||||
|
||||
_on: function (suppressDisabledCheck, element, handlers) {
|
||||
var delegateElement;
|
||||
var instance = this;
|
||||
|
||||
// No suppressDisabledCheck flag, shuffle arguments
|
||||
if (typeof suppressDisabledCheck !== 'boolean') {
|
||||
handlers = element;
|
||||
element = suppressDisabledCheck;
|
||||
suppressDisabledCheck = false;
|
||||
}
|
||||
|
||||
// No element argument, shuffle and use this.element
|
||||
if (!handlers) {
|
||||
handlers = element;
|
||||
element = this.element;
|
||||
delegateElement = this.widget();
|
||||
} else {
|
||||
element = delegateElement = $(element);
|
||||
this.bindings = this.bindings.add(element);
|
||||
}
|
||||
|
||||
$.each(handlers, function (event, handler) {
|
||||
function handlerProxy() {
|
||||
// Allow widgets to customize the disabled handling
|
||||
// - disabled as an array instead of boolean
|
||||
// - disabled class as method for disabling individual parts
|
||||
if (
|
||||
!suppressDisabledCheck &&
|
||||
(instance.options.disabled === true ||
|
||||
$(this).hasClass('ui-state-disabled'))
|
||||
) {
|
||||
return;
|
||||
}
|
||||
return (
|
||||
typeof handler === 'string' ? instance[handler] : handler
|
||||
).apply(instance, arguments);
|
||||
}
|
||||
|
||||
// Copy the guid so direct unbinding works
|
||||
if (typeof handler !== 'string') {
|
||||
handlerProxy.guid = handler.guid =
|
||||
handler.guid || handlerProxy.guid || $.guid++;
|
||||
}
|
||||
|
||||
var match = event.match(/^([\w:-]*)\s*(.*)$/);
|
||||
var eventName = match[1] + instance.eventNamespace;
|
||||
var selector = match[2];
|
||||
|
||||
if (selector) {
|
||||
delegateElement.on(eventName, selector, handlerProxy);
|
||||
} else {
|
||||
element.on(eventName, handlerProxy);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
_off: function (element, eventName) {
|
||||
eventName =
|
||||
(eventName || '').split(' ').join(this.eventNamespace + ' ') +
|
||||
this.eventNamespace;
|
||||
element.off(eventName);
|
||||
|
||||
// Clear the stack to avoid memory leaks (#10056)
|
||||
this.bindings = $(this.bindings.not(element).get());
|
||||
this.focusable = $(this.focusable.not(element).get());
|
||||
this.hoverable = $(this.hoverable.not(element).get());
|
||||
},
|
||||
|
||||
_delay: function (handler, delay) {
|
||||
var instance = this;
|
||||
function handlerProxy() {
|
||||
return (
|
||||
typeof handler === 'string' ? instance[handler] : handler
|
||||
).apply(instance, arguments);
|
||||
}
|
||||
return setTimeout(handlerProxy, delay || 0);
|
||||
},
|
||||
|
||||
_hoverable: function (element) {
|
||||
this.hoverable = this.hoverable.add(element);
|
||||
this._on(element, {
|
||||
mouseenter: function (event) {
|
||||
this._addClass($(event.currentTarget), null, 'ui-state-hover');
|
||||
},
|
||||
mouseleave: function (event) {
|
||||
this._removeClass($(event.currentTarget), null, 'ui-state-hover');
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
_focusable: function (element) {
|
||||
this.focusable = this.focusable.add(element);
|
||||
this._on(element, {
|
||||
focusin: function (event) {
|
||||
this._addClass($(event.currentTarget), null, 'ui-state-focus');
|
||||
},
|
||||
focusout: function (event) {
|
||||
this._removeClass($(event.currentTarget), null, 'ui-state-focus');
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
_trigger: function (type, event, data) {
|
||||
var prop, orig;
|
||||
var callback = this.options[type];
|
||||
|
||||
data = data || {};
|
||||
event = $.Event(event);
|
||||
event.type = (
|
||||
type === this.widgetEventPrefix ? type : this.widgetEventPrefix + type
|
||||
).toLowerCase();
|
||||
|
||||
// The original event may come from any element
|
||||
// so we need to reset the target on the new event
|
||||
event.target = this.element[0];
|
||||
|
||||
// Copy original event properties over to the new event
|
||||
orig = event.originalEvent;
|
||||
if (orig) {
|
||||
for (prop in orig) {
|
||||
if (!(prop in event)) {
|
||||
event[prop] = orig[prop];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.element.trigger(event, data);
|
||||
return !(
|
||||
($.isFunction(callback) &&
|
||||
callback.apply(this.element[0], [event].concat(data)) === false) ||
|
||||
event.isDefaultPrevented()
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
$.each({ show: 'fadeIn', hide: 'fadeOut' }, function (method, defaultEffect) {
|
||||
$.Widget.prototype['_' + method] = function (element, options, callback) {
|
||||
if (typeof options === 'string') {
|
||||
options = { effect: options };
|
||||
}
|
||||
|
||||
var hasOptions;
|
||||
var effectName = !options
|
||||
? method
|
||||
: options === true || typeof options === 'number'
|
||||
? defaultEffect
|
||||
: options.effect || defaultEffect;
|
||||
|
||||
options = options || {};
|
||||
if (typeof options === 'number') {
|
||||
options = { duration: options };
|
||||
}
|
||||
|
||||
hasOptions = !$.isEmptyObject(options);
|
||||
options.complete = callback;
|
||||
|
||||
if (options.delay) {
|
||||
element.delay(options.delay);
|
||||
}
|
||||
|
||||
if (hasOptions && $.effects && $.effects.effect[effectName]) {
|
||||
element[method](options);
|
||||
} else if (effectName !== method && element[effectName]) {
|
||||
element[effectName](options.duration, options.easing, callback);
|
||||
} else {
|
||||
element.queue(function (next) {
|
||||
$(this)[method]();
|
||||
if (callback) {
|
||||
callback.call(element[0]);
|
||||
}
|
||||
next();
|
||||
});
|
||||
}
|
||||
};
|
||||
});
|
||||
});
|
||||
2
public/js/load-image.all.min.js
vendored
Normal file
2
public/js/load-image.all.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -2,5 +2,9 @@
|
||||
"/js/app.js": "/js/app.js",
|
||||
"/css/app.css": "/css/app.css",
|
||||
"/css/common.css": "/css/common.css",
|
||||
"/css/fontawesome.css": "/css/fontawesome.css"
|
||||
"/css/fontawesome.css": "/css/fontawesome.css",
|
||||
"/js/jquery.ui.widget.js": "/js/jquery.ui.widget.js",
|
||||
"/js/jquery.iframe-transport.js": "/js/jquery.iframe-transport.js",
|
||||
"/js/jquery.fileupload.js": "/js/jquery.fileupload.js",
|
||||
"/js/load-image.all.min.js": "/js/load-image.all.min.js"
|
||||
}
|
||||
|
||||
6
resources/js/app.js
vendored
6
resources/js/app.js
vendored
@ -14,5 +14,11 @@ window.utils = {
|
||||
i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
|
||||
return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i];
|
||||
},
|
||||
guid: () => {
|
||||
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
|
||||
let r = Math.random()*16|0, v = c === 'x' ? r : (r&0x3|0x8);
|
||||
return v.toString(16);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,8 @@
|
||||
@push('scripts')
|
||||
<script src="https://cdn.jsdelivr.net/npm/webuploader@0.1.8/dist/webuploader.js"></script>
|
||||
<script src="{{ asset('js/jquery.ui.widget.js') }}"></script>
|
||||
<script src="{{ asset('js/jquery.iframe-transport.js') }}"></script>
|
||||
<script src="{{ asset('js/jquery.fileupload.js') }}"></script>
|
||||
<script src="{{ asset('js/load-image.all.min.js') }}"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js"></script>
|
||||
@endpush
|
||||
|
||||
@ -9,7 +12,7 @@
|
||||
<div class="mb-4 p-4 bg-white rounded-md">
|
||||
<h1 class="tracking-wider text-2xl text-gray-700 mb-2" style="text-shadow: -4px 4px 0 rgb(0 0 0 / 10%);">Image Upload</h1>
|
||||
<p class="text-gray-500 text-sm">最大可上传 1.00 MB 的图片，单次同时可选择 3 张。本站已托管 3267 张图片。</p>
|
||||
<div class="mt-3 rounded-md border-2 border-dotted border-stone-300 w-full h-full" id="picker-dnd" onclick="$('#picker input').click()">
|
||||
<div class="mt-3 rounded-md border-2 border-dotted border-stone-300 w-full h-full" id="picker-dnd" onclick="$('#picker').click()">
|
||||
<div id="upload-container" class="relative group flex flex-col justify-center items-center p-2 w-full h-full min-h-[150px] sm:min-h-[340px] space-y-4 text-gray-500 cursor-pointer">
|
||||
<i id="clear" class="fas fa-times absolute top-1 right-1 w-8 h-8 flex justify-center items-center cursor-pointer text-xl text-center hidden group-hover:block text-gray-400 hover:text-gray-500"></i>
|
||||
<p id="upload-all" title="点我上传全部"><i class="fas fa-cloud-upload-alt text-6xl hover:text-indigo-400"></i></p>
|
||||
@ -91,149 +94,138 @@
|
||||
const UPLOAD_WAITING = 0; // 等待上传
|
||||
const UPLOAD_SUCCESS = 1; // 上传成功
|
||||
const UPLOAD_ERROR = 2; // 上传失败
|
||||
var uploader = WebUploader.create({
|
||||
server: '/upload',
|
||||
dnd: '#picker-dnd',
|
||||
disableGlobalDnd: true,
|
||||
pick: {
|
||||
id: '#picker',
|
||||
multiple: true,
|
||||
},
|
||||
threads: 3,
|
||||
fileSingleSizeLimit: 5242880,
|
||||
formData: {},
|
||||
accept: {
|
||||
title: 'Images',
|
||||
extensions: 'gif,jpg,jpeg,bmp,png',
|
||||
mimeTypes: 'image/*'
|
||||
}
|
||||
});
|
||||
var $previews = $('#upload-preview');
|
||||
var $links = $('#links-container');
|
||||
// 获取某个预览图片dom
|
||||
var $getPreview = function (id) {
|
||||
return $previews.find('[data-id="' + id + '"]');
|
||||
let $previews = $('#upload-preview');
|
||||
let $links = $('#links-container');
|
||||
let $picker = $('#picker');
|
||||
let queue = []; // 文件队列
|
||||
/**
|
||||
* 设置状态
|
||||
* @param data
|
||||
* @param status
|
||||
*/
|
||||
const setStatus = (data, status) => {
|
||||
queue[data.guid].status = data.status = status;
|
||||
}
|
||||
// 设置某个预览片上传状态
|
||||
var $setPreviewStatus = function ($preview, status, msg) {
|
||||
var $info = $preview.find('.upload-info');
|
||||
$info.removeClass('text-green-800 text-red-500');
|
||||
switch (status) {
|
||||
case UPLOAD_WAITING:
|
||||
$info.text('等待上传');
|
||||
break;
|
||||
case UPLOAD_SUCCESS:
|
||||
$picker.fileupload({
|
||||
url: '{{ route('upload') }}',
|
||||
autoUpload: false,
|
||||
dataType: 'json',
|
||||
limitMultiFileUploads: 1,
|
||||
limitConcurrentUploads: 3,
|
||||
pasteZone: $(document),
|
||||
dropZone: $('#picker-dnd'),
|
||||
headers: {
|
||||
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
|
||||
},
|
||||
formData: (form) => {
|
||||
|
||||
},
|
||||
add: (e, data) => {
|
||||
// TODO 验证文件size、类型等
|
||||
let guid = utils.guid();
|
||||
data.guid = guid;
|
||||
data.status = UPLOAD_WAITING;
|
||||
let file = data.files[0]
|
||||
loadImage(file, function (img) {
|
||||
if (img.type === 'error') {
|
||||
toastr.error(`文件 ${file.name} 缩略图生成失败`);
|
||||
console.error('Error loading image file')
|
||||
}
|
||||
let html = $('#image-preview-tpl')
|
||||
.html()
|
||||
.replace(/__id__/g, guid)
|
||||
.replace(/__src__/g, img.toDataURL())
|
||||
.replace(/__name__/g, file.name)
|
||||
.replace(/__info__/g, utils.formatSize(file.size));
|
||||
data.$preview = $previews.append(html).show().find(`[data-id="${guid}"]`);
|
||||
queue[guid] = data;
|
||||
}, {
|
||||
maxWidth: 200,
|
||||
maxHeight: 200,
|
||||
meta: true,
|
||||
orientation: true,
|
||||
canvas: true
|
||||
},
|
||||
)
|
||||
},
|
||||
send: (e, data) => {
|
||||
data.$preview.find('[data-operate="upload"]').hide();
|
||||
},
|
||||
progress: (e, data) => {
|
||||
let progress = parseInt(data.loaded / data.total * 100, 10);
|
||||
let $uploadInfo = data.$preview.find('.upload-info');
|
||||
let $uploadProgress = data.$preview.find('.upload-progress');
|
||||
let rate = progress + '%';
|
||||
$uploadInfo.text('上传中...' + rate);
|
||||
$uploadProgress.css('width', rate);
|
||||
},
|
||||
done: (e, data) => {
|
||||
let $info = data.$preview.find('.upload-info');
|
||||
let response = data.result;
|
||||
if (response.status) {
|
||||
setStatus(data, UPLOAD_SUCCESS);
|
||||
data.$preview.attr('uploaded', true);
|
||||
$info.addClass('text-green-800').text('上传成功');
|
||||
break;
|
||||
case UPLOAD_ERROR:
|
||||
$info.addClass('text-red-500').text('上传失败');
|
||||
break;
|
||||
}
|
||||
if (msg) $info.text(msg);
|
||||
};
|
||||
uploader.on('uploadBeforeSend', function (object, data, headers) {
|
||||
headers['X-CSRF-TOKEN'] = $('meta[name="csrf-token"]').attr('content');
|
||||
});
|
||||
uploader.on('fileQueued', function(file) {
|
||||
// 创建缩略图
|
||||
uploader.makeThumb(file, function(error, src) {
|
||||
if (error) {
|
||||
// 创建失败
|
||||
// 追加链接
|
||||
for (let key in response.data) {
|
||||
$('#links [data-tab="' + key + '"]').append('<p class="whitespace-nowrap select-all mt-1 bg-gray-50 hover:bg-gray-200 text-gray-600 rounded px-2 py-1 cursor-pointer overflow-scroll scrollbar-none">' + response.data[key].toString() + '</p>')
|
||||
}
|
||||
$links.show();
|
||||
} else {
|
||||
setStatus(data, UPLOAD_ERROR);
|
||||
$info.addClass('text-red-500').text(response.message);
|
||||
// 重新显示上传按钮
|
||||
data.$preview.find('[data-operate="upload"]').show();
|
||||
}
|
||||
var html = $('#image-preview-tpl')
|
||||
.html()
|
||||
.replace(/__id__/g, file.id)
|
||||
.replace(/__src__/g, src)
|
||||
.replace(/__name__/g, file.name)
|
||||
.replace(/__info__/g, utils.formatSize(file.size));
|
||||
$previews.append(html).show();
|
||||
}, 100, 100);
|
||||
});
|
||||
uploader.on('uploadStart', function (file) {
|
||||
$getPreview(file.id).find('[data-operate="upload"]').hide();
|
||||
});
|
||||
uploader.on('uploadAccept', function (object, ret) {
|
||||
});
|
||||
uploader.on('uploadProgress', function (file, percentage) {
|
||||
var $preview = $getPreview(file.id);
|
||||
var $uploadInfo = $preview.find('.upload-info');
|
||||
var $uploadProgress = $preview.find('.upload-progress');
|
||||
var rate = (percentage * 100).toFixed(2) + '%';
|
||||
$uploadInfo.text('上传中...' + rate);
|
||||
$uploadProgress.css('width', rate);
|
||||
});
|
||||
uploader.on('uploadError', function (file, reason) {
|
||||
// Status Code: 400 ~ 400
|
||||
if (reason === 'http') {
|
||||
}
|
||||
if (reason === 'server') {
|
||||
}
|
||||
$setPreviewStatus($getPreview(file.id), UPLOAD_ERROR, '服务异常，请刷新重试')
|
||||
});
|
||||
uploader.on('uploadSuccess', function (file, response) {
|
||||
var $preview = $getPreview(file.id);
|
||||
if (response.status) {
|
||||
$preview.attr('uploaded', true);
|
||||
$setPreviewStatus($preview, UPLOAD_SUCCESS);
|
||||
// 追加链接
|
||||
for (var key in response.data) {
|
||||
$('#links [data-tab="' + key + '"]').append('<p class="whitespace-nowrap select-all mt-1 bg-gray-50 hover:bg-gray-200 text-gray-600 rounded px-2 py-1 cursor-pointer overflow-scroll scrollbar-none">' + response.data[key].toString() + '</p>')
|
||||
}
|
||||
$links.show();
|
||||
} else {
|
||||
$setPreviewStatus($preview, UPLOAD_ERROR, response.message);
|
||||
},
|
||||
fail: (e, data) => {
|
||||
setStatus(data, UPLOAD_ERROR);
|
||||
// TODO 检查403、419等状态码
|
||||
data.$preview.find('.upload-info').addClass('text-red-500').text('服务端异常，请稍后重试');
|
||||
// 重新显示上传按钮
|
||||
$preview.find('[data-operate="upload"]').show();
|
||||
}
|
||||
});
|
||||
uploader.on('uploadComplete', function (file) {
|
||||
console.log('uploadComplete', file)
|
||||
});
|
||||
uploader.on('error', function (type, max, file) {
|
||||
// 不同类型的错误，第二个和第三个参数会有不同，坑😢
|
||||
if (type === 'F_EXCEED_SIZE') {
|
||||
toastr.warning('文件大小超出限制(max: ' + utils.formatSize(max) + '), ' + file.name);
|
||||
data.$preview.find('[data-operate="upload"]').show();
|
||||
},
|
||||
// 等同于jq的complete
|
||||
always: (e, data) => {
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
$('#upload-all').click(function (e) {
|
||||
e.stopPropagation();
|
||||
// 没有任何未上传的文件，选择文件
|
||||
if ($previews.find('[data-id]').length === $previews.find('[data-id][uploaded]').length) {
|
||||
$('#picker input').click();
|
||||
$(document).on('drop dragover', (e) => e.preventDefault());
|
||||
$previews.click((e) => e.stopPropagation());
|
||||
|
||||
$('#upload-all').click((e) => {
|
||||
// 队列中没有文件，选择则继续冒泡，选择文件
|
||||
if (Object.values(queue).filter((item) => item.status !== UPLOAD_SUCCESS).length) {
|
||||
e.stopPropagation();
|
||||
for (const key in queue) {
|
||||
if (queue[key].status !== UPLOAD_SUCCESS) {
|
||||
queue[key].submit();
|
||||
}
|
||||
}
|
||||
}
|
||||
// 组件正在上传，不进行任何操作
|
||||
if (uploader.isInProgress()) {
|
||||
return false;
|
||||
}
|
||||
// 上传队列中状态正常的文件，上传失败的需要传指定文件重新上传
|
||||
uploader.upload();
|
||||
});
|
||||
|
||||
$previews.click(function (e) {
|
||||
e.stopPropagation();
|
||||
$previews.on('click', '[data-operate]', function () {
|
||||
let $preview = $(this).closest('[data-id]');
|
||||
let method = $(this).data('operate');
|
||||
let id = $preview.data('id');
|
||||
if (method === 'remove') {
|
||||
queue[id].abort();
|
||||
delete queue[id];
|
||||
$preview.remove();
|
||||
}
|
||||
if (method === 'upload' && queue[id].status !== UPLOAD_SUCCESS) {
|
||||
queue[id].submit();
|
||||
}
|
||||
});
|
||||
|
||||
$('#clear').click(function (e) {
|
||||
e.stopPropagation();
|
||||
uploader.reset();
|
||||
queue = [];
|
||||
$previews.html('');
|
||||
});
|
||||
|
||||
$previews.on('click', '[data-operate]', function () {
|
||||
var $getPreview = $(this).closest('[data-id]');
|
||||
var method = $(this).data('operate');
|
||||
var id = $getPreview.data('id');
|
||||
if (method === 'remove') {
|
||||
uploader.cancelFile(id);
|
||||
uploader.removeFile(id, true);
|
||||
$getPreview.remove();
|
||||
}
|
||||
if (method === 'upload') {
|
||||
uploader.upload(id);
|
||||
}
|
||||
});
|
||||
|
||||
$('[data-tab-name]').click(function () {
|
||||
$(this).removeClass('active border-transparent')
|
||||
.addClass('active border-indigo-500')
|
||||
@ -248,6 +240,5 @@
|
||||
$('[data-tab]').html('')
|
||||
$links.hide();
|
||||
});
|
||||
|
||||
</script>
|
||||
@endpush
|
||||
|
||||
6
webpack.mix.js
vendored
6
webpack.mix.js
vendored
@ -18,3 +18,9 @@ mix.js('resources/js/app.js', 'public/js').postCss('resources/css/app.css', 'pub
|
||||
]);
|
||||
mix.less('resources/css/fontawesome.less', 'public/css');
|
||||
mix.less('resources/css/common.less', 'public/css');
|
||||
|
||||
mix.copy('node_modules/blueimp-file-upload/js/vendor/jquery.ui.widget.js', 'public/js');
|
||||
mix.copy('node_modules/blueimp-file-upload/js/jquery.iframe-transport.js', 'public/js');
|
||||
mix.copy('node_modules/blueimp-file-upload/js/jquery.fileupload.js', 'public/js');
|
||||
mix.copy('node_modules/blueimp-load-image/js/load-image.all.min.js', 'public/js')
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user