added styles

geolonia · Jul 7, 2024 · 5b7eaf1 · 5b7eaf1
1 parent 4d7466b
commit 5b7eaf1
Show file tree

Hide file tree

Showing 10 changed files with 32,011 additions and 15 deletions.
diff --git a/css/admin.css b/css/admin.css
@@ -163,3 +163,53 @@
 	background-color: rgba(100, 0, 0, 0.4);
 	color: #ff0000;
 }
+
+#geolonia-style-data-list
+{
+	width: 100%;
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-between;
+}
+
+#geolonia-style-data-list li
+{
+	width: 30%;
+	max-width: 256px;
+	border: 1px solid #0a4b78;;
+	text-align: center;
+	position: relative;
+	margin: 0;
+	padding: 0;
+	margin-bottom: 8px;
+	opacity: 0.6;
+	cursor: pointer;
+}
+
+#geolonia-style-data-list li.hover
+{
+	opacity: 1;
+}
+
+#geolonia-style-data-list li.active
+{
+	opacity: 1;
+}
+
+#geolonia-style-data-list li img
+{
+	max-width: 100%;
+	margin: 0;
+	padding: 0;
+	vertical-align: top;
+}
+
+#geolonia-style-data-list li .style-name
+{
+	position: absolute;
+	bottom: 4px;
+	left: 0;
+	right: 0;
+	text-shadow: 0 0 2px #FFFFFF;
+	color: #000000;
+}
diff --git a/geolonia-open-gis.php b/geolonia-open-gis.php
@@ -25,7 +25,7 @@
 }
 
 if ( ! defined( 'GEOLONIA_GIS_DEFAULT_STYLE' ) ) {
-	define( 'GEOLONIA_GIS_DEFAULT_STYLE', 'geolonia/gsi' );
+	define( 'GEOLONIA_GIS_DEFAULT_STYLE', plugins_url( '/styles/standard.json', __FILE__ ) );
 }
 
 if ( ! defined( 'GEOLONIA_GIS_DEFAULT_ZOOM' ) ) {
@@ -164,25 +164,25 @@ function geolonia_gis_load_textdomain() {
 
 	wp_enqueue_script(
 		'geolonia-gis-draw-style',
-		plugins_url( 'js/draw-style.js', __FILE__ ),
+		plugins_url( '/js/draw-style.js', __FILE__ ),
 		array(),
-		filemtime( plugin_dir_path( __FILE__ ) . 'js/draw-style.js' ),
+		filemtime( plugin_dir_path( __FILE__ ) . '/js/draw-style.js' ),
 		true
 	);
 
 	wp_enqueue_script(
 		'geolonia-gis',
-		plugins_url( 'js/admin.js', __FILE__ ),
+		plugins_url( '/js/admin.js', __FILE__ ),
 		array( 'geolonia-embed-api', 'mapbox-gl-draw', 'geolonia-color-picker', 'geolonia-gis-draw-style' ),
-		filemtime( plugin_dir_path( __FILE__ ) . 'js/admin.js' ),
+		filemtime( plugin_dir_path( __FILE__ ) . '/js/admin.js' ),
 		true
 	);
 
 	wp_enqueue_style(
 		'geolonia-gis-css',
-		plugins_url( 'css/admin.css', __FILE__ ),
+		plugins_url( '/css/admin.css', __FILE__ ),
 		array( 'mapbox-gl-draw-css' ),
-		filemtime( plugin_dir_path( __FILE__ ) . 'css/admin.css' )
+		filemtime( plugin_dir_path( __FILE__ ) . '/css/admin.css' )
 	);
 }, 20 );
 
@@ -258,13 +258,32 @@ function() {
 			wp_nonce_field( 'geolonia-gis-nonce-style', 'geolonia-gis-nonce-style' );
 			?>
 			<div class="select-geolonia-styles">
-				<select onchange="this.nextElementSibling.value=this.value">
-					<option value=""></option>
-					<option value="115x175 mm">115x175 mm</option>
-					<option value="120x160 mm">120x160 mm</option>
-					<option value="120x287 mm">120x287 mm</option>
-				</select>
-				<input type="text" id="geolonia-gis-style" name="geolonia-gis-style" class="geolonia-meta" value="<?php echo esc_attr($style) ?>">
+				<input id="geolonia-gis-style" name="geolonia-gis-style" list="styles" class="geolonia-meta" value="<?php echo esc_attr($style) ?>" autocomplete="off" />
+				<ul id="geolonia-style-data-list">
+				<?php
+					$default_styles = apply_filters( 'geolonia-open-gis-styles', array(
+						array(
+							'name' => __( 'Standard', 'geolonia-open-gis' ),
+							'image' => plugins_url( '/styles/standard.png', __FILE__ ),
+							'url' => plugins_url( '/styles/standard.json', __FILE__ ),
+						),
+						array(
+							'name' => __( 'GSI', 'geolonia-open-gis' ),
+							'image' => plugins_url( '/styles/gsi-vector.png', __FILE__ ),
+							'url' => plugins_url( '/styles/gsi-vector.json', __FILE__ ),
+						),
+						array(
+							'name' => __( 'Blank Map', 'geolonia-open-gis' ),
+							'image' => plugins_url( '/styles/blank-map.png', __FILE__ ),
+							'url' => plugins_url( '/styles/blank-map.json', __FILE__ ),
+						),
+					) );
+
+					foreach ( $default_styles as $style ) {
+						echo '<li data-url="' . esc_url( $style['url'] ) . '"><img src="' . esc_url( $style['image'] ) . '"><div class="style-name">' . esc_html( $style['name'] ) . '</div></li>';
+					}
+				?>
+				</ul>
 			</div>
 			<?php
 		},

diff --git a/inc/functions.php b/inc/functions.php
@@ -7,7 +7,7 @@
 function register_post_type_maps() {
 
 	register_post_type( 'map', array(
-		'label'                 => 'Map',
+		'label'                 => __( 'Map', 'geolonia-open-gis' ),
 		'public'                => true,
 		'hierarchical'          => false,
 		'show_ui'               => true,

diff --git a/js/admin.js b/js/admin.js
@@ -169,6 +169,20 @@ if (document.getElementById('geolonia-gis-editor-container')) {
     document.getElementById('content').value = JSON.stringify(geojson)
   }
 
+  document.querySelectorAll('#geolonia-style-data-list li').forEach((li) => {
+    li.addEventListener('click', (e) => {
+      const styleUrl = e.currentTarget.dataset.url
+      document.getElementById('geolonia-gis-style').value = styleUrl
+      map.setStyle(styleUrl)
+    })
+    li.addEventListener('mouseover', (e) => {
+      document.querySelectorAll('#geolonia-style-data-list li').forEach((li) => {
+        li.classList.remove('hover')
+        e.currentTarget.classList.add('hover')
+      })
+    })
+  })
+
   map.on('load', () => {
 
     map.addControl(draw, 'top-right') // draw の各種コントロールを追加