mirror/php-monstra
1
0
Fork 0
mirror of https://github.com/monstra-cms/monstra.git synced 2025-08-04 20:27:40 +02:00
Code Issues Releases Wiki Activity

Files Manager Improvements - Bootstrap: fileinput.js v3.0.0-p7 #94

Browse Source
This commit is contained in:
Awilum
2014-01-31 19:01:53 +02:00
parent 933c1df4f6
commit eecf2e85a4
2 changed files with 142 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
public/assets/css/bootstrap-fileupload.css vendored
View File

@@ -1,39 +1,3 @@
/*!
* Bootstrap v2.3.1-j6
*
* Copyright 2012 Twitter, Inc
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world by @mdo and @fat, extended by @ArnoldDaniels.
*/
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
line-height: 0;
}
.clearfix:after {
clear: both;
}
.hide-text {
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
.input-block-level {
display: block;
width: 100%;
min-height: 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.btn-file { .btn-file {
overflow: hidden; overflow: hidden;
position: relative; position: relative;
@@ -51,85 +15,76 @@
direction: ltr; direction: ltr;
cursor: pointer; cursor: pointer;
} }
.fileupload { .fileinput {
margin-bottom: 9px; margin-bottom: 9px;
display: inline-block;
} }
.fileupload .uneditable-input { .fileinput .uneditable-input {
display: inline-block; display: inline-block;
margin-bottom: 0px; margin-bottom: 0px;
vertical-align: middle; vertical-align: middle;
cursor: text; cursor: text;
} }
.fileupload .thumbnail { .fileinput .thumbnail {
overflow: hidden; overflow: hidden;
display: inline-block; display: inline-block;
margin-bottom: 5px; margin-bottom: 5px;
vertical-align: middle; vertical-align: middle;
text-align: center; text-align: center;
} }
.fileupload .thumbnail > img { .fileinput .thumbnail > img {
display: inline-block;
vertical-align: middle;
max-height: 100%; max-height: 100%;
} }
.fileupload .btn { .fileinput .btn {
vertical-align: middle; vertical-align: middle;
} }
.fileupload-exists .fileupload-new, .fileinput-exists .fileinput-new,
.fileupload-new .fileupload-exists { .fileinput-new .fileinput-exists {
display: none; display: none;
} }
.fileupload-exists { .fileinput-inline .fileinput-controls {
float:none;
}
.fileupload-inline .fileupload-controls {
display: inline; display: inline;
} }
.fileupload-new .input-append .btn-file { .fileinput .uneditable-input {
-webkit-border-radius: 0 3px 3px 0; white-space: normal;
-moz-border-radius: 0 3px 3px 0; }
.fileinput-new .input-group .btn-file {
border-radius: 0 4px 4px 0;
}
.fileinput-new .input-group .btn-file.btn-xs,
.fileinput-new .input-group .btn-file.btn-sm {
border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0;
} }
.thumbnail-borderless .thumbnail { .fileinput-new .input-group .btn-file.btn-lg {
border: none; border-radius: 0 6px 6px 0;
padding: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
} }
.fileupload-new.thumbnail-borderless .thumbnail { .form-group.has-warning .fileinput .uneditable-input {
border: 1px solid #ddd; color: #c09853;
border-color: #faebcc;
} }
.control-group.warning .fileupload .uneditable-input { .form-group.has-warning .fileinput .fileinput-preview {
color: #a47e3c; color: #c09853;
border-color: #a47e3c;
} }
.control-group.warning .fileupload .fileupload-preview { .form-group.has-warning .fileinput .thumbnail {
color: #a47e3c; border-color: #faebcc;
} }
.control-group.warning .fileupload .thumbnail { .form-group.has-error .fileinput .uneditable-input {
border-color: #a47e3c;
}
.control-group.error .fileupload .uneditable-input {
color: #b94a48; color: #b94a48;
border-color: #b94a48; border-color: #ebccd1;
} }
.control-group.error .fileupload .fileupload-preview { .form-group.has-error .fileinput .fileinput-preview {
color: #b94a48; color: #b94a48;
} }
.control-group.error .fileupload .thumbnail { .form-group.has-error .fileinput .thumbnail {
border-color: #b94a48; border-color: #ebccd1;
} }
.control-group.success .fileupload .uneditable-input { .form-group.has-success .fileinput .uneditable-input {
color: #468847; color: #468847;
border-color: #468847; border-color: #d6e9c6;
} }
.control-group.success .fileupload .fileupload-preview { .form-group.has-success .fileinput .fileinput-preview {
color: #468847; color: #468847;
} }
.control-group.success .fileupload .thumbnail { .form-group.has-success .fileinput .thumbnail {
border-color: #468847; border-color: #d6e9c6;
} }

130
public/assets/js/bootstrap-fileupload.js vendored
View File

@@ -1,6 +1,6 @@
/* =========================================================== /* ===========================================================
* bootstrap-fileupload.js j2 * Bootstrap: fileinput.js v3.0.0-p7
* http://jasny.github.com/bootstrap/javascript.html#fileupload * http://jasny.github.com/bootstrap/javascript.html#fileinput
* =========================================================== * ===========================================================
* Copyright 2012 Jasny BV, Netherlands. * Copyright 2012 Jasny BV, Netherlands.
* *
@@ -17,16 +17,15 @@
* limitations under the License. * limitations under the License.
* ========================================================== */ * ========================================================== */
!function ($) { +function ($) { "use strict";
"use strict"; // jshint ;_ var isIE = window.navigator.appName == 'Microsoft Internet Explorer'
/* FILEUPLOAD PUBLIC CLASS DEFINITION // FILEUPLOAD PUBLIC CLASS DEFINITION
* ================================= */ // =================================
var Fileupload = function (element, options) { var Fileupload = function (element, options) {
this.$element = $(element) this.$element = $(element)
this.type = this.$element.data('uploadtype') || (this.$element.find('.thumbnail').length > 0 ? "image" : "file")
this.$input = this.$element.find(':file') this.$input = this.$element.find(':file')
if (this.$input.length === 0) return if (this.$input.length === 0) return
@@ -39,130 +38,141 @@
this.$element.prepend(this.$hidden) this.$element.prepend(this.$hidden)
} }
this.$preview = this.$element.find('.fileupload-preview') this.$preview = this.$element.find('.fileinput-preview')
var height = this.$preview.css('height') var height = this.$preview.css('height')
if (this.$preview.css('display') != 'inline' && height != '0px' && height != 'none') this.$preview.css('line-height', height) if (this.$preview.css('display') != 'inline' && height != '0px' && height != 'none') this.$preview.css('line-height', height)
this.original = { this.original = {
'exists': this.$element.hasClass('fileupload-exists'), exists: this.$element.hasClass('fileinput-exists'),
'preview': this.$preview.html(), preview: this.$preview.html(),
'hiddenVal': this.$hidden.val() hiddenVal: this.$hidden.val()
} }
this.$remove = this.$element.find('[data-dismiss="fileupload"]')
this.$element.find('[data-trigger="fileupload"]').on('click.fileupload', $.proxy(this.trigger, this))
this.listen() this.listen()
} }
Fileupload.prototype = { Fileupload.prototype.listen = function() {
this.$input.on('change.bs.fileinput', $.proxy(this.change, this))
$(this.$input[0].form).on('reset.bs.fileinput', $.proxy(this.reset, this))
listen: function() { this.$element.find('[data-trigger="fileinput"]').on('click.bs.fileinput', $.proxy(this.trigger, this))
this.$input.on('change.fileupload', $.proxy(this.change, this)) this.$element.find('[data-dismiss="fileinput"]').on('click.bs.fileinput', $.proxy(this.clear, this))
$(this.$input[0].form).on('reset.fileupload', $.proxy(this.reset, this))
if (this.$remove) this.$remove.on('click.fileupload', $.proxy(this.clear, this))
}, },
change: function(e, invoked) { Fileupload.prototype.change = function(e) {
if (invoked === 'clear') return if (e.target.files === undefined) e.target.files = e.target && e.target.value ? [ {name: e.target.value.replace(/^.+\\/, '')} ] : []
if (e.target.files.length === 0) return
var file = e.target.files !== undefined ? e.target.files[0] : (e.target.value ? { name: e.target.value.replace(/^.+\\/, '') } : null)
if (!file) {
this.clear()
return
}
this.$hidden.val('') this.$hidden.val('')
this.$hidden.attr('name', '') this.$hidden.attr('name', '')
this.$input.attr('name', this.name) this.$input.attr('name', this.name)
if (this.type === "image" && this.$preview.length > 0 && (typeof file.type !== "undefined" ? file.type.match('image.*') : file.name.match(/\.(gif|png|jpe?g)$/i)) && typeof FileReader !== "undefined") { var file = e.target.files[0]
if (this.$preview.length > 0 && (typeof file.type !== "undefined" ? file.type.match('image.*') : file.name.match(/\.(gif|png|jpe?g)$/i)) && typeof FileReader !== "undefined") {
var reader = new FileReader() var reader = new FileReader()
var preview = this.$preview var preview = this.$preview
var element = this.$element var element = this.$element
reader.onload = function(e) { reader.onload = function(re) {
preview.html('<img src="' + e.target.result + '" ' + (preview.css('max-height') != 'none' ? 'style="max-height: ' + preview.css('max-height') + ';"' : '') + ' />') var $img = $('<img>').attr('src', re.target.result)
element.addClass('fileupload-exists').removeClass('fileupload-new') e.target.files[0].result = re.target.result
element.find('.fileinput-filename').text(file.name)
// if parent has max-height, using `(max-)height: 100%` on child doesn't take padding and border into account
if (preview.css('max-height') != 'none') $img.css('max-height', parseInt(preview.css('max-height'), 10) - parseInt(preview.css('padding-top'), 10) - parseInt(preview.css('padding-bottom'), 10) - parseInt(preview.css('border-top'), 10) - parseInt(preview.css('border-bottom'), 10))
preview.html($img)
element.addClass('fileinput-exists').removeClass('fileinput-new')
element.trigger('change.bs.fileinput', e.target.files)
} }
reader.readAsDataURL(file) reader.readAsDataURL(file)
} else { } else {
this.$element.find('.fileinput-filename').text(file.name)
this.$preview.text(file.name) this.$preview.text(file.name)
this.$element.addClass('fileupload-exists').removeClass('fileupload-new')
this.$element.addClass('fileinput-exists').removeClass('fileinput-new')
this.$element.trigger('change.bs.fileinput')
} }
}, },
clear: function(e) { Fileupload.prototype.clear = function(e) {
if (e) e.preventDefault()
this.$hidden.val('') this.$hidden.val('')
this.$hidden.attr('name', this.name) this.$hidden.attr('name', this.name)
this.$input.attr('name', '') this.$input.attr('name', '')
//ie8+ doesn't support changing the value of input with type=file so clone instead //ie8+ doesn't support changing the value of input with type=file so clone instead
if (navigator.userAgent.match(/msie/i)){ if (isIE) {
var inputClone = this.$input.clone(true); var inputClone = this.$input.clone(true);
this.$input.after(inputClone); this.$input.after(inputClone);
this.$input.remove(); this.$input.remove();
this.$input = inputClone; this.$input = inputClone;
}else{ } else {
this.$input.val('') this.$input.val('')
} }
this.$preview.html('') this.$preview.html('')
this.$element.addClass('fileupload-new').removeClass('fileupload-exists') this.$element.find('.fileinput-filename').text('')
this.$element.addClass('fileinput-new').removeClass('fileinput-exists')
if (e) { if (e !== false) {
this.$input.trigger('change', [ 'clear' ]) this.$input.trigger('change')
e.preventDefault() this.$element.trigger('clear.bs.fileinput')
} }
}, },
reset: function(e) { Fileupload.prototype.reset = function() {
this.clear() this.clear(false)
this.$hidden.val(this.original.hiddenVal) this.$hidden.val(this.original.hiddenVal)
this.$preview.html(this.original.preview) this.$preview.html(this.original.preview)
this.$element.find('.fileinput-filename').text('')
if (this.original.exists) this.$element.addClass('fileupload-exists').removeClass('fileupload-new') if (this.original.exists) this.$element.addClass('fileinput-exists').removeClass('fileinput-new')
else this.$element.addClass('fileupload-new').removeClass('fileupload-exists') else this.$element.addClass('fileinput-new').removeClass('fileinput-exists')
this.$element.trigger('reset.bs.fileinput')
}, },
trigger: function(e) { Fileupload.prototype.trigger = function(e) {
this.$input.trigger('click') this.$input.trigger('click')
e.preventDefault() e.preventDefault()
} }
}
/* FILEUPLOAD PLUGIN DEFINITION // FILEUPLOAD PLUGIN DEFINITION
* =========================== */ // ===========================
$.fn.fileupload = function (options) { $.fn.fileinput = function (options) {
return this.each(function () { return this.each(function () {
var $this = $(this) var $this = $(this)
, data = $this.data('fileupload') , data = $this.data('fileinput')
if (!data) $this.data('fileupload', (data = new Fileupload(this, options))) if (!data) $this.data('fileinput', (data = new Fileupload(this, options)))
if (typeof options == 'string') data[options]() if (typeof options == 'string') data[options]()
}) })
} }
$.fn.fileupload.Constructor = Fileupload $.fn.fileinput.Constructor = Fileupload
/* FILEUPLOAD DATA-API // FILEUPLOAD DATA-API
* ================== */ // ==================
$(document).on('click.fileupload.data-api', '[data-provides="fileupload"]', function (e) { $(document).on('click.fileinput.data-api', '[data-provides="fileinput"]', function (e) {
var $this = $(this) var $this = $(this)
if ($this.data('fileupload')) return if ($this.data('fileinput')) return
$this.fileupload($this.data()) $this.fileinput($this.data())
var $target = $(e.target).closest('[data-dismiss="fileupload"],[data-trigger="fileupload"]'); var $target = $(e.target).closest('[data-dismiss="fileinput"],[data-trigger="fileinput"]');
if ($target.length > 0) { if ($target.length > 0) {
$target.trigger('click.fileupload')
e.preventDefault() e.preventDefault()
$target.trigger('click.bs.fileinput')
} }
}) })