glib-web 0.5.5

data/app/views/json_ui/garage/panels/split.json.jbuilder

@@ -0,0 +1,183 @@
+json.title 'Panels'
+
+json_ui_page json do |page|
+  render "#{@path_prefix}/nav_menu", json: json, page: page
+
+  page.scroll padding: glib_json_padding_body, childViews: ->(scroll) do
+
+    scroll.h1 text: '2 columns'
+    scroll.panels_split width: 'matchParent', content: ->(content) do
+      content.left childViews: ->(left) do
+        left.button text: '1'
+      end
+      content.right childViews: ->(right) do
+        right.button text: '2'
+      end
+    end
+
+    scroll.label text: "\n"
+    scroll.h1 text: '3 columns'
+    scroll.panels_split width: 'matchParent', content: ->(content) do
+      content.left childViews: ->(left) do
+        left.button text: '1'
+      end
+      content.center childViews: ->(center) do
+        center.button width: 'matchParent', text: '2'
+      end
+      content.right childViews: ->(right) do
+        right.button text: '3'
+      end
+    end
+
+    scroll.label text: "\n"
+    scroll.h1 text: 'Expandable left'
+    scroll.panels_split width: 'matchParent', content: ->(content) do
+      content.center childViews: ->(center) do
+        center.button width: 'matchParent', text: '1'
+      end
+      content.right childViews: ->(right) do
+        right.button text: '2'
+      end
+    end
+
+    scroll.label text: "\n"
+    scroll.h1 text: 'Expandable right'
+    scroll.panels_split width: 'matchParent', content: ->(content) do
+      content.left childViews: ->(left) do
+        left.button text: '1'
+      end
+      content.center childViews: ->(center) do
+        center.button width: 'matchParent', text: '2'
+      end
+    end
+
+    scroll.label text: "\n"
+    scroll.h1 text: 'Short center text'
+    scroll.panels_split width: 'matchParent', content: ->(content) do
+      content.left childViews: ->(left) do
+        left.button text: '1'
+      end
+      content.center childViews: ->(center) do
+        center.label text: 'short'
+      end
+      content.right childViews: ->(right) do
+        right.button text: '2'
+      end
+    end
+
+    scroll.label text: "\n"
+    scroll.h1 text: 'Long center text'
+    scroll.panels_split width: 'matchParent', content: ->(content) do
+      content.left childViews: ->(left) do
+        left.button text: '1'
+      end
+      content.center childViews: ->(center) do
+        center.label text: 'a very very very very very very very very very very very very very very very very very very very very very very very very very very very very long text'
+      end
+      content.right childViews: ->(right) do
+        right.button text: '2'
+      end
+    end
+
+    scroll.label text: "\n"
+    scroll.h1 text: 'Few center items'
+    scroll.panels_split width: 'matchParent', content: ->(content) do
+      content.left childViews: ->(left) do
+        left.button text: 'L'
+      end
+      content.center childViews: ->(center) do
+        center.panels_horizontal childViews: ->(h) do
+          h.button text: '1'
+          h.button text: '2'
+          h.button text: '3'
+        end
+      end
+      content.right childViews: ->(right) do
+        right.button text: 'R'
+      end
+    end
+
+    scroll.label text: "\n"
+    scroll.h1 text: 'Many center items'
+    scroll.panels_split width: 'matchParent', content: ->(content) do
+      content.left childViews: ->(left) do
+        left.button text: 'L'
+      end
+      content.center childViews: ->(center) do
+        center.panels_flow width: 'matchParent', backgroundColor: '#b3bac2', childViews: ->(h) do
+          (1..20).each do |index|
+            h.button text: index
+          end
+        end
+      end
+      content.right childViews: ->(right) do
+        right.button text: 'R'
+      end
+    end
+
+    scroll.label text: "\n"
+    scroll.h1 text: 'Center filled equally'
+    scroll.panels_split width: 'matchParent', content: ->(content) do
+      content.left childViews: ->(left) do
+        left.button text: 'L'
+      end
+      content.center childViews: ->(center) do
+        center.panels_horizontal width: 'matchParent', backgroundColor: '#b3bac2', distribution: 'fillEqually', childViews: ->(h) do
+          h.button text: '1'
+          h.button text: '2'
+          h.button text: '3'
+        end
+      end
+      content.right childViews: ->(right) do
+        right.button text: 'R'
+      end
+    end
+
+    scroll.label text: "\n"
+    scroll.h1 text: 'Center spaced equally'
+    scroll.panels_split width: 'matchParent', content: ->(content) do
+      content.left childViews: ->(left) do
+        left.button text: 'L'
+      end
+      content.center childViews: ->(center) do
+        center.panels_horizontal width: 'matchParent', backgroundColor: '#b3bac2', distribution: 'spaceEqually', childViews: ->(h) do
+          h.button text: '1'
+          h.button text: '2'
+          h.button text: '3'
+        end
+      end
+      content.right childViews: ->(right) do
+        right.button text: 'R'
+      end
+    end
+
+    scroll.label text: "\n"
+    scroll.h1 text: 'Combo 1'
+    scroll.panels_split width: 'matchParent', content: ->(content) do
+      content.left childViews: ->(left) do
+        left.label text: 'a very very very very very very very very very very very very very very very very very very very very very very very very very very very very long text'
+      end
+      content.right width: 120, backgroundColor: '#b3bac2', childViews: ->(right) do
+        right.panels_horizontal distribution: 'spaceEqually', childViews: ->(h) do
+          h.label text: 'Label One'
+          h.label text: 'Label Two'
+        end
+      end
+    end
+
+    scroll.label text: "\n"
+    scroll.h1 text: 'Combo 2'
+    scroll.panels_split width: 200, backgroundColor: '#b3bac2', padding: { right: 10 }, content: ->(content) do
+      content.left childViews: ->(left) do
+        left.button text: 'Big'
+      end
+      content.right childViews: ->(right) do
+        right.panels_horizontal height: 'matchParent', align: 'middle', childViews: ->(h) do
+          h.spacer width: 10
+          h.button text: 'small', styleClass: 'link'
+        end
+      end
+    end
+  end
+end
+

data/app/views/json_ui/garage/panels/vertical.json.jbuilder

@@ -0,0 +1,50 @@
+json.title 'Panels'
+
+json_ui_page json do |page|
+  render "#{@path_prefix}/nav_menu", json: json, page: page
+  
+  page.scroll padding: glib_json_padding_body, childViews: ->(scroll) do
+    scroll.h1 text: 'Basic'
+    scroll.panels_vertical backgroundColor: '#b3bac2', childViews: ->(panel) do
+      panel.button text: 'Button1'
+      panel.button text: 'Button2', width: 200
+      panel.button text: 'Button3', width: 300
+    end
+
+    scroll.label text: "\n"
+    scroll.h1 text: 'Equal filling'
+    scroll.panels_vertical backgroundColor: '#b3bac2', height: 300, distribution: 'fillEqually', childViews: ->(panel) do
+      panel.button text: 'Button1'
+      panel.button text: 'Button2'
+      panel.button text: 'Button3'
+    end
+
+    scroll.label text: "\n"
+    scroll.h1 text: 'Equal spacing'
+    scroll.panels_vertical backgroundColor: '#b3bac2', height: 300, distribution: 'spaceEqually', childViews: ->(panel) do
+      panel.button text: 'Button1'
+      panel.button text: 'Button2'
+      panel.button text: 'Button3'
+    end
+
+    scroll.label text: "\n"
+    scroll.h1 text: 'Alignments'
+    scroll.panels_vertical width: 'matchParent', backgroundColor: '#b3bac2', align: 'center', childViews: ->(panel) do
+      panel.button text: 'Center'
+    end
+    scroll.panels_vertical width: 'matchParent', backgroundColor: '#b3bac2', align: 'right', childViews: ->(panel) do
+      panel.button text: 'Right'
+    end
+
+    scroll.label text: "\n"
+    scroll.h1 text: 'Spacers'
+    scroll.panels_vertical width: 'matchParent', childViews: ->(panel) do
+      panel.button text: '1'
+      panel.spacer height: 10
+      panel.button text: '2'
+      panel.spacer height: 50
+      panel.button text: '3'
+    end
+
+  end
+end

data/app/views/json_ui/garage/services/dynamic_text.json.jbuilder

@@ -0,0 +1,13 @@
+json.title 'Dynamic Text Service'
+
+json_ui_page json do |page|
+  render "#{@path_prefix}/nav_menu", json: json, page: page
+
+  page.scroll padding: glib_json_padding_body, childViews: ->(scroll) do
+    scroll.h3 text: dt_json('.hello', name: 'John')
+    scroll.spacer height: 6
+    scroll.label text: dt_json('.greeting')
+    scroll.label text: dt_json('.greeting_with_image')
+  end
+
+end

data/app/views/json_ui/garage/services/image.json.jbuilder

@@ -0,0 +1,47 @@
+json.title 'Image Service'
+
+# See https://docs.imgix.com/apis/url/size/fit#clip
+page = json_ui_page json
+render "#{@path_prefix}/nav_menu", json: json, page: page
+
+page.scroll padding: glib_json_padding_body, childViews: ->(scroll) do
+  bucket = 'itinerarybuilder-demo'
+
+  # TODO: This needs fixing
+  scroll.h1 text: 'Original size'
+  scroll.spacer height: 6
+  scroll.image url: dynamic_image_url(glib_json_image_blob_key, bucket: bucket, width: nil, height: nil)
+
+  scroll.h1 text: 'fit: clip (default) to width'
+  scroll.spacer height: 6
+  scroll.image url: dynamic_image_url(glib_json_image_blob_key, bucket: bucket, width: 100, height: nil)
+
+  scroll.spacer height: 20
+  scroll.h1 text: 'fit: clip (default) to height'
+  scroll.spacer height: 6
+  scroll.image url: dynamic_image_url(glib_json_image_blob_key, bucket: bucket, width: nil, height: 100)
+
+  scroll.spacer height: 20
+  scroll.h1 text: 'fit: crop to width'
+  scroll.spacer height: 6
+  scroll.image url: dynamic_image_url(glib_json_image_blob_key, bucket: bucket, fit: 'crop', width: 100, height: nil)
+
+  scroll.spacer height: 20
+  scroll.h1 text: 'fit: crop to height'
+  scroll.spacer height: 6
+  scroll.image url: dynamic_image_url(glib_json_image_blob_key, bucket: bucket, fit: 'crop', width: nil, height: 100)
+
+  # Currently this doesn't behave the same way as https://docs.imgix.com/apis/url/size/fit#fill
+  #
+  # scroll.spacer height: 20
+  # scroll.h1 text: 'fit: fill to width'
+  # scroll.spacer height: 6
+  # scroll.image url: dynamic_image_url(glib_json_image_blob_key, bucket: bucket, fit: 'fill', width: 2000, height: nil)
+
+  # Currently this doesn't behave the same way as https://docs.imgix.com/apis/url/size/fit#fill
+  #
+  # scroll.spacer height: 20
+  # scroll.h1 text: 'fit: fill to height'
+  # scroll.spacer height: 6
+  # scroll.image url: dynamic_image_url(glib_json_image_blob_key, bucket: bucket, fit: 'fill', width: nil, height: 2000)
+end

data/app/views/json_ui/garage/services/index.json.jbuilder

@@ -0,0 +1,17 @@
+json.title 'Dynamic Texts'
+
+page = json_ui_page json
+render "#{@path_prefix}/nav_menu", json: json, page: page, top_nav: true
+
+page.list firstSection: ->(section) do
+  section.rows builder: ->(template) do
+    template.thumbnail title: 'Dynamic Text', onClick: ->(action) do
+      action.windows_open url: json_ui_garage_url(path: 'services/dynamic_text')
+    end
+
+    template.thumbnail title: 'Image', onClick: ->(action) do
+      action.windows_open url: json_ui_garage_url(path: 'services/image')
+    end
+  end
+
+end

data/app/views/json_ui/garage/tables/_autoload_section.json.jbuilder

@@ -0,0 +1,13 @@
+
+batch_count = 30
+items = (1..batch_count)
+section = page.table_section_builder
+section.rows objects: items, builder: ->(row, item, index) do
+  row.default cellViews: ->(cell) do
+    column_indexes.each do |i|
+      cell.label text: "Data #{page_index * batch_count + item}"
+    end
+  end, onClick: ->(action) do
+    action.windows_open url: json_ui_garage_url(path: 'home/blank')
+  end
+end

data/app/views/json_ui/garage/tables/autoload_all.json.jbuilder

@@ -0,0 +1,38 @@
+
+page_index = params[:page].to_i
+next_page = {
+  url: json_ui_garage_url(path: 'tables/autoload_all', page: page_index + 1, section_only: 'v1'),
+  autoload: 'all'
+}
+
+column_indexes = (1..3)
+# TODO: Cater
+# - for SEO: one URL for a standalone page and one URL for pagination only
+# - for generic approach, e.g. excluding nav_menu when there is no change
+if params[:section_only].present?
+  json.nextPage next_page if page_index < 3
+  json_ui_page json do |page|
+    json.sections do
+      json.child! do
+        render 'json_ui/garage/tables/autoload_section', page: page, page_index: page_index, column_indexes: column_indexes
+      end
+    end
+  end
+else
+  json.title 'Tables'
+
+  json_ui_page json do |page|
+    render "#{@path_prefix}/nav_menu", json: json, page: page
+    
+    page.table nextPage: next_page, firstSection: ->(section) do
+      section.header cellViews: ->(header) do
+        column_indexes.each do |i|
+          header.label text: "Heading#{i}"
+        end
+      end
+
+      render "#{@path_prefix}/tables/autoload_section", page: page, page_index: page_index, column_indexes: column_indexes
+    end
+  end
+
+end

data/app/views/json_ui/garage/tables/autoload_as_needed.json.jbuilder

@@ -0,0 +1,39 @@
+
+page_index = params[:page].to_i
+next_page = {
+  url: json_ui_garage_url(path: 'tables/autoload_all', page: page_index + 1, section_only: 'v1'),
+  autoload: 'asNeeded'
+}
+
+column_indexes = (1..3)
+if params[:section_only].present?
+  json.nextPage next_page if page_index < 3
+  json_ui_page json do |page|
+    json.sections do
+      json.child! do
+        render 'json_ui/garage/tables/autoload_section', page: page, page_index: page_index, column_indexes: column_indexes
+      end
+    end
+  end
+else
+  json.title 'Tables'
+
+  json_ui_page json do |page|
+    render "#{@path_prefix}/nav_menu", json: json, page: page
+
+    page.table nextPage: next_page, firstSection: ->(section) do
+      section.header cellViews: ->(header) do
+        column_indexes.each do |i|
+          header.label text: "Heading#{i}"
+        end
+      end
+
+      render "#{@path_prefix}/tables/autoload_section", page: page, page_index: page_index, column_indexes: column_indexes
+    end, onScrollToBottom: ->(action) do
+      action.snackbars_alert message: 'Scrolled to Bottom'
+    end, onScrollToTop: ->(action) do
+      action.snackbars_alert message: 'Scrolled to Top'
+    end
+  end
+
+end

data/app/views/json_ui/garage/tables/export_import.json.jbuilder

@@ -0,0 +1,29 @@
+json.title 'Tables'
+
+page = json_ui_page json
+render "#{@path_prefix}/nav_menu", json: json, page: page
+
+page.table export: { label: 'Export', fileName: 'output' }, import: { submitUrl: json_ui_garage_url(path: 'forms/generic_post'), paramName: 'user' }, firstSection: ->(section) do
+  section.header cellViews: ->(header) do
+    header.label text: 'field1'
+    header.label text: 'field2'
+    header.label text: 'field3'
+    header.label text: 'field4'
+    header.label text: 'field5'
+    header.label text: 'field6'
+  end
+
+  items = [1, 2, 3]
+  section.rows objects: items, builder: ->(row, item, index) do
+    row.default cellViews: ->(cell) do
+      cell.label text: "Data #{item}"
+      cell.label text: "Data 'A' #{item}"
+      cell.label text: 'Data "B"' + " #{item}"
+      cell.label text: "Data , #{item}"
+      cell.label text: "Line A#{item}\nLine B#{item}"
+      cell.label text: "Line A#{item}\rLine B#{item}"
+    end, onClick: ->(action) do
+      action.windows_open url: json_ui_garage_url(path: 'home/blank')
+    end
+  end
+end

data/app/views/json_ui/garage/tables/horizontal_scroll.json.jbuilder

@@ -0,0 +1,26 @@
+json.title 'Tables'
+
+json_ui_page json do |page|
+  render "#{@path_prefix}/nav_menu", json: json, page: page
+  
+  column_indexes = (1..20)
+  page.table firstSection: ->(section) do
+    section.header cellViews: ->(header) do
+      column_indexes.each do |i|
+        header.label text: "Heading#{i}"
+      end
+    end
+
+    items = [1, 2, 3]
+    section.rows objects: items, builder: ->(row, item, index) do
+      row.default cellViews: ->(cell) do
+        column_indexes.each do |i|
+          cell.label text: "Data #{item}"
+        end
+      end, onClick: ->(action) do
+        action.windows_open url: json_ui_garage_url(path: 'home/blank')
+      end
+    end
+  end
+
+end