Class: Demos::Demo::Post

Inherits:
Hokusai::Block show all
Defined in:
ui/examples/foobar.rb

Overview

Block that represents a singular post

Displays post content, and throws in a game of Tic Tac Toe for good measure.

Takes up full width on small viewport, centers on large viewport Duplication in the template can easily be extracted into a separate block

Instance Attribute Summary

Attributes inherited from Hokusai::Block

#node, #provides, #publisher

Instance Method Summary collapse

Methods inherited from Hokusai::Block

#children, #children?, compile, computed, computed!, #draw, #draw_with, #dump, #emit, #initialize, inject, inject!, #method_missing, mount, #on_resize, provide, provides, style, styles_get, template, template_from_file, template_get, #update, use, uses

Constructor Details

This class inherits a constructor from Hokusai::Block

Dynamic Method Handling

This class handles dynamic methods through the method_missing method in the class Hokusai::Block

Instance Method Details

#about_background ⇒ Object

Cache the color so that it isn’t recomputing at ‘O(n) complexity`

TODO: extract styling / prop declaration into separate template



109
110
111
 
# File 'ui/examples/foobar.rb', line 109

def about_background
  @author_background ||= Hokusai::Color.new(155,155,155,20)
end

#about_image_source ⇒ Object 



102
103
104
 
# File 'ui/examples/foobar.rb', line 102

def about_image_source
  @about_image_source ||= entry.id.even? ? "#{__dir__}/assets/addy.png" : "#{__dir__}/assets/baby_sean.png"
end

#after_updated ⇒ Object

Lifecycle hook

‘height` and `width` are the only special props they are used by the layout rendered to compute the canvas

We will set it after the block is updated on each iteration of the event loop



137
138
139
 
# File 'ui/examples/foobar.rb', line 137

def after_updated
  node.meta.set_prop(:height, @height) if @height != node.meta.get_prop(:height)
end

#on_mounted ⇒ Object 



127
128
129
 
# File 'ui/examples/foobar.rb', line 127

def on_mounted
  text_height_updated(0)
end

#post_author_name ⇒ Object 



98
99
100
 
# File 'ui/examples/foobar.rb', line 98

def post_author_name
  @post_author_name ||= entry.id.even? ? "Adeline" : "Skinnyjames"
end

#post_body ⇒ Object 



90
91
92
 
# File 'ui/examples/foobar.rb', line 90

def post_body
  entry.content
end

#post_index ⇒ Object 



86
87
88
 
# File 'ui/examples/foobar.rb', line 86

def post_index
  index.to_s
end

#post_title ⇒ Object 



94
95
96
 
# File 'ui/examples/foobar.rb', line 94

def post_title
  @post_title ||= "_#{entry.title.upcase}_ - #{DateTime.now.strftime("%m/%d/%Y %H:%M %p")}"
end

#render(canvas) ⇒ Object

This block is rendered inside a scrollable panel in between a ‘clip begin` and `clip end` command

‘Hokusai.can_render(canvas) will tell us if this block will even be visible` If not visible, I won’t waste memory / cpu to render



76
77
78
79
80
 
# File 'ui/examples/foobar.rb', line 76

def render(canvas)
  if Hokusai.can_render(canvas)
    yield(canvas)
  end
end

#small_viewport ⇒ Object 



82
83
84
 
# File 'ui/examples/foobar.rb', line 82

def small_viewport
  media_type == :small
end

#text_height_updated(height) ⇒ Object

‘height_updated` handler for the text node

Since panels are just blocks, and have no insight to the height of their children I will update the height of this post dynamically based on the height of the rendered text



122
123
124
125
 
# File 'ui/examples/foobar.rb', line 122

def text_height_updated(height)
  # tic tac toe height + about node height || content height + padding
  @height = 400 + [80, height].max + 80
end

#text_padding ⇒ Object

Cache the text padding



114
115
116
 
# File 'ui/examples/foobar.rb', line 114

def text_padding
  @text_padding ||= Hokusai::Padding.new(20, 5, 20, 5)
end