plok 0.2.12 → 1.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4dd177c85c560cc54c99970b9f7bba447ac49b407edd4f92c3bf19eba003a4d6
-  data.tar.gz: 1567126c937dc4cdaa090c3617a091f63980da34d09452250d7d76518c48d80d
+  metadata.gz: 8824645af9b5b16c2e3540eb298a43be8df6b0e1539d2274bf833d62a4ee2c9b
+  data.tar.gz: 53298ba35f0393728429121aeb7ace1ebafca3b744bb3f47e584478eea6ae6e3
 SHA512:
-  metadata.gz: 8d6f225251275ffe58c79f2b812647de21fd5b7522da704901bb23b30906f5137d7a4c5160ab4ef97be1ce4669c1b3258f9366279746171599ae17148d732f0d
-  data.tar.gz: e0043cc3f281b3e658b653823b0e338c78221b7f4797d8e51e3485206de84bdd02ed6b002b0e490f5609bc8e2322369ca5cdfbfcc30922ea990722a484d44cca
+  metadata.gz: 54f0aec7e6af22ec5f1e9d988880ebf03e110a5c8f619169c1ad1a5a82188c11f9da0b28a71189cd9aac21824921223e035cc718d0c2de7e661812cc715d7576
+  data.tar.gz: 4a274b94c88692dadd40061cd90778a7c0c2d7c5d931ef0c123e2b1a6e13ead58331f60e26d3c8c14fdeb709a414b7d93d44be072e3b4b85b74710c8a2f959cd

data/app/assets/javascripts/plok/sidebar.js

@@ -0,0 +1,66 @@
+var sidebar = {
+  init: () => {
+    sidebar.bind_mouse_events();
+    $('#hamburger').on('click', sidebar.toggle_hamburger_click_listener)
+    $(document).on('click', sidebar.document_click_listener)
+  },
+
+  bind_mouse_events: () => {
+    $('.wrapper.compact ul li.top-level')
+      .on('mouseenter', sidebar.list_item_mouseenter_listener)
+      .on('mouseleave', sidebar.list_item_mouseleave_listener)
+  },
+
+  close_all_submenus: () => {
+    $('[id^="nav-"]').each((_i, item) => { $(item).removeClass('show') })
+    $('a.top-level-anchor').each((_i, item) => { $(item).removeClass('bg-secondary') })
+  },
+
+  document_click_listener: (e) => {
+    if($('.compact:visible').length == 0) return
+    if($(e.target).closest('.sidebar-menu').length === 0)
+      sidebar.close_all_submenus();
+  },
+
+  list_item_mouseenter_listener: (e) => {
+    sidebar.list_item_mouseleave_listener(e)
+
+    let anchor = $(e.target)
+    if(!anchor.hasClass('top-level-anchor')) return
+    anchor.addClass('bg-secondary')
+    $(anchor.attr('href')).addClass('show')
+  },
+
+  list_item_mouseleave_listener: (e) => {
+    let anchor = $(e.target)
+    if(!anchor.hasClass('top-level-anchor')) return
+    sidebar.close_all_submenus();
+  },
+
+  toggle_hamburger_click_listener: e => {
+    e.preventDefault()
+    $('.wrapper').toggleClass('compact')
+
+    $('[id^="nav-"]').each((index, item) => {
+      if($('.wrapper').hasClass('compact')) {
+        $(item).removeClass('show')
+      }
+    })
+
+    if($('.wrapper').hasClass('compact')) {
+      sidebar.bind_mouse_events()
+      $('.sidebar-menu').removeClass('overflow-auto')
+    } else {
+      sidebar.unbind_mouse_events()
+      $('.sidebar-menu').addClass('overflow-auto')
+    }
+  },
+
+  unbind_mouse_events: () => {
+    $('.wrapper ul li.top-level')
+      .off('mouseenter')
+      .off('mouseleave')
+  }
+}
+
+$(() => { sidebar.init() })

data/app/assets/stylesheets/plok/_sidebar.scss

@@ -0,0 +1,86 @@
+.sidebar-menu {
+  bottom: 0;
+  position: fixed;
+  top: 0;
+  width: var(--sidebar-width);
+  transition: .5s;
+  z-index: 10;
+
+  a.logo {
+    display: block;
+    letter-spacing: 0.1em;
+    line-height: 45px;
+    text-decoration: none;
+    text-transform: uppercase;
+  }
+
+  a.home-icon {
+    display: none !important;
+  }
+
+  ul {
+    list-style-type: none;
+    padding-left: 0;
+
+    li {
+      cursor: pointer;
+
+      a {
+        color: #fff; // $color-contrast-light from the Bootstrap gem.
+        display: block;
+        font-size: 1rem;
+        padding: 10px;
+        padding-left: var(--sidebar-menu-item-left-margin);
+        text-decoration: none !important;
+
+        &:hover {
+          background-color: #6c757d; // $secondary from the Bootstrap gem.
+        }
+      }
+
+      &.top-level {
+        letter-spacing: .05em;
+        position: relative;
+
+        .fa {
+          font-size: 14px;
+          width: var(--sidebar-icon-width);
+        }
+
+        .text {
+          cursor: default;
+          font-size: 0.8rem;
+          padding: 16px 0 12px 0;
+          pointer-events: none;
+          text-transform: uppercase;
+        }
+
+        div[id^=nav-] {
+          h4 {
+            display: none;
+          }
+
+          ul li {
+            position: relative;
+
+            &::before {
+              content: '\25A1';
+              font-size: 0.4rem;
+              left: calc(var(--sidebar-menu-item-left-margin) + 15px);
+              position: absolute;
+              top: 15px;
+            }
+
+            a {
+              font-size: 0.8rem;
+              padding-left: calc(var(--sidebar-menu-item-left-margin) + var(--sidebar-icon-width) + 10px);
+              text-transform: uppercase;
+            }
+          }
+        }
+
+      }
+    }
+  }
+
+}

data/app/assets/stylesheets/plok/_sidebar_compact.scss

@@ -0,0 +1,66 @@
+.wrapper.compact {
+  .content {
+    margin-left: var(--sidebar-compact-width);
+
+    @include media-breakpoint-down(md) {
+      margin-left: 0;
+    }
+  }
+
+  .sidebar-menu {
+    width: var(--sidebar-compact-width);
+
+    @include media-breakpoint-down(md) {
+      width: 0;
+    }
+
+    a.logo {
+      display: none !important;
+    }
+
+    a.home-icon {
+      display: block !important;
+    }
+
+    ul li.top-level {
+      > a { // The icons in the compact view.
+        padding: 10px 0;
+        text-align: center;
+      }
+
+      h4 {
+        cursor: default;
+        display: inline-block;
+        font-size: .9rem;
+        padding: 13px 0 0 5px;
+        vertical-align: middle;
+        text-transform: uppercase;
+      }
+
+      ul li {
+        &::before {
+          left: calc(var(--sidebar-icon-width) - 5px);
+        }
+
+        a {
+          padding-left: calc(var(--sidebar-icon-width) + 10px);
+
+          &:hover {
+            background-color: $primary;
+          }
+        }
+      }
+
+      .fa { font-size: 20px; }
+      .text { display: none; }
+
+      .collapse {
+        background-color: $secondary;
+        left: var(--sidebar-compact-width);
+        position: absolute;
+        top: 0;
+        width: 240px;
+      }
+    }
+  }
+}

data/config/initializers/module.rb

@@ -0,0 +1,23 @@
+def class_exists?(class_name)
+  klass = Module.const_get(class_name)
+  return klass.is_a?(Class)
+rescue NameError
+  return false
+end
+
+class Module
+  def takes(*arg_names)
+    define_method(:initialize) do |*arg_values|
+      arg_names.zip(arg_values).each do |name, value|
+        if name.is_a?(Hash)
+          name, default_value = name.to_a.flatten
+          value = default_value if value.blank?
+        end
+
+        instance_variable_set(:"@#{name}", value)
+      end
+    end
+  end
+
+  alias_method :let, :define_method
+end

data/lib/generators/plok/sidebar/USAGE

@@ -0,0 +1,8 @@
+Description:
+    Explain the generator
+
+Example:
+    bin/rails generate plok/sidebar
+
+    This will create:
+        what/will/it/create

data/lib/generators/plok/sidebar/sidebar_generator.rb

@@ -0,0 +1,114 @@
+require 'rails/generators/base'
+
+class Plok::SidebarGenerator < Rails::Generators::Base
+  source_root File.expand_path('templates', __dir__)
+  class_option :css_framework, type: :string, default: 'bs5'
+
+  def install
+    copy_sidebar_files('wrapper', 'menu_items', 'menu_item', 'offcanvas_menu')
+    add_scss_imports_to_application
+    add_js_imports_to_application
+    inject_wrapper_block_into_application_layout
+    say("\nAll done! Remember to reboot your server so the new assets can load.\n\n")
+  end
+
+  private
+
+  def add_js_imports_to_application
+    if application_file(:js)
+      unless file_contains?(application_file(:js), /\/\/= require plok\/sidebar/)
+        append_to_file application_file(:js), "//= require plok/sidebar"
+      end
+    else
+      say("\nWARNING: No suitable application.js file found.\n")
+      say("Please add the following import to your backend application.js file:\n\n")
+      say("//= require plok/sidebar\n\n")
+    end
+  end
+
+  def add_scss_imports_to_application
+    if application_file(:scss)
+      unless file_contains?(application_file(:scss), /@import 'plok\/sidebar'/)
+        append_to_file application_file(:scss), "@import 'plok/sidebar';\n"
+      end
+
+      unless file_contains?(application_file(:scss), /@import 'plok\/sidebar_compact'/)
+        append_to_file application_file(:scss), "@import 'plok/sidebar_compact';\n"
+      end
+    else
+      say("\nWARNING: No suitable application.scss file found.\n")
+      say("Please add the following imports to your backend application.scss file:\n\n")
+      say("@import 'plok/sidebar';\n")
+      say("@import 'plok/sidebar_compact';\n")
+    end
+  end
+
+  def inject_wrapper_block_into_application_layout
+    # The sidebar wrapper already exists, so stop here.
+    return if file_contains?(application_layout_file, /sidebar\/wrapper/)
+
+    # The wrapper is missing, but we *need* a suitable spot for a closing tag.
+    unless file_contains?(application_layout_file, /yield\(:javascripts_early\)/)
+      say("\nWARNING: The generator could not inject the sidebar wrapper.\n")
+      say("You will have to wrap your backend application markup in this block:\n\n")
+      say("# #{application_layout_file}\n")
+      say("<%= render 'backend/#{options.css_framework}/sidebar/wrapper', brand_name: '#{app_name}' do %>\n")
+      say("  # ...your backend application markup here...\n")
+      say("<% end %>\n")
+      return
+    end
+
+    gsub_file(
+      application_layout_file,
+      /<body(.*)>\n/,
+      "<body\\1>\n  <%= render 'backend/#{options.css_framework}/sidebar/wrapper', brand_name: '#{app_name}' do %>\n"
+    )
+
+    gsub_file(
+      application_layout_file,
+      /\n(.*)<%= yield\(:javascripts_early\) %>/,
+      "  <% end %>\n\n\\1<%= yield(:javascripts_early) %>"
+    )
+  end
+
+  def app_name
+    Rails.application.class.name.split('::').first
+  end
+
+  def copy_sidebar_files(*partials)
+    partials.each do |partial_name|
+      copy_file "_#{partial_name}.html.erb", sidebar_partial_path(partial_name)
+    end
+  end
+
+  def sidebar_partial_path(partial_name)
+    "app/views/backend/#{options.css_framework}/sidebar/_#{partial_name}.html.erb"
+  end
+
+  def file_contains?(file, content)
+    File.readlines(file).grep(content).any?
+  end
+
+  def application_layout_file
+    if File.exists?("app/views/layouts/backend/#{options.css_framework}/application.html.erb")
+      return "app/views/layouts/backend/#{options.css_framework}/application.html.erb"
+    end
+
+    if File.exists?('app/views/layouts/backend/application.html.erb')
+      return 'app/views/layouts/backend/application.html.erb'
+    end
+  end
+
+  def application_file(type)
+    namespace = 'stylesheets'
+    namespace = 'javascripts' if type.to_s == 'js'
+
+    if File.exists?("app/assets/#{namespace}/backend/#{options.css_framework}/application.#{type}")
+      return "app/assets/#{namespace}/backend/#{options.css_framework}/application.#{type}"
+    end
+
+    if File.exists?("app/assets/#{namespace}/backend/application.#{type}")
+      return "app/assets/#{namespace}/backend/application.#{type}"
+    end
+  end
+end

data/lib/generators/plok/sidebar/templates/_menu_item.html.erb

@@ -0,0 +1,16 @@
+<% lbl ||= t("b.#{name}") %>
+<% href ||= defined?(path) ? path : "#nav-#{name}" %>
+
+<%= content_tag :li, class: 'top-level' do %>
+  <%= link_to href, class: 'top-level-anchor link-light', data: { bs_toggle: ('collapse' unless defined?(path)) } do %>
+    <%= fa_icon icon, class: 'fa-fw' %>
+    <%= content_tag :span, lbl, class: 'text' %>
+  <% end %>
+
+  <% unless defined?(path) %>
+    <%= content_tag :div, id: "nav-#{name}", class: 'collapse' do %>
+      <h4><%= lbl %></h4>
+      <%= yield %>
+    <% end %>
+  <% end %>
+<% end %>

data/lib/generators/plok/sidebar/templates/_menu_items.html.erb

@@ -0,0 +1,9 @@
+<ul class="justify-content-center">
+  <%= render 'backend/bs5/sidebar/menu_item', name: 'admins', icon: 'user-secret-o' do %>
+    <ul>
+      <%= content_tag :li do %>
+        <%= link_to t('b.overview'), backend_admins_path %>
+      <% end %>
+    </ul>
+  <% end %>
+</ul>

data/lib/generators/plok/sidebar/templates/_offcanvas_menu.html.erb

@@ -0,0 +1,11 @@
+<div class="offcanvas offcanvas-start bg-dark text-light" tabindex="-1" id="navigation-offcanvas">
+  <div class="offcanvas-header">
+    <h5 class="offcanvas-title"><%= brand_name %></h5>
+    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+  </div>
+  <div class="offcanvas-body">
+    <div class="sidebar-menu position-static">
+      <%= render 'backend/bs5/sidebar/menu_items' %>
+    </div>
+  </div>
+</div>

data/lib/generators/plok/sidebar/templates/_wrapper.html.erb

@@ -0,0 +1,19 @@
+<div class="wrapper">
+  <div class="sidebar-menu text-light bg-dark overflow-auto">
+    <%= link_to backend_path, class: 'text-center navbar-brand logo text-light me-0' do %>
+      <%= brand_name %>
+    <% end %>
+
+    <%= link_to fa_icon(:'home'), backend_path, class: 'text-center navbar-brand home-icon text-light fs-2 me-0' %>
+
+    <nav class="mt-3">
+      <%= render 'backend/bs5/sidebar/menu_items' %>
+    </nav>
+  </div>
+
+  <div class="content">
+    <%= yield %>
+  </div>
+</div>
+
+<%= render 'backend/bs5/sidebar/offcanvas_menu', brand_name: brand_name %>

data/lib/plok/engine.rb

@@ -19,6 +19,9 @@ module Plok
       g.test_framework :rspec
     end
 
+    # Autoload classes from the lib dir
+    config.autoload_paths << File.expand_path('../..', __FILE__)
+
     def class_exists?(class_name)
       klass = Module.const_get(class_name.to_s)
       klass.is_a?(Class)

data/lib/plok/version.rb

@@ -1,3 +1,3 @@
 module Plok
-  VERSION = '0.2.12'
+  VERSION = '1.0.0'
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: plok
 version: !ruby/object:Gem::Version
-  version: 0.2.12
+  version: 1.0.0
 platform: ruby
 authors:
 - Davy Hellemans
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2022-05-12 00:00:00.000000000 Z
+date: 2022-06-17 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -78,12 +78,15 @@ files:
 - MIT-LICENSE
 - Rakefile
 - app/assets/config/plok_manifest.js
+- app/assets/javascripts/plok/sidebar.js
+- app/assets/stylesheets/plok/_sidebar.scss
+- app/assets/stylesheets/plok/_sidebar_compact.scss
 - app/controllers/catch_all_controller.rb
 - app/controllers/plok/version_controller.rb
 - app/models/concerns/plok/loggable.rb
 - app/models/log.rb
 - app/models/queued_task.rb
-- config/plok.yml
+- config/initializers/module.rb
 - config/routes.rb
 - db/migrate/20211008130809_create_plok_logs.rb
 - db/migrate/20211015141837_create_plok_queued_tasks.rb
@@ -93,6 +96,12 @@ files:
 - db/migrate/20211203103118_add_file_to_logs.rb
 - db/migrate/20220512141814_add_log_indexes_to_category_type_and_id.rb
 - db/migrate/20220512142356_add_index_to_queued_task_weight.rb
+- lib/generators/plok/sidebar/USAGE
+- lib/generators/plok/sidebar/sidebar_generator.rb
+- lib/generators/plok/sidebar/templates/_menu_item.html.erb
+- lib/generators/plok/sidebar/templates/_menu_items.html.erb
+- lib/generators/plok/sidebar/templates/_offcanvas_menu.html.erb
+- lib/generators/plok/sidebar/templates/_wrapper.html.erb
 - lib/plok.rb
 - lib/plok/engine.rb
 - lib/plok/version.rb
@@ -120,7 +129,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.2.28
+rubygems_version: 3.3.9
 signing_key: 
 specification_version: 4
 summary: CMS basics

data/config/plok.yml

@@ -1,9 +0,0 @@
-development:
-  modules:
-    - flexible_content
-    - snippets
-    - settings
-    - queued_tasks
-    - email_templates
-    - pages
-    - redirects