yarii-editor 0.4.0

data/app/styles/dashboard.scss

@@ -0,0 +1,139 @@
+html {
+  overflow: hidden;
+}
+
+.carousel-frame {
+//  background: #fafafa;
+  padding: 0px;
+//  border-radius: 3px;
+//  border: 1px solid #ddd;
+  width: 100vw;
+
+/*  .level {
+    border-bottom: 4px solid #363636;
+    padding-bottom: 8px;
+  } */
+  .scroll-item > .level {
+    padding: 0 10px;
+  }
+  @supports (-webkit-filter: blur(0)) and (not (-moz-transform: translate(0,0))) {
+    .scroll-item > .level {
+      padding-right: 18px;
+    }
+  }
+  .level .title {
+    text-shadow: 2px 5px 2px rgba(0,0,0,0.1);
+    line-height: 1;
+  }
+}
+
+.scroll {
+  display: flex;
+//  align-items: top;
+  overflow-x: auto;
+  overflow-y: hidden;
+  width: 100%;
+  -webkit-overflow-scrolling: touch;
+
+  height: calc(100vh - 64px);
+}
+
+ul.scroll {
+  margin: 0;
+  list-style-type: none;
+}
+
+.scroll-item {
+  flex: 0 0 49vw;
+  @media (min-width: 1000px) {
+    flex: 0 0 32.5vw;
+  }
+  @media (min-width: 1600px) {
+    flex: 0 0 24.5vw;
+  }
+  height: 100%;
+  position: relative;
+  .vertical-scroll {
+    position: absolute;
+    top: 3rem;
+    right: 0;
+    bottom: 2px;
+    left: 0;
+    padding: 10px;
+    padding-top: 0;
+    padding-bottom: 20vh;
+    overflow-y: auto;
+  }
+}
+
+.vertical-scroll::-webkit-scrollbar {
+  width: 8px;
+  height: auto;
+  background-color: $beige-lighter;
+  border-radius: 4px;
+}
+
+/* Add a thumb */
+.vertical-scroll::-webkit-scrollbar-thumb {
+  background-color: $beige-medium;
+  border-radius: 4px;
+  box-shadow: 0px 1px 1px rgba(0,0,0,0.15);
+}
+
+@media (max-width: 600px) {
+  .scroll-item {
+    flex: 0 0 99vw;
+  }
+}
+
+img {
+  object-fit: contain;
+  width: 100%;
+  height: 100%;
+}
+
+.scroll-item .card {
+  margin-bottom: 15px;
+}
+.card time {
+  color: $green;
+  font-size: 0.85em;
+}
+
+.card {
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+  word-break: break-word;
+
+  &.tagged-draft {
+    border-top: 10px solid $orange;
+  }
+  &.tagged-queued {
+    border-top: 10px solid lighten($blue, 20%);
+  }
+  &.tagged-published {
+    border-top: 10px solid $green;
+  }
+  &.dimmed {
+    opacity: 0.4;
+    pointer-events: none;
+  }
+
+  .card-image {
+    border-bottom: $card-header-border-bottom;
+  }
+}
+
+@supports (scroll-snap-align: start) {
+  /* modern scroll snap points */
+  .scroll {
+    scroll-snap-type: x mandatory;
+  }
+  .scroll-item {
+    scroll-snap-align: start;
+  }
+}
+
+.carousel-frame {
+  margin-top: 4em;
+}

data/app/styles/editor.scss

@@ -0,0 +1,70 @@
+.editor-toolbar button {
+  font-size: 0.85em;
+  color: $beige-dark;
+}
+
+.CodeMirror-fullscreen:not(.CodeMirror-sided) {
+  padding-top: 30px;
+  padding-left: 20vw;
+  padding-right: 20vw;
+  background: lighten($lightgreen, 4%);
+  .CodeMirror-scroll {
+    padding: 20px;
+    background: $white;
+    box-shadow: 0px 15px 40px rgba(0,0,0,0.13);
+  }
+
+  @media (max-width: 767px) {
+    padding-left: 10vw;
+    padding-right: 10vw;
+  }
+  @media (max-width: 415px) {
+    padding-left: 5vw;
+    padding-right: 5vw;
+  }
+}
+
+.CodeMirror:not(.CodeMirror-fullscreen) .CodeMirror-scroll {
+  max-height: 42vh;
+}
+
+.CodeMirror-placeholder {
+  opacity: 0.2;
+}
+
+.cm-s-easymde {
+  .cm-header {
+    color: $green;
+  }
+  .cm-strong, .cm-em {
+    color: $darkgreen;
+  }
+  .cm-link, .cm-url {
+    color: $darkorange;
+  }
+  .cm-quote {
+    color: $blue;
+  }
+}
+
+.modal-card-body > form.dimmed {
+  opacity: 0.3;
+  pointer-events: none;
+}
+
+@keyframes pulsate {
+  0% {opacity: 0.5;}
+  50% {opacity: 1.0;}
+  100% {opacity: 0.5;}
+}
+
+.modal-foot-status {
+  flex-grow: 1;
+  color: $white;
+  font-style: italic;
+  font-weight: bold;
+  &.in-progress {
+    animation: pulsate 1.2s ease-in-out;
+    animation-iteration-count: infinite; 
+  }
+}

data/app/styles/helpers.scss

@@ -0,0 +1,45 @@
+/* Add Tailwindcss-ish margin and padding helpers */
+
+$sizes: 
+  0 0,
+  1 0.25,
+  2 0.5,
+  3 0.75,
+  4 1,
+  5 1.25,
+  6 1.5,
+  8 2,
+  10 2.5,
+  12 3,
+  16 4,
+  20 5,
+  24 6,
+  32 8,
+  40 10,
+  48 12,
+  56 14,
+  64 16;
+$positions: ('top','left','bottom','right');
+
+@each $index, $size in $sizes {
+  @each $position in $positions {
+    .m#{str-slice($position, 0, 1)}-#{$index} {
+      margin-#{$position}: $size + rem;
+    }
+    .p#{str-slice($position, 0, 1)}-#{$index} {
+      padding-#{$position}: $size + rem;
+    }
+    .-m#{str-slice($position, 0, 1)}-#{$index} {
+      margin-#{$position}: -$size + rem;
+    }
+  }
+}
+
+.m-auto {
+  margin: auto;
+}
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+

data/app/views/application/yarii_extra_head.html.erb

@@ -0,0 +1,3 @@
+<%
+  # Copy this file to your main Rails views folder and add customizations there
+%>

data/app/views/layouts/yarii_editor/application.html.erb

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Yarii</title>
+    <%= csrf_meta_tags %>
+    <%= csp_meta_tag %>
+
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.1.7/css/fork-awesome.min.css" integrity="sha256-gsmEoJAws/Kd3CjuOQzLie5Q3yshhvmo7YNtBG7aaEY=" crossorigin="anonymous" />
+    <link type="text/css" rel="stylesheet" href="//fast.fonts.net/cssapi/6fded4e3-4758-4bb9-b529-f0ebadd8eb84.css"/>
+    <%= ::ApplicationController.render :yarii_extra_head, layout: nil %>
+    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
+    <%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
+  </head>
+
+  <body>
+    <%= render 'yarii_editor/shared/navbar' %>
+    <%= yield %>
+  </body>
+</html>

data/app/views/yarii_editor/application/render_engine_stylesheet_tag.html.erb

@@ -0,0 +1 @@
+<%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

data/app/views/yarii_editor/dashboard/_card.html.erb

@@ -0,0 +1,3 @@
+<div data-controller="card" data-card-publishing-menu-path="<%= yarii_editor.publishing_menu_path %>" id="<%= content_model_type %>-<%= model.id %>" class="card <%= "tagged-#{status_of_document(model)}" %>">
+  <%= render 'yarii_editor/model_cards/' + model_class.name.underscore, model: model, content_model_type: content_model_type %>
+</div>

data/app/views/yarii_editor/dashboard/_extras.html.erb

@@ -0,0 +1 @@
+<!-- Host app can overwrite this partial to include plugin extras -->

data/app/views/yarii_editor/dashboard/_inner_list.html.erb

@@ -0,0 +1,42 @@
+<%
+model_type = local_assigns[:model_type]
+model_details = local_assigns[:model_details]
+model_class = model_details[:class_name].constantize
+
+current_page = (params[:page] || 1).to_i
+pagination = 15
+page_start = pagination * (current_page - 1)
+page_end = pagination * current_page
+
+models = if model_details[:datafile]
+  model_class.all(model_details[:datafile])[page_start...page_end]
+else
+  order_by = model_details[:order_by]&.to_sym || :posted_datetime
+  order_direction = model_details[:order_direction]&.to_sym || :desc
+  if model_details[:filter] and model_details[:filter][:hashtags]
+    model_class.all(order_by: order_by, order_direction: order_direction).select do |model|
+      if model.respond_to?(:tags) and model.tags.present?
+        tags = model.tags.is_a?(Array) ? model.tags : model.tags.split(' ')
+        (tags & model_details[:filter][:hashtags]).present?
+      end
+    end[page_start...page_end]
+  elsif model_details[:filter] and model_details[:filter][:categories]
+    model_class.all(order_by: order_by, order_direction: order_direction).select do |model|
+      categories = model.as_json['category'] || model.as_json['categories']
+      if categories.present?
+        categories = categories.is_a?(Array) ? categories : categories.split(' ')
+        (categories & model_details[:filter][:categories]).present?
+      end
+    end[page_start...page_end]
+  else
+    model_class.all(order_by: order_by, order_direction: order_direction)[page_start...page_end]
+  end
+end
+if models.present?
+  models.each do |model| %>
+    <%= render 'yarii_editor/dashboard/card', model_class: model_class, model: model, content_model_type: model_type %>
+<%
+  end
+else %>
+<p class="has-text-centered" data-list-done="true"><em>All done!</em></p>
+<% end %>

data/app/views/yarii_editor/dashboard/_list.html.erb

@@ -0,0 +1,34 @@
+<%
+model_type = local_assigns[:model_type]
+model_details = local_assigns[:model_details]
+model_class = model_details[:class_name].constantize
+model_title = model_details.fetch(:title, model_class.name.titleize).pluralize
+
+current_page = (params[:page] || 1).to_i
+%>
+<li class="scroll-item">
+  <div class="level is-mobile">
+    <div class="level-left">
+      <h3 class="title level-item"><%= model_title %></h3>
+    </div>
+    <div class="level-right">
+      <button data-controller="new-document" data-action="new-document#open" data-new-document-path="<%= yarii_editor.new_document_path(content_model: model_type) %>" class="level-item button is-primary">
+        <span class="icon"><i class="fa fa-plus"></i></span>
+        <span>New</span>
+      </button>
+    </div>
+  </div>
+
+  <div class="vertical-scroll">
+    <div id="list-<%= model_type %>">
+      <%= render 'inner_list', model_type: model_type, model_details: model_details %>
+
+      <div data-controller="list-loading" id="loadmore-<%= model_type %>" class="has-text-centered">
+        <%= link_to dashboard_list_path(model_type: model_type, page: current_page + 1), data: {action: 'list-loading#more'}, class: 'button is-primary' do %>
+          <span>Load More</span>
+          <span class="icon"><i class="fa fa-chevron-circle-down" aria-hidden="true"></i></span>
+        <% end %>
+      </div>
+    </div>
+  </div>
+</li>

data/app/views/yarii_editor/dashboard/index.html.erb

@@ -0,0 +1,18 @@
+<!-- <div data-controller="testengine"></div> -->
+<div class="carousel-frame">
+  <ul class="scroll">
+    <% @custom_lists.each do |model_details| %>
+      <%= render 'list', model_type: model_details[:model_type], model_details: model_details %>
+    <% end %>
+    <% current_site.content_models.each do |model_type, model_details| %>
+      <%= render 'list', model_type: model_type, model_details: model_details %>
+    <% end %>
+  </ul>
+</div>
+
+<div id="editor-modal-wrapper">
+</div> 
+<div id="commit-modal-wrapper">
+</div>
+
+<%= render 'extras' %>

data/app/views/yarii_editor/documents/modal.html.erb

@@ -0,0 +1,78 @@
+<%-
+  path = nil
+  if action_name == "new"
+    path = yarii_editor.create_document_path(content_model: params[:content_model])
+    http_method = "post"
+  else
+    if params[:key_path]
+      path = yarii_editor.update_document_path(@doc, content_model: params[:content_model], key_path: params[:key_path])
+    else
+      path = yarii_editor.update_document_path(@doc, content_model: params[:content_model])
+    end
+    http_method = "put"
+  end
+%>
+<div
+  data-controller="editor-modal"
+  data-editor-modal-http-method="<%= http_method %>"
+  data-editor-modal-path="<%= path %>"
+  data-editor-modal-content-model="<%= params[:content_model] %>"
+  data-editor-modal-model-id="<%= params[:id] %>"
+  data-editor-modal-publishing-menu-path="<%= yarii_editor.publishing_menu_path %>"
+  id="editor-modal"
+  class="modal is-active"
+>
+  <div class="modal-background"></div>
+  <div class="modal-card">
+    <header class="modal-card-head">
+      <p class="modal-card-title"><%= @doc_heading %></p>
+      <button data-action="editor-modal#cancel" class="delete" aria-label="close"></button>
+    </header>
+    <section class="modal-card-body">
+      <%= form_tag do %>
+        <% current_site.content_models[params[:content_model].to_sym][:primary_fields].each do |field| %>
+          <%= add_field field[:field_type], {
+            variable: field[:field_name],
+            label: field[:label],
+            placeholder: field[:placeholder],
+            class_name: field[:class_names]
+          } %>
+        <% end %>
+
+        <div class="mb-2 has-text-right"><button data-action="editor-modal#showAdditionalFields" class="button is-text is-small">Additional Fields…</button></div>
+        <div data-target="editor-modal.additionalFields" class="is-hidden mb-4">
+          <div class="field">
+            <label class="label">Publish to Public?</label>
+            <div class="control">
+              <%= hidden_field_tag "#{params[:content_model]}[published]", false %>
+              <%= check_box_tag "#{params[:content_model]}[published]", true, @doc.published %>
+            </div>
+          </div>
+          <% current_site.content_models[params[:content_model].to_sym][:additional_fields].each do |field| %>
+            <%= add_field field[:field_type], {
+              variable: field[:field_name],
+              label: field[:label],
+              placeholder: field[:placeholder],
+              class_name: field[:class_names]
+            } %>
+          <% end %>
+        </div>
+
+        <% current_site.content_models[params[:content_model].to_sym][:content_fields].each do |field| %>
+          <%= add_field field[:field_type], {
+            variable: field[:field_name],
+            label: field[:label],
+            placeholder: field[:placeholder],
+            class_name: field[:class_names]
+          } %>
+        <% end %>
+      <% end %>
+    </section>
+    <footer class="modal-card-foot">
+      <div data-target="editor-modal.status" class="modal-foot-status"></div>
+      <button data-action="editor-modal#cancel" class="button is-dark is-text">Cancel</button>
+      &nbsp;
+      <button data-action="editor-modal#save" class="button is-success">Save Changes</button>
+    </footer>
+  </div>
+</div>