glib-web 0.5.5

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

@@ -0,0 +1,26 @@
+json.title 'Tables'
+
+json_ui_page json do |page|
+  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: 'Layout', onClick: ->(action) do
+        action.windows_open url: json_ui_garage_url(path: 'tables/layout')
+      end
+      template.thumbnail title: 'Horizontal Scroll', onClick: ->(action) do
+        action.windows_open url: json_ui_garage_url(path: 'tables/horizontal_scroll')
+      end
+      template.thumbnail title: 'Export/Import', onClick: ->(action) do
+        action.windows_open url: json_ui_garage_url(path: 'tables/export_import')
+      end
+      template.thumbnail title: 'Autoload All', onClick: ->(action) do
+        action.windows_open url: json_ui_garage_url(path: 'tables/autoload_all')
+      end
+      template.thumbnail title: 'Autoload as Needed', onClick: ->(action) do
+        action.windows_open url: json_ui_garage_url(path: 'tables/autoload_as_needed')
+      end
+    end
+
+  end
+end

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

@@ -0,0 +1,38 @@
+json.title 'Tables'
+
+json_ui_page json do |page|
+  render "#{@path_prefix}/nav_menu", json: json, page: page
+
+  column_indexes = (1..5)
+  page.table sections: [
+    ->(section) do
+      section.rows builder: ->(row) do
+        row.default colSpans: [3, 2], cellViews: ->(cell) do
+          cell.label text: 'Spans 3 columns'
+          cell.panels_horizontal width: 'matchParent', backgroundColor: '#dddddd', padding: { top: 10, right: 10, bottom: 10, left: 10 }, childViews: ->(horizontal) do
+            horizontal.label text: 'Spans 2 columns'
+          end
+        end
+      end
+    end,
+    ->(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 colStyles: [{ width: 200, backgroundColor: '#eeeeee' }], 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

data/app/views/json_ui/garage/views/_chart_data.json.jbuilder

@@ -0,0 +1,17 @@
+page_index = params[:page].to_i
+next_page = {
+  url: json_ui_garage_url(path: 'views/charts', page: page_index + 1, data_only: 'v1'),
+  autoload: 'all'
+}
+
+if page_index < 3
+  builder.charts_line nextPage: next_page, dataSeries: [
+    -> do
+      json.title "Page #{page_index + 1}"
+
+      from = page_index + 1
+      to = page_index
+      json.points (from.month.ago.to_date..to.month.ago.to_date).map { |d| { x: d, y: 100 + rand(40) } }
+    end
+  ]
+end

data/app/views/json_ui/garage/views/banners.json.jbuilder

@@ -0,0 +1,51 @@
+json.title 'Views'
+
+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.spacer height: 20
+    scroll.h2 text: 'Basic'
+    scroll.spacer height: 6
+    scroll.banners_alert width: 'matchParent', icon: 'info', message: 'This is an alert banner'
+
+    scroll.spacer height: 20
+    scroll.h2 text: 'With color styling'
+    scroll.spacer height: 6
+    scroll.banners_alert width: 'matchParent', icon: 'info', message: 'This is an alert banner', styleClass: 'success'
+
+    scroll.spacer height: 20
+    scroll.h2 text: 'With select options'
+    scroll.spacer height: 6
+    scroll.banners_select width: 'matchParent', icon: 'info', message: 'This is a select banner', buttons: ->(menu) do
+      menu.button text: 'Option1', onClick: ->(action) do
+        action.dialogs_alert message: 'Option 1'
+      end
+      menu.button text: 'Option2', onClick: ->(action) do
+        action.dialogs_alert message: 'Option 2'
+      end
+      menu.button text: 'Option3', onClick: ->(action) do
+        action.dialogs_alert message: 'Option 3'
+      end
+    end
+
+    scroll.spacer height: 20
+    scroll.h2 text: 'Alert banner with frameless styling (Experimental)'
+    scroll.spacer height: 6
+    scroll.banners_alert width: 'matchParent', icon: 'info', message: 'This is an alert banner', styleClass: 'frameless'
+
+    # # TODO: Deprecate in favour of `banners/custom` and `markdown`
+    # markdown = '## Emphasis' + "\n" +
+    # "\n" +
+    # '**This is bold text**' + "\n" +
+    # "\n" +
+    # '*This is italic text*' + "\n" +
+    # "\n" +
+    # '~~Strikethrough~~'
+    # scroll.spacer height: 20
+    # scroll.h2 text: 'Alert banner with markdown'
+    # scroll.spacer height: 6
+    # scroll.banners_alert width: 'matchParent', icon: 'info', message: markdown, message_format: 'markdown'
+  end
+end

data/app/views/json_ui/garage/views/calendar_data.json.jbuilder

@@ -0,0 +1,30 @@
+section = json_ui_section json
+section.rows builder: ->(row) do
+  row.custom title: 'Hackathon',
+    extra: {
+      start: '2018-12-14',
+      end: '2018-12-17'
+    },
+    onClick: ->(action) do
+      action.dialogs_alert message: 'At Town Hall'
+    end
+
+  row.custom title: 'Birthday',
+    extra: {
+      start: '2018-12-30',
+      end: '2018-12-30'
+    },
+    onClick: ->(action) do
+      action.dialogs_alert message: 'At home'
+    end
+
+  row.custom title: 'Conference',
+    extra: {
+      start: '2018-12-31',
+      end: '2019-01-02'
+    },
+    onClick: ->(action) do
+      action.dialogs_alert message: 'In Perth'
+    end
+
+end

data/app/views/json_ui/garage/views/carousels.json.jbuilder

@@ -0,0 +1,37 @@
+json.title 'Views'
+
+image_url1 = 'http://ichef.bbci.co.uk/news/976/cpsprodpb/18106/production/_97266589_gettyimages-474547165.jpg'
+image_url2 = 'https://s.abcnews.com/images/International/Guam03-gty-jrl-170809_16x9_992.jpg'
+
+json_ui_page json do |page|
+  render "#{@path_prefix}/nav_menu", json: json, page: page
+  
+  page.scroll childViews: ->(scroll) do
+    scroll.label text: "\n"
+    scroll.h1 text: 'Carousel with labels'
+    scroll.panels_carousel width: 'matchParent', childViews: ->(carousel) do
+      carousel.label text: 'Item 1'
+      carousel.label text: 'Item 2'
+    end
+
+    scroll.label text: "\n"
+    scroll.h1 text: 'Carousel with images'
+    scroll.panels_carousel width: 'matchParent', childViews: ->(carousel) do
+      carousel.image url: image_url1, width: 'matchParent'
+      carousel.image url: image_url2, width: 'matchParent'
+    end
+
+    scroll.label text: "\n"
+    scroll.h1 text: 'Carousel with complex layout'
+    scroll.panels_carousel width: 'matchParent', childViews: ->(carousel) do
+      carousel.panels_vertical childViews: ->(panel) do
+        panel.h3 text: 'Item 1'
+        panel.image url: image_url1, width: 'matchParent'
+      end
+      carousel.panels_vertical childViews: ->(panel) do
+        panel.h3 text: 'Item 2'
+        panel.image url: image_url2, width: 'matchParent'
+      end
+    end
+  end
+end

data/app/views/json_ui/garage/views/charts.json.jbuilder

@@ -0,0 +1,115 @@
+
+if params[:data_only].present?
+  json_ui_page json do |page|
+    page.data content: ->(data) do
+      render "#{@path_prefix}/views/chart_data", json: json, builder: data
+    end
+  end
+else
+  json.title 'Views'
+
+  json_ui_page json do |page|
+    render "#{@path_prefix}/nav_menu", json: json, page: page
+
+    page.scroll padding: {top: 20, left: 20, right: 20, bottom: 20}, childViews: ->(scroll) do
+      scroll.h1 text: 'Line chart'
+      scroll.charts_line dataSeries: [
+        -> do
+          json.title 'Line 1'
+
+          points = {
+            'Sat, 10 Nov 2018' => 1,
+            'Sun, 11 Nov 2018' => 7,
+            'Mon, 12 Nov 2018' => 2,
+            'Tue, 13 Nov 2018' => 0,
+            'Wed, 14 Nov 2018' => 1,
+            'Thu, 15 Nov 2018' => 1,
+            'Fri, 16 Nov 2018' => 5,
+          }
+          json.points points.map { |k, v| { x: k, y: v } }
+        end,
+        -> do
+          json.title 'Line 2'
+
+          points = {
+            'Sat, 10 Nov 2018' => 5,
+            'Sun, 11 Nov 2018' => 3,
+            'Mon, 12 Nov 2018' => 8,
+            'Tue, 13 Nov 2018' => 5,
+            'Wed, 14 Nov 2018' => 3,
+            'Thu, 15 Nov 2018' => 5,
+            'Fri, 16 Nov 2018' => 1,
+          }
+          json.points points.map { |k, v| { x: k, y: v } }
+        end
+      ]
+
+      scroll.spacer height: 20
+      scroll.h1 text: 'Line chart using remote data'
+      render "#{@path_prefix}/views/chart_data", json: json, builder: scroll
+
+      scroll.h2 text: 'Column chart (Clustered)'
+      scroll.charts_column dataGroups: [
+        -> do
+          json.title 'Column 1'
+
+          points = {
+            '2010' => 10,
+            '2020' => 16,
+          }
+          json.points points
+        end,
+        -> do
+          json.title 'Column 2'
+
+          points = {
+            '2010' => 24,
+            '2020' => 22,
+          }
+          json.points points
+        end,
+        -> do
+          json.title 'Column 3'
+
+          points = {
+            '2010' => 20,
+            '2020' => 23,
+          }
+          json.points points
+        end
+      ]
+
+      scroll.h2 text: 'Column chart (Stacked)'
+      scroll.charts_column stacked: true, dataGroups: [
+        -> do
+          json.title 'Column 1'
+
+          points = {
+            '2010' => 10,
+            '2020' => 16,
+          }
+          json.points points
+        end,
+        -> do
+          json.title 'Column 2'
+
+          points = {
+            '2010' => 24,
+            '2020' => 22,
+          }
+          json.points points
+        end,
+        -> do
+          json.title 'Column 3'
+
+          points = {
+            '2010' => 20,
+            '2020' => 23,
+          }
+          json.points points
+        end
+      ]
+    end
+  end
+
+end

data/app/views/json_ui/garage/views/images.json.jbuilder

@@ -0,0 +1,89 @@
+json.title 'Views'
+
+page = json_ui_page json
+render "#{@path_prefix}/nav_menu", json: json, page: page
+
+# small_image_url = 'https://icons-for-free.com/iconfiles/png/128/of+thrones+game+thrones+series+character+avatar+jon+snow-1320568555745862611.png'
+small_image_url = 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSGQpSWjtELISLBlmugOZ6wzl1JamYXQvbFeYywpfg3E8b8DrO0Kg&s'
+
+page.scroll padding: glib_json_padding_body, childViews: ->(scroll) do
+  scroll.h2 text: 'Avatar'
+  scroll.spacer height: 6
+  scroll.avatar url: glib_json_image_avatar_url
+
+  scroll.spacer height: 20
+  scroll.h2 text: 'Icon'
+  scroll.spacer height: 6
+  scroll.icon spec: 'info'
+
+  scroll.spacer height: 20
+  scroll.h2 text: 'Image with base64 data'
+  scroll.spacer height: 6
+  scroll.image height: 100, base64Data: 'data:image/gif;base64,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'
+
+  scroll.spacer height: 20
+  scroll.h2 text: 'QR Code as base64 image'
+  scroll.spacer height: 6
+  if defined? RQRCode
+    qr_content = { version: 1, message: 'This is a test' }
+    qr = RQRCode::QRCode.new(qr_content.to_json)
+    scroll.image base64Data: qr.as_png(size: 300).to_data_url
+  else
+    scroll.label text: 'Include "rqrcode" gem to enable this'
+  end
+
+  scroll.spacer height: 60
+  scroll.hr
+
+  scroll.spacer height: 60
+  scroll.h2 text: 'Original size'
+  scroll.spacer height: 6
+  scroll.image url: glib_json_image_standard_url
+
+  scroll.spacer height: 20
+  scroll.h2 text: 'Original size'
+  scroll.spacer height: 6
+  scroll.image url: small_image_url
+
+  # Reference: https://docs.imgix.com/apis/url/size/fit#clip
+  scroll.spacer height: 20
+  scroll.h2 text: 'fit: clip (default) to full width (scale down)'
+  scroll.spacer height: 6
+  scroll.image width: 'matchParent', url: glib_json_image_standard_url
+
+  scroll.spacer height: 20
+  scroll.h2 text: 'fit: clip (default) to full width (scale up)'
+  scroll.spacer height: 6
+  scroll.image width: 'matchParent', url: small_image_url
+
+  scroll.spacer height: 20
+  scroll.h2 text: 'fit: clip (default) to width (scale down)'
+  scroll.spacer height: 6
+  scroll.image width: 320, url: glib_json_image_standard_url
+
+  scroll.spacer height: 20
+  scroll.h2 text: 'fit: clip (default) to height (scale down)'
+  scroll.spacer height: 6
+  scroll.image height: 320, url: glib_json_image_standard_url
+
+  scroll.spacer height: 20
+  scroll.h2 text: 'fit: clip (default) to width (scale up)'
+  scroll.spacer height: 6
+  scroll.image width: 320, url: small_image_url
+
+  scroll.spacer height: 20
+  scroll.h2 text: 'fit: clip (default) to height (scale up)'
+  scroll.spacer height: 6
+  scroll.image height: 320, url: small_image_url
+
+  # Reference: https://docs.imgix.com/apis/url/size/fit#crop
+  scroll.spacer height: 20
+  scroll.h2 text: 'fit: crop to width'
+  scroll.spacer height: 6
+  scroll.image width: 200, url: glib_json_image_standard_url, fit: :crop
+
+  scroll.spacer height: 20
+  scroll.h2 text: 'fit: crop to height'
+  scroll.spacer height: 6
+  scroll.image height: 200, url: glib_json_image_standard_url, fit: :crop
+end

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

@@ -0,0 +1,48 @@
+json.title 'Views'
+
+json_ui_page json do |page|
+  render "#{@path_prefix}/nav_menu", json: json, page: page, top_nav: true
+
+  page.list sections: [
+    ->(section) do
+      section.header padding: glib_json_padding_list, childViews: ->(header) do
+        header.h2 text: 'Components'
+      end
+
+      section.rows builder: ->(template) do
+        template.thumbnail title: 'Texts', onClick: ->(action) do
+          action.windows_open url: json_ui_garage_url(path: 'views/texts')
+        end
+        template.thumbnail title: 'Images', onClick: ->(action) do
+          action.windows_open url: json_ui_garage_url(path: 'views/images')
+        end
+        template.thumbnail title: 'Carousels', onClick: ->(action) do
+          action.windows_open url: json_ui_garage_url(path: 'views/carousels')
+        end
+        template.thumbnail title: 'Charts', onClick: ->(action) do
+          action.windows_open url: json_ui_garage_url(path: 'views/charts')
+        end
+        template.thumbnail title: 'Banners', onClick: ->(action) do
+          action.windows_open url: json_ui_garage_url(path: 'views/banners')
+        end
+        template.thumbnail title: 'Misc', onClick: ->(action) do
+          action.windows_open url: json_ui_garage_url(path: 'views/misc')
+        end
+      end
+    end,
+    ->(section) do
+      section.header padding: glib_json_padding_list, childViews: ->(header) do
+        header.h2 text: 'Styling and Formatting'
+      end
+
+      section.rows builder: ->(template) do
+        template.thumbnail title: 'Markdowns', onClick: ->(action) do
+          action.windows_open url: json_ui_garage_url(path: 'views/markdowns')
+        end
+        template.thumbnail title: 'Links', onClick: ->(action) do
+          action.windows_open url: json_ui_garage_url(path: 'views/links')
+        end
+      end
+    end
+  ]
+end