osr-plastic/control-freak-ide
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
master
control-freak-ide/dist/all/docs/Interface_Designer/Widgets/Toaster.html
plastic-hub-dev-node-saturn 538369cff7 latest
2021-05-12 18:35:18 +02:00

807 lines
42 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<title>deliteful/Toaster - Control-Freak</title>
<meta name="description" content="IDE for Automation & IoT" />
<meta name="author" content="Justin Walsh">
<meta charset="UTF-8">
<link rel="icon" href="../../themes/mytheme/img/favicon-blue.png" type="image/x-icon">
<!-- Mobile -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../..//ext/easyXDM.js"></script>
<script type="text/javascript">
var pixlrEditor = null;
var xdmSocket = null;
var editorImage=null;
var imageUrl=null;
var editorArgs=null;
var saveUrl=null;
var title='';
var format = 'jpg';
function urlDecode (string, overwrite) {
if (!string || !string.length) {
return{}
}
var obj = {};
var pairs = string.split("&");
var pair, name, value;
for (var i = 0, len = pairs.length; i < len; i++) {
pair = pairs[i].split("=");
name = decodeURIComponent(pair[0]);
value = decodeURIComponent(pair[1]);
if(value!=null && value==='true'){
value=true;
}else if(value==='false'){
value=false;
}
if (overwrite !== true) {
if (typeof obj[name] == "undefined") {
obj[name] = value
} else {
if (typeof obj[name] == "string") {
obj[name] = [obj[name]];
obj[name].push(value)
} else {
obj[name].push(value)
}
}
} else {
obj[name] = value
}
}
return obj;
}
function onMessage(message){
var result = JSON.parse(message);
console.log('message :',message);
if(result && result.command && result.command==='edit')
{
if(editorImage==null){
img_create(result.url,'','');
}
imageUrl = result.url;
saveUrl = result.saveUrl;
title = result.title;
format = result.format;
}
}
function sendMessage(message)
{
xdmSocket.postMessage(JSON.stringify(message));
}
function init (){
return;
var inUrl = '' + window.location.href;
console.log('init url ' + inUrl);
//http://localhost/projects/x4mm/Code/xapp/xcf/?debug=true&run=run-release-debug&protocols=true&xideve=true&drivers=true&plugins=false&xblox=debug&files=true&dijit=debug&xdocker=debug&xfile=debug&davinci=debug&dgrid=debug&xgrid=debug&xace=debug&wcDocker=debug
if(!inUrl){
console.error('invalid');
//http://localhost/projects/x4mm/Code/xapp/xcf/?debug=true&run=run-release-debug&protocols=true&xideve=true&drivers=true&plugins=false&xblox=debug&files=true&dijit=debug&xdocker=debug&xfile=debug&davinci=debug&dgrid=debug&xgrid=debug&xace=debug&wcDocker=debug
}
var parameterString = '' ;
function base64_decode (encodedData) {
if (typeof window !== 'undefined') {
if (typeof window.atob !== 'undefined') {
return decodeURIComponent(escape(window.atob(encodedData)))
}
} else {
return new Buffer(encodedData, 'base64').toString('utf-8')
}
var b64 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/='
var o1
var o2
var o3
var h1
var h2
var h3
var h4
var bits
var i = 0
var ac = 0
var dec = ''
var tmpArr = []
if (!encodedData) {
return encodedData
}
encodedData += ''
do {
// unpack four hexets into three octets using index points in b64
h1 = b64.indexOf(encodedData.charAt(i++))
h2 = b64.indexOf(encodedData.charAt(i++))
h3 = b64.indexOf(encodedData.charAt(i++))
h4 = b64.indexOf(encodedData.charAt(i++))
bits = h1 << 18 | h2 << 12 | h3 << 6 | h4
o1 = bits >> 16 & 0xff
o2 = bits >> 8 & 0xff
o3 = bits & 0xff
if (h3 === 64) {
tmpArr[ac++] = String.fromCharCode(o1)
} else if (h4 === 64) {
tmpArr[ac++] = String.fromCharCode(o1, o2)
} else {
tmpArr[ac++] = String.fromCharCode(o1, o2, o3)
}
} while (i < encodedData.length)
dec = tmpArr.join('')
return decodeURIComponent(escape(dec.replace(/\0+$/, '')))
}
function base64_encode(data) {
// From: http://phpjs.org/functions
// + original by: Tyler Akins (http://rumkin.com)
// + improved by: Bayron Guevara
// + improved by: Thunder.m
// + improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
// + bugfixed by: Pellentesque Malesuada
// + improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
// + improved by: Rafał Kukawski (http://kukawski.pl)
// * example 1: base64_encode('Kevin van Zonneveld');
// * returns 1: 'S2V2aW4gdmFuIFpvbm5ldmVsZA=='
// mozilla has this native
// - but breaks in 2.0.0.12!
//if (typeof this.window.btoa === 'function') {
// return btoa(data);
//}
var b64 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';
var o1, o2, o3, h1, h2, h3, h4, bits, i = 0,
ac = 0,
enc = '',
tmp_arr = [];
if (!data) {
return data;
}
do { // pack three octets into four hexets
o1 = data.charCodeAt(i++);
o2 = data.charCodeAt(i++);
o3 = data.charCodeAt(i++);
bits = o1 << 16 | o2 << 8 | o3;
h1 = bits >> 18 & 0x3f;
h2 = bits >> 12 & 0x3f;
h3 = bits >> 6 & 0x3f;
h4 = bits & 0x3f;
// use hexets to index into b64, and append result to encoded string
tmp_arr[ac++] = b64.charAt(h1) + b64.charAt(h2) + b64.charAt(h3) + b64.charAt(h4);
} while (i < data.length);
enc = tmp_arr.join('');
var r = data.length % 3;
return (r ? enc.slice(0, r - 3) : enc) + '==='.slice(r || 3);
}
if(inUrl.lastIndexOf('?')){
parameterString = inUrl.substring(inUrl.lastIndexOf('?')+1,inUrl.length);
var urlParameters=urlDecode(parameterString);
var target =urlParameters.xdmTarget;
if(!target || target && target=='undefined'){
return;
}
if(target.indexOf('http:')==-1){
target = base64_decode(target);
}
target=decodeURIComponent(target);
//http://localhost/projects/x4mm/Control-Freak-Documentation/daux/Getting_Started?xdmTarget=http%3A%2F%2Flocalhost%2Fprojects%2Fx4mm%2FCode%2Fxapp%2Fxcf%2F%3Fdebug%3Dtrue%26run%3Drun-release-debug%26protocols%3Dtrue%26xideve%3Dtrue%26drivers%3Dtrue%26plugins%3Dfalse%26xblox%3Ddebug%26files%3Dtrue%26dijit%3Ddebug%26xdocker%3Ddebug%26xfile%3Ddebug%26davinci%3Ddebug%26dgrid%3Ddebug%26xgrid%3Ddebug%26xace%3Ddebug%26wcDocker%3Ddebug&xdm_e=http%3A%2F%2Flocalhost%2Fprojects%2Fx4mm%2FCode%2Fxapp%2Fxcf%2F&xdm_c=default9743&xdm_p=4
//console.error('creating socket to '+target);
xdmSocket = new easyXDM.Socket({
remote: "" + target,
onMessage:function (message, origin)
{
onMessage(message);
}
});
//console.error('xdmtarge = ' + target);
//var newUrl = + encodeURIComponent('' + window.location.href);
if(target && target!=='undefined' && target.length) {
$(function () {
$('a').each(function () {
var cUrl = $(this).attr('href');
var bindStr = '?';
if (cUrl && cUrl.indexOf('xdmTarget') == -1) {
if (cUrl.indexOf('?') != -1) {
bindStr = '&';
}
var newUrl = cUrl + bindStr + 'xdmTarget=' + base64_encode(target);
//console.log('new url ' + newUrl);
//$(this).attr('href', newUrl);
}
});
});
}
}
}
document.onreadystatechange = function () {
if(typeof easyXDM !=='undefined') {
var state = document.readyState;
if (state == 'interactive') {
} else if (state == 'complete') {
init();
}
}else{
console.error('easy xdm not defined');
}
}
</script>
<!-- Font -->
<!-- CSS -->
<link href='../../themes/mytheme/css/theme-blue.min.css' rel='stylesheet' type='text/css'><link href='../../admin-theme/bower_components/font-awesome/css/font-awesome.min.css' rel='stylesheet' type='text/css'><link href='../../admin-theme/html-white/dist/css/application.css' rel='stylesheet' type='text/css'><link href='../../themes/mytheme/css/bootstrap-override-white.css' rel='stylesheet' type='text/css'>
<!-- Tipue Search -->
<link href="../../tipuesearch/tipuesearch.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body class=" xTheme xTheme-white">
<header class="Navbar hidden-print">
<a class="Navbar__brand" href="../../index.html">Control-Freak</a>
<div class="Search">
<svg class="Search__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 451 451"><path d="M447.05 428l-109.6-109.6c29.4-33.8 47.2-77.9 47.2-126.1C384.65 86.2 298.35 0 192.35 0 86.25 0 .05 86.3.05 192.3s86.3 192.3 192.3 192.3c48.2 0 92.3-17.8 126.1-47.2L428.05 447c2.6 2.6 6.1 4 9.5 4s6.9-1.3 9.5-4c5.2-5.2 5.2-13.8 0-19zM26.95 192.3c0-91.2 74.2-165.3 165.3-165.3 91.2 0 165.3 74.2 165.3 165.3s-74.1 165.4-165.3 165.4c-91.1 0-165.3-74.2-165.3-165.4z"/></svg>
<input type="search" id="tipue_search_input" class="Search__field" placeholder="Search..." autocomplete="on" results=25 autosave=text_search>
</div>
</header>
<div class="Columns content">
<aside class="Columns__left Collapsible">
<div class="Collapsible__container">
<button type="button" class="Button Collapsible__trigger">
<span class="Collapsible__trigger--bar"></span>
<span class="Collapsible__trigger--bar"></span>
<span class="Collapsible__trigger--bar"></span>
</button>
</div>
<div class="Collapsible__content">
<!-- Navigation -->
<ul class='Nav'><li class='Nav__item '><a href="../../Getting_Started.html">Getting Started</a></li><li class='Nav__item has-children'><a href="#" class="aj-nav folder"><i class="Nav__arrow">&nbsp;</i>Installation</a><ul class='Nav'><li class='Nav__item '><a href="../../Installation/Windows.html">Windows</a></li><li class='Nav__item '><a href="../../Installation/Linux.html">Linux</a></li><li class='Nav__item '><a href="../../Installation/Raspberry-PI.html">Raspberry-PI</a></li><li class='Nav__item '><a href="../../Installation/OSX.html">OSX</a></li><li class='Nav__item has-children'><a href="../../Installation/WEB/index.html" class="folder"><i class="Nav__arrow">&nbsp;</i>WEB</a><ul class='Nav'><li class='Nav__item '><a href="../../Installation/WEB/Requirements.html">Requirements</a></li></ul></li></ul></li><li class='Nav__item Nav__item--open has-children'><a href="../../Interface_Designer/index.html" class="folder"><i class="Nav__arrow">&nbsp;</i>Interface Designer</a><ul class='Nav'><li class='Nav__item '><a href="../../Interface_Designer/Guide.html">Guide</a></li><li class='Nav__item has-children'><a href="#" class="aj-nav folder"><i class="Nav__arrow">&nbsp;</i>Examples</a><ul class='Nav'><li class='Nav__item '><a href="../../Interface_Designer/Examples/Button_Group.html">Button Group</a></li><li class='Nav__item '><a href="../../Interface_Designer/Examples/States.html">States</a></li></ul></li><li class='Nav__item '><a href="../../Interface_Designer/States.html">States</a></li><li class='Nav__item '><a href="../../Interface_Designer/VariableStates.html">VariableStates</a></li><li class='Nav__item Nav__item--open has-children'><a href="../../Interface_Designer/Widgets/index.html" class="folder"><i class="Nav__arrow">&nbsp;</i>Widgets</a><ul class='Nav'><li class='Nav__item '><a href="../../Interface_Designer/Widgets/Accordion.html">deliteful/Accordion</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/Button.html">deliteful/Button</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/channelBreakpoints.html">deliteful/channelBreakpoints</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/Checkbox.html">deliteful/Checkbox</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/Combobox.html">deliteful/Combobox</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/features.html">deliteful/features</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/LinearLayout.html">deliteful/LinearLayout</a></li><li class='Nav__item has-children'><a href="#" class="aj-nav folder"><i class="Nav__arrow">&nbsp;</i>list</a><ul class='Nav'><li class='Nav__item '><a href="../../Interface_Designer/Widgets/list/List.html">deliteful/list/List</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/list/PageableList.html">deliteful/list/PageableList</a></li></ul></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/Panel.html">deliteful/Panel</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/ProgressBar.html">deliteful/ProgressBar</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/ProgressIndicator.html">deliteful/ProgressIndicator</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/RadioButton.html">deliteful/RadioButton</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/ResponsiveColumns.html">deliteful/ResponsiveColumns</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/ScrollableContainer.html">deliteful/ScrollableContainer</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/Select.html">deliteful/Select</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/SidePane.html">deliteful/SidePane</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/Slider.html">deliteful/Slider</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/StarRating.html">deliteful/StarRating</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/styling.html">styling</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/SwapView.html">deliteful/SwapView</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/Switch.html">deliteful/Switch</a></li><li class='Nav__item Nav__item--active'><a href="../../Interface_Designer/Widgets/Toaster.html">deliteful/Toaster</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/ToggleButton.html">deliteful/ToggleButton</a></li><li class='Nav__item has-children'><a href="../../Interface_Designer/Widgets/tutorial/index.html" class="folder"><i class="Nav__arrow">&nbsp;</i>tutorial</a><ul class='Nav'><li class='Nav__item '><a href="../../Interface_Designer/Widgets/tutorial/Part1GettingStarted.html">Deliteful Tutorial Part 1</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/tutorial/Part2QuickLook.html">Deliteful Tutorial Part 2</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/tutorial/Part3PhotoFeedApp.html">Deliteful Tutorial Part 3</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/tutorial/Part4ListView.html">Deliteful Tutorial Part 4</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/tutorial/Part5CustomRenderer.html">Deliteful Tutorial Part 5</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/tutorial/Part6DetailsView.html">Deliteful Tutorial Part 6</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/tutorial/Part7SettingsView.html">Deliteful Tutorial Part 7</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/tutorial/Part8Build.html">Deliteful Tutorial Part 8</a></li></ul></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/ViewIndicator.html">deliteful/ViewIndicator</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/ViewStack.html">deliteful/ViewStack</a></li></ul></li></ul></li><li class='Nav__item has-children'><a href="../../Driver/index.html" class="folder"><i class="Nav__arrow">&nbsp;</i>Driver</a><ul class='Nav'><li class='Nav__item has-children'><a href="#" class="aj-nav folder"><i class="Nav__arrow">&nbsp;</i>Code Examples</a><ul class='Nav'><li class='Nav__item '><a href="../../Driver/Code_Examples/Expressions.html">Expressions</a></li><li class='Nav__item '><a href="../../Driver/Code_Examples/Variable_Changes.html">Variable Changes</a></li></ul></li><li class='Nav__item has-children'><a href="../../Driver/Built-In/index.html" class="folder"><i class="Nav__arrow">&nbsp;</i>Built-In</a><ul class='Nav'><li class='Nav__item '><a href="../../Driver/Built-In/VLC.html">VLC</a></li></ul></li><li class='Nav__item '><a href="../../Driver/Guide.html">Guide</a></li><li class='Nav__item '><a href="../../Driver/API.html">API</a></li><li class='Nav__item '><a href="../../Driver/Editors.html">Editors</a></li><li class='Nav__item '><a href="../../Driver/Debugging.html">Debugging</a></li><li class='Nav__item '><a href="../../Driver/Intern.html">Intern</a></li><li class='Nav__item has-children'><a href="../../Driver/Fiddle/index.html" class="folder"><i class="Nav__arrow">&nbsp;</i>Fiddle</a><ul class='Nav'><li class='Nav__item '><a href="../../Driver/Fiddle/Blocks_Example.html">Blocks Example</a></li><li class='Nav__item '><a href="../../Driver/Fiddle/Blocks_Template.html">Blocks Template</a></li></ul></li></ul></li><li class='Nav__item '><a href="../../Protocols/index.html" class="folder"><i class="Nav__arrow">&nbsp;</i>Protocols</a><ul class='Nav'></ul></li><li class='Nav__item has-children'><a href="../../Blocks/index.html" class="folder"><i class="Nav__arrow">&nbsp;</i>Blocks</a><ul class='Nav'><li class='Nav__item '><a href="../../Blocks/Command.html">Command</a></li><li class='Nav__item has-children'><a href="#" class="aj-nav folder"><i class="Nav__arrow">&nbsp;</i>Events</a><ul class='Nav'><li class='Nav__item '><a href="../../Blocks/Events/OnEvent.html">OnEvent</a></li></ul></li><li class='Nav__item has-children'><a href="#" class="aj-nav folder"><i class="Nav__arrow">&nbsp;</i>File</a><ul class='Nav'><li class='Nav__item '><a href="../../Blocks/File/ReadJSON.html">ReadJSON</a></li></ul></li></ul></li><li class='Nav__item '><a href="../../Exporter/index.html" class="folder"><i class="Nav__arrow">&nbsp;</i>Exporter</a><ul class='Nav'></ul></li><li class='Nav__item '><a href="../../Device_Server/index.html" class="folder"><i class="Nav__arrow">&nbsp;</i>Device Server</a><ul class='Nav'></ul></li><li class='Nav__item '><a href="../../Tutorials/index.html" class="folder"><i class="Nav__arrow">&nbsp;</i>Tutorials</a><ul class='Nav'></ul></li><li class='Nav__item '><a href="../../Raspberry_PI/index.html" class="folder"><i class="Nav__arrow">&nbsp;</i>Raspberry PI</a><ul class='Nav'></ul></li><li class='Nav__item has-children'><a href="#" class="aj-nav folder"><i class="Nav__arrow">&nbsp;</i>Resources</a><ul class='Nav'><li class='Nav__item has-children'><a href="#" class="aj-nav folder"><i class="Nav__arrow">&nbsp;</i>Software</a><ul class='Nav'><li class='Nav__item has-children'><a href="#" class="aj-nav folder"><i class="Nav__arrow">&nbsp;</i>MQTT</a><ul class='Nav'><li class='Nav__item '><a href="../../Resources/Software/MQTT/Software.html">Software</a></li><li class='Nav__item '><a href="../../Resources/Software/MQTT/Architecture.html">Architecture</a></li></ul></li><li class='Nav__item '><a href="../../Resources/Software/Tools/index.html" class="folder"><i class="Nav__arrow">&nbsp;</i>Tools</a><ul class='Nav'></ul></li></ul></li><li class='Nav__item '><a href="../../Resources/Utils_API/index.html" class="folder"><i class="Nav__arrow">&nbsp;</i>Utils API</a><ul class='Nav'></ul></li></ul></li></ul>
<div class="Links">
</div>
</div>
</aside>
<div class="Columns__right ">
<div class="Columns__right__content">
<div class="doc_content">
<article class="Page">
<div class="Page__header">
<h1><a href="../../Interface_Designer/index.html">Interface Designer</a> <svg class="Page__header--separator" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 477.175 477.175"><path d="M360.73 229.075l-225.1-225.1c-5.3-5.3-13.8-5.3-19.1 0s-5.3 13.8 0 19.1l215.5 215.5-215.5 215.5c-5.3 5.3-5.3 13.8 0 19.1 2.6 2.6 6.1 4 9.5 4 3.4 0 6.9-1.3 9.5-4l225.1-225.1c5.3-5.2 5.3-13.8.1-19z"/></svg> <a href="../../Interface_Designer/Widgets/index.html">Widgets</a> <svg class="Page__header--separator" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 477.175 477.175"><path d="M360.73 229.075l-225.1-225.1c-5.3-5.3-13.8-5.3-19.1 0s-5.3 13.8 0 19.1l215.5 215.5-215.5 215.5c-5.3 5.3-5.3 13.8 0 19.1 2.6 2.6 6.1 4 9.5 4 3.4 0 6.9-1.3 9.5-4l225.1-225.1c5.3-5.2 5.3-13.8.1-19z"/></svg> <a href="../../Interface_Designer/Widgets/Toaster.html">deliteful/Toaster</a></h1>
<span style="float: right; font-size: 10px; color: gray;">
<a href="https://github.com/net-commander/net-commander-documentation/blob/master/docFiles/03_Interface_Designer/Widgets/Toaster.md" target="_blank">Edit on GitHub</a>
</span>
</div>
<div class="s-content">
<h1 id="page_delitefulToaster">deliteful/Toaster</h1>
<p><code>deliteful/Toaster</code> is a widget that allows an application to notify the user
in a non obtrusive way (it will not steal the focus), through a quick little
message. A toaster is an unobtrusive mechanism for displaying messages. Like
toasts, messages &quot;pop up&quot; in the window corner, temporarily overlaying any
content there. The message stays up for a certain duration, or until the user
dismisses it explicitly (with a swipe gesture or by clicking on the dismiss
button).</p>
<p>Toasters are preferable to alert boxes. Alerts must always be modal, meaning
all action on the page stops until the user clicks OK or Cancel. Toasters are
non-modal, so the user can continue working and finish their thought before
responding.</p>
<p>Note that the <code>Toaster</code> widget depends on the <code>ToasterMessage</code> widget.</p>
<p><a name="behavior"></a></p>
<h3 id="page_The_behavior_in_a_nutshell">The behavior in a nutshell</h3>
<p>The <code>Toaster</code> widget serves as a host for <code>ToasterMessage</code> instances, each with
its own type, duration, etc.</p>
<p>When created, each instance goes through a lifecycle of 4 states:</p>
<ol>
<li>
<em>inserted</em>: the instance is inserted in the DOM but still invisible,</li>
<li>
<em>shown</em>: the instance is made visible, with a fade-in animation,</li>
<li>
<em>hidden</em>: the instance is made invisible, either because it expired or it was dismissed,</li>
<li>
<em>removed</em>: the instance is removed from the DOM;</li>
</ol>
<p>You can hook up animations on each of theses 4 states. (see <a href="#animations">animations</a>).
Note that a message that is dismissed or that has expired is not immediately removed from DOM. First, it's only hidden, and stay
hidden until all the other <em>expirable</em> (and only expirable) messages reach the hidden state as well (either by being manually dismissed by the user
or by expiring).</p>
<p>This prevents the message that haven't expired from moving around as some of them disappear, but at the same time,
it avoids having awkward permanent holes in between persistent messages as it ends up stacking them together.</p>
<p><img src="https://cloud.githubusercontent.com/assets/2982512/3255861/52c0ad34-f210-11e3-84b8-57d74ef367f8.gif" alt="The messages are only hidden, they remain in the DOM till the other expirable messages are hidden" />
<img src="https://cloud.githubusercontent.com/assets/2982512/3255860/4fe41bd2-f210-11e3-931b-0d4961bf1ce5.gif" alt="The non expirable messages are not awaited by expirable messages" /></p>
<h5 id="page_Table_of_Contents">Table of Contents</h5>
<p><a href="#instantiation">Element Instantiation</a><br />
<a href="#configuration">Element Configuration</a><br />
<a href="#styling">Element Styling</a><br />
<a href="#interactions">User Interactions</a><br />
<a href="#events">Element Events</a><br />
<a href="#enterprise">Enterprise Use</a></p>
<p><a name="instantiation"></a></p>
<h2 id="page_Element_Instantiation">Element Instantiation</h2>
<p>See <a href="/delite/docs/master/Widget.md/broken"><code>delite/Widget</code></a> for full details on how instantiation lifecycle works.</p>
<h3 id="page_Declarative_Instantiation">Declarative Instantiation</h3>
<pre><code class="language-js">var mytoaster;
require([
&quot;deliteful/Toaster&quot;,
&quot;requirejs-domready/domReady!&quot;
], function(Toaster){
// posting a message
mytoaster.postMessage(&quot;Form submitted&quot;);
});
</code></pre>
<pre><code class="language-html">&lt;d-toaster id=&quot;mytoaster&quot;&gt;&lt;d-toaster&gt;
</code></pre>
<h3 id="page_Programmatic_Instantiation">Programmatic Instantiation</h3>
<pre><code class="language-js">var mytoaster;
require([
&quot;deliteful/Toaster&quot;,
&quot;requirejs-domready/domReady!&quot;
], function(Toaster){
mytoaster = new Toaster();
mytoaster.placeAt(&quot;container&quot;);
// posting a message
mytoaster.postMessage(&quot;Form submitted&quot;);
});
</code></pre>
<pre><code class="language-html">&lt;div id=&quot;container&quot;&gt;&lt;/div&gt;
</code></pre>
<p>The <code>Toaster.postMessage()</code> also supports messages as widgets</p>
<pre><code class="language-js">var mytoaster;
require([
&quot;deliteful/ToasterMessage&quot;,
&quot;deliteful/Toaster&quot;,
&quot;requirejs-domready/domReady!&quot;
], function(ToasterMessage, Toaster){
mytoaster = new Toaster();
mytoaster.placeAt(&quot;container&quot;);
// defining the message as a widget
var myMessage = new ToasterMessage(&quot;Form submitted&quot;);
// posting
mytoaster.postMessage(myMessage);
});
</code></pre>
<p><iframe width="100%" height="300" allowfullscreen="allowfullscreen" frameborder="0"
src="http://jsfiddle.net/ibmjs/8mRrs/embedded/result,js,html">
<a href="http://jsfiddle.net/ibmjs/8mRrs/">checkout the sample on JSFiddle</a></iframe></p>
<p><a name="configuration"></a></p>
<h2 id="page_Element_Configuration">Element Configuration</h2>
<p><a name="placement"></a></p>
<h3 id="page_Placement_of_the_toaster">Placement of the toaster</h3>
<p>The Toaster widget has a <code>placement</code> property which will determine where the
messages will appear on the screen (top-left corner, etc.). It is a string representing a
regular CSS class that is applied to the widget on creation. If you choose not
to set this property, it will default to <code>&quot;d-toaster-placement-default&quot;</code>.</p>
<p>Note that the widget comes with 7 placement options (i.e. 7 CSS classes that
work right out of the box). It goes without saying that you can set this property to
your own placement class.</p>
<table align="center">
<tbody>
<tr>
<td>
<h6> top-left </h6>
<p>
<code> d-toaster-placement-tl </code>
</p>
</td>
<td>
<h6> top-center </h6>
<p>
<code> d-toaster-placement-tc </code>
</p>
</td>
<td>
<h6> top-right </h6>
<p>
<code> d-toaster-placement-tr </code>
</p>
</td>
</tr>
<tr>
<td colspan="3">
<h6> default </h6>
<p>
<code> d-toaster-placement-default </code>
</p>
</td>
</tr>
<tr>
<td>
<h6> bottom-left </h6>
<p>
<code> d-toaster-placement-bl </code>
</p>
</td>
<td>
<h6> bottom-center </h6>
<p>
<code> d-toaster-placement-bc </code>
</p>
</td>
<td>
<h6> bottom-right </h6>
<p>
<code> d-toaster-placement-br </code>
</p>
</td>
</tr>
</tbody>
</table>
<h3 id="page_Message_types">Message types</h3>
<p>The <code>type</code> property of <code>ToasterMessage</code> can be set to either <code>&quot;info&quot;</code>, <code>&quot;error&quot;</code>,
<code>&quot;warning&quot;</code> or <code>&quot;success&quot;</code>. In case no type or an incorrect type is provided, <code>&quot;info&quot;</code> type
is used by default.</p>
<pre><code class="language-js">var m = new ToasterMessage({message: &quot;content of my message&quot;, type: &quot;success&quot;});
mytoaster.postMessage(m);
// the shortcut
mytoaster.postMessage(&quot;content of my message&quot;, {type: &quot;success&quot;});
</code></pre>
<p>Each type is associated with a CSS class named <code>d-toaster-type-{{type}}</code> which defines its styling.</p>
<h3 id="page_Duration_of_a_message">Duration of a message</h3>
<p>By default a message lasts for 2000ms after it is &quot;posted&quot; in the toaster. The property <code>duration</code> can be set to any positive integer.</p>
<p>However, if set to <code>-1</code> the message will remain visible until the user
explicitly dismisses it (by clicking the dismiss button or swiping it out of the screen).</p>
<p>NB: if <code>duration</code> is set to <code>-1</code> and <code>dismissible</code> to <code>false</code>, you'll obtain a persistent message
which your user has no way to dismiss - probably not ideal from
a user experience perspective.</p>
<pre><code class="language-js">// a message that fades after 6s
var m1 = new ToasterMessage({message: &quot;This will auto-destruct in 6s&quot;, duration: 6000});
mytoaster.postMessage(m1);
// a message that waits for the user to dismiss it manually
var m2 = new ToasterMessage({message: &quot;This will always stay there&quot;, duration: -1});
mytoaster.postMessage(m2);
// the shortcut
mytoaster.postMessage(&quot;This will auto-destruct in 6s&quot;, {duration: 6000});
mytoaster.postMessage(&quot;This will always stay there&quot;, {duration: -1});
</code></pre>
<h3 id="page_Making_a_message_dismissible">Making a message dismissible</h3>
<p>If <code>dismissible</code> is set to <code>&quot;on&quot;</code>, the user can dismiss the message (either
with a swipe or the dismiss button). If set to <code>&quot;off&quot;</code>, the user can only wait for the
message to disappear on its own.</p>
<p>When <code>dismissible</code> is set to <code>&quot;auto&quot;</code>, the behavior depends on whether the message expires:</p>
<ul>
<li>a message that expires (<code>duration &gt;= 0</code>) will not be dismissible,</li>
<li>a message that does not expire (<code>duration === -1</code>) will be dismissible.</li>
</ul>
<pre><code class="language-js">mytoaster.postMessage(&quot;content of my message&quot;, {dismissible: &quot;off&quot;});
</code></pre>
<p>NB: if <code>dismissible</code> is set to <code>&quot;off&quot;</code> on a persistent message, your user will have no way to dismiss it
and it will stay on the screen forever which probably is not ideal from a user experience perspective.</p>
<h3 id="page_Checking_if_a_message_is_dismissible">Checking if a message is dismissible</h3>
<p>This methods returns a boolean that indicates whether a message is dismissible.
If returns <code>true</code> (resp. <code>false</code>) when <code>dismissible</code> is set to <code>&quot;on&quot;</code> (resp. <code>&quot;off&quot;</code>).</p>
<p>If controls the visibility of the dismiss button and enables/disables the swipe-to-dismiss.</p>
<p>When <code>dismissible</code> is set to <code>&quot;auto&quot;</code>, the output of the method also depends on the <code>duration</code> property:</p>
<ul>
<li>a message that is expirable (<code>duration &gt;= 0</code>) will have no dismiss button or swipe-to-dismiss (<code>isDismissible() === false</code>)</li>
<li>a message that does not expire (<code>duration === -1</code>) will have a dismiss button and swipe-to-dismiss (<code>isDismissible() === true</code>)</li>
</ul>
<table>
<thead>
<tr>
<th><code>dismissible</code></th>
<th><code>duration</code></th>
<th><code>isDismissible()</code></th>
</tr>
</thead>
<tbody>
<tr>
<td><code>on</code></td>
<td><code>*</code></td>
<td><code>true</code></td>
</tr>
<tr>
<td><code>off</code></td>
<td><code>*</code></td>
<td><code>false</code></td>
</tr>
<tr>
<td><code>auto</code></td>
<td><code>&gt;= 0</code></td>
<td><code>false</code></td>
</tr>
<tr>
<td><code>auto</code></td>
<td><code>-1</code></td>
<td><code>true</code></td>
</tr>
</tbody>
</table>
<p><a name="animations"></a></p>
<h3 id="page_animations">animations</h3>
<p>For each of the 4 states of a <code>ToasterMessage</code> instance, an animation class is added</p>
<pre><code class="language-js">mytoaster = new Toaster({
animationInitialClass: &quot;d-toaster-initial&quot;, // added on insertion
animationEnterClass: &quot;d-toaster-fadein&quot;, // added on show
animationQuitClass: &quot;d-toaster-fadeout&quot;, // added on hide
animationEndClass: &quot;d-toaster-fadefinish&quot; // added on removal
});
</code></pre>
<p>A fade-in/fade-out set of animation classes comes by default but you can define and use your own.
You need to make sure that <code>animationEnterClass</code> and <code>animationQuitClass</code> classes emit either a
<code>transitionend</code>or <code>animationend</code> sort of event, as moving from one state to the other requires animations ending
to be properly detected.</p>
<h3 id="page_Message_templating">Message templating</h3>
<p>The ToasterMessage widget comes with a default template</p>
<pre><code class="language-html">&lt;template class=&quot;{{ messageTypeClass }}&quot; data-touch-action=&quot;none&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;d-toaster-dismiss&quot; attach-point=&quot;_dismissButton&quot;&gt;&lt;/button&gt;
&lt;span class=&quot;d-toaster-icon&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;d-toaster-message-content&quot;&gt;
{{ message }}
&lt;/span&gt;
&lt;/template&gt;
</code></pre>
<p>Currently, there is no way to set up your own template as the template file
path is hard coded in the widget. If you want to set up your own template, one
way to do it could be to create your own widget inheriting from <code>ToasterMessage</code>.</p>
<p><a name="styling"></a></p>
<h2 id="page_Element_Styling">Element Styling</h2>
<h3 id="page_Supported_themes">Supported themes</h3>
<p>This widget provides default styling for the following delite themes:</p>
<ul>
<li>bootstrap</li>
<li>ios</li>
<li>holodark</li>
</ul>
<h3 id="page_CSS_classes">CSS classes</h3>
<ul>
<li>
<em>Placement of the Toaster</em><br />
all placement classes <code>d-toaster-placement-*</code> are documented in this <a href="#placement">section</a>.</li>
</ul>
<pre><code class="language-css">.d-toaster-placement-default .d-toaster-inner {
left: 20%;
bottom: 10%;
width: 60%;
}
</code></pre>
<ul>
<li>
<em>Message types</em><br />
there is one class for each message type allowed.</li>
</ul>
<pre><code class="language-css">.d-toaster-type-error {
background-color: #d9edf7;
border-color: #bce8f1;
color: #31708f;
}
.d-toaster-type-info {...}
.d-toaster-type-warning {...}
.d-toaster-type-success {...}
</code></pre>
<ul>
<li>
<em>The dismiss button</em><br />
this class allows to set its position and any property a button can take.
Use the <code>content</code> property to change the character used to represent the button.</li>
</ul>
<pre><code class="language-css">.d-toaster-dismiss {...}
.d-toaster-dismiss::before {
content: &quot;×&quot;;
}
</code></pre>
<ul>
<li>
<em>Entering/Leaving animations</em><br />
Regarding the animations used by default when a message enters/leavers the screen. Though you can easily override
theses classes, it is probably better to define your own and set your instance of Toaster to use them
see [configuration section)(#animations).</li>
</ul>
<pre><code class="language-css">.d-toaster-initial { // sets the initial state
opacity: 0;
transition-property: opacity;
transition-timing-function: linear;
}
.d-toaster-fadein {
opacity: 1;
transition-duration: 700ms
}
.d-toaster-fadeout {
opacity: 0;
transition-duration: 1000ms
}
</code></pre>
<p>Regarding the swipe-to-dismiss animation, it is controlled by:</p>
<pre><code class="language-css">.d-toaster-swipeout {
animation-name: d-toaster-swipeout; /* you can reference here your own @keyframes */
animation-timing-function: linear;
animation-duration: 700ms;
animation-fill-mode: both;
/* omitting their -webkit- prefixed equivalent */
}
</code></pre>
<p><a name="interactions"></a></p>
<h2 id="page_User_interaction">User interaction</h2>
<h3 id="page_Dismissal_of_a_message">Dismissal of a message</h3>
<p>A user can dismiss a message either by clicking on the dismiss button, or swiping the message off the screen.</p>
<p>You can control this through the <code>dismissible</code> property.</p>
<p>You can call <code>ToasterMessage.dismiss()</code> anytime to dismiss a message - regardless of the fact that
the <code>dismissible</code> property was set to <code>&quot;on&quot;</code> or <code>&quot;off&quot;</code>. The message will enter the hidden state and disappear from the screen.
This is the very same method called after a swipe is detected or the dismiss button is clicked.</p>
<p>You can also provide an animation class to accompany the dismissal, such as a slide-out animation.</p>
<pre><code class="language-js">var m = new ToasterMessage({message: &quot;content of my message&quot;, dismissible: &quot;off&quot;});
...
m.dismiss(&quot;slide-out&quot;);
</code></pre>
<p><a name="events"></a></p>
<h2 id="page_Element_Events">Element Events</h2>
<table>
<thead>
<tr>
<th>event name</th>
<th>dispatched</th>
<th>cancelable</th>
<th>bubbles</th>
<th>properties</th>
</tr>
</thead>
<tbody>
<tr>
<td>messageInserted</td>
<td>When a new message is inserted in the toaster</td>
<td>Yes</td>
<td>Yes</td>
<td><ul><li>message: the instance of ToasterMessage that was inserted</li></ul></td>
</tr>
<tr>
<td>messageExpired</td>
<td>When a message expires</td>
<td>Yes</td>
<td>Yes</td>
<td><ul><li>message: the instance of ToasterMessage that expired</li></ul></td>
</tr>
<tr>
<td>messageRemoved</td>
<td>When a message is removed</td>
<td>Yes</td>
<td>Yes</td>
<td><ul><li>message: the instance of ToasterMessage that was removed</li></ul></td>
</tr>
</tbody>
</table>
<p><a name="enterprise"></a></p>
<h2 id="page_Enterprise_Use">Enterprise Use</h2>
<h3 id="page_Accessibility">Accessibility</h3>
<table>
<thead>
<tr>
<th>type</th>
<th>status</th>
<th>comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>Keyboard</td>
<td>none</td>
<td>The widget does not provide with any kind of interaction through the keyboard, besides</td>
</tr>
<tr>
<td>Visual Formatting</td>
<td>partial</td>
<td>The message type information, which is conveyed only through color, disappears in high contrast mode. A few options are to be considered to solve this: the developer could use icons or explicitly indicate the type in the content of the message.</td>
</tr>
<tr>
<td>Screen Reader</td>
<td>ok</td>
<td>Tested on JAWS 15 and iOS 6 VoiceOver.</td>
</tr>
</tbody>
</table>
<h3 id="page_Globalization">Globalization</h3>
<p>Nothing in particular here.</p>
<h2 id="page_Security">Security</h2>
<p>This widget has no specific security concern. Refer to <a href="/delite/docs/master/Widget.md/broken"><code>delite/Widget</code></a> for general
security advice on this base class.</p>
<h2 id="page_Browser_Support">Browser Support</h2>
<p>This widget supports all supported browsers without any degraded behavior.</p>
</div>
<nav>
<ul class="Pager">
<li class=Pager--prev><a href="../../Interface_Designer/Widgets/Switch.html">Previous</a></li> <li class=Pager--next><a href="../../Interface_Designer/Widgets/ToggleButton.html">Next</a></li> </ul>
</nav>
</article>
</div>
</div>
</div>
</div>
<!-- jQuery -->
<script src="../../themes/daux/js/jquery-1.11.3.min.js"></script>
<!-- hightlight.js -->
<script src="../../themes/daux/js/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<!-- JS -->
<script src="../../admin-theme/bower_components/bootstrap-sass-official/assets/javascripts/bootstrap.js"></script>
<script src="../../themes/daux/js/daux.js"></script>
<!-- Tipue Search -->
<script type="text/javascript" src="../../tipuesearch/tipuesearch.js"></script>
<script>
window.onunload = function(){}; // force $(document).ready to be called on back/forward navigation in firefox
$(function() {
tipuesearch({
'base_url': '../../'
});
});
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink