1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-12-12 11:10:27 +00:00
TiddlyWiki5/core/modules/utils/dom/notifier.js

83 lines
2.4 KiB
JavaScript
Raw Normal View History

2013-05-07 17:08:44 +00:00
/*\
title: $:/core/modules/utils/dom/notifier.js
type: application/javascript
module-type: utils
Notifier mechanism
\*/
(function(){
/*jslint node: true, browser: true */
/*global $tw: false */
"use strict";
var widget = require("$:/core/modules/widgets/widget.js");
2013-05-07 17:08:44 +00:00
var Notifier = function(wiki) {
this.wiki = wiki;
};
/*
Display a notification
title: Title of tiddler containing the notification text
options: see below
Options include:
*/
Notifier.prototype.display = function(title,options) {
options = options || {};
// Create the wrapper divs
var notification = document.createElement("div"),
tiddler = this.wiki.getTiddler(title),
duration = $tw.utils.getAnimationDuration();
2013-05-07 17:08:44 +00:00
// Don't do anything if the tiddler doesn't exist
if(!tiddler) {
return;
}
// Add classes
$tw.utils.addClass(notification,"tw-notification");
// Render the body of the notification
var parser = this.wiki.parseTiddler(title),
widgetNode = this.wiki.makeWidget(parser,{parentWidget: $tw.rootWidget, document: document});
widgetNode.render(notification,null);
2013-05-07 17:08:44 +00:00
this.wiki.addEventListener("change",function(changes) {
widgetNode.refresh(changes,notification,null);
2013-05-07 17:08:44 +00:00
});
// Set the initial styles for the notification
$tw.utils.setStyle(notification,[
{opacity: "0"},
{transformOrigin: "0% 0%"},
{transform: "translateY(" + (-window.innerHeight) + "px)"},
{transition: "opacity " + duration + "ms ease-out, " + $tw.utils.roundTripPropertyName("transform") + " " + duration + "ms ease-in-out"}
2013-05-07 17:08:44 +00:00
]);
// Add the notification to the DOM
document.body.appendChild(notification);
// Force layout
$tw.utils.forceLayout(notification);
// Set final animated styles
$tw.utils.setStyle(notification,[
{opacity: "1.0"},
{transform: "translateY(0px)"}
]);
// Set a timer to remove the notification
window.setTimeout(function() {
// Force layout and animate the notification away
$tw.utils.forceLayout(notification);
$tw.utils.setStyle(notification,[
{opacity: "0.0"},
{transform: "translateX(" + (notification.offsetWidth) + "px)"}
2013-05-07 17:08:44 +00:00
]);
// Set up an event for the transition end
notification.addEventListener($tw.utils.convertEventName("transitionEnd"),function(event) {
if(notification.parentNode) {
// Remove the modal message from the DOM
document.body.removeChild(notification);
}
},false);
},$tw.config.preferences.notificationDuration);
};
exports.Notifier = Notifier;
})();