card-mod-layout 0.14.2 → 0.15.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3b9347188889d52cf3c4ba629db96046727f6acb83de6c0e219bf258fcf27dda
-  data.tar.gz: c87c2b313bb85bbd469c09ebcf32466114c6161e1324f6e6e75b561ab767c5be
+  metadata.gz: eae60ab480a1985e43a70c077377a025e51d30b1b39a395b04c6907c3c57a41d
+  data.tar.gz: 672b7bf9992a129a5ca1f5ff497fc19511b55b0ff5146226b25152a1d4e9d14c
 SHA512:
-  metadata.gz: 9296c1fc07201cc333b94773c21812328b0449cd9ac9f1fd5c7a583e47d3258cdeea8367dcf33a2d9c857f4de5acb14f4f7ba89d26016f4e4a9c345b6aab243e
-  data.tar.gz: bdd62b5a5248520633d021a29a7499597a6c89e61b9c55ca071668f7a92e2c48aed4712090f313d8b4ab4128f517ccf736678ce25ca9826e43fe817c7c2a44cf
+  metadata.gz: 7b08ce988ef614da4dc3c4c675a1b717e0bdbb481c6c4b98b862dab1de79f951a446ecd6837ee49dcbea22c71c2758d7d6040c7415e7d7de2e79b964732788c5
+  data.tar.gz: ec94cb6a8b07a78e54de66ef5145d13c0c607f338275a5b167f7ddc7a7688a6b57e6f05f7f01893ee76e7a46587dc064d3230e1cdb107a7ed766188e0fff6ee1

data/assets/script/layout.js.coffee

@@ -0,0 +1,76 @@
+wrapDeckoLayout = ->
+  $footer  = $('body > footer').first()
+  $('body > article, body > aside').wrapAll("<div class='#{containerClass()}'/>")
+  $('body > div > article, body > div > aside')
+    .wrapAll('<div class="row row-offcanvas">')
+  if $footer
+    $('body').append $footer
+
+wrapSidebarToggle = (toggle, flex) ->
+  "<div class='container'><div class='row #{flex}'>#{toggle}</div></div>"
+
+containerClass = ->
+  if $('body').hasClass('fluid') then "container-fluid" else "container"
+
+toggleButton = (side) ->
+  icon_dir = if side == 'left' then 'right' else 'left'
+  "<button class='offcanvas-toggle btn btn-secondary "+
+    "d-sm-none' data-toggle='offcanvas-#{side}'>" +
+    "<i class='material-icons'>chevron_#{icon_dir}</i></button>"
+
+sidebarToggle = (side) ->
+  if side == "both"
+    wrapSidebarToggle(toggleButton("left") + toggleButton("right"), "flex-row justify-content-between")
+  else if side == "left"
+    wrapSidebarToggle(toggleButton("left"), "flex-row")
+  else
+    wrapSidebarToggle(toggleButton("right"), "flex-row-reverse")
+
+singleSidebar = (side) ->
+  $article = $('body > article').first()
+  $aside   = $('body > aside').first()
+  $article.addClass("col-xs-12 col-sm-9")
+  $aside.addClass(
+    "col-xs-6 col-sm-3 sidebar-offcanvas sidebar-offcanvas-#{side}"
+  )
+  if side == 'left'
+    $('body').append($aside).append($article)
+  else
+    $('body').append($article).append($aside)
+  wrapDeckoLayout()
+  $article.prepend(sidebarToggle(side))
+
+doubleSidebar = ->
+  $article    = $('body > article').first()
+  $asideLeft  = $('body > aside').first()
+  $asideRight = $($('body > aside')[1])
+  $article.addClass("col-xs-12 col-sm-6")
+  sideClass = "col-xs-6 col-sm-3 sidebar-offcanvas"
+  $asideLeft.addClass("#{sideClass} sidebar-offcanvas-left")
+  $asideRight.addClass("#{sideClass} sidebar-offcanvas-right")
+  $('body').append($asideLeft).append($article).append($asideRight)
+  wrapDeckoLayout()
+  toggles = sidebarToggle('both')
+  $article.prepend(toggles)
+
+$.fn.extend toggleText: (a, b) ->
+  @text(if @text() == b then a else b)
+
+  this
+$(window).ready ->
+  switch
+    when $('body').hasClass('right-sidebar')
+      singleSidebar('right')
+    when $('body').hasClass('left-sidebar')
+      singleSidebar('left')
+    when $('body').hasClass('two-sidebar')
+      doubleSidebar()
+
+  $('[data-toggle="offcanvas-left"]').click ->
+    $('.row-offcanvas').removeClass('right-active').toggleClass('left-active')
+    $(this).find('i.material-icons')
+      .toggleText('chevron_left', 'chevron_right')
+  $('[data-toggle="offcanvas-right"]').click ->
+    $('.row-offcanvas').removeClass('left-active').toggleClass('right-active')
+    $(this).find('i.material-icons')
+      .toggleText('chevron_left', 'chevron_right')

data/assets/script/modal.js.coffee

@@ -0,0 +1,111 @@
+$(window).ready ->
+  $('body').on 'hidden.bs.modal', (_event) ->
+    decko.removeModal()
+
+  $('body').on "show.bs.modal", "._modal-slot", (event, slot) ->
+    link = $(event.relatedTarget)
+    addModalDialogClasses $(this), link
+    $(this).modal("handleUpdate")
+    decko.contentLoaded $(event.target), link
+
+  $('._modal-slot').each ->
+    openModalIfPresent $(this)
+    addModalDialogClasses $(this)
+
+  $('body').on 'click', '.submit-modal', ->
+    $(this).closest('.modal-content').find('form').submit()
+
+openModalIfPresent = (mslot) ->
+  modal_content = mslot.find(".modal-content")
+  if modal_content.length > 0 && modal_content.html().length > 0
+    $("#main > .card-slot").registerAsOrigin("modal", mslot)
+    mslot.modal("show")
+
+addModalDialogClasses = ($modal_slot, $link) ->
+  dialog = $modal_slot.find(".modal-dialog")
+  classes_from_link =
+    if $link? then $link.data("modal-class") else $modal_slot.data("modal-class")
+  if classes_from_link? and dialog?
+    dialog.addClass classes_from_link
+
+jQuery.fn.extend {
+  showAsModal: ($slotter) ->
+    el = @modalify($slotter) if $slotter?
+    if $("body > ._modal-slot").is(":visible")
+      @addModal el, $slotter
+    else
+      if $("body > ._modal-slot")[0]
+        $("._modal-slot").trigger "decko.slot.destroy"
+        $("body > ._modal-slot").replaceWith el
+      else
+        $("body").append el
+
+      $slotter.registerAsOrigin("modal", el)
+      el.modal("show", $slotter)
+
+  addModal: (el, $slotter) ->
+    if $slotter.data("slotter-mode") == "modal-replace"
+      addModalDialogClasses el, $slotter
+      dialog = el.find(".modal-dialog")
+      el.adoptModalOrigin()
+      $("._modal-slot").trigger "decko.slot.destroy"
+      $("body > ._modal-slot > .modal-dialog").replaceWith dialog
+      decko.contentLoaded dialog, $slotter
+    else
+      decko.pushModal el
+      $slotter.registerAsOrigin("modal", el)
+      el.modal("show", $slotter)
+
+  adoptModalOrigin: () ->
+    origin_slot_id = $("body > ._modal-slot .card-slot[data-modal-origin-slot-id]")
+                        .data("modal-origin-slot-id")
+    @find(".modal-body .card-slot").attr("data-modal-origin-slot-id", origin_slot_id)
+
+  modalSlot: ->
+    slot = $("#modal-container")
+    if slot.length > 0 then slot else decko.createModalSlot()
+
+  modalify: ($slotter) ->
+    if $slotter.data("modal-body")?
+      @find(".modal-body").append($slotter.data("modal-body"))
+
+    if @hasClass("_modal-slot")
+      this
+    else
+      modalSlot = $('<div/>', id: "modal-container", class: "modal fade _modal-slot")
+      modalSlot.append(
+        $('<div/>' , class: "modal-dialog").append(
+          $('<div/>', class: "modal-content").append(this)
+        )
+      )
+      modalSlot
+}
+
+$.extend decko,
+  createModalSlot: ->
+    slot = $('<div/>', id: "modal-container", class: "modal fade _modal-slot")
+    $("body").append(slot)
+    slot
+
+  removeModal: ->
+    if $("._modal-stack")[0]
+      decko.popModal()
+    else
+      $("._modal-slot").trigger "decko.slot.destroy"
+      $(".modal-dialog").empty()
+
+  pushModal: (el) ->
+    mslot = $("body > ._modal-slot")
+    mslot.removeAttr("id")
+    mslot.removeClass("_modal-slot").addClass("_modal-stack").removeClass("modal").addClass("background-modal")
+    el.insertBefore mslot
+    $(".modal-backdrop").removeClass("show")
+
+  popModal: ->
+    $(".modal-backdrop").addClass("show")
+    $("body > ._modal-slot").trigger "decko.slot.destroy"
+    $("body > ._modal-slot").remove()
+    modal = $($("._modal-stack")[0])
+    modal.addClass("_modal-slot").removeClass("_modal-stack").attr("id", "modal-container").addClass("modal").removeClass("background-modal")
+    $(document.body).addClass("modal-open")
+

data/assets/script/overlay.js.coffee

@@ -0,0 +1,54 @@
+jQuery.fn.extend
+  overlaySlot: ->
+    oslot = @closest(".card-slot._overlay")
+    return oslot if oslot[0]?
+    oslot = @closest(".overlay-container").find("._overlay")
+    oslot[0]? && $(oslot[0])
+
+  addOverlay: (overlay, $slotter) ->
+    if @parent().hasClass("overlay-container")
+      if $(overlay).hasClass("_stack-overlay")
+        @before overlay
+      else
+        $("._overlay-origin").removeClass("_overlay-origin")
+        @replaceOverlay(overlay)
+    else
+      if @parent().hasClass("_overlay-container-placeholder")
+        @parent().addClass("overlay-container")
+      else
+        @wrapAll('<div class="overlay-container">')
+      @addClass("_bottomlay-slot")
+      @before overlay
+
+    $slotter.registerAsOrigin("overlay", overlay)
+    decko.contentLoaded(overlay, $slotter)
+
+  replaceOverlay: (overlay) ->
+    @overlaySlot().trigger "decko.slot.destroy"
+    @overlaySlot().replaceWith overlay
+    $(".bridge-sidebar .tab-pane:not(.active) .bridge-pills > .nav-item > .nav-link.active").removeClass("active")
+
+  isInOverlay: ->
+    return @closest(".card-slot._overlay").length
+
+  removeOverlay: () ->
+      slot = @overlaySlot()
+      if slot
+        slot.removeOverlaySlot()
+
+  removeOverlaySlot: () ->
+    @trigger "decko.slot.destroy"
+    if @siblings().length == 1
+      bottomlay = $(@siblings()[0])
+      if bottomlay.hasClass("_bottomlay-slot")
+        if bottomlay.parent().hasClass("_overlay-container-placeholder")
+          bottomlay.parent().removeClass("overlay-container")
+        else
+          bottomlay.unwrap()
+        bottomlay.removeClass("_bottomlay-slot").updateBridge(true, bottomlay)
+
+        #bottomlay.find(".tinymce-textarea").each ->
+        #  tinymce.EditorManager.execCommand('mceAddControl',true, editor_id);
+        #  decko.initTinyMCE($(this).attr("id"))
+
+    @remove()

data/assets/style/layout.scss

@@ -0,0 +1,103 @@
+.d0-nav-container {
+  flex-wrap: inherit;
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+}
+
+
+/*----------- Sidebar -------------*/
+
+.row.row-offcanvas {
+  > aside, article {
+    margin: 0;
+  }
+}
+
+/* collapsed sidebar styles */
+@media screen and (max-width: 576px) {
+  .row-offcanvas {
+    position: relative;
+    -webkit-transition: all 0.25s ease-out;
+    -moz-transition: all 0.25s ease-out;
+    transition: all 0.25s ease-out;
+  }
+
+  .sidebar-offcanvas-right {
+    right: -41.6%;
+  }
+
+  .sidebar-offcanvas-left {
+    left: -41.6%;
+  }
+  .row-offcanvas.right-active {
+    right: 41.6%;
+  }
+  .row-offcanvas.left-active {
+    left: 41.6%;
+  }
+  .sidebar-offcanvas {
+    position: absolute !important;
+    top: 0 !important;
+    width: 41.6% !important;
+  }
+}
+
+.offcanvas-toggle {
+  font-size: 10px !important;
+  padding: 5px !important;
+  margin-bottom: 15px !important;
+}
+
+.act-summary {
+  min-width: 27px;
+}
+
+
+footer .separator {
+  padding-left: 2px;
+  padding-right: 2px;
+}
+
+body.right-sidebar, body.left-sidebar, body.two-sidebar {
+  article, #primary {
+    margin: 0 1% 3em 1%;
+    float: left;
+    width: 67%;
+  }
+
+  aside, #secondary {
+    margin: 0 1% 3em 1%;
+    float: right;
+    width: 28%;
+  }
+
+  footer {
+    clear:both;
+    text-align: center;
+    padding: 1em;
+  }
+}
+
+@media print {
+  article, #primary {
+    width: 100%;
+    float: none;
+    margin: 0;
+  }
+
+  aside, #secondary, footer {
+    display: none;
+  }
+}
+
+.RIGHT-Xenabled_role.edit_inline-view {
+  .pointer-checkbox-list {
+    #pointer-checkbox-anyone_signed_in {
+      display: none;
+    }
+  }
+  .card-editor {
+    padding-bottom: 0;
+  }
+}

data/assets/style/modal.scss

@@ -0,0 +1,42 @@
+.background-modal {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 900;
+  outline: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.modal-menu .close{
+  font-size: 16px;
+  // margin-left: 10px;
+}
+
+.modal-dialog.modal-full {
+  max-width: 99%;
+  margin: 1%;
+}
+
+
+.modal-backdrop.in {
+  z-index: auto;
+}
+
+.modal-body > div {
+  display: inline-block;
+  width: 100%;
+
+  .menu-slot {
+    z-index: 1;
+  }
+}
+
+
+/*------ bootstrap 5 --------*/
+
+.modal-header .btn-close {
+  background: none;
+}

data/assets/style/overlay.scss

@@ -0,0 +1,51 @@
+/*-------------------------- */
+/*- Overlay                - */
+/*-------------------------- */
+
+.overlay-container {
+  position: relative;
+  height: 100%;
+  overflow: auto;
+  .card-slot.overlay_rule-view {
+    border-left: 5px solid $primary;
+  }
+
+  .d0-card-overlay
+  > .d0-card-frame
+  > .d0-card-content {
+    overflow-y: scroll;
+    padding: 1rem 1.5rem; // px-4
+  }
+}
+
+
+.d0-card-overlay {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: 10;
+
+  > .d0-card-frame {
+    height: 100%;
+    width: 100%;
+
+    > .d0-card-header {
+      border-bottom: 1px solid $border-color;
+      padding: 0.25rem 0.25rem 0.25rem 1.25rem;
+      .title {
+        font-weight: bold;
+        text-transform: capitalize;
+      }
+      .card-title {
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+
+// FIXME: this directly overrides above rule.
+
+.d0-card-overlay > .d0-card-frame > .d0-card-header {
+  padding-left: -15px!important;
+  padding-right: -15px!important;
+}

data/data/files/mod_layout_script_asset_output/file.js

@@ -0,0 +1,6 @@
+// layout.js.coffee
+(function(){var a,e,t,s,o,i,n;i=function(){var e;if(e=$("body > footer").first(),$("body > article, body > aside").wrapAll("<div class='"+a()+"'/>"),$("body > div > article, body > div > aside").wrapAll('<div class="row row-offcanvas">'),e)return $("body").append(e)},n=function(a,e){return"<div class='container'><div class='row "+e+"'>"+a+"</div></div>"},a=function(){return $("body").hasClass("fluid")?"container-fluid":"container"},o=function(a){return"<button class='offcanvas-toggle btn btn-secondary d-sm-none' data-toggle='offcanvas-"+a+"'><i class='material-icons'>chevron_"+("left"===a?"right":"left")+"</i></button>"},t=function(a){return"both"===a?n(o("left")+o("right"),"flex-row justify-content-between"):"left"===a?n(o("left"),"flex-row"):n(o("right"),"flex-row-reverse")},s=function(a){var e,s;return e=$("body > article").first(),s=$("body > aside").first(),e.addClass("col-xs-12 col-sm-9"),s.addClass("col-xs-6 col-sm-3 sidebar-offcanvas sidebar-offcanvas-"+a),"left"===a?$("body").append(s).append(e):$("body").append(e).append(s),i(),e.prepend(t(a))},e=function(){var a,e,s,o,n;return a=$("body > article").first(),e=$("body > aside").first(),s=$($("body > aside")[1]),a.addClass("col-xs-12 col-sm-6"),o="col-xs-6 col-sm-3 sidebar-offcanvas",e.addClass(o+" sidebar-offcanvas-left"),s.addClass(o+" sidebar-offcanvas-right"),$("body").append(e).append(a).append(s),i(),n=t("both"),a.prepend(n)},$.fn.extend({toggleText:function(a,e){return this.text(this.text()===e?a:e),this}}),$(window).ready(function(){switch(!1){case!$("body").hasClass("right-sidebar"):s("right");break;case!$("body").hasClass("left-sidebar"):s("left");break;case!$("body").hasClass("two-sidebar"):e()}return $('[data-toggle="offcanvas-left"]').click(function(){return $(".row-offcanvas").removeClass("right-active").toggleClass("left-active"),$(this).find("i.material-icons").toggleText("chevron_left","chevron_right")}),$('[data-toggle="offcanvas-right"]').click(function(){return $(".row-offcanvas").removeClass("left-active").toggleClass("right-active"),$(this).find("i.material-icons").toggleText("chevron_left","chevron_right")})})}).call(this);
+// modal.js.coffee
+(function(){var o,d;$(window).ready(function(){return $("body").on("hidden.bs.modal",function(){return decko.removeModal()}),$("body").on("show.bs.modal","._modal-slot",function(d){var a;return a=$(d.relatedTarget),o($(this),a),$(this).modal("handleUpdate"),decko.contentLoaded($(d.target),a)}),$("._modal-slot").each(function(){return d($(this)),o($(this))}),$("body").on("click",".submit-modal",function(){return $(this).closest(".modal-content").find("form").submit()})}),d=function(o){var d;if((d=o.find(".modal-content")).length>0&&d.html().length>0)return $("#main > .card-slot").registerAsOrigin("modal",o),o.modal("show")},o=function(o,d){var a,l;if(l=o.find(".modal-dialog"),null!=(a=null!=d?d.data("modal-class"):o.data("modal-class"))&&null!=l)return l.addClass(a)},jQuery.fn.extend({showAsModal:function(o){var d;return null!=o&&(d=this.modalify(o)),$("body > ._modal-slot").is(":visible")?this.addModal(d,o):($("body > ._modal-slot")[0]?($("._modal-slot").trigger("decko.slot.destroy"),$("body > ._modal-slot").replaceWith(d)):$("body").append(d),o.registerAsOrigin("modal",d),d.modal("show",o))},addModal:function(d,a){var l;return"modal-replace"===a.data("slotter-mode")?(o(d,a),l=d.find(".modal-dialog"),d.adoptModalOrigin(),$("._modal-slot").trigger("decko.slot.destroy"),$("body > ._modal-slot > .modal-dialog").replaceWith(l),decko.contentLoaded(l,a)):(decko.pushModal(d),a.registerAsOrigin("modal",d),d.modal("show",a))},adoptModalOrigin:function(){var o;return o=$("body > ._modal-slot .card-slot[data-modal-origin-slot-id]").data("modal-origin-slot-id"),this.find(".modal-body .card-slot").attr("data-modal-origin-slot-id",o)},modalSlot:function(){var o;return(o=$("#modal-container")).length>0?o:decko.createModalSlot()},modalify:function(o){var d;return null!=o.data("modal-body")&&this.find(".modal-body").append(o.data("modal-body")),this.hasClass("_modal-slot")?this:((d=$("<div/>",{id:"modal-container","class":"modal fade _modal-slot"})).append($("<div/>",{"class":"modal-dialog"}).append($("<div/>",{"class":"modal-content"}).append(this))),d)}}),$.extend(decko,{createModalSlot:function(){var o;return o=$("<div/>",{id:"modal-container","class":"modal fade _modal-slot"}),$("body").append(o),o},removeModal:function(){return $("._modal-stack")[0]?decko.popModal():($("._modal-slot").trigger("decko.slot.destroy"),$(".modal-dialog").empty())},pushModal:function(o){var d;return(d=$("body > ._modal-slot")).removeAttr("id"),d.removeClass("_modal-slot").addClass("_modal-stack").removeClass("modal").addClass("background-modal"),o.insertBefore(d),$(".modal-backdrop").removeClass("show")},popModal:function(){return $(".modal-backdrop").addClass("show"),$("body > ._modal-slot").trigger("decko.slot.destroy"),$("body > ._modal-slot").remove(),$($("._modal-stack")[0]).addClass("_modal-slot").removeClass("_modal-stack").attr("id","modal-container").addClass("modal").removeClass("background-modal"),$(document.body).addClass("modal-open")}})}).call(this);
+// overlay.js.coffee
+(function(){jQuery.fn.extend({overlaySlot:function(){var e;return null!=(e=this.closest(".card-slot._overlay"))[0]?e:null!=(e=this.closest(".overlay-container").find("._overlay"))[0]&&$(e[0])},addOverlay:function(e,r){return this.parent().hasClass("overlay-container")?$(e).hasClass("_stack-overlay")?this.before(e):($("._overlay-origin").removeClass("_overlay-origin"),this.replaceOverlay(e)):(this.parent().hasClass("_overlay-container-placeholder")?this.parent().addClass("overlay-container"):this.wrapAll('<div class="overlay-container">'),this.addClass("_bottomlay-slot"),this.before(e)),r.registerAsOrigin("overlay",e),decko.contentLoaded(e,r)},replaceOverlay:function(e){return this.overlaySlot().trigger("decko.slot.destroy"),this.overlaySlot().replaceWith(e),$(".bridge-sidebar .tab-pane:not(.active) .bridge-pills > .nav-item > .nav-link.active").removeClass("active")},isInOverlay:function(){return this.closest(".card-slot._overlay").length},removeOverlay:function(){var e;if(e=this.overlaySlot())return e.removeOverlaySlot()},removeOverlaySlot:function(){var e;return this.trigger("decko.slot.destroy"),1===this.siblings().length&&(e=$(this.siblings()[0])).hasClass("_bottomlay-slot")&&(e.parent().hasClass("_overlay-container-placeholder")?e.parent().removeClass("overlay-container"):e.unwrap(),e.removeClass("_bottomlay-slot").updateBridge(!0,e)),this.remove()}})}).call(this);

data/data/real.yml

@@ -0,0 +1,143 @@
+---
+- :name: Layout
+  :type: :cardtype
+  :codename: layout_type
+  :fields:
+    :description: Organize webpages. [[http://decko.org/Layout|more]]
+    :type:
+      :fields:
+        :create: Shark
+        :update: Shark
+        :delete: Shark
+
+- :name: "*layout"
+  :type: :setting
+  :codename: layout
+  :fields:
+    :right:
+      :fields:
+        :input_type: select
+        :content_options:
+          :codename: layout_options
+          :type: :search_type
+
+- :name:
+    - :all
+    - :layout
+  :type: :pointer
+  :content: Default Layout
+
+- :name: "*main menu"
+  :type: :link_list
+  :content: "[[:recent|Recent Changes]]"
+  :codename: main_menu
+  :conflict: :defer
+  :fields:
+    :self:
+      :fields:
+        :read: Anyone
+
+- :name: "*header"
+  :type: :html
+  :codename: header
+  :fields:
+    :self:
+      :fields:
+        :read: Anyone
+  :content: |
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-3 nodblclick">
+      <div class="container">
+        <div class="d0-nav-container">
+          <div class="d-flex">
+            <a class="nav-logo navbar-brand" href="{{:home|home_path}}">
+              {{:logo|core;size:small}}
+            </a>
+            <a class="navbar-brand" href="{{:home|home_path}}">{{:title|core}}</a>
+          </div>
+          <button class="navbar-toggler" type="button" aria-label="Toggle navigation"
+                  aria-controls="d0-navbar" aria-expanded="false"
+                  data-bs-toggle="collapse" data-bs-target="#d0-navbar">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <div class="collapse navbar-collapse" id="d0-navbar">
+            <ul class="navbar-nav mr-auto main-nav ms-2">{{:main_menu|navbar_links}}</ul>
+            <div class="navbar-nav search-box-nav mx-2">{{:search|search_box}}</div>
+            {{:account_links|navbar_links}}
+          </div>
+        </div>
+      </div>
+    </nav>
+
+- :name: "*footer"
+  :codename: footer
+  :type: :html
+  :content: |-
+    <div class="d-flex justify-content-center align-items-center">
+      {{:credit|core}}
+    </div>
+
+- :name: "*sidebar"
+  :codename: sidebar
+  :content: |-
+    <div>[[/ | {{:logo|content_panel}}]]</div>
+    <div>{{:sidebar_menu|titled}}</div>
+  :fields:
+    :right:
+      :fields:
+        :read: Anyone
+
+- :name: Menu
+  :codename: sidebar_menu
+  :content: "<p>[[/?view=new|Add a card]]</p>"
+
+- :name: Default Layout
+  :codename: default_layout
+  :type: :layout_type
+  :content: |-
+    <body class="d-flex flex-column h-100">
+      <header>{{:header|core}}</header>
+      <article class="container flex-shrink-0" role="main">{{_main|titled}}</article>
+      <footer class="footer mt-auto py-3">{{:footer|content}}</footer>
+    </body>
+
+- :name: Full Width Layout
+  :codename: full_layout
+  :type: :layout_type
+  :content: |-
+    <body class="fluid d-flex flex-column h-100">
+      <header>{{:header|core}}</header>
+      <article class="container flex-shrink-0" role="main">{{_main|titled}}</article>
+      <footer class="footer mt-auto py-3">{{:footer|core}}</footer>
+    </body>
+
+- :name: Home Layout
+  :codename: home_layout
+  :type: :layout_type
+  :content: |-
+    <body class="d-flex flex-column h-100">
+      <header>{{:header|core}}</header>
+      <article class="container flex-shrink-0" role="main">{{_main|content}}</article>
+      <footer class="footer mt-auto py-3">{{:footer|content}}</footer>
+    </body>
+
+- :name: Right Thin Sidebar Layout
+  :codename: right_thin_sidebar_layout
+  :type: :layout_type
+  :content: |-
+    <body class="right-sidebar thin-sidebar d-flex flex-column h-100">
+      <header>{{:header|core}}</header>
+      <article class="container flex-shrink-0" role="main">{{_main|titled}}</article>
+      <aside>{{:sidebar|content}}</aside>
+      <footer class="footer mt-auto py-3">{{:footer|core}}</footer>
+    </body>
+
+- :name: Left Sidebar Layout
+  :codename: left_sidebar_layout
+  :type: :layout_type
+  :content: |-
+    <body class="left-sidebar">
+      <header>{{:header|core}}</header>
+      <article>{{_main|titled}}</article>
+      <aside>{{:sidebar|core}}</aside>
+      <footer>{{:footer|core}}</footer>
+    </body>

data/data/test.yml

@@ -0,0 +1,18 @@
+---
+- :name: lay out
+  :type: :layout_type
+  :content: 'Greatest {{_main|title: Callahan!; view: labeled}}'
+- :name: stacks
+  :type: :list
+  :content: |-
+    horizontal
+    vertical
+- :name:
+  - stacks
+  - :self
+  - :layout
+  :type: :pointer
+  :content: lay out
+- :name: horizontal
+- :name: vertical
+  :type: :pointer

data/set/abstract/account_dropdown.rb

@@ -5,14 +5,27 @@ format :html do
   end
 
   def account_dropdown &render_role_item
-    split_button link_to_mycard, nil do
+    class_up "dropdown-toggle-split", "nav-link"
+    split_dropdown_button link_to_mycard do
       [
-        link_to_card([Auth.current, :account_settings], "Account"),
-        (["Roles", role_items(&render_role_item)] if special_roles?)
-      ]
+        [[Auth.current, :account_settings], "Account"],
+        [:signin, t("account_sign_out"), { path: { action: :delete } }]
+      ] + account_dropdown_roles(&render_role_item)
     end
   end
 
+  private
+
+  def account_dropdown_roles &block
+    return [] unless special_roles?
+
+    [dropdown_header("Roles")] + account_dropdown_role_items(&block)
+  end
+
+  def account_dropdown_role_items
+    Auth.current_roles.map { |role| block_given? ? yield(role) : [role] }
+  end
+
   def special_roles?
     Auth.current_roles.size > 1
   end

data/set/all/alert.rb

@@ -15,9 +15,7 @@ format :html do
   end
 
   def alert_close_button
-    wrap_with :button, type: "button", "data-dismiss": "alert",
-                       class: "close", "aria-label": "Close" do
-      wrap_with :span, "×", "aria-hidden" => true
-    end
+    wrap_with :button, "", type: "button", "data-bs-dismiss": "alert",
+                           class: "btn-close", "aria-label": "Close"
   end
 end

data/set/all/layouts.rb

@@ -22,7 +22,7 @@ format :html do
       <<-HTML.strip_heredoc
         <header>#{nest :header, view: :core}</header>
         <article>#{layout_nest}</article>
-        <footer>{nest :footer, view: :core}</footer>
+        <footer>#{nest :footer, view: :core}</footer>
       HTML
     end
   end
@@ -33,7 +33,7 @@ format :html do
         <header>#{nest :header, view: :core}</header>
         <article>#{layout_nest}</article>
         <aside>#{nest :sidebar, view: :core}</aside>
-        <footer>{nest :footer, view: :core}</footer>
+        <footer>#{nest :footer, view: :core}</footer>
       HTML
     end
   end

data/set/all/modal/modal_dialog.haml

@@ -1,10 +1,16 @@
-#modal-container.modal.fade._modal-slot{role: "dialog", "data-backdrop": "static"}
-  -# .modal-dialog
+#modal-container.modal.fade._modal-slot{ role: "dialog" }
+  //, "data-backdrop": "static"}
   %div{class: classes}
     .modal-content
-      .modal-header.clearfix
+      .modal-header
         = title
-        = menu if voo.show? :menu
+        - if voo.show? :modal_menu
+          = menu
+        -# - else
+        -#   else
+        -#   %button.btn-close{ type: "button",
+        -#                      "data-bs-dismiss": "modal",
+        -#                      "aria-label": "Close" }
       .modal-body
         = body
       - if footer.present?

data/set/all/modal.rb

@@ -1,6 +1,7 @@
 format :html do
-  MODAL_SIZE = { small: "sm", medium: nil, large: "lg", full: "full" }.freeze
-  MODAL_CLOSE_OPTS = { "data-dismiss": "modal",
+  MODAL_SIZE = { small: "sm", medium: nil, large: "lg",  full: "full", xl: "xl" }.freeze
+  MODAL_CLOSE_OPTS = { type: "button",
+                       "data-bs-dismiss": "modal",
                        "data-cy": "close-modal" }.freeze
 
   wrapper :modal do |opts={}|
@@ -11,28 +12,6 @@ format :html do
                         footer: normalize_modal_option(:footer, opts)
   end
 
-  def normalize_modal_option key, opts
-    val = opts[key]
-    return render("modal_#{key}") unless val
-
-    cast_model_option val
-  end
-
-  def cast_model_option val
-    case val
-    when Symbol
-      cast_model_option_symbol val
-    when Proc
-      val.call(self)
-    else
-      val
-    end
-  end
-
-  def cast_model_option_symbol val
-    respond_to?(val) ? send(val) : val
-  end
-
   view :modal, wrap: :modal do
     ""
   end
@@ -57,7 +36,7 @@ format :html do
     [close_modal_window, pop_out_modal_window]
   end
 
-  wrapper :modal_menu, :div, class: "modal-menu ml-auto"
+  wrapper :modal_menu, :div, class: "modal-menu _modal-menu ms-auto"
 
   view :modal_title, unknown: true do
     ""
@@ -65,8 +44,8 @@ format :html do
 
   view :modal_footer, unknown: true do
     button_tag "Close",
-               class: "btn-xs _close-modal float-right",
-               "data-dismiss" => "modal"
+               class: "btn-xs _close-modal float-end",
+               "data-bs-dismiss" => "modal"
   end
 
   view :modal_link do
@@ -105,16 +84,42 @@ format :html do
   end
 
   def normalize_modal_size_class size
-    size.in?(MODAL_SIZE.keys) ? size : cast_model_option(size)
+    size.in?(MODAL_SIZE.keys) ? size : cast_modal_option(size)
   end
 
   def close_modal_window
     link_to icon_tag(:close), path: "",
-                              class: "_close-modal close",
-                              "data-dismiss": "modal"
+                              class: "_close-modal btn-close",
+                              "data-bs-dismiss": "modal"
   end
 
   def pop_out_modal_window
-    link_to icon_tag(:new_window), path: {}, class: "pop-out-modal close"
+    return unless card.known?
+
+    link_to icon_tag(:new_window), path: {}, class: "pop-out-modal btn-close"
+  end
+
+  private
+
+  def normalize_modal_option key, opts
+    val = opts[key]
+    return render("modal_#{key}") unless val
+
+    cast_modal_option val
+  end
+
+  def cast_modal_option val
+    case val
+    when Symbol
+      cast_modal_option_symbol val
+    when Proc
+      val.call(self)
+    else
+      val
+    end
+  end
+
+  def cast_modal_option_symbol val
+    respond_to?(val) ? send(val) : val
   end
 end

data/set/all/navbar_links.rb

@@ -44,7 +44,7 @@ format :html do
 
   def dropdown_toggle_link
     link_to(render_title, href: "#", class: "nav-link dropdown-toggle",
-                          "data-toggle": "dropdown")
+                          "data-bs-toggle": "dropdown")
   end
 
   def dropdown_menu

data/set/all/overlay.rb

@@ -1,11 +1,11 @@
 format :html do
   OVERLAY_CLOSE_OPTS = { class: "_close-overlay btn-sm",
-                         "data-dismiss": "overlay",
+                         "data-bs-dismiss": "overlay",
                          type: "button" }.freeze
 
   wrapper :overlay do |opts|
     class_up "card-slot", "_overlay d0-card-overlay bg-body", :single_use
-    @content_body = true
+    @set_keys = true
     voo.hide! :menu
     overlay_frame true, overlay_header(opts[:title]), opts[:slot] do
       interior
@@ -21,7 +21,7 @@ format :html do
   end
 
   view :overlay_menu do
-    wrap_with :div, class: "btn-group btn-group-sm align-self-start ml-auto" do
+    wrap_with :div, class: "btn-group btn-group-sm align-self-start ms-auto" do
       [render_overlay_help_link, slotify_overlay_link, close_overlay_link]
     end
   end
@@ -48,7 +48,7 @@ format :html do
   end
 
   def close_overlay_link
-    overlay_menu_link :close, path: "#", "data-dismiss": "overlay"
+    overlay_menu_link :close, path: "#", "data-bs-dismiss": "overlay"
   end
 
   def overlay_close_button link_text="Close", opts={}
@@ -68,7 +68,7 @@ format :html do
   end
 
   def overlay_menu_link icon, args={}
-    add_class args, "border-light text-dark p-1 ml-1"
+    add_class args, "border-light text-dark p-1 ms-1"
     button_link fa_icon(icon, class: "fa-lg"), args.merge(btn_type: "outline-secondary")
   end
 

data/set/all/process_layout.rb

@@ -56,7 +56,7 @@ format :html do
   end
 
   def layout_name_from_rule
-    card.rule_card(:layout)&.try :item_name
+    card.rule_card(:layout)&.try :first_name
   end
 
   def render_outside_of_layout view, args

data/set/right/enabled_roles/role_checkbox.haml

@@ -1,4 +1,4 @@
-.pointer-checkbox
+.pointer-checkbox.dropdown-item
   = check_box_tag "pointer_checkbox-#{unique_id}", option_name, checked,
-                  id: id, class: "pointer-checkbox-button _submit-on-change"
+                  id: id, class: "pointer-checkbox-button _submit-on-change me-2"
   = link_to_card option_name

data/set/right/enabled_roles.rb

@@ -1,5 +1,7 @@
 include_set Abstract::AccountDropdown
 
+assign_type :session
+
 def ok_to_read
   true
 end

data/set/right/layout.rb

@@ -0,0 +1 @@
+assign_type :pointer

data/set/self/account_links.rb

@@ -5,6 +5,8 @@ def ok_to_read
 end
 
 format :html do
+  delegate :signed_in?, to: Card::Auth
+
   view :core, cache: :never do
     status_class = Auth.signed_in? ? "logged-in" : "logged-out"
     wrap_with :div, id: "logging", class: status_class do
@@ -14,47 +16,45 @@ format :html do
 
   def navbar_items
     # removed invite for now
-    links =
-      %i[my_card sign_out sign_up sign_in].map do |link_view|
-        render link_view
-      end.compact
+    navbar_item_views.map do |link_view|
+      rendered = render link_view
+      wrap_with_nav_item rendered if rendered
+    end.compact
+  end
 
-    links.map do |link|
-      wrap_with_nav_item link
-    end
+  def navbar_item_views
+    %i[my_card sign_out sign_up sign_in]
   end
 
-  def self.link_options opts={}, &block
-    options = { denial: :blank, cache: :never }.merge opts
-    options[:perms] = block if block_given?
-    options.clone
+  def self.link_options perms
+    { denial: :blank, cache: :never, perms: perms }
   end
 
-  view :sign_up, link_options(&:show_signup_link?) do
+  view :sign_up, link_options(:show_signup_link?) do
     link_to_card :signup, account_link_text(:sign_up),
                  class: nav_link_class("signup-link"),
                  path: { action: :new, mark: :signup }
   end
 
-  view(:sign_in, link_options { !Auth.signed_in? }) do
+  view :sign_in, link_options(:not_signed_in?) do
     link_to_card :signin, account_link_text(:sign_in),
                  class: nav_link_class("signin-link")
   end
 
-  view(:sign_out, link_options { Auth.signed_in? }) do
+  view :sign_out, link_options(:signed_in?) do
     link_to_card :signin, account_link_text(:sign_out),
                  class: nav_link_class("signout-link"),
                  path: { action: :delete }
   end
 
-  view :invite, link_options(&:show_invite_link?) do
+  view :invite, link_options(:show_invite_link?) do
     link_to_card :signup, account_link_text(:invite),
                  class: nav_link_class("invite-link"),
                  path: { action: :new, mark: :signup }
   end
 
-  view(:my_card, link_options { Auth.signed_in? }) do
-    can_disable_roles? ? interactive_roles_dropdown : simple_roles_dropdown
+  view :my_card, link_options(:signed_in?) do
+    can_disable_roles? ? interactive_roles_dropdown : account_dropdown
   end
 
   def interactive_roles_dropdown
@@ -62,10 +62,6 @@ format :html do
          view: :edit_inline, hide: %i[edit_inline_buttons name_formgroup]
   end
 
-  def simple_roles_dropdown
-    account_dropdown(&method(:link_to_card))
-  end
-
   def enabled_roles_card
     Auth.current.fetch :enabled_roles, new: { type_id: SessionID }
   end
@@ -87,8 +83,12 @@ format :html do
     "nav-link #{classy(type)}"
   end
 
+  def not_signed_in?
+    !Auth.signed_in?
+  end
+
   def show_signup_link?
-    !Auth.signed_in? && Card.new(type_id: SignupID).ok?(:create)
+    not_signed_in? && Card.new(type: :signup).ok?(:create)
   end
 
   def show_invite_link?

data/set/self/dropdown_divider.rb

@@ -1,3 +1,5 @@
+# DEPRECATED!
+
 format :html do
   view :nav_item do
     wrap_with :div, "", class: "dropdown-divider"

data/set/self/layout_options.rb

@@ -0,0 +1,3 @@
+def item_names _args={}
+  Card.search(type: :layout) + Card::Layout.built_in_layouts
+end

data/set/type/html.rb

@@ -7,8 +7,4 @@ format :html do
       end.join "\n"
     end
   end
-
-  def item_links _args={}
-    raw(render_core).split(/[,\n]/)
-  end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: card-mod-layout
 version: !ruby/object:Gem::Version
-  version: 0.14.2
+  version: 0.15.0
 platform: ruby
 authors:
 - Ethan McCutchen
@@ -10,7 +10,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-01-08 00:00:00.000000000 Z
+date: 2023-01-04 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: card
@@ -18,42 +18,56 @@ dependencies:
     requirements:
     - - '='
       - !ruby/object:Gem::Version
-        version: 1.104.2
+        version: 1.105.0
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - '='
       - !ruby/object:Gem::Version
-        version: 1.104.2
+        version: 1.105.0
 - !ruby/object:Gem::Dependency
   name: card-mod-account
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - '='
       - !ruby/object:Gem::Version
-        version: 0.14.2
+        version: 0.15.0
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - '='
       - !ruby/object:Gem::Version
-        version: 0.14.2
+        version: 0.15.0
 - !ruby/object:Gem::Dependency
   name: card-mod-session
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - '='
       - !ruby/object:Gem::Version
-        version: 0.14.2
+        version: 0.15.0
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - '='
       - !ruby/object:Gem::Version
-        version: 0.14.2
+        version: 0.15.0
+- !ruby/object:Gem::Dependency
+  name: card-mod-tabs
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - '='
+      - !ruby/object:Gem::Version
+        version: 0.15.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - '='
+      - !ruby/object:Gem::Version
+        version: 0.15.0
 description: ''
 email:
 - info@decko.org
@@ -61,6 +75,15 @@ executables: []
 extensions: []
 extra_rdoc_files: []
 files:
+- assets/script/layout.js.coffee
+- assets/script/modal.js.coffee
+- assets/script/overlay.js.coffee
+- assets/style/layout.scss
+- assets/style/modal.scss
+- assets/style/overlay.scss
+- data/files/mod_layout_script_asset_output/file.js
+- data/real.yml
+- data/test.yml
 - lib/card/layout.rb
 - lib/card/layout/card_layout.rb
 - lib/card/layout/code_layout.rb
@@ -70,7 +93,7 @@ files:
 - locales/en.yml
 - set/abstract/account_dropdown.rb
 - set/abstract/items.rb
-- set/abstract/pointer.rb
+- set/abstract/list.rb
 - set/all/alert.rb
 - set/all/layouts.rb
 - set/all/modal.rb
@@ -79,17 +102,17 @@ files:
 - set/all/overlay.rb
 - set/all/overlay/overlay_header.haml
 - set/all/process_layout.rb
-- set/all/tabs.rb
 - set/right/enabled_roles.rb
 - set/right/enabled_roles/role_checkbox.haml
 - set/right/head.rb
+- set/right/layout.rb
 - set/self/account_links.rb
 - set/self/alerts.rb
 - set/self/dropdown_divider.rb
 - set/self/foot.rb
 - set/self/head.rb
 - set/self/layout.rb
-- set/self/navbox.rb
+- set/self/layout_options.rb
 - set/self/sidebar.rb
 - set/type/html.rb
 - set/type/layout_type.rb
@@ -103,6 +126,7 @@ metadata:
   wiki_uri: https://decko.org
   documentation_url: http://docs.decko.org/
   card-mod: layout
+  card-mod-group: gem-defaults
 post_install_message:
 rdoc_options: []
 require_paths:
@@ -118,7 +142,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.2.15
+rubygems_version: 3.3.11
 signing_key:
 specification_version: 4
 summary: decko layouts

data/set/all/tabs.rb

@@ -1,52 +0,0 @@
-format :html do
-  view :tabs do
-    construct_tabs "tabs"
-  end
-
-  def construct_tabs tab_type
-    tabs = { active: {}, paths: {} }
-    voo.items[:view] ||= :content
-    card.each_item_name_with_options(_render_raw) do |name, options|
-      construct_tab tabs, name, options
-    end
-    tabs tabs[:paths], tabs[:active][:name], tab_type: tab_type, load: :lazy do
-      tabs[:active][:content]
-    end
-  end
-
-  def construct_tab tabs, name, explicit_options
-    tab_options = item_view_options explicit_options
-    tabs[:paths][name] = {
-      title: nest(name, view: :title, title: tab_options[:title]),
-      path: nest_path(name, tab_options).html_safe
-    }
-    return unless tabs[:active].empty?
-
-    tabs[:active] = { name: name, content: nest(name, tab_options) }
-  end
-
-  # def tab_title title, name
-  #   return name unless title
-  #   name.to_name.title title, @context_names
-  # end
-
-  view :pills do
-    construct_tabs "pills"
-  end
-
-  view :tabs_static do
-    construct_static_tabs "tabs"
-  end
-
-  view :pills_static do
-    construct_static_tabs "pills"
-  end
-
-  def construct_static_tabs tab_type
-    tabs = {}
-    card.item_cards.each do |item|
-      tabs[item.name] = nest item, item_view_options(args)
-    end
-    tabs tabs, nil, tab_type: tab_type
-  end
-end

data/set/self/navbox.rb

@@ -1,33 +0,0 @@
-format :html do
-  view :navbox, cache: :never do
-    select_tag "query[keyword]", "", class: "_navbox navbox form-control w-100",
-                                     placeholder: navbar_placeholder
-  end
-
-  view :navbar do
-    # FIXME: not bootstrap class here.
-    class_up "navbox-form", "form-inline"
-    render_core
-  end
-
-  view :core do
-    form_tag path(mark: :search), method: "get", role: "search",
-                                  class: classy("navbox-form", "nodblclick") do
-      wrap_with :div, class: "form-group w-100" do
-        render_navbox
-      end
-    end
-  end
-
-  # def initial_options
-  #   return "" unless (keyword = params.dig :query, :keyword)
-  #   options_for_select [keyword]
-  # end
-
-  # TODO: the more natural placeholder would be the content of the navbox card, no?
-  # Also, the forced division of "raw" and "core" should probably be replaced
-  # with a single haml template (for core view)
-  def navbar_placeholder
-    @placeholder ||= Card[:navbox, "*placeholder"]&.content || "Search"
-  end
-end