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, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
   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 }



Download modules/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