gibier 0.8.0

data/lib/gibier/version.rb

@@ -0,0 +1,3 @@
+module Gibier
+  VERSION = "0.8.0"
+end

data/template/app.rb

@@ -0,0 +1,25 @@
+require 'slide'
+require 'page_base'
+require 'slides/#{name}/pages'
+require 'browser/socket'
+require 'browser/location'
+
+Gibier.slide_name = '#{name}'
+Gibier.gh_pages = `window.ghPages`
+Gibier.assets_path = `window.assetsPath`
+
+module App
+  def self.render(ws)
+    Hyalite.render(Hyalite.create_element(Gibier::Slide, {ws:ws}), $document['.gibier'])
+  end
+end
+
+$document.ready do
+  ws = Browser::Socket.new("ws://\#{$window.location.host}/push_notification/start/slide/#{name}") unless Gibier.gh_pages
+
+  $window.on(:resize) do
+    App.render(ws)
+  end
+
+  App.render(ws)
+end

data/template/gh_pages/index.haml

@@ -0,0 +1,13 @@
+!!! 5
+%html(lang="en" data-framework="hyalite")
+  %head
+    %meta{charset:"utf-8"}
+    %title Index of slides
+
+  %body
+    %h1 Index of slides
+    %section
+      %ul
+        - @slides.each do |slide|
+          %li
+            %a{href: slide[:name]}= "[#{slide[:name]}] \"#{slide[:title]}\""

data/template/gh_pages/slide.haml

@@ -0,0 +1,18 @@
+!!!
+%html(lang="en" data-framework="hyalite")
+  %head
+    %meta{charset:"utf-8"}
+    %title= @slide_name
+    %link{rel:"stylesheet", href:"../assets/css/application.css"}
+    %link{rel:"stylesheet", href:"../assets/#{@slide_name}/css/custom.css"}
+    %link{rel:"stylesheet", href:"../assets/css/highlight.css"}
+
+  %body
+    %section.gibier
+
+    :javascript
+      window.slideName = '#{@slide_name}'
+      window.ghPages = true;
+      window.assetsPath = '../assets/#{@slide_name}';
+
+    %script{type:"text/javascript", src:"../assets/#{@slide_name}/javascripts/application.js"}

data/template/project/Gemfile

@@ -0,0 +1,8 @@
+source "https://rubygems.org"
+
+gem 'gibier'
+gem 'opal-browser'
+gem 'opal-router',    github: 'adambeynon/opal-router'
+gem 'opal-haml',      github: 'opal/opal-haml'
+gem 'hyalite'
+

data/template/project/app/page_base.rb

@@ -0,0 +1,46 @@
+module Gibier
+  class PageBase
+    include Hyalite::Component
+    include Hyalite::Component::ShortHand
+
+    def initialize
+      @height = 0
+    end
+
+    # def component_did_mount
+    #   every(0.05) do
+    #     if @props[:visible]
+    #       prev_height = @height
+    #       el = $document.css(".#{page_class_name}")[0]
+    #       if el
+    #         height = el.height.to_i
+    #         unless (height - prev_height).abs < 3
+    #           @height = height
+    #           set_state(top: "#{((700 - @height)/2).to_i}px")
+    #         end
+    #       end
+    #     end
+    #   end
+    # end
+
+    def page_class_name
+      "page_#{@props[:page_number]}"
+    end
+
+    def style
+      {top: @state[:top]}.merge(@props[:visible] ? {display: 'block'} : {display: 'none'})
+    end
+
+    def header
+      nil
+    end
+
+    def content
+      nil
+    end
+
+    def render
+      section({className: "page #{page_class_name}", style: style}, header, content)
+    end
+  end
+end

data/template/project/app/slide.rb

@@ -0,0 +1,204 @@
+require 'hyalite'
+require 'opal-router'
+require 'browser/interval'
+require 'browser/location'
+require 'track_field'
+
+module Gibier
+  SLIDE_WIDTH = 960
+  SLIDE_HEIGHT = 720
+
+  def self.page_count
+    @page_count
+  end
+
+  def self.page_count=(count)
+    @page_count = count
+  end
+
+  def self.title
+    @title
+  end
+
+  def self.title=(title)
+    @title = title
+  end
+
+  def self.slide_name
+    @slide_name
+  end
+
+  def self.slide_name=(name)
+    @slide_name = name
+  end
+
+  def self.gh_pages
+    `window.ghPages`
+  end
+
+  def self.assets_path
+    `window.assetsPath`
+  end
+
+  def self.assets_path=(path)
+    @assets_path = path
+  end
+
+  class Slide
+    include Hyalite::Component
+    include Hyalite::Component::ShortHand
+
+    def pages(height)
+      case @state[:mode]
+      when :slide
+        Gibier.page_count.times.map do |i|
+          Object.const_get("Gibier::Page#{i}").el({visible: @state[:page_number] == i, page_number: i, slide_height: height})
+        end
+      when :print
+        Gibier.page_count.times.map do |i|
+          Object.const_get("Gibier::Page#{i}").el({visible: true, page_number: i, slide_height: height})
+        end
+      end
+    end
+
+    def initial_state
+      page_num = $window.location.uri.sub(/.*#([0-9]+)/, '\1').to_i
+
+      {
+        page_number: page_num,
+        mode: :slide,
+        start: nil,
+        footer_visible: false
+       }
+    end
+
+    def component_did_mount
+      $window.on(:keydown) do |evt|
+        handle_key_down(evt)
+      end
+
+      unless Gibier.gh_pages
+        @props[:ws].on(:message) do |msg|
+          (event, value) = msg.data.split(':')
+          case event
+          when 'keydown'
+            handle_key_down(value.to_i)
+          end
+        end
+      end
+
+      router = Router.new
+      router.route('/') { page_to(num) }
+      router.route(':page') {|params| set_state(page_number: params[:page].to_i) }
+    end
+
+    def page_to(num)
+      if Gibier.gh_pages
+        $window.location.assign("./##{num}")
+      else
+        $window.location.assign("/#{Gibier.slide_name}##{num}")
+      end
+    end
+
+    def handle_key_down(event)
+      keycode = event.code
+      case keycode
+      when 39,34
+        page_to(@state[:page_number] + 1) if @state[:page_number] < Gibier.page_count
+      when 37,33
+        page_to(@state[:page_number] - 1) if @state[:page_number] > 0
+      when 83,66
+        unless @state[:start]
+          set_state(start: Time.now)
+        else
+          set_state(start: nil)
+        end
+      when 80
+        if @state[:mode] == :slide
+          set_state(mode: :print)
+        else
+          set_state(mode: :slide)
+        end
+      when 70
+        set_state(footer_visible: !@state[:footer_visible])
+        if `event.native.ctrlKey`
+          fullscreen
+        end
+      when 116
+        if `event.native.shiftKey`
+          fullscreen
+        end
+      else
+        puts "keycode = #{keycode}"
+      end
+    end
+
+    def fullscreen
+      %x(
+        var element = document.getElementsByClassName('gibier')[0];
+        var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
+
+        if (requestMethod) {
+            requestMethod.call(element);
+        }
+      )
+    end
+
+    def duration
+      text = "10"
+      %x(
+        var el = document.getElementsByClassName('duration')[0];
+        if (el) {
+          text = el.innerText;
+        }
+      )
+
+      text.to_i * 60
+    end
+
+    def render
+      follow_height = $window.view.height / $window.view.width < SLIDE_HEIGHT / SLIDE_WIDTH
+      if follow_height
+        zoom = $window.view.height.to_f / SLIDE_HEIGHT * 0.98
+      else
+        zoom = $window.view.width.to_f / SLIDE_WIDTH * 0.98
+      end
+
+      top = ($window.view.height / zoom - SLIDE_HEIGHT) / 2
+      left = ($window.view.width / zoom - SLIDE_WIDTH) / 2
+
+      footer_style = @state[:page_number] == 1 || !@state[:footer_visible] ? {style: {display: 'none'}} : {}
+
+      case @state[:mode]
+      when :slide
+        div({className: 'background'},
+          div({
+            className: 'slide',
+            style: {zoom: zoom, top: "#{top}px", left: "#{left}px"},
+            onKeyDown: -> (event) { handle_key_down(event) }
+          },
+            pages(SLIDE_HEIGHT * zoom)
+          ),
+          Gibier::TrackField.el({total_time: duration, start: @state[:start], page_number: @state[:page_number], page_count: Gibier.page_count}),
+          section({className: 'footer'}.merge(footer_style),
+            p({className: 'title'}, Gibier.title),
+            p({className: 'powered-by'}, "Powered by ", span({className: "hyalite"}, "Hyalite"))
+          )
+        )
+      when :print
+        div({
+            className: 'print',
+            onKeyDown: -> (evt) { handle_key_down(evt) } },
+          pages(SLIDE_HEIGHT * zoom).map do |page|
+            top += SLIDE_HEIGHT * zoom
+            div({
+              className: 'wrap-page',
+              style: {zoom: zoom, top: "#{top}px", left: "#{left}px"},
+            }, page)
+          end
+        )
+      end
+    end
+  end
+end
+

data/template/project/app/track_field.rb

@@ -0,0 +1,43 @@
+require 'browser/interval'
+
+module Gibier
+  class TrackField
+    include Hyalite::Component
+    include Hyalite::Component::ShortHand
+
+    def initialize
+      super
+      @width = 0
+    end
+
+    def initial_state
+      { tic: false }
+    end
+
+    def component_did_mount
+      every(1) do
+        set_state(tic: !@state[:tic])
+        if el = $document.css(".track-field")[0]
+          @width = el.width.to_i
+          spend_time = @props[:start] ? Time.now - @props[:start] : 0
+          rabbit_pos = [(spend_time / @props[:total_time]), 1].min * (@width - 40) * 0.96 + @width * 0.02
+          set_state(rabbit_pos: rabbit_pos)
+        end
+      end
+    end
+
+    def render
+      turtle_pos = (@props[:page_number] / @props[:page_count]) * (@width - 40) * 0.96 + @width * 0.02
+      mstyle = {transform: "rotate(#{@state[:tic]?'-':''}7deg)", left: "#{@state[:rabbit_pos]}px"}
+      ystyle = {transform: "rotate(#{@state[:tic]?'':'-'}7deg)"}
+      ystyle.merge!(left: "#{turtle_pos}px") if @width > 0
+
+      div({className: 'track-field'},
+        @props[:start] ? [
+          div({className: 'flag', style: {right: "#{@width * 0.02}px"}}),
+          div({className: 'rabbit avatar', style: mstyle}),
+          div({className: 'turtle avatar', style: ystyle})
+        ] : nil)
+    end
+  end
+end

data/template/project/assets/css/application.css

@@ -0,0 +1,219 @@
+html {
+  height: 100%;
+}
+
+body {
+  height: 100%;
+  margin: 0;
+}
+
+::selection {
+  background: #770;
+}
+
+.gibier {
+  position: fixed;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  font-size: 32px;
+}
+
+.gibier .background {
+  height: 100%;
+  background-color: #222;
+  color: #fff;
+}
+
+.slide {
+  position: absolute;
+  width: 960px;
+  height: 720px;
+  margin: 0 auto;
+}
+
+.wrap-page {
+  width: 960px;
+  height: 720px;
+  margin: 0 auto;
+  color: #000;
+  background-color: #fff;
+  margin-bottom: 60px;
+  page-break-after: always;
+}
+
+.print {
+  background: #fff;
+  background-color: #fff;
+  color: #000;
+}
+
+.slide .page {
+  top: 50%;
+  transform: translateY(-50%);
+  position: absolute;
+  width: 100%;
+}
+
+.page p.icon {
+  margin: 0;
+  position: absolute;
+  top: 5.7em;
+  left: 25em;
+}
+
+.page p.icon img {
+  width: 3em;
+}
+
+.page code {
+  font-size: 0.8em;
+}
+
+
+.page h3 img {
+  width: 1.2em;
+  background-size: contain;
+  background-repeat: no-repeat;
+}
+
+.page h4 img {
+  width: 80%;
+  margin: 0 auto;
+  display: block;
+  background-size: contain;
+  background-repeat: no-repeat;
+}
+
+.page img {
+  width: 1em;
+  background-size: contain;
+  background-repeat: no-repeat;
+}
+
+.page p.large {
+  text-align: center;
+}
+
+.page p.large img {
+  width: 80%;
+}
+
+h1 {
+  font-size: 1.6em;
+  text-align: center;
+}
+
+h2 {
+  font-size: 1.4em;
+  text-align: center;
+}
+
+h3 {
+  font-size: 1.2em;
+  text-align: center;
+}
+
+h4 {
+  font-size: 1.0em;
+  text-align: center;
+}
+
+.page ul ul {
+  font-size: 0.9em;
+}
+
+.page li {
+  padding-left: 16px;
+}
+
+.page .author {
+  text-align: right;
+  padding-right: 20%;
+}
+
+a:link {
+  color: #cee;
+  text-decoration: none;
+}
+
+a:visited {
+  color: #cee;
+  text-decoration: none;
+}
+
+a:hover {
+  color: #cca;
+  text-decoration: underline;
+}
+
+a:active {
+  color: #cee;
+  text-decoration: none;
+}
+
+.track-field {
+  position: absolute;
+  bottom: 1em;
+  width: 100%;
+  height: 70px;
+}
+
+.track-field .avatar {
+  position: absolute;
+  left: 2%;
+  width: 48px;
+  height: 48px;
+  background-size: contain;
+  border-radius: 4px;
+}
+
+.track-field .flag {
+  position: absolute;
+  width: 30px;
+  height: 60px;
+  background-image: url("../images/flag.png");
+  background-size: contain;
+  background-repeat: no-repeat;
+  z-index: 900;
+}
+
+.track-field .rabbit {
+  background-image: url("../images/hunter.png");
+  background-repeat: no-repeat;
+  z-index: 1000;
+}
+
+.track-field .turtle {
+  background-image: url("../images/usagitokame.png");
+  background-repeat: no-repeat;
+  z-index: 999;
+  top: 30px;
+}
+
+.footer .title {
+  position: absolute;
+  bottom: 4px;
+  left: 16px;
+  margin: 0;
+  font-size: 0.6em;
+  color: #888;
+}
+
+.footer .powered-by {
+  position: absolute;
+  bottom: 4px;
+  right: 16px;
+  margin: 0;
+  font-size: 0.6em;
+  color: #888;
+}
+
+.footer .powered-by .hyalite {
+  color: #ee8;
+  font-weight: bold;
+}
+
+.duration {
+  display: none;
+}