rich-filemanager

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="description" content="Alertify.js is a lightweight brower alert and dialog plugin."> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>alertify.js</title> <link rel="stylesheet" href="css/styles.min.css"> <link rel="stylesheet" href="../src/css/alertify.css"> <script> var env = document.domain === "alertifyjs.org" ? "production" : "local"; if (env === "production") { var _rollbarConfig = { accessToken: "cffbf4470b49484b9e94498203125ab4", captureUncaught: true, payload: { environment: env } }; !function(r){function t(o){if(e[o])return e[o].exports;var n=e[o]={exports:{},id:o,loaded:!1};return r[o].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var e={};return t.m=r,t.c=e,t.p="",t(0)}([function(r,t,e){"use strict";var o=e(1).Rollbar,n=e(2),a="https://d37gvrvc0wt4s1.cloudfront.net/js/v1.6/rollbar.min.js";_rollbarConfig.rollbarJsUrl=_rollbarConfig.rollbarJsUrl||a;var i=o.init(window,_rollbarConfig),l=n(i,_rollbarConfig);i.loadFull(window,document,!1,_rollbarConfig,l)},function(r,t){"use strict";function e(){var r=window.console;r&&"function"==typeof r.log&&r.log.apply(r,arguments)}function o(r,t){return t=t||e,function(){try{return r.apply(this,arguments)}catch(e){t("Rollbar internal error:",e)}}}function n(r,t,e){window._rollbarWrappedError&&(e[4]||(e[4]=window._rollbarWrappedError),e[5]||(e[5]=window._rollbarWrappedError._rollbarContext),window._rollbarWrappedError=null),r.uncaughtError.apply(r,e),t&&t.apply(window,e)}function a(r){this.shimId=++u,this.notifier=null,this.parentShim=r,this.logger=e,this._rollbarOldOnError=null}function i(r){var t=a;return o(function(){if(this.notifier)return this.notifier[r].apply(this.notifier,arguments);var e=this,o="scope"===r;o&&(e=new t(this));var n=Array.prototype.slice.call(arguments,0),a={shim:e,method:r,args:n,ts:new Date};return window._rollbarShimQueue.push(a),o?e:void 0})}function l(r,t){if(t.hasOwnProperty&&t.hasOwnProperty("addEventListener")){var e=t.addEventListener;t.addEventListener=function(t,o,n){e.call(this,t,r.wrap(o),n)};var o=t.removeEventListener;t.removeEventListener=function(r,t,e){o.call(this,r,t&&t._wrapped?t._wrapped:t,e)}}}var u=0;a.init=function(r,t){var e=t.globalAlias||"Rollbar";if("object"==typeof r[e])return r[e];r._rollbarShimQueue=[],r._rollbarWrappedError=null,t=t||{};var i=new a;return o(function(){if(i.configure(t),t.captureUncaught){i._rollbarOldOnError=r.onerror,r.onerror=function(){var r=Array.prototype.slice.call(arguments,0);n(i,i._rollbarOldOnError,r)};var o,a,u="EventTarget,Window,Node,ApplicationCache,AudioTrackList,ChannelMergerNode,CryptoOperation,EventSource,FileReader,HTMLUnknownElement,IDBDatabase,IDBRequest,IDBTransaction,KeyOperation,MediaController,MessagePort,ModalWindow,Notification,SVGElementInstance,Screen,TextTrack,TextTrackCue,TextTrackList,WebSocket,WebSocketWorker,Worker,XMLHttpRequest,XMLHttpRequestEventTarget,XMLHttpRequestUpload".split(",");for(o=0;o<u.length;++o)a=u[o],r[a]&&r[a].prototype&&l(i,r[a].prototype)}return r[e]=i,i},i.logger)()},a.prototype.loadFull=function(r,t,e,n,a){var i=function(){var t;if(void 0===r._rollbarPayloadQueue){var e,o,n,i;for(t=new Error("rollbar.js did not load");e=r._rollbarShimQueue.shift();)for(n=e.args,i=0;i<n.length;++i)if(o=n[i],"function"==typeof o){o(t);break}}"function"==typeof a&&a(t)},l=!1,u=t.createElement("script"),s=t.getElementsByTagName("script")[0],p=s.parentNode;u.src=n.rollbarJsUrl,u.async=!e,u.onload=u.onreadystatechange=o(function(){if(!(l||this.readyState&&"loaded"!==this.readyState&&"complete"!==this.readyState)){u.onload=u.onreadystatechange=null;try{p.removeChild(u)}catch(r){}l=!0,i()}},this.logger),p.insertBefore(u,s)},a.prototype.wrap=function(r,t){try{var e;if(e="function"==typeof t?t:function(){return t||{}},"function"!=typeof r)return r;if(r._isWrap)return r;if(!r._wrapped){r._wrapped=function(){try{return r.apply(this,arguments)}catch(t){throw t._rollbarContext=e()||{},t._rollbarContext._wrappedSource=r.toString(),window._rollbarWrappedError=t,t}},r._wrapped._isWrap=!0;for(var o in r)r.hasOwnProperty(o)&&(r._wrapped[o]=r[o])}return r._wrapped}catch(n){return r}};for(var s="log,debug,info,warn,warning,error,critical,global,configure,scope,uncaughtError".split(","),p=0;p<s.length;++p)a.prototype[s[p]]=i(s[p]);r.exports={Rollbar:a,_rollbarWindowOnError:n}},function(r,t){"use strict";r.exports=function(r,t){return function(e){if(!e&&!window._rollbarInitialized){var o=window.RollbarNotifier,n=t||{},a=n.globalAlias||"Rollbar",i=window.Rollbar.init(n,r);i._processShimQueue(window._rollbarShimQueue||[]),window[a]=i,window._rollbarInitialized=!0,o.processPayloads()}}}}]); (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-64348743-1', 'auto'); ga('send', 'pageview'); } </script> </head> <body> <div class="layout-transparent mdl-layout mdl-js-layout"> <header class="mdl-layout__header mdl-layout__header--transparent"> <div class="mdl-layout__header-row">  <span class="mdl-layout-title ">alertify.js</span>  <div class="mdl-layout-spacer"></div>  <nav class="mdl-navigation"> <a class="mdl-navigation__link" href="#getting-started">Getting Started</a> <a class="mdl-navigation__link" href="#performance">Performance</a> <a class="mdl-navigation__link" href="#usage">Usage</a> <a class="mdl-navigation__link" href="https://github.com/alertifyjs/alertify.js">View on GitHub</a> </nav> </div> </header> <div class="mdl-layout__drawer"> <span class="mdl-layout-title">alertify.js</span> <nav class="mdl-navigation"> <a class="mdl-navigation__link" href="#getting-started">Getting Started</a> <a class="mdl-navigation__link" href="#performance">Performance</a> <a class="mdl-navigation__link" href="#usage">Usage</a> <a class="mdl-navigation__link" href="https://github.com/alertifyjs/alertify.js">View on GitHub</a> </nav> </div> <main class="mdl-layout__content"> <div class="container text-center"> <h1 class="mdl-typography--display-4">alertify.js</h1> <h3 class="mdl-typography--display-2">Simple browser dialogs <small>v1.0.11</small></h3> <a href="https://github.com/alertifyjs/alertify.js/archive/master.zip" class="mdl-button mdl-button--large mdl-button--accent mdl-js-button mdl-button--raised mdl-js-ripple-effect"> <i class="material-icons md-24">file_download</i> Download Now </a> </div> <div style="background: #eee; padding: 1em 0; color: #555;"> <div class="container"> <p class="mdl-typography--subhead"> Alertify.js is a small library which provides light-weight, high performance browser dialogs. Since it uses only 1 HTTP request and a payload of less than 3kB, it's a great option for adding basic style to alert, dialog, prompt and log messages even on low bandwidth connections. </p> </div> </div> <div class="page-content"> <div class="container"> <h2 class="mdl-typeography--display-3" id="getting-started">Getting Started</h2> <div class="mdl-grid"> <div class="mdl-cell mdl-cell--8-col mdl-cell--5-col-desktop left-col"> <h4 class="mdl-typeograph--headline">Notes</h4> <p> We're working to get the latest version on all major public CDN's but until then, you'll need to either use a GitHub raw service, download it, or install via NPM or Bower. </p> <p> Obviously, if you're installing via Bower or NPM, you'll need to include the files in the "dist" directory in your HTML for everything to work. But you knew that already. </p> <p> It's also worth noting that the CSS is bundled by default, so there's no need to include any stylesheets to use the default theme. It's dyamically inserted before any other <link> elements (like) stylesheets so it's super easy to override with your own styles. </p> </div> <div class="mdl-cell mdl-cell--8-col mdl-cell--7-col-desktop right-col"> <h4 class="mdl-typeograph--headline">Via RawGit</h4> <pre> <-- standard version --> <script src="https://cdn.rawgit.com/alertifyjs/alertify.js/v1.0.11/dist/js/alertify.js"></script> <-- angular module --> <script src="https://cdn.rawgit.com/alertifyjs/alertify.js/v1.0.11/dist/js/ngAlertify.js"></script> </pre> <h4 class="mdl-typeograph--headline">Via Bower</h4> <pre>bower install --save alertifyjs</pre> <h4 class="mdl-typeograph--headline">Via NPM</h4> <pre>npm install --save alertify.js</pre> <h4 class="mdl-typeograph--headline">Disabling CSS Injection</h4> <p> If you don't want to inject CSS for some reason, just insert your own styles (any style or link element with an id of alertifyCSS) before the javascript file: </p> <pre> <link rel="stylesheet" href="/path/to/custom/styles.css" id="alertifyCSS"> <script src="/path/to/alertify.js"></script></pre> </div> </div> <div class="mdl-grid"> <div class="mdl-cell mdl-cell--8-col mdl-cell--5-col-desktop left-col"> <h4 class="mdl-typeograph--headline">AngularJS</h4> <p> An AngularJS module is also included. It's in the "ngAlertify.js" file, so use that instead if you're building an AngularJS app. </p> <p> If you want to check out a live demo of log messages with ngAlertify, <a href="/angular.html">click here</a>. </p> </div> <div class="mdl-cell mdl-cell--8-col mdl-cell--7-col-desktop right-col"> <h4 class="mdl-typeograph--headline">Initialize ngAlertify</h4> <pre> // Make sure to include the ngAlertify.js file. angular .module("myApp", ["ngAlertify"]) .controller("myController", function($scope, alertify) { alertify.success("Welcome to alertify!"); }); </pre> </div> </div> </div> <div class="styles__ribbon styles__ribbon--teal"> <div class="container"> <h2 class="mdl-typeography--display-3" id="performance">Performance</h2> <p> Alertify is designed from the ground-up for great performance and a small footprint. That means it's not as feature-rich as some other options. That's on purpose. We don't plan on adding a lot more features so it stays a great option for every kind of website and user. </p> <p> Currently, the entire library, with JavaScript and CSS is ~2.29 kB (gzipped), and getting smaller all the time. That's quite impressive considering it's only a single HTTP request, and no external dependencies at all being required. </p> <p>The Angular module is only 2.32kB, so that's light, too!</p> </div> </div> <div class="container"> <h2 class="mdl-typeography--display-3" id="usage">Usage</h2> <h3 class="mdl-typeography--display-2">Dialogs</h3> <div class="mdl-grid"> <div class="mdl-cell mdl-cell--8-col mdl-cell--5-col-desktop left-col"> <h5 class="mdl-typeography--headline">Alert Dialog</h5> <p> Dialogs display a text and require user to acknowledge the message. You can use click callback function as a second argument. </p> <a class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" id="alert">Try It</a><br> </div> <div class="mdl-cell mdl-cell--8-col mdl-cell--7-col-desktop right-col"> <h5 class="mdl-typeography--headline">Code Example</h5> <pre> alertify .alert("This is an alert dialog", function (e, ui) { // you can handle click event here e.preventDefault(); }); </pre> </div> </div> <div class="mdl-grid"> <div class="mdl-cell mdl-cell--8-col mdl-cell--5-col-desktop left-col"> <h5 class="mdl-typeography--headline">Confirm Dialog</h5> <p> Confirm and prompt dialogs have 2 callback functions for the each button. </p> <a class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" id="confirm">Try It</a><br> </div> <div class="mdl-cell mdl-cell--8-col mdl-cell--7-col-desktop right-col"> <h5 class="mdl-typeography--headline">Code Example</h5> <pre> alertify .confirm("This is a confirm dialog", function (e, ui) { alertify.success("You've clicked 'OK'"); }, function (e, ui) { alertify.error("You've clicked 'Cancel'"); }); </pre> </div> </div> <div class="mdl-grid"> <div class="mdl-cell mdl-cell--8-col mdl-cell--5-col-desktop left-col"> <h5 class="mdl-typeography--headline">Prompt Dialog</h5> <p> Use "<b>ui.getInputValue()</b>" method inside a click callback to retrieve the input value. </p> <a class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" id="prompt">Try It</a> </div> <div class="mdl-cell mdl-cell--8-col mdl-cell--7-col-desktop right-col"> <h5 class="mdl-typeography--headline">Code Example</h5> <pre> alertify .prompt("This is a prompt dialog", "Default value", function (e, ui) { // the value entered in the prompt input var inputValue = ui.getInputValue(); alertify.success("You've clicked 'OK' and typed: " + inputValue); }, function (e, ui) { alertify.error("You've clicked 'Cancel'"); }); </pre> </div> </div> <div class="mdl-grid"> <div class="mdl-cell mdl-cell--8-col mdl-cell--5-col-desktop left-col"> <h5 class="mdl-typeography--headline">Custom Button Labels</h5> <p> You're not limited to the "Ok" and "Cancel" button labels. You can easily set your own labels. For that purpose you have to use object instead of callback function for each button. Use "<b>label</b>" property to set custom labels and the callback function should be assigned to "<b>click</b>" property of the object. </p> <a class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" id="custom-labels">Try It</a> </div> <div class="mdl-cell mdl-cell--8-col mdl-cell--7-col-desktop right-col"> <h5 class="mdl-typeography--headline">Code Example</h5> <pre> alertify .confirm("Confirm dialog with custom button labels", { label: "Accept", click: function (e, ui) { e.preventDefault(); alertify.success("You've clicked Accept"); } },{ label: "Deny", click: function (e, ui) { e.preventDefault(); alertify.error("You've clicked Deny"); } }); </pre> </div> </div> <div class="mdl-grid"> <div class="mdl-cell mdl-cell--8-col mdl-cell--5-col-desktop left-col"> <h5 class="mdl-typeography--headline">Persistent Buttons</h5> <p> If you don't need not to automatically close a dialog while clicking a button, you can set "<b>autoClose</b>" button object property to "false". You are able to close the dialog programmatically inside the "click" callback function with "<b>ui.closeDialog()</b>" method. </p> <a class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" id="autoclose-buttons">Try It</a> </div> <div class="mdl-cell mdl-cell--8-col mdl-cell--7-col-desktop right-col"> <h5 class="mdl-typeography--headline">Code Example</h5> <pre> alertify .confirm("Confirm dialog with persistent buttons", { autoClose: false, click: function (e, ui) { e.preventDefault(); alertify.success("This is the persistent button"); } },{ autoClose: false, click: function (e, ui) { e.preventDefault(); if (true) { // method to close currently open dialog ui.closeDialog(); } alertify.error("This is the persistent button, but it was closed programmatically"); } }); </pre> </div> </div> <div class="mdl-grid"> <div class="mdl-cell mdl-cell--8-col mdl-cell--5-col-desktop left-col"> <h5 class="mdl-typeography--headline">Comprehensive dialog demo</h5> <p> The "alert", "confirm" and "prompt" dialogs are designed to imitate browser native modal windows, so they have a strictly limited number of buttons or specific elements, like input in prompt dialog. </p> <p> With the "dialog" method it is possible to customize your dialog to your liking. The second argument accepts array of button objects, as: </p> <ul> <li> <b>type</b> - valid values: "ok", "cancel", "custom". Button with type "ok" or "cancel" behaves as a regular appropriate button in "confirm" dialog. You are able to change the button behavior with any of the option below. </li> <li> <b>label</b> - button label text, applies to an element with the "data-alertify-btn" attribute in the button template. </li> <li> <b>autoClose</b> - boolean value, defines whether the dialog will be closed upon the button click. By default "true" for "ok" and "cancel" button types, otherwise is "false". </li> <li> <b>template</b> - valid html string, replaces default button template. Button tag should be marked with "data-alertify-btn" attribute. </li> <li> <b>click</b> - callback function to fire after the button is clicked. </li> </ul> <p> The "click" callback function are passed with "event" and "ui" attributes, where the "ui" is the reference to the dialog object, which provides the following methods and properties: </p> <ul> <li> <b>closeDialog()</b> - method to close dialog programmatically. Useful in case the "autoClose" button property is set to "false". </li> <li> <b>centerDialog()</b> - method to center dialog vertically. By default dialog centered on window resize, but if the content is changed you may have to center the dialog programmatically. </li> <li> <b>getInputValue()</b> - method to return the value of input field inside the "prompt" dialog. Returns "undefined" for other dialogs. </li> <li> <b>setMessage(text)</b> - method to update the message in general dialogs ("alert", "confirm", "prompt"). </li> <li> <b>setContent(html)</b> - method to update the whole content in the dialog. Most appropriate for "dialog" dialog. </li> <li> <b>getButtonObject()</b> - method to return an object with data for the current button. </li> <li> <b>dom</b> - object which contains references to DOM elements of the dialog. </li> </ul> <a class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" id="custom-dialog">Try It</a> </div> <div class="mdl-cell mdl-cell--8-col mdl-cell--7-col-desktop right-col"> <h5 class="mdl-typeography--headline">Code Example</h5> <pre> function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } function createInput(value) { return '<input type="radio" name="quiz" id="quiz_' + value + '" value="' + value + '"><label for="quiz_' + value + '">' + value + '</label>'; } function buildQuiz(ui) { var min = 5; var max = 20; var html = ""; var values = []; var numbers = []; var options = []; var solution = 0; var optionsLength = 3; var numbersLength = getRandomInt(2, 4); var scatter = Math.floor((min * numbersLength) / 2); for (var i = 0; i < numbersLength; i++) { var number = getRandomInt(min, max); numbers.push(number); solution += number; } while (values.length < optionsLength) { var value = getRandomInt(solution - scatter, solution + scatter); if(value !== solution && values.indexOf(value) === -1) { values.push(value); } } // put correct answer values.splice(getRandomInt(0, optionsLength - 1), 0, solution); for (var n = 0; n < values.length; n++) { options.push(createInput(values[n])); } html += numbers.join(' + ') + ' = ?'; html += '<br><br>'; html += options.join('<br>'); ui.dom.content.innerHTML = html; ui.solution = solution; } alertify .dialog("Click New quiz to create new quiz.", [ { type: "ok", label: "Test", autoClose: false, click: function (e, ui) { var dialog = ui.dom.dialog; var checked = dialog.querySelector('input[name="quiz"]:checked'); if(checked === null) { alertify.error("Choose an answer from the list"); buildQuiz(ui); } else { if(ui.solution === parseInt(checked.value)) { alertify.success("Correct answer!"); ui.closeDialog(); } else { alertify.error("Wrong answer. Bad luck"); buildQuiz(ui); } } } },{ label: "New quiz", autoClose: false, click: function (e, ui) { buildQuiz(ui); ui.centerDialog(); }, template: '<button data-alertify-btn style="font-weight: bold"></button>' },{ type: "cancel", label: "Close" } ]); </pre> </div> </div> <div class="mdl-grid"> <div class="mdl-cell mdl-cell--8-col mdl-cell--5-col-desktop left-col"> <h5 class="mdl-typeography--headline">Ajax requests</h5> <p> "OK" button updates a message inside the open dialog. </p> <p> "CLOSE" button shows result message in a new dialog. Multiple dialogs chain. </p> <a class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" id="ajax">Try It</a> </div> <div class="mdl-cell mdl-cell--8-col mdl-cell--7-col-desktop right-col"> <h5 class="mdl-typeography--headline">Code Example</h5> <pre> alertify .confirm("Ajax requests", { autoClose: false, click: function (e, ui) { e.preventDefault(); // AJAX request delay imitation setTimeout(function () { // updates message in the current dialog ui.setMessage("Successful AJAX after OK. Without opening a new dialog."); // center dialog vertically due to dialog height might be changed ui.centerDialog(); alertify.log("Dialog message was updated using AJAX request."); }, 200); } },{ click: function (e, ui) { e.preventDefault(); // AJAX request delay imitation setTimeout(function () { // notification in the new dialog window alertify.alert("Successful AJAX after Cancel); }, 200); } }); </pre> </div> </div> <div class="mdl-grid"> <div class="mdl-cell mdl-cell--8-col mdl-cell--5-col-desktop left-col"> <h5 class="mdl-typeography--headline">Promise Aware</h5> <p> If your browser supports promises, you can use them instead of callbacks. The "resolved" is an object with the "event" and "ui" properties. </p> <a class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" id="promise">Try It</a> </div> <div class="mdl-cell mdl-cell--8-col mdl-cell--7-col-desktop right-col"> <h5 class="mdl-typeography--headline">Code Example</h5> <pre> if ("function" !== typeof Promise) { alertify.alert("Your browser doesn't support promises"); return; } alertify .confirm("Promise confirm").then(function (resolved) { // The click event object is accessible via "event" property. resolved.event.preventDefault(); // UI object is accessible via "ui" property. alertify.alert("You clicked the " + resolved.ui.getButtonObject().label + " button!"); }); </pre> </div> </div> <hr> <h3 class="mdl-typeography--display-2" id="log-messages">Log Messages</h3> <div class="mdl-grid"> <div class="mdl-cell mdl-cell--8-col mdl-cell--5-col-desktop left-col"> <h5 class="mdl-typeography--headline">Standard Log</h5> <p></p> <a class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" id="notification">Try It</a> </div> <div class="mdl-cell mdl-cell--8-col mdl-cell--7-col-desktop right-col"> <h5 class="mdl-typeography--headline">Code Example</h5> <pre> alertify.log("Standard log message"); </pre> </div> </div> <div class="mdl-grid"> <div class="mdl-cell mdl-cell--8-col mdl-cell--5-col-desktop left-col"> <h5 class="mdl-typeography--headline">Log types</h5> <p> Try out predefined different log types. </p> <p> <a class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" id="success">Success Log</a> </p> <p> <a class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" id="warning">Warning Log</a> </p> <p> <a class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" id="error">Error Log</a> </p> </div> <div class="mdl-cell mdl-cell--8-col mdl-cell--7-col-desktop right-col"> <h5 class="mdl-typeography--headline">Code Example</h5> <pre> alertify.success("Success log message"); </pre> <pre> alertify.warning("Warning log message"); </pre> <pre> alertify.error("Error log message"); </pre> </div> </div> <div class="mdl-grid"> <div class="mdl-cell mdl-cell--8-col mdl-cell--5-col-desktop left-col"> <h5 class="mdl-typeography--headline">Log With HTML</h5> <p>HTML works just fine in log messages. Have at it!</p> <a class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" id="notification-html">Try It</a> </div> <div class="mdl-cell mdl-cell--8-col mdl-cell--7-col-desktop right-col"> <h5 class="mdl-typeography--headline">Code Example</h5> <pre> var msg = "<img src='https://placehold.it/256x128'>" + "<h3>This is HTML</h3>" + "<p>It's great, right?</p>"; alertify.log(msg); </pre> </div> </div> <div class="mdl-grid"> <div class="mdl-cell mdl-cell--8-col mdl-cell--5-col-desktop left-col"> <h5 class="mdl-typeography--headline">Log with callback</h5> <p> Keep in mind that the current log are not going to close automatically if you call another one, as it is implemented inside the callback function in example. To force log closing use "<b>ui.closeLog()</b>" inside the callback function. </p> <a class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" id="notification-callback">Try It</a> </div> <div class="mdl-cell mdl-cell--8-col mdl-cell--7-col-desktop right-col"> <h5 class="mdl-typeography--headline">Code Example</h5> <pre> alertify.log("Log message with callback", function(e, ui) { // you can use click event here e.preventDefault(); // method to close current log message ui.remove(); alertify.log("You clicked the notification"); }); </pre> </div> </div> <div class="mdl-grid"> <div class="mdl-cell mdl-cell--8-col mdl-cell--5-col-desktop left-col"> <h5 class="mdl-typeography--headline">Hide in 10 seconds</h5> <p></p> <a class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" id="delay">Try It</a> </div> <div class="mdl-cell mdl-cell--8-col mdl-cell--7-col-desktop right-col"> <h5 class="mdl-typeography--headline">Code Example</h5> <pre> alertify .logDelay(10000) .log("Hiding in 10 seconds"); </pre> </div> </div> <div class="mdl-grid"> <div class="mdl-cell mdl-cell--8-col mdl-cell--5-col-desktop left-col"> <h5 class="mdl-typeography--headline">Persistent Log</h5> <p> Persistent log messages will stay until clicked (if "<b>ui.remove()</b>" is used inside callback function) or until forcibly removed when the number of messages exceeds the "<b>logMaxItems</b>" setting. See below. </p> <a class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" id="forever">Try It</a> </div> <div class="mdl-cell mdl-cell--8-col mdl-cell--7-col-desktop right-col"> <h5 class="mdl-typeography--headline">Code Example</h5> <pre> alertify .logDelay(0) .log("Will stay until clicked", function(e, ui) { ui.remove(); }); </pre> </div> </div> <div class="mdl-grid"> <div class="mdl-cell mdl-cell--8-col mdl-cell--5-col-desktop left-col"> <h5 class="mdl-typeography--headline">Maximum Number of Log Messages</h5> <p> You can easily set the maximum number of log/success/error messages that will be displayed at a single time. The default is two. </p> <a class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" id="max-log-items">Try It</a> </div> <div class="mdl-cell mdl-cell--8-col mdl-cell--7-col-desktop right-col"> <h5 class="mdl-typeography--headline">Code Example</h5> <pre> alertify .logMaxItems(1) .log("This is the first message"); // The timeout is just for visual effect. setTimeout(function() { alertify.log("The second message will force the first to close."); }, 1000); </pre> </div> </div> <div class="mdl-grid"> <div class="mdl-cell mdl-cell--8-col mdl-cell--5-col-desktop left-col"> <h5 class="mdl-typeography--headline">Template for Log messages</h5> <p> You can change the template for all logs. </p> <a class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" id="log-message-template">Try It</a> </div> <div class="mdl-cell mdl-cell--8-col mdl-cell--7-col-desktop right-col"> <h5 class="mdl-typeography--headline">Code Example</h5> <pre> alertify .logMessageTemplate(function (input) { return 'log message: ' + input; }) .log("This is the message"); </pre> </div> </div> <div class="mdl-grid"> <div class="mdl-cell mdl-cell--8-col mdl-cell--5-col-desktop left-col"> <h5 class="mdl-typeography--headline">Setting the Position</h5> <p></p> <a class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" id="log-position">Try It</a> </div> <div class="mdl-cell mdl-cell--8-col mdl-cell--7-col-desktop right-col"> <h5 class="mdl-typeography--headline">Code Example</h5> <pre> alertify.logDelay(1000); // This is just to make the demo go faster. alertify.log("Default botoom left position"); setTimeout(function() { alertify.logPosition("top left"); alertify.log("top left"); }, 1500); setTimeout(function() { alertify.logPosition("top right"); alertify.log("top right"); }, 3000); setTimeout(function() { alertify.logPosition("bottom right"); alertify.log("bottom right"); }, 4500); setTimeout(function() { alertify.reset(); // Puts the message back to default position. alertify.log("Back to default"); }, 6000); </pre> </div> </div> <div class="mdl-grid"> <div class="mdl-cell mdl-cell--8-col mdl-cell--5-col-desktop left-col"> <h5 class="mdl-typeography--headline">Setting the parent element</h5> <p>You can set where parent element where Alertify is appended into the DOM. </p> </div> <div class="mdl-cell mdl-cell--8-col mdl-cell--7-col-desktop right-col"> <h5 class="mdl-typeography--headline">Code Example</h5> <pre> // By default, Alertify is appended to document.body. // You can easily change that, though, like this: var elem = document.getElementById("my-element"); alertify.parent(elem); </pre> </div> </div> <div class="mdl-grid"> <div class="mdl-cell mdl-cell--8-col mdl-cell--5-col-desktop left-col"> <h5 class="mdl-typeography--headline">Advanced example - Progress Bar</h5> <p> This complex example demonstrates how to create log that contains progress bar. <b>Concept</b> - you perform batch operations on some objects (uploading files e.g.) and would like to: </p> <ul> <li> display a single log message with total progress; </li> <li> display a success log message for each processed object; </li> <li> message with progress bar is stuck/fixed until all objects are processed; </li> </ul> <p> First we log the message with progress bar and apply <b>logMessageTemplate</b> method to customize its template. All following "success" messages in the stack use default settings by cleaning previous setup with <b>reset</b> method. </p> <p> Note that we use <b>getLogs</b> to get all existing log messages, fetch the last one (which contains progress bar) and assign it to the "logUI" variable for further usage. </p> <p> After that we stick the progressbar log message by calling <b>stick</b> method on this message with <i>true</i> argument. </p> <p> <i>Stuck (fixed)</i> log message means that it will constantly remains in the beginning of the log messages stack and wouldn't be shifted by other messages when the maximum number of log messages is exceeded. </p> <p> Once all objects are processed we "unstick" progressbar log message so now it behaves the same way as other messages and can be shifted by the following messages. Also we set timeout to remove the message with delay. </p> <a class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" id="log-advanced-progress-bar">Try It</a> </div> <div class="mdl-cell mdl-cell--8-col mdl-cell--7-col-desktop right-col"> <h5 class="mdl-typeography--headline">Code Example</h5> <pre> var ProcessingLog = function() { this.total = 0; this.succeed = 0; this.failure = 0; this.processed = 0; this.getProgress = function() { var progress = Math.round((this.succeed / this.total) * 100); return (progress < 5) ? 5 : progress; }; this.getMessage = function() { return '%s of %s items successfully processed'.replace('%s', this.succeed).replace('%s', this.total); }; this.succeeded = function() { this.succeed++; this.processed++; }; this.failed = function() { this.failure++; this.processed++; }; this.isProcessed = function() { return this.processed === this.total; }; }; var process = new ProcessingLog(); process.total = 5; var logs = alertify .logDelay(0) .logMessageTemplate(function (message) { var progress = process.getProgress(), animateCss = process.isProcessed() ? 'striped' : 'striped animated'; return '<div>' + message + '</div>' + '<div class="progress">' + '<div class="progress-counter">' + progress + '%</div>' + '<div class="progress-bar ' + animateCss + '" style="width: ' + progress + '%"></div>' + '</div>'; }) .log(process.getMessage()) .getLogs(); var logUI = logs[logs.length-1]; logUI.stick(true); var interval = setInterval(function() { process.succeeded(); logUI.setMessage(process.getMessage()); alertify .reset() .logDelay(5000) .success("Item #" + process.processed + " processed."); if (process.isProcessed()) { logUI.stick(false); clearInterval(interval); setTimeout(function() { logUI.remove(); }, 5000); } }, 500); </pre> </div> </div> <hr> <h3 class="mdl-typeography--display-2">Template Customization</h3> <div class="mdl-grid"> <div class="mdl-cell mdl-cell--8-col mdl-cell--5-col-desktop left-col"> <h5 class="mdl-typeography--headline">Predefined themes</h5> <p> Alertify provides a number of templates for popular platforms. To apply predefined theme use one the following names in "<b>theme()</b>" method: </p> <ul> <li>bootstrap</li> <li>purecss</li> <li>material-design-light</li> <li>angular-material</li> </ul> <a class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" id="theme-predefined">Try It</a>   <a class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" id="theme-reset">Reset</a> </div> <div class="mdl-cell mdl-cell--8-col mdl-cell--7-col-desktop right-col"> <h5 class="mdl-typeography--headline">Code Example</h5> <pre> alertify .theme("bootstrap") .prompt("Bootstrap theme message"); </pre> <pre> alertify .theme("default") .prompt("Default theme message"); </pre> </div> </div> <div class="mdl-grid"> <div class="mdl-cell mdl-cell--8-col mdl-cell--5-col-desktop left-col"> <h5 class="mdl-typeography--headline">Custom templates</h5> <p> You are able to customize templates at your own. There are few templates for dialogs and logs which are listed below and should be passed to "<b>theme()</b>" method as object. Most of templates supposed to have key elements marked by <b><i>data-alertify-*</i></b> attribute, which is mandatory and serves to identify a target tag for the dialog message, prompt input, etc. </p> <h5 class="mdl-typeography--headline">Dialog templates</h5> <ul> <li> <b>dialogMessage</b> - Dialog message template. Target element attribute - "<i>data-alertify-msg</i>" </li> <li> <b>dialogInput</b> - Dialog prompt input template. Target element attribute - "<i>data-alertify-input</i>" </li> <li> <b>dialogButtonsHolder</b> - Dialog buttons wrapper template. Target element attribute - "<i>data-alertify-btn-holder</i>" </li> </ul> <a class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" id="template-dialog">Try Dialog</a> <h5 class="mdl-typeography--headline">Log templates</h5> <ul> <li> <b>logMessage</b> - Log message template. Target element attribute - "<i>data-alertify-log-msg</i>" </li> </ul> <a class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" id="template-log">Try Log</a> </div> <div class="mdl-cell mdl-cell--8-col mdl-cell--7-col-desktop right-col"> <h5 class="mdl-typeography--headline">Code Example</h5> <pre> alertify. theme({ dialogMessage: '<div style="text-align: center; color: #3F51B5;">' + '<div <b>data-alertify-msg</b> style="font-weight: bold"></div>' + '</div>', dialogInput: '<div>' + '<label for="template-dialog-input">LABEL - click to focus:</label>' + '<input <b>data-alertify-input</b> id="template-dialog-input" type="text">' + '<div style="font-size: 12px">Note: write any text to the input.</div>' + '</div>', dialogButtonsHolder: '<nav <b>data-alertify-btn-holder</b> style="text-align: center"></nav>' }) .prompt("Dialog prompt with custom template.", "Default value", { click: function (e, ui) { alertify.success("You've typed: " + ui.getInputValue()); } }); // set default options setTimeout(function() {alertify.reset()}, 500); </pre> <pre> alertify. theme({ logMessage:'<div class="wrapper"> <div <b>data-alertify-log-msg</b> style="background: rgb(78, 150, 193);"></div> </div>' }) .log("Log message with custom template."); // set default options setTimeout(function() {alertify.reset()}, 500); </pre> </div> </div> <hr> <h3 class="mdl-typeography--display-2">Other Options</h3> <div class="mdl-grid"> <div class="mdl-cell mdl-cell--8-col mdl-cell--5-col-desktop left-col"> <h5 class="mdl-typeography--headline">Resetting Default Values</h5> <p> When you change values like the button labels, delays, dinput efaultr placeholders, etc., you can easily reset the defaults. </p> <a class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" id="reset">Try It</a> </div> <div class="mdl-cell mdl-cell--8-col mdl-cell--7-col-desktop right-col"> <h5 class="mdl-typeography--headline">Code Example</h5> <pre> // Notice the okay button is not the custom value, it was reset. alertify .okBtn("Go For It!") .reset() .alert("Custom values were reset!"); </pre> </div> </div> </div> </div> <footer> <div class="container"> <p>Alertify.js is released under the <a href="http://opensource.org/licenses/MIT">MIT license</a>. © 2015 <a href="https://bradb.net">Brad Berger</a> and contributors. </div> </footer> </main> </div> <script src="../src/js/alertify.js"></script> <script src="js/all.js"></script> </body> </html>