jekyll-theme-isotc154 0.0.1

data/assets/img/logo-ribose.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 501"><title>ribose logo normal</title><path d="M180.9,31.3h36.2l18.1,31.3h36.2l18.1,31.3-18.1,31.4,18.1,31.3-18.1,31.3,18.1,31.3-18.1,31.3H235.2l-18.1,31.3,18.1,31.3h36.2l18.1,31.4-18.1,31.3,18.1,31.3-18.1,31.3,18.1,31.3L272.1,501H235.9l-18.8-31.3,18.1-31.3-18.1-31.3,18.1-31.3-18.1-31.3H180.9l-18.1-31.4H126.7l-18.1-31.3H72.4L54.3,313.1l18.1,31.4L54.3,375.8l18.1,31.3L54.3,438.4l18.1,31.3L55,501H18.8L0,469.7l18.1-31.3L0,407.1l18.1-31.3L0,344.5l18.1-31.4L0,281.8l18.1-31.3L0,219.2l18.1-31.3L0,156.6l18.1-31.3L0,93.9,18.1,62.6H54.3L72.4,31.3h36.2L126.7,0h36.1ZM126.7,250.5h36.1l18.1-31.3h36.2l18.1-31.3-18.1-31.3,18.1-31.3L217.1,93.9H180.9L162.8,62.6H126.7L108.6,93.9H72.4L54.3,125.3l18.1,31.3L54.3,187.9l18.1,31.3h36.2Z"/><path d="M470.2,93.9l-18.1,31.4H416L397.9,93.9,416,62.6h36.1Zm0,125.3-18.1,31.3,18.1,31.3-18.1,31.3,18.1,31.4-18.1,31.3,18.1,31.3-18.1,31.3,18.1,31.3L452.8,501H416.7l-18.8-31.3L416,438.4l-18.1-31.3L416,375.8l-18.1-31.3L416,313.1l-18.1-31.3L416,250.5l-18.1-31.3L416,187.9h36.1Z"/><path d="M659.9,31.3,641.8,62.6l18.1,31.3-18.1,31.4,18.1,31.3-18.1,31.3,18.1,31.3h36.2l18.1-31.3h36.2l18.1,31.3h36.2l18.1,31.3h36.1L877,281.8l-18.1,31.3L877,344.5l-18.1,31.3L877,407.1l-18.1,31.3H822.8l-18.1,31.3H768.5L751.1,501H714.9l-18.8-31.3H659.9L642.5,501H606.3l-18.7-31.3,18.1-31.3-18.1-31.3,18.1-31.3-18.1-31.3,18.1-31.4-18.1-31.3,18.1-31.3-18.1-31.3,18.1-31.3-18.1-31.3,18.1-31.3L587.6,93.9l18.1-31.3L587.6,31.3,605.7,0h36.1ZM822.8,375.8l-18.1-31.3,18.1-31.4-18.1-31.3H768.5l-18.1-31.3H714.2l-18.1,31.3H659.9l-18.1,31.3,18.1,31.4-18.1,31.3,18.1,31.3h36.2l18.1,31.3h36.2l18.1-31.3h36.2Z"/><path d="M1034.6,219.2h36.2l18.1-31.3H1125l18.1,31.3h36.2l18.1,31.3h36.2l18.1,31.3-18.1,31.3,18.1,31.4-18.1,31.3,18.1,31.3-18.1,31.3h-36.2l-18.1,31.3h-36.2L1125.7,501h-36.1l-18.8-31.3h-36.2l-18.1-31.3H980.3l-18.1-31.3,18.1-31.3-18.1-31.3,18.1-31.4-18.1-31.3,18.1-31.3h36.2Zm0,125.3-18.1,31.3,18.1,31.3h36.2l18.1,31.3H1125l18.1-31.3h36.2l18.1-31.3-18.1-31.3,18.1-31.4-18.1-31.3h-36.2L1125,250.5h-36.1l-18.1,31.3h-36.2l-18.1,31.3Z"/><path d="M1408,219.2h36.2l18.1-31.3h36.2l18.1,31.3h36.2l18.1,31.3h36.2l18,31.3-18,31.3h-36.2l-18.1-31.3h-36.2l-18.1-31.3h-36.2l-18.1,31.3,18.1,31.3h36.2l18.1,31.4h36.2l18.1,31.3h36.2l18,31.3-18,31.3h-36.2l-18.1,31.3h-36.2L1499.2,501H1463l-18.8-31.3H1408l-18.1-31.3h-36.2l-18-31.3,18-31.3h36.2l18.1,31.3h36.2l18.1,31.3h36.2l18.1-31.3-18.1-31.3h-36.2l-18.1-31.3H1408l-18.1-31.4h-36.2l-18-31.3,18-31.3h36.2Z"/><path d="M1782.9,219.2h36.2l18.1-31.3h36.2l18,31.3h36.2l18.1,31.3h36.2l18.1,31.3-18.1,31.3h-36.2l-18.1,31.4h-36.2l-18,31.3h-36.2l-18.1-31.3,18.1-31.4h36.2l18-31.3-18-31.3h-36.2l-18.1,31.3h-36.2l-18.1,31.3,18.1,31.4-18.1,31.3,18.1,31.3h36.2l18.1,31.3h36.2l18-31.3h36.2l18.1-31.3h36.2l18.1,31.3-18.1,31.3h-36.2l-18.1,31.3h-36.2L1874.1,501h-36.2l-18.8-31.3h-36.2l-18.1-31.3h-36.2l-18.1-31.3,18.1-31.3-18.1-31.3,18.1-31.4-18.1-31.3,18.1-31.3h36.2Z"/></svg>

data/assets/js/event_map.js

@@ -0,0 +1,333 @@
+(function () {
+
+  /* Initializes maps based on targets
+     represented by DOM elements with data-map-container attribute present.
+
+     Map targets are expected to specify following additional attributes:
+
+     - data-map-id with unique string identifier for the map on current page.
+
+     - data-map-center with JSON in following format {
+         lon: <number>
+         lat: <number>
+         zoom: <number>
+       }
+
+     - optional data-map-disable-interactions, if set the map will be static.
+
+     Exposes OL map objects under window.maps[<map ID>], with each value as {
+       map: <OL map instance>
+     }.
+
+     Adds map markers based on DOM elements with data-map-marker attribute present.
+
+     Marker elements are expected to specify following additional attributes:
+
+     - data-map-id with unique string identifier for the map on current page.
+
+     - data-map-marker-id with unique string identifier for given map marker.
+
+     - data-map-marker-place-details JSON in following format: {
+         title: <place name as string>
+       }
+    
+     - data-map-marker-coords, with JSON in following format: {
+         lon: <number>
+         lat: <number>
+       }
+
+     Ties map markers with the elements on the page.
+
+  */
+
+  const PRIMARY_COLOR = '#0061AD';
+  // NOTE: Keep up-to-date with the corresponding SCSS variable.
+
+  const BODY_FONT = '16px Helvetica, Arial, sans-serif';
+  // NOTE: Keep up-to-date with prevailing page style.
+
+  const SUMMONED_MAP_HTML_CLASS = 'map-focused';
+
+  const SELECTED_MAP_MARKER_REFERENCE_HTML_CLASS = 'map-marker-selected';
+
+  window.maps = {};
+
+  const maps = document.querySelectorAll('[data-map-container][data-map-id][data-map-center]');
+  const markers = document.querySelectorAll('[data-map-marker][data-map-id][data-map-marker-id][data-map-marker-coords][data-map-marker-place-details]');
+
+  for (const mapTarget of maps) {
+    const mapID = mapTarget.dataset.mapId;
+    if (!mapID) {
+      throw new Error("Invalid map target: DOM dataset does not specify map ID");
+    }
+    window.maps[mapID] = initMap(mapID, mapTarget, markers);
+  }
+
+  function createMarkerReference(markerEl, markerIndex, onClick) {
+    /* Append an element to place mention in body text,
+       tying it to corresponding map marker. */
+
+    const markerNumber = document.createElement('span');
+    markerNumber.textContent = `${markerIndex}`;
+    markerNumber.classList.add('map-marker-reference');
+    markerNumber.addEventListener('click', onClick);
+
+    markerEl.appendChild(markerNumber);
+  }
+
+  function initMap(mapID, target, allMarkers) {
+    /* mapID: unique map ID as a string.
+       target: DOM element to contain the map.
+       allMarkers: DOM elements representing map markers. */
+
+
+    // Prepare basic map data
+
+    if (!target) {
+      throw new Error("Invalid map target: DOM element is missing");
+    }
+
+    const centerDataRaw = target.dataset.mapCenter;
+
+    if (!centerDataRaw) {
+      throw new Error("Invalid map target: DOM dataset is missing map center");
+    }
+
+    let centerData;
+    try {
+      centerData = JSON.parse(centerDataRaw);
+    } catch (e) {
+      console.error("Failed to parse map center data");
+      throw e;
+    }
+
+    const disableInteractions =
+      target.dataset.mapDisableInteractions !== undefined;
+
+
+    // Read and initialize markers
+
+    var markers = {};
+
+    for (const [_idx, markerEl] of allMarkers.entries()) {
+      if (markerEl.dataset.mapId !== mapID) {
+        // Skip this marker if it belongs to another map.
+        continue;
+      }
+
+      const markerID = markerEl.dataset.mapMarkerId;
+      const idx = _idx + 1;
+
+      // Parse coordinates and place details from marker DOM dataset
+      let coords, details;
+      try {
+        coords = JSON.parse(markerEl.dataset.mapMarkerCoords);
+        details = JSON.parse(markerEl.dataset.mapMarkerPlaceDetails);
+      } catch (e) {
+        console.error("Failed to parse map marker coords or details");
+        throw e;
+      }
+
+      if (!details.title) {
+        console.error("Malformed marker place details", markerID, details);
+        continue;
+      }
+
+      // Convert OpenLayers coordinates
+      const olCoords = ol.proj.fromLonLat([coords.lon, coords.lat]);
+
+      createMarkerReference(
+        markerEl,
+        idx,
+        function () { selectMarker(markerID, 'page') });
+
+      // (see below for overlay usage)
+      const overlayEl = document.createElement('div');
+      overlayEl.dataset.mapMarkerBubble = true;
+      overlayEl.dataset.tippyContent = details.title;
+
+      const markerFeature = new ol.Feature({
+        markerID: markerID,
+        geometry: new ol.geom.Point(olCoords),
+      });
+      const fill = new ol.style.Fill({
+        color: 'rgba(255, 255, 255, 0.4)',
+      });
+      const stroke = new ol.style.Stroke({
+        color: PRIMARY_COLOR,
+        width: 1.25,
+      });
+      markerFeature.setStyle([new ol.style.Style({
+        image: new ol.style.Circle({
+          fill: fill,
+          stroke: stroke,
+          radius: 5,
+        }),
+      }), new ol.style.Style({
+        text: new ol.style.Text({
+          font: BODY_FONT,
+          placement: 'point',
+          textAlign: 'left',
+          offsetX: 10,
+          text: `${idx}`,
+          padding: [2, 3, 2, 3],
+          backgroundFill: new ol.style.Fill({ color: PRIMARY_COLOR }),
+          fill: new ol.style.Fill({
+            color: '#fff',
+          }),
+          stroke: new ol.style.Stroke({
+            color: '#000',
+            width: 2,
+          }),
+        }),
+      })]);
+
+      markers[markerID] = {
+        coords: olCoords,
+        el: markerEl,
+        idx: idx,
+
+        // Feature is used to visualize place marker
+        // on the map as a point.
+        feature: markerFeature,
+
+        // Overlay is used as an anchor for tooltip
+        // showing extra place information.
+        overlay: new ol.Overlay({
+          id: `marker-${markerID}`,
+          element: overlayEl,
+          position: olCoords,
+        }),
+      };
+    }
+
+
+    // Initialize the map
+
+    const markerFeatures = Object.values(markers).map(function (marker) {
+      return marker.feature;
+    });
+
+    const map = new ol.Map({
+      target: target,
+      controls: disableInteractions ? [] : null,
+      interactions: disableInteractions ? [] : null,
+      layers: [
+        new ol.layer.Tile({
+          source: new ol.source.OSM(),
+        }),
+        new ol.layer.Vector({
+          source: new ol.source.Vector({
+            features: markerFeatures,
+          }),
+        }),
+      ],
+      view: new ol.View({
+        center: ol.proj.fromLonLat([centerData.lon, centerData.lat]),
+        zoom: centerData.zoom,
+      }),
+    });
+
+
+    // Initialize marker highlighting & map (de)focusing
+
+    for (const marker of Object.values(markers)) {
+      map.addOverlay(marker.overlay);
+    }
+
+    const tippys = tippy('[data-map-marker-bubble]', {
+      trigger: 'manual',
+      hideOnClick: false,
+    });
+
+    function hideAllTippys() {
+      tippys.map(function (instance) { instance.hide(); });
+    }
+
+    map.on('singleclick', function (event) {
+      map.forEachFeatureAtPixel(
+        event.pixel,
+        function (feature) {
+          const markerID = feature.getProperties()['markerID'];
+          if (markerID) {
+            selectMarker(markerID, 'map');
+            return true;
+          }
+        })
+    });
+
+    map.on('movestart', hideAllTippys);
+
+    function deselectMarkers() {
+      Object.values(markers).map(function (marker) {
+        marker.el.classList.remove(SELECTED_MAP_MARKER_REFERENCE_HTML_CLASS);
+      });
+    }
+
+    function selectMarker(markerID, eventSource) {
+      /* eventSource: How the marker got selected; 'map' or 'page' */
+
+      const marker = markers[markerID];
+
+      if (!marker) {
+        throw new Error(`Attempt to select unknown marker ${markerID}`);
+      }
+
+      deselectMarkers();
+
+      if (!mapIsSummoned()) {
+        summonMap();
+      }
+
+      let selectedMarkerTippy;
+      try {
+        selectedMarkerTippy = marker.overlay.getElement()._tippy;
+      } catch (e) {
+        throw new Error(`Unable to obtain tippy instance for ${markerID}`);
+      }
+
+      map.once('moveend', function () {
+        hideAllTippys();
+        selectedMarkerTippy.show();
+      })
+
+      map.getView().setCenter(marker.coords);
+
+      if (eventSource === 'map') {
+        marker.el.scrollIntoView();
+      }
+
+      marker.el.classList.add(SELECTED_MAP_MARKER_REFERENCE_HTML_CLASS);
+    }
+
+    function summonMap() {
+      target.classList.add(SUMMONED_MAP_HTML_CLASS);
+      document.body.classList.add(SUMMONED_MAP_HTML_CLASS);
+
+      function handlePotentiallyMapDismissingDocumentClick(event) {
+        const clickedInsideMapMarkerReference = event.target.closest('[data-map-marker]');
+        if (!target.contains(event.target) && !clickedInsideMapMarkerReference && mapIsSummoned()) {
+          dismissMap();
+          deselectMarkers();
+          document.removeEventListener('click', handlePotentiallyMapDismissingDocumentClick);
+        }
+      }
+      document.addEventListener('click', handlePotentiallyMapDismissingDocumentClick);
+    }
+
+    function dismissMap() {
+      hideAllTippys();
+      target.classList.remove(SUMMONED_MAP_HTML_CLASS);
+      document.body.classList.remove(SUMMONED_MAP_HTML_CLASS);
+    }
+
+    function mapIsSummoned() {
+      return target.classList.contains(SUMMONED_MAP_HTML_CLASS);
+    }
+
+    return {
+      map: map,
+    };
+  }
+
+}());

data/assets/js/ga.js

@@ -0,0 +1,15 @@
+(function () {
+
+  var gaid = document.documentElement.getAttribute('data-gaid');
+
+  if (gaid) {
+    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+
+    ga('create', gaid, 'auto');
+    ga('send', 'pageview');
+  }
+
+}());

data/assets/js/nav.js

@@ -0,0 +1,125 @@
+(function () {
+
+  // Requires accompanying CSS rules, based on classes on main container
+  // (body) that style header, menu and trigger button.
+  // Container classes used: .with-expandable-nav, .with-expanded-nav
+
+  class NavTrigger {
+    constructor({ triggerTemplateSelector, onTriggerClick }) {
+      this.onTriggerClick = onTriggerClick;
+      this.triggerTemplate = document.querySelector(`${triggerTemplateSelector}`);
+      this.triggerEl = document.importNode(this.triggerTemplate.content, true);
+    }
+
+    render() {
+      const wrapper = this.triggerEl.children[0];
+      wrapper.addEventListener('click', this.onTriggerClick);
+      return wrapper;
+    }
+  }
+
+  class ExpandableContainer {
+    constructor({
+        containerEl,
+        headerEl,
+        mainEl,
+        footerEl,
+        expandableNavEl, priorityNavEl,
+        expandableHtmlClass, expandedHtmlClass }) {
+
+      this.toggle = this.toggle.bind(this);
+
+      this.expandedHtmlClass = expandedHtmlClass;
+
+      this.containerEl = containerEl;
+      this.headerEl = headerEl;
+      this.mainEl = mainEl;
+      this.footerEl = footerEl;
+      this.expandableNavEl = expandableNavEl;
+      this.priorityNavEl = priorityNavEl;
+
+      this.expandableNavBottomOffset = 20;
+      this.containerEl.classList.add(expandableHtmlClass);
+
+      this.expanded = false;
+      this.animationTimeout = undefined;
+    }
+
+    toggle() {
+      this.expanded = !this.expanded;
+      this.update();
+    }
+
+    update() {
+      if (this.expanded) {
+        window.clearTimeout(this.animationTimeout);
+
+        // Hold main position
+        const mainTopOffset =
+          this.mainEl.getBoundingClientRect().top +
+          document.documentElement.scrollTop -
+          (document.documentElement.clientTop || document.body.clientTop || 0);
+        this.mainEl.style.marginTop = `${mainTopOffset}px`;
+
+        this.containerEl.classList.add(this.expandedHtmlClass);
+
+        const expH = this.expandableNavEl ?
+          this.expandableNavEl.getBoundingClientRect().height :
+          0;
+
+        const prioH = this.priorityNavEl ?
+          this.priorityNavEl.getBoundingClientRect().height :
+          0;
+
+        const heightDifference = expH - prioH + this.expandableNavBottomOffset;
+
+        this.headerEl.style.paddingBottom = `${heightDifference}px`;
+        this.headerEl.style.zIndex = '2';
+        this.headerEl.style.position = 'absolute';
+        this.headerEl.style.top = '0px';
+        this.headerEl.style.left = '0px';
+        this.headerEl.style.right = '0px';
+
+      } else {
+        this.containerEl.classList.remove(this.expandedHtmlClass);
+        this.headerEl.style.removeProperty('padding-bottom');
+
+        window.clearTimeout(this.animationTimeout);
+
+        this.animationTimeout = window.setTimeout(() => {
+          this.mainEl.style.removeProperty('margin-top');
+          this.headerEl.style.removeProperty('z-index');
+          this.headerEl.style.removeProperty('position');
+        }, 1000);
+      }
+    }
+  }
+
+  const body = document.querySelector('body');
+  const headerEl = document.querySelector('body > header');
+  const expandableNavEl = headerEl.querySelector('nav.expandable-nav');
+  const committeeMenuEl = headerEl.querySelector('.committee-widget .committee-menu');
+
+  if (expandableNavEl || committeeMenuEl) {
+
+    const container = new ExpandableContainer({
+      containerEl: body,
+      expandableHtmlClass: 'with-expandable-nav',
+      expandedHtmlClass: 'with-expanded-nav',
+      headerEl: headerEl,
+      footerEl: document.querySelector('body > footer'),
+      mainEl: document.querySelector('body > main'),
+      expandableNavEl: expandableNavEl,
+      priorityNavEl: headerEl.querySelector('nav.priority-nav'),
+    });
+
+    const trigger = new NavTrigger({
+      triggerTemplateSelector: '#expandableNavTrigger',
+      onTriggerClick: container.toggle,
+    });
+
+    headerEl.appendChild(trigger.render());
+
+  }
+
+}());