Major refactoring, add an admin page and prepare for first release

README.md

@@ -1,47 +1,11 @@
 # Stage switcher for WordPress
 
-This plugin adds a menu to the admin bar that helps quickly identify different environments for a site (e.g. production and development) and easily switch to the same URL on other environments. The plugin is multi-site compatible for both sub-domain and sub-directory installations.
+Adds a menu to the admin bar to quickly identify different environments for a site (e.g. production and development) and easily switch to the same URL on other environments. Multi-site compatible for both sub-domain and sub-directory installations.
 
-## Installation
+![The plugin in action](screenshots/screenshot-1.png)
 
-A bit of configuration is requiered for this plugin to function. There is no graphical UI so this has to be done using a PHP constant or a WordPress filter hook.
-
-### Configuration using a PHP constant
-
-Here's an example configuration array:
-
-```php
-define( 'DRGNFF_WP_STAGE_SWITCHER__ENVS', [
-	'https://example.com' => [ // the array key is the home url
-		'title' => 'LIVE', // display name
-		'slug' => 'production', // unique ID
-		'color' => '#FFFFFF', // hex color, optional
-		'background_color' => '#FF0000', // hex color, optional
-	],
-	'http://example.localhost' => [
-		'title' => 'DEVELOPMENT',
-		'slug' => 'development',
-		'color' => '#FFFFFF',
-		'background_color' => '#228B22',
-	],
-]);
-```
-
-_Note:_ For multi-site subdomain installations use the URLs of the main site.
-
-The name of the constant can be changed via the filter hook `drgnff_wp_stage_switcher__const_name`.
-
-### Configuration using a WordPress filter hook
-
-Hook to `drgnff_wp_stage_switcher__envs` and return an array similar to the one mentioned above in the PHP constant section.
-
-### Controlling visibility of the switcher
-
-By hooking to `drgnff_wp_stage_switcher__should_display_switcher` and returning a boolean you can control whether the switcher should be rendered. By default it's rendered for all logged in users.
-
-### Overriding the default environment
-
-By hooking to `drgnff_wp_stage_switcher__default_environment` you can control the title and colors for the default environment. The default environment (labeled as "UNKNOWN") is used when the current environment is not among the ones in the configuration.
+## Installation and configuration
+Refer to the [plugin readme file](readme.txt).
 
 ## Development
 Install development dependencies:
@@ -72,4 +36,8 @@ composer run watch
 
 ## Screenshots
 
-![The plugin in action](screenshots/screenshot.png)
+![The settings page](screenshots/screenshot-2.png)
+The settings page
+
+![The settings page](screenshots/screenshot-3.png)
+Adding the current environment to the list

assets/admin.css

@@ -0,0 +1,81 @@
+.c-env-row {
+	display: grid;
+	gap: 0 1em;
+	grid-template-columns: 10px repeat(2, fit-content(300px)) repeat(3, fit-content(200px))
+}
+
+.c-env-row:only-child {
+	display: none;
+}
+
+.c-env-cell {
+	padding: 0.5em 0;
+	width: 260px;
+}
+
+.c-env-cell--full {
+	grid-column: 1 / -1;
+}
+
+.c-env-cell:nth-child(1) {
+	width: auto;
+}
+
+.c-env-cell:nth-child(4),
+.c-env-cell:nth-child(5) {
+	width: 104px;
+}
+
+.c-env-cell--label {
+	white-space: nowrap;
+}
+
+.c-env-cell input {
+	display: block;
+	width: 100%;
+}
+
+.c-env-cell label {
+	font-weight: bold;
+}
+
+.c-env-row--disabled .wp-picker-container {
+	pointer-events: none;
+}
+
+/** Color picker overrides */
+.wp-picker-container {
+	position: relative;
+	display: flex;
+}
+
+.wp-picker-container .wp-color-result.button {
+	margin-right: 0;
+	margin-bottom: 0;
+}
+
+.wp-picker-open + .wp-picker-input-wrap {
+	position: absolute;
+	top: 36px;
+	z-index: 2;
+
+	display: flex;
+	padding: 6px;
+
+	background: white;
+	border: 1px solid #dcdcde;
+	border-bottom: none;
+}
+
+.wp-picker-holder {
+	position: absolute;
+	z-index: 1;
+	top: 72px;
+}
+
+/** Sortable */
+.c-sortable-handle {
+	display: inline-block;
+	cursor: grab;
+	padding: 0.5em 0;
+}

assets/admin.js

@@ -0,0 +1,70 @@
+; (function ($, document, window) {
+	'use strict';
+
+	const $document = $(document);
+
+	$document.ready(function ($) {
+		// repeater
+		const $table = $('.js-drgnff-env-table');
+		const template = wp.template('drgnff-row');
+
+		$('.js-drgnff-add-button').on('click', function (e) {
+			e.preventDefault();
+
+			const html = template({ index: $table.find('.js-drgnff-row').length });
+			$table.append(html);
+			$table.last().find('.js-drgnff-color-field').wpColorPicker();
+		});
+
+		$table.on('click', '.js-drgnff-row-remove', function (e) {
+			e.preventDefault();
+
+			$(this).parents('.js-drgnff-row').remove();
+
+			updateIndexes($table);
+		});
+
+		// reset default environment
+		$('.js-drgnff-default-reset').on('click', function (e) {
+			e.preventDefault();
+
+			$(this).parents('.js-drgnff-row').find('.js-drgnff-input:not(:disabled)').each(function () {
+				const $input = $(this);
+				const originalValue = $input.data('original-value');
+
+				$input.val(originalValue);
+
+				if ($input.hasClass('js-drgnff-color-field')) {
+					$input.iris('color', originalValue);
+				}
+			});
+		});
+
+		// color picker init
+		$('.js-drgnff-color-field').wpColorPicker();
+
+		// initialize jquery ui sortable
+		$('.js-drgnff-sortable').sortable({
+			items: '.js-drgnff-row',
+			handle: '.js-drgnff-sortable-handle',
+			cursor: 'move',
+			axis: 'y',
+			update: function () {
+				updateIndexes($table);
+			}
+		});
+	});
+
+	function updateIndexes($table) {
+		$table.find('.js-drgnff-row').each(function (index) {
+			$(this).find('.js-drgnff-input').each(function () {
+				const $input = $(this);
+				const name = $input.attr('name');
+
+				$input.attr('name', name.replace(/\[\d+\]/, `[${index}]`));
+			});
+		});
+	}
+
+})(jQuery, document, window);
+