Modernization update

.gitignore

@@ -39,3 +39,6 @@ node_modules
 /yarn-error.log
 yarn-debug.log*
 .yarn-integrity
+
+# Heroku stuff
+.env

Gemfile

@@ -128,7 +128,7 @@ end
 
 group :development do
   gem 'web-console'
-  gem 'listen'
+  # gem 'listen'
   gem 'bullet'
   gem 'rack-mini-profiler'
   gem 'memory_profiler'
@@ -149,3 +149,4 @@ group :worker do
   gem 'ibm_watson'
   gem 'textstat'
 end
+

Gemfile.lock

@@ -1370,11 +1370,11 @@ GEM
     flamegraph (0.9.5)
     font-awesome-rails (4.7.0.8)
       railties (>= 3.2, < 8.0)
-    friendly_id (5.4.2)
+    friendly_id (5.5.0)
       activerecord (>= 4.0.0)
     globalid (1.1.0)
       activesupport (>= 5.0)
-    html-pipeline (2.14.2)
+    html-pipeline (2.14.3)
       activesupport (>= 2)
       nokogiri (>= 1.4)
     htmlentities (4.3.4)
@@ -1430,9 +1430,6 @@ GEM
     language_filter (0.3.01)
     libv8-node (16.10.0.0)
     libv8-node (16.10.0.0-x86_64-linux)
-    listen (3.8.0)
-      rb-fsevent (~> 0.10, >= 0.10.3)
-      rb-inotify (~> 0.9, >= 0.9.10)
     loofah (2.20.0)
       crass (~> 1.0.2)
       nokogiri (>= 1.5.9)
@@ -1512,7 +1509,7 @@ GEM
       nio4r (~> 2.0)
     puma-heroku (2.0.0)
       puma (>= 5.0, < 6.0)
-    pundit (2.2.0)
+    pundit (2.3.0)
       activesupport (>= 3.0.0)
     racc (1.6.2)
     rack (2.2.6.4)
@@ -1561,9 +1558,6 @@ GEM
       rake (>= 12.2)
       thor (~> 1.0)
     rake (13.0.6)
-    rb-fsevent (0.11.2)
-    rb-inotify (0.10.1)
-      ffi (~> 1.0)
     react-rails (2.6.2)
       babel-transpiler (>= 0.7.0)
       connection_pool
@@ -1719,7 +1713,6 @@ DEPENDENCIES
   ibm_watson
   image_processing
   language_filter
-  listen
   material_icons
   medium-editor-rails
   memory_profiler

app/assets/javascripts/alpine.js

@@ -0,0 +1,105 @@
+function alpineMultiSelectController() {
+  return {
+    optgroups: [],
+    options: [],
+    selected: [],
+    show: false,
+    sourceFieldId: '',
+    open() { this.show = true },
+    close() { this.show = false },
+    isOpen() { return this.show === true },
+    select(index, event) {
+      if (!this.options[index].selected) {
+        this.options[index].selected = true;
+        this.options[index].element = event.target;
+        this.selected.push(index);
+
+      } else {
+        this.selected.splice(this.selected.lastIndexOf(index), 1);
+        this.options[index].selected = false;
+      }
+
+      // Update the original select element's selected options
+      const originalSelect = document.getElementById(this.sourceFieldId);
+      for (let i = 0; i < originalSelect.options.length; i++) {
+        originalSelect.options[i].selected = this.options[i].selected;
+      }
+
+      // Finally, trigger a manual on-change event on the original select
+      // to make sure our autosave fires on it.
+      originalSelect.dispatchEvent(new Event('change'));
+    },
+    remove(index, option) {
+      this.options[option].selected = false;
+      this.selected.splice(index, 1);
+
+      // We also want to manually remove the `selected` attribute from the
+      // original select element's option.
+      const originalSelect = document.getElementById(this.sourceFieldId);
+      originalSelect.options[option].selected = false;
+
+      // After removing the option, we want to emit a change event to trigger
+      // a field autosave.
+      originalSelect.dispatchEvent(new Event('change'));
+    },
+    loadOptions(fieldId) {
+      this.sourceFieldId = fieldId;
+      const select = document.getElementById(fieldId);
+      const optgroups = select.getElementsByTagName('optgroup');
+
+      // Since we're effectively resetting indices per optgroup, we need to track
+      // a single running index throughout all optgroups to use as an index for
+      // each option for events, etc.
+      let runningOptionIndex = 0;
+
+      // For each optgroup (page type)...
+      for (let i = 0; i < optgroups.length; i++) {
+        const groupOptions = optgroups[i].getElementsByTagName('option');
+
+        // Prepare the `options` array for this optgroup
+        const optionsForThisOptGroup = [];
+        for (let j = 0; j < groupOptions.length; j++) {
+          const option = groupOptions[j];
+          const imageUrl = option.getAttribute('data-image-url');
+
+          optionsForThisOptGroup.push({
+            index: runningOptionIndex++,
+            value: option.value,
+            text: option.textContent.trim(),
+            imageUrl: imageUrl,
+            icon: option.getAttribute('data-icon'),
+            icon_color: option.getAttribute('data-icon-color'),
+            selected: !!option.selected
+          });
+
+          if (!!option.selected) {
+            this.selected.push(runningOptionIndex - 1);
+          }
+        }
+
+        // Finally, add it as a valid optgroup with options
+        if (optionsForThisOptGroup.length > 0) {
+          this.optgroups.push({
+            label: optgroups[i].label,
+            icon: window.ContentTypeData[optgroups[i].label].icon,
+            color: window.ContentTypeData[optgroups[i].label].color,
+            plural: window.ContentTypeData[optgroups[i].label].plural,
+            options: optionsForThisOptGroup
+          });
+
+          // And also track all the options in a flat array so we can reference them with a single index
+          for (let j = 0; j < optionsForThisOptGroup.length; j++) {
+            this.options.push(optionsForThisOptGroup[j]);
+          }
+        }
+      }
+    },
+    selectedValues(){
+      // Return all this.options where selected=true
+      return this.options.filter(op => op.selected === true); // .map(el => el.text)
+      // return this.selected.map((option)=>{
+      //   return this.options[option].value;
+      // });
+    }
+  }
+}

app/assets/javascripts/application.js

@@ -19,5 +19,3 @@
 //= require tribute
 //= require d3
 //= require_tree .
-
-

app/assets/javascripts/autosave.js

@@ -1,26 +1,55 @@
 $(document).ready(function() {
+  var recent_autosave = false;
+
   $('.autosave-closest-form-on-change').change(function () {
     var content_form = $(this).closest('form');
 
+    var default_border_class     = 'border-gray-200'; // This needs to match whatever the actual CSS on the element is!
+    var in_progress_saving_class = 'border-yellow-400';
+    var saved_successfully_class = 'border-green-400';
+    var error_saving_class       = 'border-red-400';
+
+    // Submit content_form with ajax
     if (content_form) {
-      M.toast({ html: 'Saving your changes...' });
+      recent_autosave = true;
+      setTimeout(() => recent_autosave = false, 1000);
 
       var form_data = content_form.serialize();
-      form_data += "&authenticity_token=" + $('meta[name="csrf-token"]').attr('content');
+      form_data += "&authenticity_token=" + encodeURIComponent($('meta[name="csrf-token"]').attr('content'));
 
+      var field = $(this);
+
+      console.log('wip saving');
+      field.removeClass(default_border_class);
+      field.addClass(in_progress_saving_class);
       $.ajax({
         url:  content_form.attr('action') + '.json',
         type: content_form.attr('method').toUpperCase(),
         data: form_data,
         success: function(response) {
-          M.toast({ html: 'Saved successfully!' });
+          console.log('saved ok');
+          field.removeClass(in_progress_saving_class);
+          field.addClass(saved_successfully_class);
+
+          // Reset back to default coloring after 10 seconds
+          setTimeout(function () {
+            field.removeClass(saved_successfully_class);
+            field.addClass(default_border_class);
+          }, 10000);
         },
         error: function(response) {
-          M.toast({ html: "There was an error saving your changes. Please back up any changes and refresh the page." });
+          console.log('error saving');
+          field.removeClass(in_progress_saving_class);
+          field.addClass(error_saving_class);
+
+          // TODO show some modal or something
         }
       });
     } else {
-      M.toast({ html: "There was an error saving your changes. Please back up any changes and refresh the page." });
+      console.log('error saving changes');
+
+      // TODO show some message to refresh the page or something
+      // M.toast({ html: "There was an error saving your changes. Please back up any changes and refresh the page." });
     }
   });
 
@@ -31,6 +60,8 @@ $(document).ready(function() {
   // To ensure all fields get unblurred (and therefore autosaved) upon navigation,
   // we use this little ditty:
   window.onbeforeunload = function(e){
-    $(document.activeElement).blur();
+    if (!recent_autosave) {
+      $(document.activeElement).blur();
+    }
   }
 });

app/assets/javascripts/autosize-textareas.js

@@ -0,0 +1,19 @@
+$(document).ready(function() {
+  const yPadding = 16;
+  const lineHeight = 20; // 36
+  const elements = document.getElementsByClassName('js-autosize-textarea');
+  for (let i = 0; i < elements.length; i++) {
+    // Set the initial height of the textarea
+    const linesCount = elements[i].value.split("\n").length;
+    const contentHeight = yPadding + (linesCount * lineHeight);
+    elements[i].setAttribute("style", "height:" + contentHeight + "px;overflow-y:hidden;");
+
+    // Resize the textarea whenever the value changes
+    elements[i].addEventListener("input", OnInput, false);
+  }
+
+  function OnInput() {
+    this.style.height = lineHeight + "px";
+    this.style.height = this.scrollHeight + "px";
+  }
+});

app/assets/javascripts/content_type_data.js.erb

@@ -1,9 +1,10 @@
 window.ContentTypeData = {
   <% (Rails.application.config.content_types[:all] + [Document, Timeline]).each do |content_type| %>
     '<%= content_type.name %>': {
-      color: '<%= content_type.color %>',
-      hex:   '<%= content_type.hex_color %>',
-      icon:  '<%= content_type.icon  %>'
+      color:  '<%= content_type.color %>', // comment to bust cache :) -- should  be safe to remove after release but double check the link dropdown optgroup bg colors when you do
+      hex:    '<%= content_type.hex_color %>',
+      icon:   '<%= content_type.icon  %>',
+      plural: '<%= content_type.name.pluralize %>'
     },
   <% end %>
 };

app/assets/javascripts/content_types.js

@@ -1,24 +1,23 @@
-$(document).ready(function() {
-  $('.js-enable-content-type').click(function () {
-    var content_type = $(this).data('content-type');
-    var related_card = $(this).children('.card').first();
-    var is_currently_active = related_card.hasClass('active');
-    var ie_badge = $(this).find('.enabled-badge');
-
-    $.post('/customization/toggle_content_type', {
+// x-on:click="enabled = !enabled; togglePageType('Character', enabled)"
+function togglePageType(content_type, active) {
+  const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
+  fetch('/customization/toggle_content_type', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'X-CSRF-Token': csrfToken
+    },
+    body: JSON.stringify({
       content_type: content_type,
-      active: is_currently_active ? 'off' : 'on'
-    });
-
-    if (is_currently_active) {
-      related_card.removeClass('active');
-      ie_badge.attr('data-badge-caption', 'hidden');
-    } else {
-      related_card.addClass('active');
-      ie_badge.attr('data-badge-caption', 'active');
-    }
-
-    // Return false so we don't jump to the top of the page on link click
-    return false;
+      active: active ? 'on' : 'off'
+    })
+  })
+  .then(response => {
+    // Handle the response
+    console.log('toggled successfully');
+  })
+  .catch(error => {
+    // Handle the error
+    console.log('couldnt toggle');
   });
-});
+}

app/assets/javascripts/smoothscrolling.js

@@ -0,0 +1,15 @@
+document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
+  anchor.addEventListener('click', function (e) {
+    e.preventDefault();
+
+    const target = document.querySelector(this.getAttribute('href'));
+
+    // Check if the target element exists
+    if (target) {
+      window.scrollTo({
+        top: target.offsetTop,
+        behavior: 'smooth',
+      });
+    }
+  });
+});

app/assets/stylesheets/iconography.scss

@@ -0,0 +1,15 @@
+.svg-icon {
+  width: 1em;
+  height: 1em;
+}
+
+.svg-icon path,
+.svg-icon polygon,
+.svg-icon rect {
+  fill: #333;
+}
+
+.svg-icon circle {
+  stroke: #4691f6;
+  stroke-width: 1;
+}