openrat-cms

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | README

notice.js (5799B)


      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 }