keystone_ui-blocks 0.1.0 → 0.2.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2a9effabb0c7a22247df585e2f60cf4ec1dfbd2256feeca4cfdeafc108bf170c
-  data.tar.gz: 01d24bf7544dbb1ab376e72edacf336f002b0ee815f13981fbe8cfacd1b196e5
+  metadata.gz: 7323dfd615c2e4738c0bdf5722585c72a84d2e025e50d9331b0b468078c006b5
+  data.tar.gz: 4b2c50a5e4e22c31915604c3ca73fb510f13e02d62b417b8d1e62e08570c6c17
 SHA512:
-  metadata.gz: 8ed0465e1674ddd075da1d207408dbeaa5e8d59c0e071a565efff1f0ddf2e02fc17a089132ed4e2cfdcda225b32a26758e5ffa9057c9e5743e03f38386d4ebd0
-  data.tar.gz: 62885b92e2be83b5a448b1f8c8d816d44ffa7637799270cefc0bc0b6a57b1df432330155be7ec530b6cfcc103f343f86bdc9b1e9f506bcd83e8e4ace0f10da77
+  metadata.gz: 3a532844033cc22da2548961f7a1215301088b6d643280c311b826d7448a9a0f63ec67f6bcff9764866733221acde3b26d41969f9a1f2ea73bf2040499fb5b06
+  data.tar.gz: 7152e5abc082918dc921616f4787900d5969810bd029a9f4cf42e631d266d664345b48c6f52af6297ca2aa2cdbb9a6bcc21917110e630d492685c5d0a9dbb14f

data/app/assets/stylesheets/ks_blocks.css

@@ -4,12 +4,14 @@
   gap: var(--ks-blocks-gap, 10px);
 }
 
-@media (max-width: 640px) {
-  .ks-blocks-layout {
-    display: block;
-  }
+.ks-blocks-layout > * {
+  grid-column: calc(var(--ks-block-x) + 1) / span var(--ks-block-w);
+  grid-row: calc(var(--ks-block-y) + 1) / span var(--ks-block-h);
+}
 
-  .ks-blocks-layout > * + * {
-    margin-top: var(--ks-blocks-gap, 10px);
+@media (max-width: 640px) {
+  .ks-blocks-layout > * {
+    grid-column: span var(--ks-block-narrow-w, var(--ks-blocks-columns, 12));
+    grid-row: span var(--ks-block-narrow-h, 1);
   }
 }

data/lib/keystone_ui/blocks/version.rb

@@ -2,6 +2,6 @@
 
 module KeystoneUi
   module Blocks
-    VERSION = "0.1.0"
+    VERSION = "0.2.1"
   end
 end

data/lib/ks_blocks/block_type.rb

@@ -1,6 +1,6 @@
 module KsBlocks
-  BlockType = Data.define(:key, :name, :width, :height, :min_width, :max_width, :min_height, :max_height, :resizable, :once, :full_width, :fixed, :description, :group, :fields) do
-    def initialize(key:, name:, width:, height:, min_width: 1, max_width: nil, min_height: 1, max_height: nil, resizable: true, once: false, full_width: false, fixed: false, description: nil, group: nil, fields: [])
+  BlockType = Data.define(:key, :name, :width, :height, :min_width, :max_width, :min_height, :max_height, :resizable, :once, :full_width, :fixed, :description, :group, :fields, :narrow_width, :narrow_height) do
+    def initialize(key:, name:, width:, height:, min_width: 1, max_width: nil, min_height: 1, max_height: nil, resizable: true, once: false, full_width: false, fixed: false, description: nil, group: nil, fields: [], narrow_width: nil, narrow_height: nil)
       super
     end
   end

data/lib/ks_blocks/layout.rb

@@ -15,7 +15,7 @@ module KsBlocks
         define_method(:place_blocks) do |positions, version: nil|
           raise InvalidLayout, "This layout changed since it was last drawn" if version && version != KsBlocks.version_of(public_send(column))
 
-          update!(column => Grid.place(public_send(column), positions, columns: columns, types: KsBlocks.registry.block_types(kind: kind)))
+          update!(column => Grid.place(public_send(column), positions, columns: columns, types: block_layout_types))
         end
 
         define_method(:fill_block) do |id, content|
@@ -23,13 +23,15 @@ module KsBlocks
         end
 
         define_method(:remove_block) do |id|
-          update!(column => Grid.remove(public_send(column), id, types: KsBlocks.registry.block_types(kind: kind)))
+          update!(column => Grid.remove(public_send(column), id, types: block_layout_types))
         end
 
-        define_method(:block_layout_kind) { kind }
+        define_method(:block_layout_kind) { kind.respond_to?(:call) ? kind.call(self) : kind }
+
+        define_method(:block_layout_types) { KsBlocks.registry.block_types(kind: block_layout_kind) }
 
         define_method(:layout_data) do
-          KsBlocks.layout_data(public_send(column), kind: kind, grid: { columns: columns, row_height: row_height, gap: gap })
+          KsBlocks.layout_data(public_send(column), kind: block_layout_kind, grid: { columns: columns, row_height: row_height, gap: gap })
         end
       end
     end

data/lib/ks_blocks/layout_helper.rb

@@ -5,7 +5,7 @@ module KsBlocks
   module LayoutHelper
     def block_layout(blocks, columns: Grid::COLUMNS, gap: Grid::GAP, kind: nil, &block)
       tag.div(class: "ks-blocks-layout", style: "--ks-blocks-columns: #{columns}; --ks-blocks-gap: #{gap}px") do
-        safe_join(block_layout_shown(blocks, kind).map { |placed| block_layout_block(placed, &block) })
+        safe_join(block_layout_shown(blocks, kind).map { |placed| block_layout_block(placed, block_layout_type(placed, kind), &block) })
       end
     end
 
@@ -16,8 +16,23 @@ module KsBlocks
       shown.sort_by { |placed| [ placed["y"], placed["x"] ] }
     end
 
-    def block_layout_block(placed, &block)
-      tag.div(capture(placed, &block), data: { block: placed["id"] }, style: "grid-column: #{placed['x'] + 1} / span #{placed['w']}; grid-row: #{placed['y'] + 1} / span #{placed['h']}")
+    def block_layout_type(placed, kind)
+      KsBlocks.registry.block_types(kind: kind || :blocks).find { |block_type| block_type.key.to_s == placed["type"] }
+    end
+
+    def block_layout_block(placed, block_type, &block)
+      tag.div(capture(placed, &block), data: { block: placed["id"] }, style: block_layout_placing(placed, block_type))
+    end
+
+    def block_layout_placing(placed, block_type)
+      "--ks-block-x: #{placed['x']}; --ks-block-y: #{placed['y']}; --ks-block-w: #{placed['w']}; --ks-block-h: #{placed['h']}" \
+        "#{block_layout_narrow(block_type)}"
+    end
+
+    def block_layout_narrow(block_type)
+      return "" if block_type&.narrow_width.nil?
+
+      "; --ks-block-narrow-w: #{block_type.narrow_width}; --ks-block-narrow-h: #{block_type.narrow_height || 1}"
     end
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: keystone_ui-blocks
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.2.1
 platform: ruby
 authors:
 - Tyler Schneider