Mithril2

mithril2.markdown

Mithril2

A Pen by Stas Ukolov on CodePen.

License.

script.livescript

ns = 40
we = 30

m.mount do
  document.body
  Q4
  
function Q4
  view: -> 
    m do
      \.NESW
      do
        X, x <- <[N S]>.map
        Y, y <- <[W E]>.map
        m do
          \.Q4
          style:
            (if x then \bottom else \top): 0
            (if x then \top else \height): "#{ns}%"
            (if y then \right else \left): 0
            (if y then \left else \width): "#{we}%"
          m \b "#{X}#{Y}"
          m lorem
      do
        Z, z <- <[NS WE]>.map
        m do
          \.Q2
          class: Z
          style:
            (if z then \left else \top): "#{if z then we else ns}%"
          onmousedown: drag

!function drag
  var pending
  bar = @
  document <<<
    onmouseup: up
    onmousemove: move
  return false
  
  function up
    document <<<
      onmouseup: void
      onmousemove: void
    false
    
  function move(e)
    unless pending
      pending := true
      set-timeout update, 100
    is-we = !bar.client-width
    ratio = if is-we
      e.client-x / bar.offset-parent.client-width
    else 
      e.client-y / bar.offset-parent.client-height
    ratio = ratio * 100
      |> Math.max 10 _
      |> Math.min 90 _
    ratio .= to-fixed 2
    if is-we
      we := ratio
    else
      ns := ratio
    false
  
  !function update
    pending := false
    m.redraw!
    
function lorem
  view: ->
    m \. """
    Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
    Ut enim ad minim veniam, 
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
    Duis aute irure dolor in reprehenderit in voluptate velit
    esse cillum dolore eu fugiat nulla pariatur. 
    Excepteur sint occaecat cupidatat non proident,
    sunt in culpa qui officia deserunt mollit anim id est laborum.
    """

scripts

<script src="https://unpkg.com/mithril@next/mithril.js"></script>

style.stylus

.Q4
  position absolute
  // border 1px dotted red
  // margin 0
  // padding 0
  // text-align center
  box-sizing border-box
  padding 0.618ex
  overflow auto
  
.Q2
  position absolute
  delta = 2px
  border delta solid grey
  margin-left -1 * delta
  margin-top -1 * delta 
  // margin 2ex
  // background silver
  // box-sizing content-box
  
  // &:hover
  //   border-color green

.NESW  
  position absolute
  left 0
  top 0
  right 0
  bottom 0
  
.NS
  left 0
  right 0
  // height 0
  cursor ns-resize

.WE
  top 0
  bottom 0
  // width 0
  cursor ew-resize
  
body
  // background navy
  // color yellow
  // margin 0