Skip to content
This repository was archived by the owner on Oct 2, 2018. It is now read-only.

Commit a175485

Browse files
author
Joshua Smith
committed
Merge pull request #156 from Codexa/visual-refresh
Visual refresh
2 parents 32d709d + 22c565e commit a175485

31 files changed

Lines changed: 142 additions & 700 deletions

‎index.html‎

Lines changed: 12 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -51,18 +51,14 @@
5151
<!-- Building Blocks -->
5252
<link rel="stylesheet" type="text/css" href="style/bb/action_menu.css"/>
5353
<link rel="stylesheet" type="text/css" href="style/bb/buttons.css"/>
54-
<link rel="stylesheet" type="text/css" href="style/bb/confirm.css"/>
5554
<link rel="stylesheet" type="text/css" href="style/bb/drawer.css"/>
5655
<link rel="stylesheet" type="text/css" href="style/bb/edit_mode.css"/>
5756
<link rel="stylesheet" type="text/css" href="style/bb/input_areas.css"/>
5857
<link rel="stylesheet" type="text/css" href="style/bb/lists.css"/>
5958
<link rel="stylesheet" type="text/css" href="style/bb/progress_activity.css"/>
60-
<link rel="stylesheet" type="text/css" href="style/bb/scrolling.css"/>
61-
<link rel="stylesheet" type="text/css" href="style/bb/seekbars.css"/>
6259
<link rel="stylesheet" type="text/css" href="style/bb/status.css"/>
6360
<link rel="stylesheet" type="text/css" href="style/bb/switches.css"/>
6461
<link rel="stylesheet" type="text/css" href="style/bb/tabs.css"/>
65-
<link rel="stylesheet" type="text/css" href="style/bb/time_selector.css"/>
6662
<link rel="stylesheet" type="text/css" href="style/bb/toolbars.css"/>
6763
<link rel="stylesheet" type="text/css" href="style/bb/value_selector.css"/>
6864

@@ -80,11 +76,8 @@
8076
<body role="application">
8177
<div class="spinner center" id="loadSpinner" style="z-index: 1000;"><div></div></div>
8278

83-
<section data-type="sidebar" id="sidebar_welcome">
79+
<section data-type="sidebar" id="sidebar_welcome" data-swipe-left="sidebar" data-swipe-left-id="welcome">
8480
<header>
85-
<menu type="toolbar">
86-
<button data-click="sidebar" data-click-id="welcome"><span class="icon icon-back"></span></button>
87-
</menu>
8881
<h1>Menu</h1>
8982
</header>
9083
<div role="toolbar">
@@ -113,9 +106,11 @@ <h2>Other</h2>
113106
</nav>
114107
</section>
115108

116-
<section role="region" id="welcome">
109+
<section role="region" id="welcome"
110+
data-swipe-right="sidebar" data-swipe-right-id="welcome" data-swipe-right-state="open"
111+
data-swipe-left="sidebar" data-swipe-left-id="welcome" data-swipe-left-state="close">
117112
<header>
118-
<button data-click="sidebar" data-click-id="welcome"><span class="icon icon-menu"></span></button>
113+
<button data-click="sidebar" data-click-id="welcome" class="drawerEnabled"><span class="icon icon-menu"></span></button>
119114
<menu type="toolbar">
120115
<button data-click="nav" data-click-location="add"><span class="icon icon-create"></span></button>
121116
</menu>
@@ -208,11 +203,8 @@ <h2>Documents on Dropbox</h2>
208203
</section>
209204
<div class="background"></div>
210205

211-
<section data-type="sidebar" id="sidebar_main" data-position="right">
206+
<section data-type="sidebar" id="sidebar_main" data-position="right" data-swipe-right="sidebar" data-swipe-right-id="main">
212207
<header>
213-
<menu type="toolbar">
214-
<button data-click="sidebar" data-click-id="main"><span class="icon icon-back"></span></button>
215-
</menu>
216208
<h1>Menu</h1>
217209
</header>
218210
<div role="toolbar">
@@ -243,13 +235,15 @@ <h2>Other</h2>
243235
</nav>
244236
</section>
245237

246-
<section role="region" id="edit">
238+
<section role="region" id="edit"
239+
data-swipe-left="sidebar" data-swipe-left-id="main" data-swipe-left-state="open"
240+
data-swipe-right="sidebar" data-swipe-right-id="main" data-swipe-right-state="close">
247241
<header>
248242
<button data-click="closeFile"><span class="icon icon-close"></span></button>
249243
<menu type="toolbar">
250244
<button data-click="saveFromEditor" id="editorSaveButton"><span class="icon icon-save"></span></button>
251245
<button data-click="fullscreen"><span class="icon icon-fs"></span></button>
252-
<button data-click="sidebar" data-click-id="main"><span class="icon icon-menu"></span></button>
246+
<button data-click="sidebar" data-click-id="main" class="drawerEnabled"><span class="icon icon-menu"></span></button>
253247
</menu>
254248
<h1><span id="currentFileLocation" style="display:none;"></span><span id="currentFileDirectory" style="display:none;"></span><span id="currentFileName"></span><span id="currentFileType"></span></h1>
255249
</header>
@@ -267,6 +261,8 @@ <h1><span id="currentFileLocation" style="display:none;"></span><span id="curren
267261
<li><button class="sticky icon-strikethrough" firetext-icon id="strikethrough" data-click="formatDoc" data-click-action="strikeThrough"></button></li>
268262
<li><button class="icon-more" data-click="nav" data-click-location="format"></button></li>
269263
</ul>
264+
<ul>
265+
</ul>
270266
</div>
271267
</div>
272268
</li>
@@ -529,9 +525,6 @@ <h2>Cloud</h2>
529525
<aside class="icon-dropbox"></aside>
530526
<p>Use <b>Dropbox</b></p>
531527
</li>
532-
<li class="noLink">
533-
<p>More storage providers coming!</p>
534-
</li>
535528
</ul>
536529
<h2>Editing</h2>
537530
<ul>

‎scripts/firetext.js‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,9 @@ firetext.init = function () {
5151

5252
// Find device type
5353
checkDevice();
54+
55+
// Initialize gestures
56+
initGestures();
5457

5558
/* Select important elements for later */
5659
// Misc
@@ -909,6 +912,13 @@ document.addEventListener('blur', function(event) {
909912
processActions('data-blur', event.target);
910913
});
911914

915+
function initGestures () {
916+
new GestureDetector(document.body).startDetecting();
917+
document.body.addEventListener('swipe', function (event) {
918+
processActions(('data-swipe-'+event.detail.direction), event.target);
919+
});
920+
}
921+
912922
function processActions(eventAttribute, target) {
913923
if (target && target.getAttribute) {
914924
if (target.hasAttribute(eventAttribute) != true) {
@@ -931,7 +941,7 @@ function processActions(eventAttribute, target) {
931941
} else if (calledFunction == 'navBack') {
932942
regions.navBack();
933943
} else if (calledFunction == 'sidebar') {
934-
regions.sidebar(target.getAttribute(eventAttribute + '-id'));
944+
regions.sidebar(target.getAttribute(eventAttribute + '-id'), target.getAttribute(eventAttribute + '-state'));
935945
} else if (calledFunction == 'saveFromEditor') {
936946
saveFromEditor(true, true);
937947
} else if (calledFunction == 'closeFile') {

‎scripts/lib/gesture_detector.js‎

100755100644
Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,9 @@
3434
* also pass an optional object as the second constructor argument. If you're
3535
* interested in holdstart/holdmove/holdend events, pass {holdEvents:true} as
3636
* this second argument. Otherwise they will not be generated.
37+
* If you want to customize the pan threshold, pass
38+
* {panThreshold:X, mousePanThreshold:Y} (X and Y in pixels) in the options
39+
* argument.
3740
*
3841
* Implementation note: event processing is done with a simple finite-state
3942
* machine. This means that in general, the various kinds of gestures are
@@ -58,6 +61,9 @@ var GestureDetector = (function() {
5861
function GD(e, options) {
5962
this.element = e;
6063
this.options = options || {};
64+
this.options.panThreshold = this.options.panThreshold || GD.PAN_THRESHOLD;
65+
this.options.mousePanThreshold =
66+
this.options.mousePanThreshold || GD.MOUSE_PAN_THRESHOLD;
6167
this.state = initialState;
6268
this.timers = {};
6369
this.listeningForMouseEvents = true;
@@ -159,7 +165,7 @@ var GestureDetector = (function() {
159165
var event = this.element.ownerDocument.createEvent('CustomEvent');
160166
event.initCustomEvent(type, true, true, detail);
161167
this.target.dispatchEvent(event);
162-
}
168+
};
163169

164170
//
165171
// Tuneable parameters
@@ -363,8 +369,8 @@ var GestureDetector = (function() {
363369
if (t.identifier !== d.touch1)
364370
return;
365371

366-
if (abs(t.screenX - d.start.screenX) > GD.PAN_THRESHOLD ||
367-
abs(t.screenY - d.start.screenY) > GD.PAN_THRESHOLD) {
372+
if (abs(t.screenX - d.start.screenX) > d.options.panThreshold ||
373+
abs(t.screenY - d.start.screenY) > d.options.panThreshold) {
368374
d.clearTimer('holdtimeout');
369375
d.switchTo(panStartedState, e, t);
370376
}
@@ -711,8 +717,8 @@ var GestureDetector = (function() {
711717
// then switch to the mouse panning state. Otherwise remain
712718
// in this state
713719

714-
if (abs(e.screenX - d.start.screenX) > GD.MOUSE_PAN_THRESHOLD ||
715-
abs(e.screenY - d.start.screenY) > GD.MOUSE_PAN_THRESHOLD) {
720+
if (abs(e.screenX - d.start.screenX) > d.options.mousePanThreshold ||
721+
abs(e.screenY - d.start.screenY) > d.options.mousePanThreshold) {
716722
d.clearTimer('holdtimeout');
717723
d.switchTo(mousePannedState, e);
718724
}

‎scripts/regions.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -99,9 +99,10 @@ regions.navBack = function () {
9999
regions.nav(regions.history.pop());
100100
}
101101

102-
regions.sidebar = function (name) {
102+
regions.sidebar = function (name, state) {
103103
if (document.getElementById('sidebar_' + name) && document.querySelector('.current')) {
104-
if (document.querySelector('.current').getAttribute('data-state') == 'drawer') {
104+
if ((state && (state != 'open' || state == 'close')) ||
105+
(!state && document.querySelector('.current').getAttribute('data-state') == 'drawer')) {
105106
document.getElementById('sidebar_' + name).classList.remove('active');
106107
document.querySelector('.current').setAttribute('data-state', 'none');
107108
} else {

‎style/bb/action_menu.css‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -16,17 +16,16 @@ section[role="object"] {
1616
right: 0;
1717
bottom: 0;
1818
padding: 0 0 7rem;
19-
transform: scale(2, 2);
20-
-moz-transform: scale(2, 2);
21-
-webkit-transform: scale(2, 2);
22-
-o-transform: scale(2, 2);
23-
-ms-transform: scale(2, 2);
24-
opacity: 0;
19+
-moz-transform: translateY(100%);
20+
-webkit-transform: translateY(100%);
21+
-o-transform: translateY(100%);
22+
-ms-transform: translateY(100%);
23+
transform: translateY(100%);
24+
-moz-transition: all .4s ease;
25+
-webkit-transition: all .4s ease;
26+
-o-transition: all .4s ease;
27+
transition: all .4s ease;
2528
pointer-events: none;
26-
transition: all .4s;
27-
-moz-transition: all .4s;
28-
-webkit-transition: all .4s;
29-
-o-transition: all .4s;
3029
/**
3130
* Using "font-size: 0" to avoid the unwanted visual space (about 3px) created
3231
* by white spaces and line breaks in the code between inline-block elements.
@@ -40,11 +39,11 @@ section[role="object"].current,
4039
section[role="action"].parent,
4140
section[role="object"].parent {
4241
opacity: 1;
43-
transform: none;
4442
-moz-transform: none;
4543
-webkit-transform: none;
4644
-o-transform: none;
4745
-ms-transform: none;
46+
transform: none;
4847
pointer-events: auto;
4948
}
5049

0 commit comments

Comments
 (0)