mirror_php/moodle
1
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-04-15 05:25:08 +02:00
Code Issues Projects Releases Wiki Activity

MDL-71089 core: Add different Toast notification styling 'types'

Browse Source
This commit is contained in:
Mikel Martín 2021-03-16 12:45:35 +01:00
parent e7fa11471e
commit 5fade7fcc6
3 changed files with 22 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
lib/amd/build/toast.min.js.map
View File

@ -1 +1 @@
{"version":3,"sources":["../src/toast.js"],"names":["addToastRegion","parent","pendingPromise","Pending","Templates","renderForPromise","html","js","prependNodeContents","Notification","exception","resolve","add","message","configuration","closeButton","autohide","delay","templateName","getTargetNode","targetNode","regions","document","querySelectorAll","length","body"],"mappings":"mMAuBA,OACA,OACA,O,6jCAOO,GAAMA,CAAAA,CAAc,4CAAG,WAAMC,CAAN,+FACpBC,CADoB,CACH,GAAIC,UAAJ,CAAY,gBAAZ,CADG,yBAIGC,WAAUC,gBAAV,CAA2B,0BAA3B,CAAuD,EAAvD,CAJH,iBAIfC,CAJe,GAIfA,IAJe,CAITC,CAJS,GAITA,EAJS,CAKtBH,UAAUI,mBAAV,CAA8BP,CAA9B,CAAsCK,CAAtC,CAA4CC,CAA5C,EALsB,qDAOtBE,UAAaC,SAAb,OAPsB,QAU1BR,CAAc,CAACS,OAAf,GAV0B,uDAAH,uDAApB,C,mBAuBA,GAAMC,CAAAA,CAAG,4CAAG,WAAMC,CAAN,CAAeC,CAAf,mGACTZ,CADS,CACQ,GAAIC,UAAJ,CAAY,gBAAZ,CADR,CAEfW,CAAa,IACTC,WAAW,GADF,CAETC,QAAQ,GAFC,CAGTC,KAAK,CAAE,GAHE,EAINH,CAJM,CAAb,CAOMI,CATS,oDAWcC,CAAAA,CAAa,EAX3B,QAWLC,CAXK,uBAYchB,WAAUC,gBAAV,CAA2Ba,CAA3B,IACrBL,OAAO,CAAPA,CADqB,EAElBC,CAFkB,EAZd,iBAYJR,CAZI,GAYJA,IAZI,CAYEC,CAZF,GAYEA,EAZF,CAgBXH,UAAUI,mBAAV,CAA8BY,CAA9B,CAA0Cd,CAA1C,CAAgDC,CAAhD,EAhBW,qDAkBXE,UAAaC,SAAb,OAlBW,QAqBfR,CAAc,CAACS,OAAf,GArBe,uDAAH,uDAAT,C,QAwBP,GAAMQ,CAAAA,CAAa,4CAAG,oGACZE,CADY,CACFC,QAAQ,CAACC,gBAAT,CAA0B,gBAA1B,CADE,KAGdF,CAAO,CAACG,MAHM,0CAIPH,CAAO,CAACA,CAAO,CAACG,MAAR,CAAiB,CAAlB,CAJA,wBAOZxB,CAAAA,CAAc,CAACsB,QAAQ,CAACG,IAAV,CAAgB,cAAhB,CAPF,iCAQXN,CAAa,EARF,0CAAH,uD","sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle. If not, see <http://www.gnu.org/licenses/>.\n\n/**\n * A system for displaying small snackbar notifications to users which disappear shortly after they are shown.\n *\n * @module core/toast\n * @package core\n * @copyright 2019 Andrew Nicols <andrew@nicols.co.uk>\n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\nimport Templates from 'core/templates';\nimport Notification from 'core/notification';\nimport Pending from 'core/pending';\n\n/**\n * Add a new region to place toasts in, taking in a parent element.\n *\n * @param {Element} parent\n */\nexport const addToastRegion = async(parent) => {\n const pendingPromise = new Pending('addToastRegion');\n\n try {\n const {html, js} = await Templates.renderForPromise('core/local/toast/wrapper', {});\n Templates.prependNodeContents(parent, html, js);\n } catch (e) {\n Notification.exception(e);\n }\n\n pendingPromise.resolve();\n};\n\n/**\n * Add a new toast or snackbar notification to the page.\n *\n * @param {String} message\n * @param {Object} configuration\n * @param {String} [configuration.title]\n * @param {String} [configuration.subtitle]\n * @param {Bool} [configuration.autohide=true]\n * @param {Number} [configuration.delay=4000]\n */\nexport const add = async(message, configuration) => {\n const pendingPromise = new Pending('addToastRegion');\n configuration = {\n closeButton: false,\n autohide: true,\n delay: 4000,\n ...configuration,\n };\n\n const templateName = `core/local/toast/message`;\n try {\n const targetNode = await getTargetNode();\n const {html, js} = await Templates.renderForPromise(templateName, {\n message,\n ...configuration\n });\n Templates.prependNodeContents(targetNode, html, js);\n } catch (e) {\n Notification.exception(e);\n }\n\n pendingPromise.resolve();\n};\n\nconst getTargetNode = async() => {\n const regions = document.querySelectorAll('.toast-wrapper');\n\n if (regions.length) {\n return regions[regions.length - 1];\n }\n\n await addToastRegion(document.body, 'fixed-bottom');\n return getTargetNode();\n};\n"],"file":"toast.min.js"}
{"version":3,"sources":["../src/toast.js"],"names":["addToastRegion","parent","pendingPromise","Pending","Templates","renderForPromise","html","js","prependNodeContents","Notification","exception","resolve","add","message","configuration","closeButton","autohide","delay","templateName","getTargetNode","targetNode","regions","document","querySelectorAll","length","body"],"mappings":"mMAuBA,OACA,OACA,O,6jCAOO,GAAMA,CAAAA,CAAc,4CAAG,WAAMC,CAAN,+FACpBC,CADoB,CACH,GAAIC,UAAJ,CAAY,gBAAZ,CADG,yBAIGC,WAAUC,gBAAV,CAA2B,0BAA3B,CAAuD,EAAvD,CAJH,iBAIfC,CAJe,GAIfA,IAJe,CAITC,CAJS,GAITA,EAJS,CAKtBH,UAAUI,mBAAV,CAA8BP,CAA9B,CAAsCK,CAAtC,CAA4CC,CAA5C,EALsB,qDAOtBE,UAAaC,SAAb,OAPsB,QAU1BR,CAAc,CAACS,OAAf,GAV0B,uDAAH,uDAApB,C,mBAyBA,GAAMC,CAAAA,CAAG,4CAAG,WAAMC,CAAN,CAAeC,CAAf,mGACTZ,CADS,CACQ,GAAIC,UAAJ,CAAY,gBAAZ,CADR,CAEfW,CAAa,IACTC,WAAW,GADF,CAETC,QAAQ,GAFC,CAGTC,KAAK,CAAE,GAHE,EAINH,CAJM,CAAb,CAOMI,CATS,oDAWcC,CAAAA,CAAa,EAX3B,QAWLC,CAXK,uBAYchB,WAAUC,gBAAV,CAA2Ba,CAA3B,IACrBL,OAAO,CAAPA,CADqB,EAElBC,CAFkB,EAZd,iBAYJR,CAZI,GAYJA,IAZI,CAYEC,CAZF,GAYEA,EAZF,CAgBXH,UAAUI,mBAAV,CAA8BY,CAA9B,CAA0Cd,CAA1C,CAAgDC,CAAhD,EAhBW,qDAkBXE,UAAaC,SAAb,OAlBW,QAqBfR,CAAc,CAACS,OAAf,GArBe,uDAAH,uDAAT,C,QAwBP,GAAMQ,CAAAA,CAAa,4CAAG,oGACZE,CADY,CACFC,QAAQ,CAACC,gBAAT,CAA0B,gBAA1B,CADE,KAGdF,CAAO,CAACG,MAHM,0CAIPH,CAAO,CAACA,CAAO,CAACG,MAAR,CAAiB,CAAlB,CAJA,wBAOZxB,CAAAA,CAAc,CAACsB,QAAQ,CAACG,IAAV,CAAgB,cAAhB,CAPF,iCAQXN,CAAa,EARF,0CAAH,uD","sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle. If not, see <http://www.gnu.org/licenses/>.\n\n/**\n * A system for displaying small snackbar notifications to users which disappear shortly after they are shown.\n *\n * @module core/toast\n * @package core\n * @copyright 2019 Andrew Nicols <andrew@nicols.co.uk>\n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\nimport Templates from 'core/templates';\nimport Notification from 'core/notification';\nimport Pending from 'core/pending';\n\n/**\n * Add a new region to place toasts in, taking in a parent element.\n *\n * @param {Element} parent\n */\nexport const addToastRegion = async(parent) => {\n const pendingPromise = new Pending('addToastRegion');\n\n try {\n const {html, js} = await Templates.renderForPromise('core/local/toast/wrapper', {});\n Templates.prependNodeContents(parent, html, js);\n } catch (e) {\n Notification.exception(e);\n }\n\n pendingPromise.resolve();\n};\n\n/**\n * Add a new toast or snackbar notification to the page.\n *\n * @param {String} message\n * @param {Object} configuration\n * @param {String} [configuration.title]\n * @param {String} [configuration.subtitle]\n * @param {String} [configuration.type] Optional type of the toast notification ('success', 'info', 'warning' or 'danger')\n * @param {Boolean} [configuration.autohide=true]\n * @param {Boolean} [configuration.closeButton=false]\n * @param {Number} [configuration.delay=4000]\n */\nexport const add = async(message, configuration) => {\n const pendingPromise = new Pending('addToastRegion');\n configuration = {\n closeButton: false,\n autohide: true,\n delay: 4000,\n ...configuration,\n };\n\n const templateName = `core/local/toast/message`;\n try {\n const targetNode = await getTargetNode();\n const {html, js} = await Templates.renderForPromise(templateName, {\n message,\n ...configuration\n });\n Templates.prependNodeContents(targetNode, html, js);\n } catch (e) {\n Notification.exception(e);\n }\n\n pendingPromise.resolve();\n};\n\nconst getTargetNode = async() => {\n const regions = document.querySelectorAll('.toast-wrapper');\n\n if (regions.length) {\n return regions[regions.length - 1];\n }\n\n await addToastRegion(document.body, 'fixed-bottom');\n return getTargetNode();\n};\n"],"file":"toast.min.js"}

4
lib/amd/src/toast.js
View File

@ -50,7 +50,9 @@ export const addToastRegion = async(parent) => {
* @param {Object} configuration
* @param {String} [configuration.title]
* @param {String} [configuration.subtitle]
* @param {Bool} [configuration.autohide=true]
* @param {String} [configuration.type] Optional type of the toast notification ('success', 'info', 'warning' or 'danger')
* @param {Boolean} [configuration.autohide=true]
* @param {Boolean} [configuration.closeButton=false]
* @param {Number} [configuration.delay=4000]
*/
export const add = async(message, configuration) => {

27
lib/templates/local/toast/message.mustache
View File

@ -30,18 +30,27 @@
"data": 200,
"autohide": true,
"Message": "Cubing negative numbers is tough",
"title": "Negative numbers",
"subtitle": "Cubing",
"type": "info",
"closebutton": true
}
}}
<div id="toast-{{uniqid}}" class="toast bg-dark text-white rounded mx-auto" data-delay="{{delay}}" {{^autohide}}data-autohide="false"{{/autohide}}>
<div class="toast-body">
<span>{{{message}}}</span>
{{#closeButton}}
<button type="button" class="ml-2 mb-1 close text-white" data-dismiss="toast" aria-label="{{#str}}dismissnotification, core{{/str}}">
<span aria-hidden="true">&times;</span>
</button>
{{/closeButton}}
</div>
<div id="toast-{{uniqid}}" class="toast mx-auto {{#type}}toast-{{type}}{{/type}}" data-delay="{{delay}}" {{^autohide}}data-autohide="false"{{/autohide}}>
{{#title}}
<div class="toast-header">
<span class="toast-title">{{{title}}}</span>
{{#subtitle}}<span class="toast-subtitle ml-auto small">{{{subtitle}}}</span>{{/subtitle}}
</div>
{{/title}}
<div class="toast-body d-flex">
<div class="toast-message px-1">{{{message}}}</div>
{{#closeButton}}
<button type="button" class="ml-auto align-self-baseline close" data-dismiss="toast" aria-label="{{#str}}dismissnotification, core{{/str}}">
<span aria-hidden="true">&times;</span>
</button>
{{/closeButton}}
</div>
</div>
{{#js}}
require(['jquery', 'theme_boost/bootstrap/toast'], function(jQuery) {