wepub

Check-in [e2ccaa73af]
Login

Many hyperlinks are disabled.
Use anonymous login to enable hyperlinks.

Overview
Comment:Center tap to get an actual modal, font change is in there now, along with explicit position sync and percentage document jump.
Downloads: Tarball | ZIP archive | SQL archive
Timelines: family | ancestors | master | trunk
Files: files | file ages | folders
SHA3-256:e2ccaa73af438caa41a833491a4f01d2eea4aa644b76e0f0dfe5bd468cbbd2ea
User & Date: vandys 2019-04-09 00:18:19
Context
2019-04-09
00:18
Center tap to get an actual modal, font change is in there now, along with explicit position sync and percentage document jump. Leaf check-in: e2ccaa73af user: vandys tags: master, trunk
2019-03-09
21:49
Snap position as we leave a chapter, as otherwise our current reading position can be too far beyond what was last saved. check-in: 05c6b57556 user: vandys tags: master, trunk
Changes
Hide Diffs Unified Diffs Ignore Whitespace Patch

Changes to css/epub.css.

7
8
9
10
11
12
13































}
#textview {
 color: white;
 background: black;
 width: 100%;
 font-size: 14px;
}






































>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
}
#textview {
 color: white;
 background: black;
 width: 100%;
 font-size: 14px;
}
#menu {
 position: fixed;
 left: 20vw;
 top: 20vh;
 width: 50vw;
 height: 40vh;
 background: darkgreen;
}
#menu * {
 font-size: 15px;
}
#fonts {
 width: 100%;
 overflow: auto;
}
#fonts button:nth-child(1) {
 float: left;
}
#fonts button:nth-child(2) {
 float: right;
}
#saving,#doneing {
 width: 100%;
 text-align: center;
}
#positioning {
 margin-top: 6px;
}
#inpos {
 max-width: 100px;
}

Changes to get.py.

157
158
159
160
161
162
163




















164
165
166
167
168
169
170
            # Here's your chapter

	    # Header
            nm = book.titles[0] if book.titles else parts[-2]
            head = "%s chapter %d" % (nm, chapnum)
            buf = self.build_header(head)
            buf += '<script src="/js/reader.js"></script>\n'




















            if chapnum > 0:
                buf += '<a href="%d">Previous Chapter</a>\n' % \
                 (chapnum,)
	    buf += '<link rel="stylesheet" type="text/css"'
	    buf += ' href="/css/epub.css" />\n'
            buf += '<div id="textview">\n'
	    buf1 = buf







>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>







157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
            # Here's your chapter

	    # Header
            nm = book.titles[0] if book.titles else parts[-2]
            head = "%s chapter %d" % (nm, chapnum)
            buf = self.build_header(head)
            buf += '<script src="/js/reader.js"></script>\n'
	    buf += '''
<div id="menu" style="display: none; z-index: 999;">
 <div id="fonts">
  <button onclick="fontsize(-1);">Font-</button>
  <button onclick="fontsize(1);">Font+</button>
 </div>
 <p>
 <div id="saving">
  <button onclick="save_state();">Sync Position</button>
 </div>
 <div id="positioning">
  <input type="number" id="inpos">
  <button onclick="setpos();">Set Position (percent)</button>
 </div>
 <p>
 <div id="doneing">
  <button onclick="donemenu();">done</button>
 </div>
</div>
'''
            if chapnum > 0:
                buf += '<a href="%d">Previous Chapter</a>\n' % \
                 (chapnum,)
	    buf += '<link rel="stylesheet" type="text/css"'
	    buf += ' href="/css/epub.css" />\n'
            buf += '<div id="textview">\n'
	    buf1 = buf

Changes to js/reader.js.

97
98
99
100
101
102
103
104

105
106
107
108
109
110
111
...
124
125
126
127
128
129
130



















131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
...
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
...
226
227
228
229
230
231
232


























        st.pos = parseFloat(d.scrollTop) / parseFloat(d.scrollHeight);

        // Current font size
        st.fontSize = curSize;

        // Send it over
        xhr_put_json("/state.json?doc=" + encodeURIComponent(docname),
            JSON.stringify(st), null);

    }
}

// Next step of scrolling
function smooth_scroll(d, incr, step) {

    // Reached target
................................................................................
function smoothly(d, targ) {
    const dx = targ - d.scrollTop;
    const incr = parseFloat(dx)/Steps;

    // Walk steps until we reach @targ
    smooth_scroll(d, incr, Steps);
}




















// They tapped the screen.
//
// First pass, upper half shrinks text, lower grows.
function tapped(ev) {
    // When we changed font size, our scroll position has to be refreshed
    //  to be the same portion of the new scrollable size.
    const d = document.scrollingElement;
    const pos = parseFloat(d.scrollTop) / parseFloat(d.scrollHeight);

    // Short names for geometry
    const h = window.innerHeight, w = window.innerWidth;

    // Top quarter, previous page, bottom quarter, next page
    // 10% overlap
    // We delay the scroll to "break" the finger contact which
................................................................................
        nd = d.scrollTop + (9 * d.clientHeight) / 10;
    }
    if (nd != null) {
        smoothly(d, nd);
        return;
    }

    // Font adjustment only happend in middle third of screen
    const evX = ev.screenX;
    if ((evX < w/3) || (evX > ((w*2)/3))) {
        return;
    }

    // Shrink for upper tap, grow for lower
    if (evY < h/2) {
        if (curSize > 4) {
            curSize -= 2;
        }
    } else {
        curSize += 2;
    }
    pane.style.fontSize = curSize.toString() + "px";

    // Now reposition based on new scrollHeight
    d.scrollTop = d.scrollHeight * pos;
}

// On page load, configure to track this user for this scrollable
//  text content of this document.  If there's a saved position,
//  scroll to it.
function reading(arg_who, arg_doc, arg_pane) {
    // Save for future
................................................................................
//  not catching a lose-focus after a sequence of short-ish
//  chapters, and having to work through all of the chapters
//  again.
function end_chapter() {
    save_state();
    return true;
}

































|
>







 







>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>








<







 







|
|
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<







 







>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
...
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158

159
160
161
162
163
164
165
...
173
174
175
176
177
178
179
180
181
















182
183
184
185
186
187
188
...
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
        st.pos = parseFloat(d.scrollTop) / parseFloat(d.scrollHeight);

        // Current font size
        st.fontSize = curSize;

        // Send it over
        xhr_put_json("/state.json?doc=" + encodeURIComponent(docname),
            JSON.stringify(st),
	    () => { donemenu(); });
    }
}

// Next step of scrolling
function smooth_scroll(d, incr, step) {

    // Reached target
................................................................................
function smoothly(d, targ) {
    const dx = targ - d.scrollTop;
    const incr = parseFloat(dx)/Steps;

    // Walk steps until we reach @targ
    smooth_scroll(d, incr, Steps);
}

// Change font size
function fontsize(delta) {
    const d = document.scrollingElement;
    const pos = parseFloat(d.scrollTop) / parseFloat(d.scrollHeight);

    // Shrink for upper tap, grow for lower
    if (delta < 0) {
        if (curSize > 4) {
            curSize -= 2;
        }
    } else {
        curSize += 2;
    }
    pane.style.fontSize = curSize.toString() + "px";

    // Now reposition based on new scrollHeight
    d.scrollTop = d.scrollHeight * pos;
}

// They tapped the screen.
//
// First pass, upper half shrinks text, lower grows.
function tapped(ev) {
    // When we changed font size, our scroll position has to be refreshed
    //  to be the same portion of the new scrollable size.
    const d = document.scrollingElement;


    // Short names for geometry
    const h = window.innerHeight, w = window.innerWidth;

    // Top quarter, previous page, bottom quarter, next page
    // 10% overlap
    // We delay the scroll to "break" the finger contact which
................................................................................
        nd = d.scrollTop + (9 * d.clientHeight) / 10;
    }
    if (nd != null) {
        smoothly(d, nd);
        return;
    }

    // Otherwise go interactive
    showmenu();
















}

// On page load, configure to track this user for this scrollable
//  text content of this document.  If there's a saved position,
//  scroll to it.
function reading(arg_who, arg_doc, arg_pane) {
    // Save for future
................................................................................
//  not catching a lose-focus after a sequence of short-ish
//  chapters, and having to work through all of the chapters
//  again.
function end_chapter() {
    save_state();
    return true;
}

// They tapped on the pane, show the menu
function showmenu() {
    const d = document.scrollingElement;
    const pos = parseFloat(d.scrollTop) / parseFloat(d.scrollHeight);
    inpos.value = parseInt(pos * 10000.0) / 100.0;
    menu.style.display = "block";
}
// Done with menu
function donemenu() {
    menu.style.display = "none";
}

// Take value from percentage input field,
//  scroll there in the document.
function setpos() {
    const frac = parseFloat(inpos.value) / 100.0;
    if (frac < 0.0) {
	frac = 0.0;
    } else if (frac > 100.0) {
	frac = 100.0;
    }
    const d = document.scrollingElement;
    d.scrollTop = d.scrollHeight * frac;
    save_state();
}