Skip to content
This repository
Browse code

Experimental prototype for side-scrolling.

  • Loading branch information...
commit a3e41edd0dd6d27cf040f28d6b0145d2d86a1b2e 1 parent 9e8be44
Adam Solove asolove authored
20 client/client.coffee
@@ -151,6 +151,21 @@ $ ->
151 151 item.text = loadEvent.target.result
152 152 reader.readAsText(file)
153 153
  154 + scrollTo = (el) ->
  155 + minX = $("body").scrollLeft()
  156 + maxX = minX + $("body").width()
  157 + target = el.position().left
  158 + width = el.outerWidth()
  159 + contentWidth = $(".page").outerWidth() * $(".page").size()
  160 +
  161 + if target < minX
  162 + $("body").animate scrollLeft: target - 10
  163 + else if target + width > maxX
  164 + $("body").animate scrollLeft: target - ($("body").width() - width) + 20
  165 + else if maxX > $(".pages").outerWidth()
  166 + $("body").animate scrollLeft: contentWidth - $("body").width() + 60
  167 +
  168 +
154 169 # PLUGINS for each story item type
155 170
156 171 window.plugins =
@@ -309,11 +324,12 @@ $ ->
309 324 e.preventDefault()
310 325 name = $(e.target).data 'pageName'
311 326 $(e.target).parents('.page').nextAll().remove() unless e.shiftKey
312   - $("<div/>").attr('id', name).addClass("page").appendTo('.main').each refresh
  327 + scrollTo $("<div/>").attr('id', name).addClass("page").appendTo('.main').each refresh
  328 + # FIXME: can open page multiple times with shift key
313 329
314 330 if History.enabled
315 331 pages = $.makeArray $(".page").map (_, el) -> el.id
316   - History.pushState {pages: pages}, name, ("/view/#{page}" for page in pages).join ''
  332 + History.pushState {pages: pages}, name, ("/view/#{page}" for page in pages).join('') + "##{name}"
317 333
318 334 .delegate '.action', 'hover', ->
319 335 $('#'+$(this).data('itemId')).toggleClass('target')
27 client/client.js
@@ -4,7 +4,7 @@
4 4 return this[this.length - 1];
5 5 };
6 6 $(function() {
7   - var addToJournal, bindDragAndDrop, formatTime, getItem, getPlugin, pushToLocal, pushToServer, putAction, randomByte, randomBytes, refresh, renderInternalLink, resolveLinks, scripts, textEditor, useLocalStorage;
  7 + var addToJournal, bindDragAndDrop, formatTime, getItem, getPlugin, pushToLocal, pushToServer, putAction, randomByte, randomBytes, refresh, renderInternalLink, resolveLinks, scripts, scrollTo, textEditor, useLocalStorage;
8 8 window.wiki = {};
9 9 randomByte = function() {
10 10 return (((1 + Math.random()) * 0x100) | 0).toString(16).substring(1);
@@ -210,6 +210,27 @@
210 210 }
211 211 });
212 212 };
  213 + scrollTo = function(el) {
  214 + var contentWidth, maxX, minX, target, width;
  215 + minX = $("body").scrollLeft();
  216 + maxX = minX + $("body").width();
  217 + target = el.position().left;
  218 + width = el.outerWidth();
  219 + contentWidth = $(".page").outerWidth() * $(".page").size();
  220 + if (target < minX) {
  221 + return $("body").animate({
  222 + scrollLeft: target - 10
  223 + });
  224 + } else if (target + width > maxX) {
  225 + return $("body").animate({
  226 + scrollLeft: target - ($("body").width() - width) + 20
  227 + });
  228 + } else if (maxX > $(".pages").outerWidth()) {
  229 + return $("body").animate({
  230 + scrollLeft: contentWidth - $("body").width() + 60
  231 + });
  232 + }
  233 + };
213 234 window.plugins = {
214 235 paragraph: {
215 236 emit: function(div, item) {
@@ -411,7 +432,7 @@
411 432 if (!e.shiftKey) {
412 433 $(e.target).parents('.page').nextAll().remove();
413 434 }
414   - $("<div/>").attr('id', name).addClass("page").appendTo('.main').each(refresh);
  435 + scrollTo($("<div/>").attr('id', name).addClass("page").appendTo('.main').each(refresh));
415 436 if (History.enabled) {
416 437 pages = $.makeArray($(".page").map(function(_, el) {
417 438 return el.id;
@@ -426,7 +447,7 @@
426 447 _results.push("/view/" + page);
427 448 }
428 449 return _results;
429   - })()).join(''));
  450 + })()).join('') + ("#" + name));
430 451 }
431 452 }).delegate('.action', 'hover', function() {
432 453 return $('#' + $(this).data('itemId')).toggleClass('target');
6 server/views/layout.haml
@@ -14,6 +14,6 @@
14 14 %body
15 15 .main
16 16 =yield
17   - %br{:clear => 'all'}
18   - %input{:type => "checkbox", :id => "localEditing", :class => "local_editing clickable"}
19   - %label{:for => "localEditing", :class => "clickable"} Local editing
  17 + .tools
  18 + %input{:type => "checkbox", :id => "localEditing", :class => "local_editing clickable"}
  19 + %label{:for => "localEditing", :class => "clickable"} Local editing
50 server/views/style.sass
... ... @@ -1,14 +1,39 @@
  1 +$bgcolor: #eee
  2 +
1 3 .error
2 4 color: #b00
3 5
  6 +@mixin full-size
  7 + top: 0
  8 + left: 0
  9 + right: 0
  10 + bottom: 0
  11 + position: absolute
  12 +
4 13 body
5   - background-color: #eee
  14 + @include full-size
  15 + background-color: $bgcolor
  16 + overflow: hidden
  17 + padding: 0
  18 + margin: 0
  19 + font-family: Verdana, Arial, Sans
6 20
7 21 .main
8   - font-family: Verdana, Arial, Sans
9   - margin-left: auto
10   - margin-right: auto
11   - margin-top: 3em
  22 + @include full-size
  23 + bottom: 60px
  24 + margin: 0
  25 + width: 10000%
  26 +
  27 +.tools
  28 + position: fixed
  29 + bottom: 0
  30 + left: 0
  31 + right: 0
  32 + height: 20px
  33 + background: darken($bgcolor, 10%)
  34 + padding: 10px
  35 + font-size: 85%
  36 + color: #666
12 37
13 38 .story
14 39 padding-bottom: 5px
@@ -17,7 +42,7 @@ body
17 42 .image
18 43 float: right
19 44 margin-left: .4em
20   - background: #eee
  45 + background: $bgcolor
21 46 padding: .8em
22 47 width: 40%
23 48
@@ -25,7 +50,7 @@ body
25 50 width: 100%
26 51
27 52 .journal
28   - background-color: #eee
  53 + background-color: $bgcolor
29 54 overflow: auto
30 55 padding: 3px
31 56
@@ -67,13 +92,12 @@ p.readout
67 92
68 93 .page
69 94 float: left
70   - margin: 1em
71   - padding: 2em
  95 + margin: .5em
  96 + padding: 0 2em
72 97 width: 26em
73 98 background-color: #fff
74   - -moz-box-shadow: 5px 8px 10px 5px #ccc
75   - -webkit-box-shadow: 5px 8px 10px 5px #ccc
76   - box-shadow: 5px 8px 10px 5px #ccc
  99 + height: 100%
  100 + overflow: auto
77 101
78 102 .page.local
79 103 background-color: #FBFBEF
@@ -88,7 +112,7 @@ textarea
88 112 clear: both
89 113 margin-top: 5px
90 114 margin-bottom: 5px
91   - background-color: #eee
  115 + background-color: $bgcolor
92 116
93 117 .factory p
94 118 padding: 10px

0 comments on commit a3e41ed

Please sign in to comment.
Something went wrong with that request. Please try again.