Implement updated design notification banners (#7)

.eslintrc.json

@@ -0,0 +1,22 @@
+{
+  "extends": [
+    "wikimedia/mediawiki",
+    "wikimedia/client/common",
+    "wikimedia/language/es2020"
+  ],
+  "globals": {
+    "require": "readonly",
+    "module": "readonly",
+    "OO": "readonly"
+  },
+  "rules": {
+    "space-before-function-paren": "off",
+    "no-jquery/no-global-selector": "off",
+    "vars-on-top": "off",
+    "one-var": "off",
+    "no-use-before-define": "off",
+    "mediawiki/class-doc": "off",
+    "mediawiki/no-nodelist-unsupported-methods": "off",
+    "jsdoc/require-param-type": "off"
+  }
+}

.gitignore

@@ -3,3 +3,4 @@
 /node_modules/
 composer.lock
 package-lock.json
+.idea/

composer.json

@@ -29,5 +29,10 @@
 			"minus-x fix .",
 			"phpcbf"
 		]
+	},
+	"config": {
+		"allow-plugins": {
+			"dealerdirect/phpcodesniffer-composer-installer": true
+		}
 	}
 }

extension.json

@@ -1,6 +1,6 @@
 {
 	"name": "NetworkNotice",
-	"version": "3.2.1",
+	"version": "3.3.0",
 	"author": [
 		"Tephus",
 		"[https://fo-nttax.de Alex Winkler]"
@@ -26,10 +26,14 @@
 	"HookHandlers": {
 		"Main": {
 			"class": "\\Liquipedia\\Extension\\NetworkNotice\\Hooks\\MainHookHandler"
+		},
+		"Schema": {
+			"class": "\\Liquipedia\\Extension\\NetworkNotice\\Hooks\\SchemaHookHandler"
 		}
 	},
 	"Hooks": {
 		"BeforePageDisplay": "Main",
+		"LoadExtensionSchemaUpdates": "Schema",
 		"LPExtensionMenu": [
 			"Liquipedia\\Extension\\NetworkNotice\\Hooks\\LegacyHooks::onLPExtensionMenu"
 		],
@@ -48,6 +52,9 @@
 			"styles": [
 				"styles/ext.networknotice.Notice.less"
 			],
+			"scripts": [
+				"scripts/ext.networknotice.Notice.js"
+			],
 			"position": "bottom"
 		}
 	},

i18n/en.json

@@ -17,6 +17,7 @@
 	"networknotice-delete-network-notice-heading": "Delete network notice",
 	"networknotice-preview-heading": "Preview",
 	"networknotice-delete-network-notice-deletion-heading": "Confirm deletion",
+	"networknotice-close-button": "Close notification",
 
 	"networknotice-create-notice-desc": "Creates network notices (site notices) that can be displayed network wide, with more features than standard site notices.",
 	"networknotice-create-notice-label-label": "Label:",
@@ -56,9 +57,9 @@
 	"networknotice-button-delete-label": "delete",
 	"networknotice-text-false-label": "false",
 	"networknotice-text-true-label": "true",
-	
+
 	"networknotice-success-updated": "Network notice successfully updated!",
 	"networknotice-success-created": "Network notice successfully created!",
 
 	"lpextmenu-networknotice": "Network Notice"
-}
+}

package.json

@@ -7,6 +7,7 @@
 	"license": "MIT",
 	"private": true,
 	"devDependencies": {
+		"eslint-config-wikimedia": "*",
 		"stylelint-config-wikimedia": "*"
 	},
 	"scripts": {

resources/scripts/ext.networknotice.Notice.js

@@ -0,0 +1,59 @@
+( function ( window, document ) {
+	'use strict';
+
+	const LOCAL_STORAGE_KEY = 'networknotice';
+
+	function init() {
+		if ( 'localStorage' in window ) {
+			document.querySelectorAll( '[data-component="network-notice"]' ).forEach( function( notice ) {
+				const key = notice.dataset.id;
+				if ( isInStorage( key ) ) {
+					notice.classList.add( 'd-none' );
+				} else {
+					const closeButton = notice.querySelector(
+						'[data-component="network-notice-close-button"]'
+					);
+					closeButton.onclick = function() {
+						notice.classList.add( 'd-none' );
+						putIntoStorage( key );
+					};
+				}
+			} );
+		}
+	}
+
+	function getItemsFromStorage() {
+		const items = localStorage.getItem( LOCAL_STORAGE_KEY );
+		try {
+			return items ? JSON.parse( items ) : [];
+		} catch ( e ) {
+			return [ ];
+		}
+	}
+
+	function putIntoStorage( key ) {
+		const items = getItemsFromStorage();
+		if ( !items.includes( key ) ) {
+			items.push( key );
+			localStorage.setItem( LOCAL_STORAGE_KEY, JSON.stringify( items ) );
+		}
+	}
+
+	function isInStorage( key ) {
+		const items = getItemsFromStorage();
+		return items.includes( key );
+	}
+
+	/**
+	 * Check on document readyState
+	 */
+	if ( document.readyState === 'complete' ) {
+		init();
+	} else {
+		document.addEventListener( 'readystatechange', () => {
+			if ( document.readyState === 'complete' ) {
+				init();
+			}
+		} );
+	}
+}( window, document ) );