File modules/cms/ui/themes/default/script/openrat/notice.js
Last commit: Mon Jun 13 22:00:39 2022 +0200 Jan Dankert Fix: Show the error description in the UI notice.
1 import $ from '../jquery-global.js'; 2 import Workbench from './workbench.js'; 3 import Callback from "./callback.js"; 4 import WorkbenchNavigator from "./navigator.js"; 5 6 /** 7 * Notice. 8 */ 9 export default class Notice { 10 11 'use strict'; 12 13 static type = Object.freeze({ 14 warning: 0, 15 validation: 1, 16 info: 2, 17 success: 3, 18 error: 3, 19 loading: 3, 20 inactive: 4 21 }); 22 23 constructor() { 24 this.typ = ''; 25 this.id = 0; 26 this.name = ''; 27 this.status = 'inactive'; 28 this.msg = ''; 29 this.log = ''; 30 this.timeout = 0; 31 32 this.element = $.create('div') 33 .addClass('notice' ) 34 .addClass('notice--is-inactive' ) 35 .addClass('collapsible' ) 36 .addClass('collapsible--is-closed'); 37 38 this.onClick = new Callback(); 39 40 } 41 42 43 before() { 44 }; 45 46 47 // Close the notice. 48 close() { 49 this.element.remove(); 50 } 51 52 53 setStatus( status ) { 54 55 this.element.removeClass('notice--' + this.status ); 56 this.status = status; 57 this.element.addClass('notice--' + this.status ); 58 } 59 60 61 inProgress() { 62 //this.element.addClass('loader'); 63 } 64 65 stopProgress() { 66 //this.element.removeClass('loader'); 67 } 68 69 show() { 70 71 console.debug('user notice: ' + this.msg); 72 let notice = this; 73 this.element.removeClass('notice--is-inactive'); 74 75 this.element.appendTo( $('.or-notice-container') ); // Notice anhängen. 76 77 let toolbar = $.create('div').addClass("notice-toolbar"); 78 toolbar.appendTo(this.element); 79 toolbar.append( $.create('i').addClass('image-icon').addClass('image-icon--menu-close').addClass('act-notice-close') ); 80 81 this.element.append( $.create('i').addClass('image-icon').addClass('image-icon--node-open' ).addClass('collapsible--on-open' ) ); 82 this.element.append( $.create('i').addClass('image-icon').addClass('image-icon--node-closed').addClass('collapsible--on-closed') ); 83 this.element.append( $.create('span').addClass('notice-text').addClass('collapsible-act-switch').text( Notice.htmlEntities(this.msg) ) ); 84 85 if (this.name) { 86 this.element.append( $.create('div').addClass('notice-name').addClass('collapsible-value').append( $.create('a').addClass('act-clickable').attr('href',WorkbenchNavigator.createShortUrl(this.typ, this.id)).data('type',open).data('action',this.typ).data('id',this.id).append( $.create('i').addClass('notice-action-full').addClass('image-icon').addClass('image-icon--action-' + this.typ )).append( $.create('span').text(this.name ))).orLinkify() ); 87 } 88 89 if (this.log) 90 this.element.append( $.create('div').addClass('notice-log').addClass('collapsible-value').append( $.create('pre').text(this.log))); 91 92 this.element.append( $.create('div').addClass('notice-date').addClass('collapsible-value').text(new Date().toLocaleTimeString())); 93 94 95 // Fire onclick-handler 96 this.element.find('.or-notice-text').click( function () { 97 notice.onClick.fire(); 98 } ); 99 100 Workbench.registerOpenClose( this.element ); 101 102 // Close the notice on click 103 this.element.find('.or-act-notice-close').click(function () { 104 notice.close(); 105 }); 106 107 // Fadeout the notice after a while. 108 if ( !this.timeout ) { 109 switch( this.status ) { 110 case 'ok' : this.timeout = 3; break; 111 case 'info' : this.timeout = 30; break; 112 case 'warning': this.timeout = 40; break; 113 case 'error' : this.timeout = 50; break; 114 default: this.timeout = 10; console.error('unknown notice status: '+this.status); 115 } 116 } 117 118 if (this.timeout) { 119 120 // Sets a timer to close the notice after the timeout 121 let timer = setTimeout(function () { 122 notice.close(); 123 }, this.timeout * 1000); 124 125 // Click anywhere in the notice should clear the auto-close timer. 126 // Because if the user interacts with the notice it should not magically disappear. 127 this.element.click( function () { 128 window.clearTimeout( timer ); 129 } ); 130 } 131 } 132 133 setContext(type,id,name) { 134 this.typ = type; 135 this.id = id; 136 this.name = name; 137 } 138 139 140 /** 141 * Show a notice bubble in the UI. 142 * @param type 143 * @param id 144 * @param name 145 * @param status 146 * @param msg 147 * @param log 148 * @param notifyTheBrowser 149 */ 150 start(type, id, name, status, msg, log = null, notifyTheBrowser = false) { 151 // Notice-Bar mit dieser Meldung erweitern. 152 153 this.setContext(type,id,name); 154 this.msg = msg; 155 this.log = log; 156 157 if (notifyTheBrowser) 158 this.notifyBrowser(msg); // Notify browser if wanted. 159 160 this.setStatus(status); 161 162 } 163 164 165 166 /** 167 * Show a notification in the browser. 168 * Source: https://developer.mozilla.org/en-US/docs/Web/API/notification 169 * @param text text of message 170 */ 171 notifyBrowser() 172 { 173 let text = this.msg; 174 175 // Let's check if the browser supports notifications 176 if (!("Notification" in window)) { 177 return; 178 } 179 180 // Let's check if the user is okay to get some notification 181 else if (Notification.permission === "granted") { 182 // If it's okay let's create a notification 183 let notification = new Notification(text); 184 } 185 186 // Otherwise, we need to ask the user for permission 187 else if (Notification.permission !== 'denied') { 188 Notification.requestPermission(function (permission) { 189 // If the user is okay, let's create a notification 190 if (permission === "granted") { 191 let notification = new Notification(text); 192 } 193 }); 194 } 195 196 // At last, if the user already denied any notification, and you 197 // want to be respectful there is no need to bother them any more. 198 } 199 200 201 202 /** 203 * Escape HTML entities. 204 * 205 * @param str 206 * @returns {string} 207 */ 208 static htmlEntities( str ) { 209 return String(str).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"'); 210 } 211 212 213 static removeNoticesWithStatus( status) { 214 $('.or-notice-container').find('.or-notice--'+status).remove(); 215 } 216 217 static removeAllNotices( status) { 218 219 $('.or-notice-container').find('.or-notice').remove(); 220 } 221 222 }
Downloadmodules/cms/ui/themes/default/script/openrat/notice.js
History Mon, 13 Jun 2022 22:00:39 +0200 Jan Dankert Fix: Show the error description in the UI notice. Fri, 11 Feb 2022 01:28:51 +0100 dankert Fixed some UI problems: The dialogs are now closed after submitting the data; Workbench is reloaded after login/logout. Mon, 29 Nov 2021 23:54:33 +0100 Jan Dankert New: Spinner image with pure css. So we can colorize it now. Thu, 1 Apr 2021 01:01:54 +0200 Jan Dankert New: Some fixes for OQuery, our new selfmade light JQuery replacement. Now the UI is back again. Wed, 31 Mar 2021 01:52:57 +0200 Jan Dankert New: Replace JQuery with OQuery, a selfmade light JQuery replacement. Sat, 27 Mar 2021 19:07:36 +0100 Jan Dankert Fix: Import Navigator Sat, 27 Mar 2021 05:14:11 +0100 Jan Dankert Refactoring: Converting all script files to ES6 modules (work in progress); removed jquery-ui (drag and drop will be replaced by HTML5, sortable by a small lib) Wed, 17 Mar 2021 22:27:33 +0100 Jan Dankert Refactoring: Using ES6-Modules (experimental) Wed, 17 Mar 2021 02:18:50 +0100 Jan Dankert Refactoring: Using "Jquery slim" without ajax and effects. Tue, 16 Mar 2021 23:52:22 +0100 Jan Dankert Refactoring: Use ES6 classes. Tue, 16 Mar 2021 02:38:13 +0100 Jan Dankert Fix: Using the new FormData object instead of JQuery (JQuery's serialize-functions are not available in the slim version) Mon, 15 Mar 2021 23:29:48 +0100 Jan Dankert Refactoring: Use ES6 classes. Sat, 6 Mar 2021 01:12:37 +0100 Jan Dankert Fix: Show notice, if dialog is open. Sat, 6 Mar 2021 00:41:10 +0100 Jan Dankert New: Notice are collapsible. Tue, 23 Feb 2021 01:00:33 +0100 Jan Dankert New: Undo for closed dialogs with unsaved changes. Sat, 20 Feb 2021 00:49:37 +0100 Jan Dankert Cleanup of templates. Wed, 17 Feb 2021 00:37:45 +0100 Jan Dankert Refactoring: Extract Notices into a separate js class