Permalink
Browse files

basic writor

  • Loading branch information...
1 parent adc72b8 commit cebc84f5ca4a9c372540cf00691aabb00337fd00 @vogievetsky vogievetsky committed Aug 26, 2012
Showing with 229 additions and 61 deletions.
  1. +82 −13 public/muse.coffee
  2. +30 −13 public/muse.css
  3. +76 −16 public/muse.js
  4. +41 −19 public/muse.scss
View
@@ -11,6 +11,14 @@ drawerDepth = 40 * scale
openDepth = 27 * scale
gap = 6 * scale
+writerWidth = 600;
+writerHeight = 400;
+
+$totalInnerWidth = (drawerWidth + gap) * (number - 1);
+$totalInnerHeight = (drawerHeight + gap) * (number - 1);
+$totalOuterWidth = $totalInnerWidth + drawerWidth + gap*2;
+$totalOuterHeight = $totalInnerHeight + drawerHeight + gap*2;
+
# --------------------------
msgs = "
@@ -103,6 +111,7 @@ cross = (arrays) ->
return ret
+next = (fn) -> setTimeout(fn, 100)
make_box = (box) ->
faces = ['front', 'back', 'right', 'left', 'top', 'bottom']
@@ -115,7 +124,9 @@ make_cards = (box) ->
.data((d) -> if d then cross({card: drawerState[d].cards, pos:[drawerPos[d]]}) else [])
animEnd = ->
- #d3.select(this).attr('class', 'card normal')
+ el = d3.select(this)
+ next ->
+ el.attr('class', 'card')
return
cardEnter = card.enter().append('div').attr('class', 'card new')
@@ -183,7 +194,7 @@ myDrawer = null
box_click = (d) ->
if myDrawer
drawerState[myDrawer].open = false
- notify_change?(myDrawer)
+ notifyChange(myDrawer)
if myDrawer is d
myDrawer = null
@@ -193,10 +204,14 @@ box_click = (d) ->
#drawerChest.attr('class', "drawer-chest focus focus-x#{d.ix}y#{d.iy}")
drawerState[d].open = true
if drawerState[d].open and drawerState[d].cards.length is 0
- drawerState[d].cards.push(msgs[Math.floor(Math.random() * msgs.length)])
- notify_change?(d)
+ drawerState[d].cards.push('')
+
+ if drawerState[d].open
+ makeWriter(d)
+
+ notifyChange(d)
- update_drawers()
+ updateDrawers()
return
drawerChest.selectAll('div.drawer').data(drawers)
@@ -207,16 +222,68 @@ drawerChest.selectAll('div.drawer').data(drawers)
.on('click', box_click)
.call(make_box)
-update_drawers = ->
+updateDrawers = ->
drawerChest.selectAll('div.drawer')
.attr('class', drawerClassFn)
.call(make_cards)
return
-update_drawers()
+updateDrawers()
+
+makeWriter = closeWriter = null
+do ->
+ writerDrawer = null
+ makeWriter = (drawer, delay = 2000) ->
+ setTimeout((->
+ editCont.style('display', null)
+ writerDrawer = drawer
+ editor.property('value', drawerState[writerDrawer].cards[0])
+ writer
+ .style('left', (d) -> drawerPos[writerDrawer].x + 'px')
+ .style('top', (d) -> (drawerPos[writerDrawer].y - drawerHeight) + 'px')
+ .style('width', drawerWidth + 'px')
+ .style('height', drawerHeight + 'px')
+ .style('border-radius', '0px')
+ .transition()
+ .duration(1000)
+ .delay(500)
+ .style('left', ($totalOuterWidth - writerWidth)/2 + 'px')
+ .style('top', ($totalOuterHeight - writerHeight)/2 + 'px')
+ .style('width', writerWidth + 'px')
+ .style('height', writerHeight + 'px')
+ .style('border-radius', '3px')
+ ), delay)
+ return
+
+ closeWriter = ->
+ console.log 'closeWriter', writerDrawer
+ return unless writerDrawer
+ drawerState[writerDrawer].cards[0] = editor.property('value')
+ notifyChange(writerDrawer)
+ updateDrawers(writerDrawer)
+ editCont.style('display', 'none')
+ writerDrawer = null
+ return
+
+ d3.select(document)
+ .on('click.writer', closeWriter)
-editCont = d3.select('.edit-cont')
- .style('display', 'none')
+ editCont = d3.select('.edit-cont')
+ .style('display', 'none')
+
+ writer = editCont.append('div')
+ .attr('class', 'writer')
+ .on('click', -> d3.event.stopPropagation())
+
+ editor = writer.append('textarea')
+
+ writer.append('button')
+ .text('Close')
+ .on('click', closeWriter)
+
+ return
+
+# makeWriter('5_5', 100)
hideLoading = ->
d3.select('.loading-cont')
@@ -242,7 +309,7 @@ if window.io
console.log 'DRAWERS!', dr
for k,v of dr
drawerState[k] = v or { open: false, cards: [] }
- update_drawers()
+ updateDrawers()
hideLoading()
return
@@ -251,17 +318,17 @@ if window.io
for d in drawers
if d is drawer
drawerState[d] = state
- update_drawers()
+ updateDrawers()
return
return
socket.on 'reset', ->
console.log 'GOT reset'
resetDrawerState()
- update_drawers()
+ updateDrawers()
return
- notify_change = (d) ->
+ notifyChange = (d) ->
socket.emit('drawerChange', d, drawerState[d])
return
else
@@ -272,4 +339,6 @@ else
hideLoading()
+ notifyChange = -> return
+
View
@@ -1,4 +1,5 @@
-/* --------------------- */
+/* ------------------------ */
+/* ------------------------ */
/* ------------------------ */
* {
-webkit-box-sizing: border-box;
@@ -16,14 +17,9 @@ html, body {
@-webkit-keyframes card-appear {
0% {
- -webkit-transform: translateZ(20px) translateY(-40px);
- opacity: 0; }
-
- 60% {
opacity: 0; }
100% {
- -webkit-transform: translateZ(20px) translateY(-40px);
opacity: 1; } }
@-webkit-keyframes card-up {
@@ -183,7 +179,7 @@ html, body {
background-image: url("img/dc1.jpg"); }
.drawers-cont .drawer-chest .drawer .card .card-side.back {
-webkit-transform: rotateY(180deg);
- background: white;
+ background: #fffff6;
font-size: 7px;
border: 1px solid gray;
overflow: hidden; }
@@ -199,12 +195,12 @@ html, body {
-webkit-transform: translateZ(-20px);
-webkit-transition: -webkit-transform 1s 0s;
z-index: 5; }
- .drawers-cont .drawer-chest .drawer.open .card.new {
- -webkit-animation: card-appear 2s;
- -webkit-animation-fill-mode: forwards; }
- .drawers-cont .drawer-chest .drawer.open .card.normal {
- -webkit-animation: card-up 2s;
- -webkit-animation-fill-mode: forwards; }
+ .drawers-cont .drawer-chest .drawer.open .card {
+ -webkit-animation: card-up 1s linear 1s;
+ -webkit-animation-fill-mode: both; }
+ .drawers-cont .drawer-chest .drawer.open .card.new {
+ -webkit-animation: card-up 1s linear 1s, card-appear 1s linear 1s;
+ -webkit-animation-fill-mode: both; }
.edit-cont {
position: absolute;
@@ -214,6 +210,27 @@ html, body {
margin-top: -325px;
width: 930px;
height: 650px; }
+ .edit-cont .writer {
+ position: absolute;
+ border: 1px solid gray;
+ background: #fffff6; }
+ .edit-cont .writer textarea {
+ position: absolute;
+ background: inherit;
+ resize: none;
+ margin: 0;
+ border: none;
+ border-bottom: 1px solid gray;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 30px;
+ padding: 10px; }
+ .edit-cont .writer button {
+ position: absolute;
+ bottom: 5px;
+ margin: 0;
+ right: 5px; }
.loading-cont {
position: absolute;
Oops, something went wrong.

0 comments on commit cebc84f

Please sign in to comment.