Merge pull request #254 from NEU-Libraries/timeline-v2-1

Timeline v2 1
NEU-Libraries · Jan 5, 2023 · e0693e0 · e0693e0
2 parents 3ef2511 + 8975b1c
commit e0693e0
Show file tree

Hide file tree

Showing 32 changed files with 1,874 additions and 125 deletions.
diff --git a/assets/css/blocks.editor.css b/assets/css/blocks.editor.css
@@ -0,0 +1,74 @@
+.leaflet-container {
+  height: 100%;
+  position: relative; }
+
+.map-block-leaflet-header {
+  width: 100%;
+  max-width: 32rem;
+  margin: 0 0 .5rem;
+  position: absolute;
+  pointer-events: none;
+  z-index: 9999;
+  opacity: 0;
+  transition: opacity .25; }
+
+.is-map-block-leaflet-selected {
+  pointer-events: all;
+  position: relative;
+  opacity: 1; }
+
+.map_block_leaflet a {
+  text-decoration: none; }
+
+.resizable-handle {
+  pointer-events: none;
+  position: absolute;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  bottom: -8px;
+  left: calc(50% - 8px);
+  width: 16px;
+  height: 16px;
+  border: 2px solid #fff;
+  border-radius: 50%;
+  background: #00a0d2;
+  box-sizing: border-box;
+  z-index: 999; }
+
+.theme-picker-wrapper {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-gap: 8px; }
+
+.theme-picker-button {
+  padding: 4px;
+  overflow: hidden;
+  color: inherit;
+  cursor: pointer;
+  background: none;
+  border: none;
+  border-radius: 4px; }
+  .theme-picker-button:hover {
+    color: #191e23;
+    background: #f8f9f9; }
+  .theme-picker-button[aria-pressed="true"] {
+    color: #191e23;
+    outline: 2px solid transparent;
+    outline-offset: -2px;
+    box-shadow: 0 0 0 2px #555d66; }
+  .theme-picker-button:focus {
+    color: #191e23;
+    outline: 2px solid transparent;
+    outline-offset: -2px;
+    box-shadow: 0 0 0 2px #00a0d2; }
+  .theme-picker-button img {
+    display: block;
+    border: 1px solid rgba(79, 89, 105, 0.2);
+    border-radius: 4px;
+    outline: 1px solid transparent; }
+
+.theme-picker-name-button {
+  padding: 2px;
+  text-align: center; }
diff --git a/assets/img/black-and-white.png b/assets/img/black-and-white.png
diff --git a/assets/img/dark-matter.png b/assets/img/dark-matter.png
diff --git a/assets/img/grayscale.png b/assets/img/grayscale.png
diff --git a/assets/img/map.png b/assets/img/map.png
diff --git a/assets/img/mapnik.png b/assets/img/mapnik.png
diff --git a/assets/img/stadia.png b/assets/img/stadia.png
diff --git a/assets/img/voyager.png b/assets/img/voyager.png
diff --git a/assets/img/watercolor.png b/assets/img/watercolor.png
diff --git a/assets/img/worldimagery.png b/assets/img/worldimagery.png
diff --git a/assets/js/editor.blocks.js b/assets/js/editor.blocks.js
diff --git a/drs-tk.php b/drs-tk.php
@@ -37,50 +37,39 @@ function drs_tk_timeline_init()
 
 function drs_tk_timeline_v2_init()
 {
-    register_block_type_from_metadata(
-        __DIR__ . '/build/timeline_v2/block.json',
-        ['render_callback' => 'render_timeline_call']
-    );
+    register_block_type(__DIR__ . '/build/timeline_v2/block.json');
+    // register_block_type_from_metadata(
+    //     __DIR__ . '/build/timeline_v2/block.json',
+    //     ['render_callback' => 'render_timeline_call']
+    // );
 }
 add_action('init', 'drs_tk_timeline_v2_init');
 
-function render_timeline_call($attributes)
-{
-    $wrapper_attributes = get_block_wrapper_attributes();
-    return sprintf(
-        '
-        <div %1$s style="height: 600px; width: 100%;"></div><script>
-    timeline = new TL.Timeline("wp-block-drs-tk-timelinev2",
-            "https://docs.google.com/spreadsheets/d/1cWqQBZCkX9GpzFtxCWHoqFXCHg-ylTVUWlnrdYMzKUI/pubhtml");
-    </script>',
-        $wrapper_attributes
-    );
-}
 wp_register_style(
     'slick',
     plugins_url('slick/css/slick.css', __FILE__),
     [],
-    filemtime(plugin_dir_path(__FILE__) . 'slick/css/slick.css')
+    filemtime(plugin_dir_path(__FILE__) . 'lib/slick/css/slick.css')
 );
 wp_enqueue_style('slick');
 
 wp_register_script(
     'slick',
     plugins_url('slick/js/slick.min.js', __FILE__),
     ['jquery'],
-    filemtime(plugin_dir_path(__FILE__) . 'slick/js/slick.min.js'),
+    filemtime(plugin_dir_path(__FILE__) . 'lib/slick/js/slick.min.js'),
     true
 );
 wp_enqueue_script('slick');
 
 wp_register_script(
-    'drs-tk-gallery-carousel-blocks-frontend',
-    plugins_url('slick/js/frontend.js', __FILE__),
+    'drs-tk-blocks-frontend',
+    plugins_url('lib/frontend.js', __FILE__),
     ['jquery'],
-    filemtime(plugin_dir_path(__FILE__) . 'slick/js/frontend.js'),
+    filemtime(plugin_dir_path(__FILE__) . 'lib/frontend.js'),
     true
 );
-wp_enqueue_script('drs-tk-gallery-carousel-blocks-frontend');
+wp_enqueue_script('drs-tk-blocks-frontend');
 
 add_action(
     'rest_api_init',
@@ -173,3 +162,144 @@ function ceres_drstk_plugin_settings_link($links): array
     'ceres_drstk_plugin_settings_link',
     10
 );
+
+// // Enqueue lib assets
+// $lib_script_path = '/lib/leaflet/jsleaflet.js';
+// $lib_style_path = '/lib/leaflet/css/leaflet.css';
+// $lib_version = '1.7.1';
+
+// wp_register_style(
+//     'lib-css-map-block-leaflet',
+//     plugins_url($lib_style_path, __FILE__),
+//     [],
+//     $lib_version
+// );
+// wp_register_script(
+//     'lib-js-map-block-leaflet',
+//     plugins_url($lib_script_path, __FILE__),
+//     [],
+//     $lib_version,
+//     false
+// );
+// wp_register_style(
+//     'lib-css-map-block-leaflet-cluster',
+//     plugins_url('/lib/leaflet/css/MarkerCluster.css', __FILE__),
+//     ['lib-css-map-block-leaflet'],
+//     $lib_version
+// );
+// wp_register_script(
+//     'lib-js-map-block-leaflet-cluster',
+//     plugins_url('/lib/leaflet/js/leaflet.markercluster.js', __FILE__),
+//     ['lib-js-map-block-leaflet'],
+//     $lib_version,
+//     false
+// );
+
+// // Enqueue the bundled block JS file
+// wp_register_script(
+//     'js-editor-map-block-leaflet',
+//     plugins_url('build/index.js', __FILE__),
+//     $asset_file['dependencies'],
+//     $asset_file['version']
+// );
+
+// // register editor styles
+// wp_register_style(
+//     'css-editor-map-block-leaflet',
+//     plugins_url('build/index.css', __FILE__),
+//     [],
+//     $asset_file['version']
+// );
+
+// register_block_type('drs-tk-leaflet/map-block-leaflet-multimarker', [
+//     'editor_script' => 'js-editor-map-block-leaflet',
+//     'editor_style' => 'css-editor-map-block-leaflet',
+//     'render_callback' => 'map_block_leaflet_multi_marker_render',
+//     'script' => 'lib-js-map-block-leaflet-cluster',
+//     'style' => 'lib-css-map-block-leaflet-cluster',
+//     'attributes' => [
+//         'markers' => [
+//             'type' => 'array',
+//             'default' => [],
+//         ],
+//         'themeUrl' => [
+//             'type' => 'string',
+//             'default' =>
+//                 'https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png',
+//         ],
+//         'themeAttribution' => [
+//             'type' => 'string',
+//             'default' =>
+//                 '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="https://carto.com/attributions">CARTO</a>',
+//         ],
+//         'height' => [
+//             'type' => 'number',
+//             'default' => 220,
+//         ],
+//         'themeId' => [
+//             'type' => 'number',
+//             'default' => 1,
+//         ],
+//     ],
+// ]);
+
+// function map_block_leaflet_multi_marker_render($settings)
+// {
+//     $classes = 'map_block_leaflet';
+//     if (array_key_exists('align', $settings)) {
+//         switch ($settings['align']) {
+//             case 'wide':
+//                 $classes .= ' alignwide';
+//                 break;
+//             case 'full':
+//                 $classes .= ' alignfull';
+//                 break;
+//         }
+//     }
+
+//     $id = uniqid('lmb_');
+
+//     return '
+// 	<div id=\'' .
+//         $id .
+//         '\' class="' .
+//         $classes .
+//         '" style="height: ' .
+//         $settings['height'] .
+//         'px"></div>
+// 	<script>
+// 		document.addEventListener("DOMContentLoaded", function() {
+// 			var markets = ' .
+//         json_encode($settings['markers']) .
+//         ';
+// 			var center = [51.505, -0.09];
+// 			var layer = L.tileLayer(\'' .
+//         $settings['themeUrl'] .
+//         '\', {
+// 				attribution: \'' .
+//         $settings['themeAttribution'] .
+//         '\'
+// 			})
+// 			var map = L.map(' .
+//         $id .
+//         ', { center: center, layers: [layer]});
+// 			map.scrollWheelZoom.disable();
+// 			if(markets.length > 0) {
+// 				var markers = L.markerClusterGroup();
+// 				markets.forEach( function(market) {
+// 					L.marker([market.latlng.lat, market.latlng.lng]).bindPopup(market.content).addTo(markers)
+// 				})
+// 				map.addLayer(markers);
+// 				map.fitBounds(markers.getBounds(), {padding: [50, 50]})
+// 			}
+//       var container = document.getElementById(\'' .
+//         $id .
+//         '\');
+//       var observer = ResizeObserver && new ResizeObserver(function() {
+//         map.invalidateSize(true);
+//       });
+//       observer && observer.observe(container);
+// 		});
+// 	</script>
+// 	';
+// }
diff --git a/lib/frontend.js b/lib/frontend.js
@@ -0,0 +1,109 @@
+jQuery(document).ready(function ($) {
+	$(".wp-block-drs-tk-gallery-carousel").each(function () {
+		var $gallery = $(this);
+		var slideCount = null;
+
+		console.log($gallery);
+
+		$gallery.on("init", function (event, slick) {
+			slideCount = slick.slideCount;
+			setSlideCount();
+			setCurrentSlideNumber(slick.currentSlide);
+		});
+
+		$gallery.slick({
+			fade: $gallery.data("effect") == "fade",
+			autoplay: $gallery.data("autoplay"),
+			dots: $gallery.data("dots"),
+			arrows: $gallery.data("arrows"),
+			speed: $gallery.data("speed"),
+			adaptiveHeight: $gallery.data("adaptiveheight"),
+			pauseOnHover: $gallery.data("pauseOnHover"),
+			pauseOnFocus: false,
+			cssEase: "linear",
+			lazyLoad: "anticipated",
+		});
+
+		$gallery.on(
+			"beforeChange",
+			function (event, slick, currentSlide, nextSlide) {
+				setCurrentSlideNumber(nextSlide);
+			}
+		);
+
+		function setSlideCount() {
+			var $el = $(".counter").find(".total");
+			$el.text(slideCount);
+		}
+
+		function setCurrentSlideNumber(currentSlide) {
+			var $el = $(".counter").find(".current");
+			$el.text(currentSlide + 1);
+		}
+	});
+});
+
+function convertToTimelineJSON(files) {
+	const timelineJSON = files.map((file) => {
+		console.log(file);
+		return {
+			media: {
+				url: file.fileUrl,
+				caption: "",
+				credit: file.creator,
+			},
+			start_date: {
+				year: file.date,
+			},
+			text: {
+				headline: "",
+				text: file.description,
+			},
+		};
+	});
+
+	return {
+		events: timelineJSON,
+	};
+}
+
+function createTimeline(files = [], options = {}) {
+	new TL.Timeline("timeline-embed", convertToTimelineJSON(files), options);
+}
+
+// jquery code that checks for wp-block-drs-tk-timelinev2 class and create a timeline using the data from children with data-timeline-item data attributes
+// wait untill the page is loaded
+jQuery(document).ready(function ($) {
+	$(".wp-block-drs-tk-timelinev2").each(function () {
+		var $timeline = $(this);
+		var files = [];
+
+		// get all divs with data-timeline-item class
+		$timeline.find(".data-timeline-item").each(function () {
+			var $item = $(this);
+			// get data from data attributes
+			var file = {
+				fileUrl: $item.data("fileurl"),
+				creator: $item.data("creator"),
+				date: $item.data("date"),
+				description: $item.data("description"),
+			};
+			// push data to files array
+			files.push(file);
+		});
+
+		//options
+		var options = {
+			width: "100%",
+			height: "100%",
+			// source: convertToTimelineJSON(files),
+		};
+		// check if timeline-embed div exists
+		const timelineEmbed = $timeline.find("#timeline-embed");
+		console.log(timelineEmbed);
+		const timelineFiles = convertToTimelineJSON(files);
+		console.log(timelineFiles);
+		// createTimeline
+		new TL.Timeline(timelineEmbed[0], timelineFiles, options);
+	});
+});