Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

basic writor

  • Loading branch information...
commit cebc84f5ca4a9c372540cf00691aabb00337fd00 1 parent adc72b8
@vogievetsky vogievetsky authored
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
95 public/muse.coffee
@@ -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
43 public/muse.css
@@ -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;
View
92 public/muse.js
@@ -1,6 +1,6 @@
// Generated by CoffeeScript 1.3.1
(function() {
- var box_click, cross, d, drawerChest, drawerClassFn, drawerDepth, drawerHeight, drawerPos, drawerState, drawerWidth, drawers, drawersCont, editCont, gap, hideLoading, id, ix, iy, make_box, make_cards, msgs, myDrawer, notify_change, number, openDepth, resetDrawerState, scale, socket, update_drawers, x, y, _i, _j, _k, _len;
+ var $totalInnerHeight, $totalInnerWidth, $totalOuterHeight, $totalOuterWidth, box_click, closeWriter, cross, d, drawerChest, drawerClassFn, drawerDepth, drawerHeight, drawerPos, drawerState, drawerWidth, drawers, drawersCont, gap, hideLoading, id, ix, iy, makeWriter, make_box, make_cards, msgs, myDrawer, next, notifyChange, number, openDepth, resetDrawerState, scale, socket, updateDrawers, writerHeight, writerWidth, x, y, _i, _j, _k, _len;
if (window.console == null) {
window.console = {
@@ -23,6 +23,18 @@
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 = "Dear DC, It's all theatre, and some of it's bad, but I still love it. - Shira-----Dear D.C, I've been pretty serious with New York, but if one of your fine law firms gives me a job, I'm pretty sure I'd break up with her for you. Love, a frustrated 3L.Tho I will always love you, i don't have to like you right now.-----I have yet to experience another city who supports the arts with the same generosity. DC is my haven for the arts.-----Dear DC, you're the most kickass and most vibrant big town I've ever met. You have your own music, your own art culture, you have waterfronts and parks and rivers. There's more to you than just stately buildings filled with pretentious people, and I'm lucky to have grown up here and experienced the real dc. Best of all, you never make me feel like I'm alone, or just another number in a swarm of people on the street: you're a city that actually feels like a home. ALL my love, Lida-----Dear DC, thank you for letting me see your big blue sky on my way to work and during lunch. And giving me access to free education in the Smithsonian institutes. I hope to bring my children to see your beautiful museums and exhibits. One day, I will leave you to return to my home city. But I will always remember you and your sky.-----Dear DC, We should have gotten to know each other when we had the chance. My friend thinks you're really great. Love Gabi-----Dear DC, I've loved you from afar all these years. I'm looking forward to getting to know you better. Love, Becca-----The monuments inspire me to think of the founding principles that make our country great. They give me hope that we can remember who we are as a nation.-----Dear DC, I love standing next to Lincoln and looking up at a giant for democracy and freedom-----Hey DC, thanks for the clean ride… I like your metro-----Dear DC, I love you for fostering a surprising intelligent community of artists!-----To the District of Columbia - thank you for your hidden gardens in Georgetown-----In 2002, I walked for the Homeless in DC, it's the one place I felt I made a difference.";
msgs = msgs.split('-----');
@@ -106,6 +118,10 @@
return ret;
};
+ next = function(fn) {
+ return setTimeout(fn, 100);
+ };
+
make_box = function(box) {
var faces;
faces = ['front', 'back', 'right', 'left', 'top', 'bottom'];
@@ -126,7 +142,13 @@
return [];
}
});
- animEnd = function() {};
+ animEnd = function() {
+ var el;
+ el = d3.select(this);
+ next(function() {
+ return el.attr('class', 'card');
+ });
+ };
cardEnter = card.enter().append('div').attr('class', 'card new').on("webkitAnimationEnd", animEnd);
cardEnter.append('div').attr('class', 'card-side back');
cardEnter.append('div').attr('class', 'card-side front').style('background-position', function(d) {
@@ -178,9 +200,7 @@
box_click = function(d) {
if (myDrawer) {
drawerState[myDrawer].open = false;
- if (typeof notify_change === "function") {
- notify_change(myDrawer);
- }
+ notifyChange(myDrawer);
}
if (myDrawer === d) {
myDrawer = null;
@@ -188,13 +208,14 @@
myDrawer = d;
drawerState[d].open = true;
if (drawerState[d].open && drawerState[d].cards.length === 0) {
- drawerState[d].cards.push(msgs[Math.floor(Math.random() * msgs.length)]);
+ drawerState[d].cards.push('');
}
- if (typeof notify_change === "function") {
- notify_change(d);
+ if (drawerState[d].open) {
+ makeWriter(d);
}
+ notifyChange(d);
}
- update_drawers();
+ updateDrawers();
};
drawerChest.selectAll('div.drawer').data(drawers).enter().append('div').attr('class', drawerClassFn).style('left', function(d) {
@@ -203,13 +224,51 @@
return drawerPos[d].y + 'px';
}).on('click', box_click).call(make_box);
- update_drawers = function() {
+ updateDrawers = function() {
drawerChest.selectAll('div.drawer').attr('class', drawerClassFn).call(make_cards);
};
- update_drawers();
+ updateDrawers();
- editCont = d3.select('.edit-cont').style('display', 'none');
+ makeWriter = closeWriter = null;
+
+ (function() {
+ var editCont, editor, writer, writerDrawer;
+ writerDrawer = null;
+ makeWriter = function(drawer, delay) {
+ if (delay == null) {
+ delay = 2000;
+ }
+ setTimeout((function() {
+ editCont.style('display', null);
+ writerDrawer = drawer;
+ editor.property('value', drawerState[writerDrawer].cards[0]);
+ return writer.style('left', function(d) {
+ return drawerPos[writerDrawer].x + 'px';
+ }).style('top', function(d) {
+ return (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);
+ };
+ closeWriter = function() {
+ console.log('closeWriter', writerDrawer);
+ if (!writerDrawer) {
+ return;
+ }
+ drawerState[writerDrawer].cards[0] = editor.property('value');
+ notifyChange(writerDrawer);
+ updateDrawers(writerDrawer);
+ editCont.style('display', 'none');
+ writerDrawer = null;
+ };
+ d3.select(document).on('click.writer', closeWriter);
+ editCont = d3.select('.edit-cont').style('display', 'none');
+ writer = editCont.append('div').attr('class', 'writer').on('click', function() {
+ return d3.event.stopPropagation();
+ });
+ editor = writer.append('textarea');
+ writer.append('button').text('Close').on('click', closeWriter);
+ })();
hideLoading = function() {
return d3.select('.loading-cont').style('opacity', 1).transition().duration(1000).style('opacity', 0).remove();
@@ -231,7 +290,7 @@
cards: []
};
}
- update_drawers();
+ updateDrawers();
hideLoading();
});
socket.on('drawerChange', function(drawer, state) {
@@ -241,7 +300,7 @@
d = drawers[_k];
if (d === drawer) {
drawerState[d] = state;
- update_drawers();
+ updateDrawers();
return;
}
}
@@ -249,9 +308,9 @@
socket.on('reset', function() {
console.log('GOT reset');
resetDrawerState();
- update_drawers();
+ updateDrawers();
});
- notify_change = function(d) {
+ notifyChange = function(d) {
socket.emit('drawerChange', d, drawerState[d]);
};
} else {
@@ -261,6 +320,7 @@
d.cards = Math.random() > 0.85 ? [msgs[Math.floor(Math.random() * msgs.length)]] : [];
}
hideLoading();
+ notifyChange = function() {};
}
}).call(this);
View
60 public/muse.scss
@@ -6,7 +6,7 @@ $drawerDepth: 40px * $scale;
$openDepth: 27px * $scale;
$gap: 6px * $scale;
-/* --------------------- */
+/* ------------------------ */
$totalInnerWidth: ($drawerWidth + $gap) * ($number - 1);
$totalInnerHeight: ($drawerHeight + $gap) * ($number - 1);
@@ -15,6 +15,10 @@ $totalOuterHeight: $totalInnerHeight + $drawerHeight + $gap*2;
/* ------------------------ */
+$cardColor: #fffff6;
+
+/* ------------------------ */
+
@mixin center-xy ($w, $h) {
position: absolute;
top: 50%;
@@ -87,23 +91,16 @@ html, body {
overflow: hidden;
}
-@-webkit-keyframes card-appear
-{
+@-webkit-keyframes card-appear {
0% {
- -webkit-transform: translateZ($drawerDepth/2) translateY(-$drawerHeight);
- opacity: 0;
- }
- 60% {
opacity: 0;
}
100% {
- -webkit-transform: translateZ($drawerDepth/2) translateY(-$drawerHeight);
opacity: 1;
}
}
-@-webkit-keyframes card-up
-{
+@-webkit-keyframes card-up {
0% {
-webkit-transform: translateZ($drawerDepth/2 - 3px);
}
@@ -118,7 +115,6 @@ html, body {
}
}
-
.drawers-cont {
@include center-xy($totalOuterWidth, $totalOuterHeight);
-webkit-perspective: 600;
@@ -224,7 +220,7 @@ html, body {
&.back {
-webkit-transform: rotateY(180deg);
- background: white;
+ background: $cardColor;
font-size: 7px;
border: 1px solid gray;
overflow: hidden;
@@ -248,14 +244,13 @@ html, body {
z-index: 5;
.card {
- &.new {
- -webkit-animation: card-appear 2s;
- -webkit-animation-fill-mode: forwards;
- }
+ -webkit-animation: card-up 1s linear 1s;
+ -webkit-animation-fill-mode: both;
- &.normal {
- -webkit-animation: card-up 2s;
- -webkit-animation-fill-mode: forwards;
+ &.new {
+ -webkit-animation: card-up 1s linear 1s,
+ card-appear 1s linear 1s;
+ -webkit-animation-fill-mode: both;
}
}
}
@@ -265,6 +260,33 @@ html, body {
.edit-cont {
@include center-xy($totalOuterWidth, $totalOuterHeight);
+
+ .writer {
+ position: absolute;
+ border: 1px solid gray;
+ background: $cardColor;
+
+ 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;
+ }
+
+ button {
+ position: absolute;
+ bottom: 5px;
+ margin: 0;
+ right: 5px;
+ }
+ }
}
.loading-cont {
Please sign in to comment.
Something went wrong with that request. Please try again.