Mathias Markl
7 years ago
4 changed files with 538 additions and 5 deletions
-
2muk_web_utils/__manifest__.py
-
416muk_web_utils/static/lib/bootstrap-notify/bootstrap-notify.js
-
113muk_web_utils/static/src/js/files.js
-
12muk_web_utils/template/assets.xml
@ -0,0 +1,416 @@ |
|||||
|
/* |
||||
|
* Project: Bootstrap Notify = v3.1.5 |
||||
|
* Description: Turns standard Bootstrap alerts into "Growl-like" notifications. |
||||
|
* Author: Mouse0270 aka Robert McIntosh |
||||
|
* License: MIT License |
||||
|
* Website: https://github.com/mouse0270/bootstrap-growl
|
||||
|
*/ |
||||
|
|
||||
|
/* global define:false, require: false, jQuery:false */ |
||||
|
|
||||
|
(function (factory) { |
||||
|
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(jQuery); |
||||
|
} |
||||
|
}(function ($) { |
||||
|
// Create the defaults once
|
||||
|
var defaults = { |
||||
|
element: 'body', |
||||
|
position: null, |
||||
|
type: "info", |
||||
|
allow_dismiss: true, |
||||
|
allow_duplicates: true, |
||||
|
newest_on_top: false, |
||||
|
showProgressbar: false, |
||||
|
placement: { |
||||
|
from: "top", |
||||
|
align: "right" |
||||
|
}, |
||||
|
offset: 20, |
||||
|
spacing: 10, |
||||
|
z_index: 1031, |
||||
|
delay: 5000, |
||||
|
timer: 1000, |
||||
|
url_target: '_blank', |
||||
|
mouse_over: null, |
||||
|
animate: { |
||||
|
enter: 'animated fadeInDown', |
||||
|
exit: 'animated fadeOutUp' |
||||
|
}, |
||||
|
onShow: null, |
||||
|
onShown: null, |
||||
|
onClose: null, |
||||
|
onClosed: null, |
||||
|
onClick: null, |
||||
|
icon_type: 'class', |
||||
|
template: '<div data-notify="container" class="col-xs-11 col-sm-4 alert alert-{0}" role="alert"><button type="button" aria-hidden="true" class="close" data-notify="dismiss">×</button><span data-notify="icon"></span> <span data-notify="title">{1}</span> <span data-notify="message">{2}</span><div class="progress" data-notify="progressbar"><div class="progress-bar progress-bar-{0}" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div></div><a href="{3}" target="{4}" data-notify="url"></a></div>' |
||||
|
}; |
||||
|
|
||||
|
String.format = function () { |
||||
|
var args = arguments; |
||||
|
var str = arguments[0]; |
||||
|
return str.replace(/(\{\{\d\}\}|\{\d\})/g, function (str) { |
||||
|
if (str.substring(0, 2) === "{{") return str; |
||||
|
var num = parseInt(str.match(/\d/)[0]); |
||||
|
return args[num + 1]; |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
function isDuplicateNotification(notification) { |
||||
|
var isDupe = false; |
||||
|
|
||||
|
$('[data-notify="container"]').each(function (i, el) { |
||||
|
var $el = $(el); |
||||
|
var title = $el.find('[data-notify="title"]').html().trim(); |
||||
|
var message = $el.find('[data-notify="message"]').html().trim(); |
||||
|
|
||||
|
// The input string might be different than the actual parsed HTML string!
|
||||
|
// (<br> vs <br /> for example)
|
||||
|
// So we have to force-parse this as HTML here!
|
||||
|
var isSameTitle = title === $("<div>" + notification.settings.content.title + "</div>").html().trim(); |
||||
|
var isSameMsg = message === $("<div>" + notification.settings.content.message + "</div>").html().trim(); |
||||
|
var isSameType = $el.hasClass('alert-' + notification.settings.type); |
||||
|
|
||||
|
if (isSameTitle && isSameMsg && isSameType) { |
||||
|
//we found the dupe. Set the var and stop checking.
|
||||
|
isDupe = true; |
||||
|
} |
||||
|
return !isDupe; |
||||
|
}); |
||||
|
|
||||
|
return isDupe; |
||||
|
} |
||||
|
|
||||
|
function Notify(element, content, options) { |
||||
|
// Setup Content of Notify
|
||||
|
var contentObj = { |
||||
|
content: { |
||||
|
message: typeof content === 'object' ? content.message : content, |
||||
|
title: content.title ? content.title : '', |
||||
|
icon: content.icon ? content.icon : '', |
||||
|
url: content.url ? content.url : '#', |
||||
|
target: content.target ? content.target : '-' |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
options = $.extend(true, {}, contentObj, options); |
||||
|
this.settings = $.extend(true, {}, defaults, options); |
||||
|
this._defaults = defaults; |
||||
|
if (this.settings.content.target === "-") { |
||||
|
this.settings.content.target = this.settings.url_target; |
||||
|
} |
||||
|
this.animations = { |
||||
|
start: 'webkitAnimationStart oanimationstart MSAnimationStart animationstart', |
||||
|
end: 'webkitAnimationEnd oanimationend MSAnimationEnd animationend' |
||||
|
}; |
||||
|
|
||||
|
if (typeof this.settings.offset === 'number') { |
||||
|
this.settings.offset = { |
||||
|
x: this.settings.offset, |
||||
|
y: this.settings.offset |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
//if duplicate messages are not allowed, then only continue if this new message is not a duplicate of one that it already showing
|
||||
|
if (this.settings.allow_duplicates || (!this.settings.allow_duplicates && !isDuplicateNotification(this))) { |
||||
|
this.init(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
$.extend(Notify.prototype, { |
||||
|
init: function () { |
||||
|
var self = this; |
||||
|
|
||||
|
this.buildNotify(); |
||||
|
if (this.settings.content.icon) { |
||||
|
this.setIcon(); |
||||
|
} |
||||
|
if (this.settings.content.url != "#") { |
||||
|
this.styleURL(); |
||||
|
} |
||||
|
this.styleDismiss(); |
||||
|
this.placement(); |
||||
|
this.bind(); |
||||
|
|
||||
|
this.notify = { |
||||
|
$ele: this.$ele, |
||||
|
update: function (command, update) { |
||||
|
var commands = {}; |
||||
|
if (typeof command === "string") { |
||||
|
commands[command] = update; |
||||
|
} else { |
||||
|
commands = command; |
||||
|
} |
||||
|
for (var cmd in commands) { |
||||
|
switch (cmd) { |
||||
|
case "type": |
||||
|
this.$ele.removeClass('alert-' + self.settings.type); |
||||
|
this.$ele.find('[data-notify="progressbar"] > .progress-bar').removeClass('progress-bar-' + self.settings.type); |
||||
|
self.settings.type = commands[cmd]; |
||||
|
this.$ele.addClass('alert-' + commands[cmd]).find('[data-notify="progressbar"] > .progress-bar').addClass('progress-bar-' + commands[cmd]); |
||||
|
break; |
||||
|
case "icon": |
||||
|
var $icon = this.$ele.find('[data-notify="icon"]'); |
||||
|
if (self.settings.icon_type.toLowerCase() === 'class') { |
||||
|
$icon.removeClass(self.settings.content.icon).addClass(commands[cmd]); |
||||
|
} else { |
||||
|
if (!$icon.is('img')) { |
||||
|
$icon.find('img'); |
||||
|
} |
||||
|
$icon.attr('src', commands[cmd]); |
||||
|
} |
||||
|
self.settings.content.icon = commands[command]; |
||||
|
break; |
||||
|
case "progress": |
||||
|
var newDelay = self.settings.delay - (self.settings.delay * (commands[cmd] / 100)); |
||||
|
this.$ele.data('notify-delay', newDelay); |
||||
|
this.$ele.find('[data-notify="progressbar"] > div').attr('aria-valuenow', commands[cmd]).css('width', commands[cmd] + '%'); |
||||
|
break; |
||||
|
case "url": |
||||
|
this.$ele.find('[data-notify="url"]').attr('href', commands[cmd]); |
||||
|
break; |
||||
|
case "target": |
||||
|
this.$ele.find('[data-notify="url"]').attr('target', commands[cmd]); |
||||
|
break; |
||||
|
default: |
||||
|
this.$ele.find('[data-notify="' + cmd + '"]').html(commands[cmd]); |
||||
|
} |
||||
|
} |
||||
|
var posX = this.$ele.outerHeight() + parseInt(self.settings.spacing) + parseInt(self.settings.offset.y); |
||||
|
self.reposition(posX); |
||||
|
}, |
||||
|
close: function () { |
||||
|
self.close(); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
}, |
||||
|
buildNotify: function () { |
||||
|
var content = this.settings.content; |
||||
|
this.$ele = $(String.format(this.settings.template, this.settings.type, content.title, content.message, content.url, content.target)); |
||||
|
this.$ele.attr('data-notify-position', this.settings.placement.from + '-' + this.settings.placement.align); |
||||
|
if (!this.settings.allow_dismiss) { |
||||
|
this.$ele.find('[data-notify="dismiss"]').css('display', 'none'); |
||||
|
} |
||||
|
if ((this.settings.delay <= 0 && !this.settings.showProgressbar) || !this.settings.showProgressbar) { |
||||
|
this.$ele.find('[data-notify="progressbar"]').remove(); |
||||
|
} |
||||
|
}, |
||||
|
setIcon: function () { |
||||
|
if (this.settings.icon_type.toLowerCase() === 'class') { |
||||
|
this.$ele.find('[data-notify="icon"]').addClass(this.settings.content.icon); |
||||
|
} else { |
||||
|
if (this.$ele.find('[data-notify="icon"]').is('img')) { |
||||
|
this.$ele.find('[data-notify="icon"]').attr('src', this.settings.content.icon); |
||||
|
} else { |
||||
|
this.$ele.find('[data-notify="icon"]').append('<img src="' + this.settings.content.icon + '" alt="Notify Icon" />'); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
styleDismiss: function () { |
||||
|
this.$ele.find('[data-notify="dismiss"]').css({ |
||||
|
position: 'absolute', |
||||
|
right: '10px', |
||||
|
top: '5px', |
||||
|
zIndex: this.settings.z_index + 2 |
||||
|
}); |
||||
|
}, |
||||
|
styleURL: function () { |
||||
|
this.$ele.find('[data-notify="url"]').css({ |
||||
|
backgroundImage: 'url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)', |
||||
|
height: '100%', |
||||
|
left: 0, |
||||
|
position: 'absolute', |
||||
|
top: 0, |
||||
|
width: '100%', |
||||
|
zIndex: this.settings.z_index + 1 |
||||
|
}); |
||||
|
}, |
||||
|
placement: function () { |
||||
|
var self = this, |
||||
|
offsetAmt = this.settings.offset.y, |
||||
|
css = { |
||||
|
display: 'inline-block', |
||||
|
margin: '0px auto', |
||||
|
position: this.settings.position ? this.settings.position : (this.settings.element === 'body' ? 'fixed' : 'absolute'), |
||||
|
transition: 'all .5s ease-in-out', |
||||
|
zIndex: this.settings.z_index |
||||
|
}, |
||||
|
hasAnimation = false, |
||||
|
settings = this.settings; |
||||
|
|
||||
|
$('[data-notify-position="' + this.settings.placement.from + '-' + this.settings.placement.align + '"]:not([data-closing="true"])').each(function () { |
||||
|
offsetAmt = Math.max(offsetAmt, parseInt($(this).css(settings.placement.from)) + parseInt($(this).outerHeight()) + parseInt(settings.spacing)); |
||||
|
}); |
||||
|
if (this.settings.newest_on_top === true) { |
||||
|
offsetAmt = this.settings.offset.y; |
||||
|
} |
||||
|
css[this.settings.placement.from] = offsetAmt + 'px'; |
||||
|
|
||||
|
switch (this.settings.placement.align) { |
||||
|
case "left": |
||||
|
case "right": |
||||
|
css[this.settings.placement.align] = this.settings.offset.x + 'px'; |
||||
|
break; |
||||
|
case "center": |
||||
|
css.left = 0; |
||||
|
css.right = 0; |
||||
|
break; |
||||
|
} |
||||
|
this.$ele.css(css).addClass(this.settings.animate.enter); |
||||
|
$.each(Array('webkit-', 'moz-', 'o-', 'ms-', ''), function (index, prefix) { |
||||
|
self.$ele[0].style[prefix + 'AnimationIterationCount'] = 1; |
||||
|
}); |
||||
|
|
||||
|
$(this.settings.element).append(this.$ele); |
||||
|
|
||||
|
if (this.settings.newest_on_top === true) { |
||||
|
offsetAmt = (parseInt(offsetAmt) + parseInt(this.settings.spacing)) + this.$ele.outerHeight(); |
||||
|
this.reposition(offsetAmt); |
||||
|
} |
||||
|
|
||||
|
if ($.isFunction(self.settings.onShow)) { |
||||
|
self.settings.onShow.call(this.$ele); |
||||
|
} |
||||
|
|
||||
|
this.$ele.one(this.animations.start, function () { |
||||
|
hasAnimation = true; |
||||
|
}).one(this.animations.end, function () { |
||||
|
self.$ele.removeClass(self.settings.animate.enter); |
||||
|
if ($.isFunction(self.settings.onShown)) { |
||||
|
self.settings.onShown.call(this); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
setTimeout(function () { |
||||
|
if (!hasAnimation) { |
||||
|
if ($.isFunction(self.settings.onShown)) { |
||||
|
self.settings.onShown.call(this); |
||||
|
} |
||||
|
} |
||||
|
}, 600); |
||||
|
}, |
||||
|
bind: function () { |
||||
|
var self = this; |
||||
|
|
||||
|
this.$ele.find('[data-notify="dismiss"]').on('click', function () { |
||||
|
self.close(); |
||||
|
}); |
||||
|
|
||||
|
if ($.isFunction(self.settings.onClick)) { |
||||
|
this.$ele.on('click', function (event) { |
||||
|
if (event.target != self.$ele.find('[data-notify="dismiss"]')[0]) { |
||||
|
self.settings.onClick.call(this, event); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
this.$ele.mouseover(function () { |
||||
|
$(this).data('data-hover', "true"); |
||||
|
}).mouseout(function () { |
||||
|
$(this).data('data-hover', "false"); |
||||
|
}); |
||||
|
this.$ele.data('data-hover', "false"); |
||||
|
|
||||
|
if (this.settings.delay > 0) { |
||||
|
self.$ele.data('notify-delay', self.settings.delay); |
||||
|
var timer = setInterval(function () { |
||||
|
var delay = parseInt(self.$ele.data('notify-delay')) - self.settings.timer; |
||||
|
if ((self.$ele.data('data-hover') === 'false' && self.settings.mouse_over === "pause") || self.settings.mouse_over != "pause") { |
||||
|
var percent = ((self.settings.delay - delay) / self.settings.delay) * 100; |
||||
|
self.$ele.data('notify-delay', delay); |
||||
|
self.$ele.find('[data-notify="progressbar"] > div').attr('aria-valuenow', percent).css('width', percent + '%'); |
||||
|
} |
||||
|
if (delay <= -(self.settings.timer)) { |
||||
|
clearInterval(timer); |
||||
|
self.close(); |
||||
|
} |
||||
|
}, self.settings.timer); |
||||
|
} |
||||
|
}, |
||||
|
close: function () { |
||||
|
var self = this, |
||||
|
posX = parseInt(this.$ele.css(this.settings.placement.from)), |
||||
|
hasAnimation = false; |
||||
|
|
||||
|
this.$ele.attr('data-closing', 'true').addClass(this.settings.animate.exit); |
||||
|
self.reposition(posX); |
||||
|
|
||||
|
if ($.isFunction(self.settings.onClose)) { |
||||
|
self.settings.onClose.call(this.$ele); |
||||
|
} |
||||
|
|
||||
|
this.$ele.one(this.animations.start, function () { |
||||
|
hasAnimation = true; |
||||
|
}).one(this.animations.end, function () { |
||||
|
$(this).remove(); |
||||
|
if ($.isFunction(self.settings.onClosed)) { |
||||
|
self.settings.onClosed.call(this); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
setTimeout(function () { |
||||
|
if (!hasAnimation) { |
||||
|
self.$ele.remove(); |
||||
|
if ($.isFunction(self.settings.onClosed)) { |
||||
|
self.settings.onClosed.call(this); |
||||
|
} |
||||
|
} |
||||
|
}, 600); |
||||
|
}, |
||||
|
reposition: function (posX) { |
||||
|
var self = this, |
||||
|
notifies = '[data-notify-position="' + this.settings.placement.from + '-' + this.settings.placement.align + '"]:not([data-closing="true"])', |
||||
|
$elements = this.$ele.nextAll(notifies); |
||||
|
if (this.settings.newest_on_top === true) { |
||||
|
$elements = this.$ele.prevAll(notifies); |
||||
|
} |
||||
|
$elements.each(function () { |
||||
|
$(this).css(self.settings.placement.from, posX); |
||||
|
posX = (parseInt(posX) + parseInt(self.settings.spacing)) + $(this).outerHeight(); |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
$.notify = function (content, options) { |
||||
|
var plugin = new Notify(this, content, options); |
||||
|
return plugin.notify; |
||||
|
}; |
||||
|
$.notifyDefaults = function (options) { |
||||
|
defaults = $.extend(true, {}, defaults, options); |
||||
|
return defaults; |
||||
|
}; |
||||
|
|
||||
|
$.notifyClose = function (selector) { |
||||
|
|
||||
|
if (typeof selector === "undefined" || selector === "all") { |
||||
|
$('[data-notify]').find('[data-notify="dismiss"]').trigger('click'); |
||||
|
}else if(selector === 'success' || selector === 'info' || selector === 'warning' || selector === 'danger'){ |
||||
|
$('.alert-' + selector + '[data-notify]').find('[data-notify="dismiss"]').trigger('click'); |
||||
|
} else if(selector){ |
||||
|
$(selector + '[data-notify]').find('[data-notify="dismiss"]').trigger('click'); |
||||
|
} |
||||
|
else { |
||||
|
$('[data-notify-position="' + selector + '"]').find('[data-notify="dismiss"]').trigger('click'); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
$.notifyCloseExcept = function (selector) { |
||||
|
|
||||
|
if(selector === 'success' || selector === 'info' || selector === 'warning' || selector === 'danger'){ |
||||
|
$('[data-notify]').not('.alert-' + selector).find('[data-notify="dismiss"]').trigger('click'); |
||||
|
} else{ |
||||
|
$('[data-notify]').not(selector).find('[data-notify="dismiss"]').trigger('click'); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
|
||||
|
})); |
||||
|
|
@ -0,0 +1,113 @@ |
|||||
|
/********************************************************************************** |
||||
|
* |
||||
|
* Copyright (C) 2018 MuK IT GmbH |
||||
|
* |
||||
|
* This program is free software: you can redistribute it and/or modify |
||||
|
* it under the terms of the GNU Affero General Public License as |
||||
|
* published by the Free Software Foundation, either version 3 of the |
||||
|
* License, or (at your option) any later version. |
||||
|
* |
||||
|
* This program is distributed in the hope that it will be useful, |
||||
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of |
||||
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
||||
|
* GNU Affero General Public License for more details. |
||||
|
* |
||||
|
* You should have received a copy of the GNU Affero General Public License |
||||
|
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
* |
||||
|
**********************************************************************************/ |
||||
|
|
||||
|
odoo.define('muk_web_utils.files', function (require) { |
||||
|
"use strict"; |
||||
|
|
||||
|
var core = require('web.core'); |
||||
|
var utils = require('web.utils'); |
||||
|
|
||||
|
var QWeb = core.qweb; |
||||
|
var _t = core._t; |
||||
|
|
||||
|
var traverse_items = function(items, structure) { |
||||
|
var $result = $.Deferred(); |
||||
|
var files = []; |
||||
|
var events = []; |
||||
|
function traverse_item() { |
||||
|
var $get = $.Deferred(); |
||||
|
var item, file; |
||||
|
events.push($get); |
||||
|
if (items[i] instanceof DataTransferItem) { |
||||
|
item = items[i].webkitGetAsEntry(); |
||||
|
file = items[i].getAsFile(); |
||||
|
} else { |
||||
|
item = items[i]; |
||||
|
} |
||||
|
if (item) { |
||||
|
if (item.isFile) { |
||||
|
files.push(item); |
||||
|
$get.resolve(); |
||||
|
} else if (item.isDirectory) { |
||||
|
var dirReader = item.createReader(); |
||||
|
dirReader.readEntries(function (entries) { |
||||
|
traverse_items(entries, structure).then(function (result) { |
||||
|
if(structure) { |
||||
|
files.push({ |
||||
|
name: item.name, |
||||
|
fullPath: item.fullPath, |
||||
|
files: result |
||||
|
}); |
||||
|
} else { |
||||
|
files = _.union(files, result); |
||||
|
} |
||||
|
$get.resolve(); |
||||
|
}); |
||||
|
}); |
||||
|
} |
||||
|
} else if (file) { |
||||
|
files.push(file); |
||||
|
$get.resolve(); |
||||
|
} else { |
||||
|
console.warn("Your browser doesn't support Drag and Drop!"); |
||||
|
$get.resolve(); |
||||
|
} |
||||
|
}; |
||||
|
for (var i = 0; i < items.length; i++) { |
||||
|
traverse_item(); |
||||
|
} |
||||
|
$.when.apply($, events).then(function () { |
||||
|
$result.resolve(files); |
||||
|
}); |
||||
|
return $result; |
||||
|
}; |
||||
|
|
||||
|
var get_file_list = function(items) { |
||||
|
return traverse_items(items, false); |
||||
|
}; |
||||
|
|
||||
|
var get_file_structure = function(items) { |
||||
|
return traverse_items(items, true); |
||||
|
}; |
||||
|
|
||||
|
var load_file = function(file, callback) { |
||||
|
var fileReader = new FileReader(); |
||||
|
fileReader.readAsDataURL(file); |
||||
|
fileReader.onloadend = callback; |
||||
|
}; |
||||
|
|
||||
|
var read_file = function(file, callback) { |
||||
|
if(file.isFile) { |
||||
|
file.file(function(file) { |
||||
|
load_file(file, callback); |
||||
|
}); |
||||
|
} else { |
||||
|
load_file(file, callback); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
return { |
||||
|
traverse_items: traverse_items, |
||||
|
get_file_list: get_file_list, |
||||
|
get_file_structure: get_file_structure, |
||||
|
load_file: load_file, |
||||
|
read_file: read_file, |
||||
|
}; |
||||
|
|
||||
|
}); |
Write
Preview
Loading…
Cancel
Save
Reference in new issue