Skip to content

Commit 44b6553

Browse files
committed
waypoint
1 parent e0c0113 commit 44b6553

8 files changed

Lines changed: 183 additions & 27 deletions

File tree

public/assets/templates.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

public/javascripts/DV/controllers/document_viewer.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -123,7 +123,8 @@ DV.load = function(documentRep, options) {
123123
sidebar : true
124124
};
125125
options = DV._.extend({}, defaults, options);
126-
options.fixedSize = !!(options.width || options.height);
126+
options.sidebarVisible = options.sidebar;
127+
options.fixedSize = !options.responsive && (!!(options.width || options.height));
127128
var viewer = new DV.DocumentViewer(options);
128129
DV.viewers[id] = viewer;
129130
// Once we have the JSON representation in-hand, finish loading the viewer.

public/javascripts/DV/helpers/construction.js

Lines changed: 39 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -10,18 +10,19 @@ DV._.extend(DV.Schema.helpers, {
1010
var doc = this.viewer.schema.document;
1111
var pagesHTML = this.constructPages();
1212
var description = (doc.description) ? doc.description : null;
13-
var storyURL = doc.resources.related_article;
13+
var storyURL = doc.resources.related_article;
14+
var options = this.viewer.options;
1415

1516
var headerHTML = JST.header({
16-
options : this.viewer.options,
17+
options : options,
1718
id : doc.id,
1819
story_url : storyURL,
1920
title : doc.title || ''
2021
});
21-
var footerHTML = JST.footer({options : this.viewer.options});
22+
var footerHTML = JST.footer({options : options});
2223

2324
var pdfURL = doc.resources.pdf;
24-
pdfURL = pdfURL && this.viewer.options.pdf !== false ? '<a target="_blank" href="' + pdfURL + '">Original Document (PDF) &raquo;</a>' : '';
25+
pdfURL = pdfURL && options.pdf !== false ? '<a target="_blank" href="' + pdfURL + '">Original Document (PDF) &raquo;</a>' : '';
2526

2627
var contribs = doc.contributor && doc.contributor_organization &&
2728
('' + doc.contributor + ', '+ doc.contributor_organization);
@@ -30,7 +31,7 @@ DV._.extend(DV.Schema.helpers, {
3031
var printNotesURL = (showAnnotations) && doc.resources.print_annotations;
3132

3233
var viewerOptions = {
33-
options : this.viewer.options,
34+
options : options,
3435
pages: pagesHTML,
3536
header: headerHTML,
3637
footer: footerHTML,
@@ -39,21 +40,41 @@ DV._.extend(DV.Schema.helpers, {
3940
story_url: storyURL,
4041
print_notes_url: printNotesURL,
4142
descriptionContainer: JST.descriptionContainer({ description: description}),
42-
autoZoom: this.viewer.options.zoom == 'auto',
43+
autoZoom: options.zoom == 'auto',
4344
mini: false
4445
};
4546

46-
var width = this.viewer.options.width;
47-
var height = this.viewer.options.height;
48-
if (width && height) {
47+
if (options.responsive) {
48+
if (!options.height) {
49+
var winHeight = DV.jQuery(window).height();
50+
var toSubtract = options.responsiveOffset == null ? 100 : options.responsiveOffset;
51+
options.height = winHeight - toSubtract;
52+
}
53+
}
54+
55+
var width = options.width;
56+
var height = options.height;
57+
if (width && height && !options.responsive) {
4958
if (width < 500) {
50-
this.viewer.options.mini = true;
59+
options.mini = true;
5160
viewerOptions.mini = true;
5261
}
53-
DV.jQuery(this.viewer.options.container).css({
62+
DV.jQuery(options.container).css({
63+
position: 'relative',
64+
width: options.width,
65+
height: options.height
66+
});
67+
}
68+
69+
if (options.responsive) {
70+
DV.jQuery(options.container).css({
5471
position: 'relative',
55-
width: this.viewer.options.width,
56-
height: this.viewer.options.height
72+
height: options.height
73+
});
74+
75+
var viewer = this.viewer;
76+
DV.jQuery(window).resize(function() {
77+
viewer.helpers.responsiveRedraw();
5778
});
5879
}
5980

@@ -174,21 +195,22 @@ DV._.extend(DV.Schema.helpers, {
174195
// Hide the overflow of the body, unless we're positioned.
175196
var containerEl = DV.jQuery(this.viewer.options.container);
176197
var position = containerEl.css('position');
177-
if (position != 'relative' && position != 'absolute' && !this.viewer.options.fixedSize) {
198+
if (position != 'relative' && position != 'absolute' && !this.viewer.options.fixedSize && !this.viewer.options.responsive) {
178199
DV.jQuery("html, body").css({overflow : 'hidden'});
179200
// Hide the border, if we're a full-screen viewer in the body tag.
180201
if (containerEl.offset().top == 0) {
181202
this.viewer.elements.viewer.css({border: 0});
182203
}
183204
}
205+
this.viewer.helpers._prevWidth = this.viewer.elements.viewer.width();
184206

185207
// Hide and show navigation flags:
186208
var showAnnotations = this.showAnnotations();
187209
var showPages = this.models.document.totalPages > 1;
188210
var showSearch = (this.viewer.options.search !== false) &&
189211
(this.viewer.options.text !== false) &&
190212
(!this.viewer.options.width || this.viewer.options.width >= 540);
191-
var noFooter = (!showAnnotations && !showPages && !showSearch && !this.viewer.options.sidebar);
213+
var noFooter = (!showAnnotations && !showPages && !showSearch && !this.viewer.options.sidebarVisible);
192214

193215

194216
// Hide annotations, if there are none:
@@ -224,7 +246,7 @@ DV._.extend(DV.Schema.helpers, {
224246
// Remove and re-render the nav controls.
225247
// Don't show the nav controls if there's no sidebar, and it's a one-page doc.
226248
this.viewer.$('.DV-navControls').remove();
227-
if (showPages || this.viewer.options.sidebar) {
249+
if (showPages || this.viewer.options.sidebarVisible) {
228250
var navControls = JST.navControls({
229251
totalPages: this.viewer.schema.data.totalPages,
230252
totalAnnotations: this.viewer.schema.data.totalAnnotations
@@ -243,9 +265,7 @@ DV._.extend(DV.Schema.helpers, {
243265
}
244266
}
245267

246-
if (this.viewer.options.sidebar) {
247-
this.viewer.$('.DV-sidebar').show();
248-
}
268+
this.viewer.elements.viewer.toggleClass('DV-hideSidebar', !this.viewer.options.sidebarVisible);
249269

250270
// Check if the zoom is showing, and if not, shorten the width of search
251271
DV._.defer(DV._.bind(function() {

public/javascripts/DV/helpers/helpers.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ DV.Schema.helpers = {
22

33
HOST_EXTRACTOR : (/https?:\/\/([^\/]+)\//),
44

5+
RESPONSIVE_MIN_SIDEBAR_WIDTH: 900,
6+
57
annotationClassName: '.DV-annotation',
68

79
// Bind all events for the docviewer
@@ -516,6 +518,15 @@ DV.Schema.helpers = {
516518
this.events.zoom(zoom);
517519
},
518520

521+
responsiveRedraw: function() {
522+
var width = this.viewer.elements.viewer.width();
523+
if (width != this._prevWidth) {
524+
this.viewer.options.sidebarVisible = width >= this.viewer.helpers.RESPONSIVE_MIN_SIDEBAR_WIDTH;
525+
this.viewer.api.redraw(true);
526+
this._prevWidth = width;
527+
}
528+
},
529+
519530
handleInitialState: function(){
520531
var initialRouteMatch = this.viewer.history.loadURL(true);
521532
if(!initialRouteMatch) {

public/javascripts/DV/views/footer.jst

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<% if (!options.sidebar) { %>
1+
<% if (!options.sidebarVisible) { %>
22
<div class="DV-footer">
33
<div class="DV-fullscreenContainer"></div>
44
<div class="DV-navControlsContainer"></div>

public/javascripts/DV/views/viewer.jst

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
</div>
2222
</div>
2323

24-
<div class="DV-pages <% if (!options.sidebar) { %>DV-hide-sidebar<% } %>">
24+
<div class="DV-pages <% if (!options.sidebarVisible) { %>DV-hide-sidebar<% } %>">
2525
<div class="DV-paper">
2626
<div class="DV-thumbnails"></div>
2727
<div class="DV-pageCollection">
@@ -42,12 +42,12 @@
4242
</div>
4343
</div>
4444

45-
<div width="265px" class="DV-sidebar <% if (!options.sidebar) { %>DV-hide<% } %>" style="display:none;">
45+
<div width="265px" class="DV-sidebar">
4646
<div class="DV-well">
4747

4848
<div class="DV-sidebarSpacer"></div>
4949

50-
<% if (options.sidebar) { %>
50+
<% if (options.sidebarVisible) { %>
5151
<div class="DV-navControlsContainer">
5252
</div>
5353
<% } %>

public/stylesheets/DV/components/structure.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -110,11 +110,11 @@
110110
color:#666;
111111
}
112112

113-
.DV-sidebar.DV-hide {
113+
.DV-hideSidebar .DV-sidebar, .DV-sidebar.DV-hide {
114114
display: none !important;
115115
}
116116

117-
.DV-pages.DV-hide-sidebar {
117+
.DV-hideSidebar .DV-pages {
118118
right: 0;
119119
}
120120

viewer-responsive.html

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
<!DOCTYPE html>
2+
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5+
<meta http-equiv="ClearType" content="true">
6+
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
7+
<title>Document Viewer (Dev)</title>
8+
9+
<link href="public/stylesheets/DV/components/reset.css" media="screen" rel="stylesheet" type="text/css" />
10+
<link href="public/stylesheets/DV/components/structure.css" media="screen" rel="stylesheet" type="text/css" />
11+
<link href="public/stylesheets/DV/components/ui.css" media="screen" rel="stylesheet" type="text/css" />
12+
<link href="public/stylesheets/DV/components/annotations.css" media="screen" rel="stylesheet" type="text/css" />
13+
<link href="public/stylesheets/DV/components/pages.css" media="screen" rel="stylesheet" type="text/css" />
14+
<link href="public/stylesheets/DV/components/ui-header.css" media="screen" rel="stylesheet" type="text/css" />
15+
<link href="public/stylesheets/DV/components/ui-footer.css" media="screen" rel="stylesheet" type="text/css" />
16+
<link href="public/stylesheets/DV/components/ui-menu.css" media="screen" rel="stylesheet" type="text/css" />
17+
<link href="public/stylesheets/DV/components/ui-navigation.css" media="screen" rel="stylesheet" type="text/css" />
18+
<link href="public/stylesheets/DV/components/ui-search.css" media="screen" rel="stylesheet" type="text/css" />
19+
<link href="public/stylesheets/DV/components/ui-text.css" media="screen" rel="stylesheet" type="text/css" />
20+
<link href="public/stylesheets/DV/components/ui-zoom.css" media="screen" rel="stylesheet" type="text/css" />
21+
<link href="public/stylesheets/DV/components/view-annotations.css" media="screen" rel="stylesheet" type="text/css" />
22+
<link href="public/stylesheets/DV/components/view-document.css" media="screen" rel="stylesheet" type="text/css" />
23+
<link href="public/stylesheets/DV/components/view-search.css" media="screen" rel="stylesheet" type="text/css" />
24+
<link href="public/stylesheets/DV/components/view-text.css" media="screen" rel="stylesheet" type="text/css" />
25+
<link href="public/stylesheets/DV/components/view-thumbnails.css" media="screen" rel="stylesheet" type="text/css" />
26+
<link href="public/stylesheets/DV/components/unsupported.css" media="screen" rel="stylesheet" type="text/css" />
27+
<link href="public/stylesheets/DV/components/minimode.css" media="screen" rel="stylesheet" type="text/css" />
28+
<link href="public/stylesheets/DV/themes/plain.css" media="screen" rel="stylesheet" type="text/css" />
29+
30+
<link href="public/stylesheets/DV/print.css" media="print" rel="stylesheet" type="text/css" />
31+
32+
<style>
33+
body { margin: 0; }
34+
</style>
35+
36+
<script src="public/javascripts/DV/vendor/jquery-1.5.1.js" type="text/javascript"></script>
37+
<script src="public/javascripts/DV/vendor/jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script>
38+
<script src="public/javascripts/DV/vendor/underscore.js" type="text/javascript"></script>
39+
<script src="public/javascripts/DV/vendor/jquery.acceptInput.js" type="text/javascript"></script>
40+
<script src="public/javascripts/DV/vendor/jquery.placeholder.js" type="text/javascript"></script>
41+
<script src="public/javascripts/DV/lib/initializer.js" type="text/javascript"></script>
42+
<script src="public/javascripts/DV/lib/history.js" type="text/javascript"></script>
43+
<script src="public/javascripts/DV/lib/annotation.js" type="text/javascript"></script>
44+
<script src="public/javascripts/DV/lib/drag_reporter.js" type="text/javascript"></script>
45+
<script src="public/javascripts/DV/lib/elements.js" type="text/javascript"></script>
46+
<script src="public/javascripts/DV/lib/page.js" type="text/javascript"></script>
47+
<script src="public/javascripts/DV/lib/page_set.js" type="text/javascript"></script>
48+
<script src="public/javascripts/DV/lib/thumbnails.js" type="text/javascript"></script>
49+
<script src="public/javascripts/DV/schema/schema.js" type="text/javascript"></script>
50+
<script src="public/javascripts/DV/elements/elements.js" type="text/javascript"></script>
51+
<script src="public/javascripts/DV/models/annotation.js" type="text/javascript"></script>
52+
<script src="public/javascripts/DV/models/chapter.js" type="text/javascript"></script>
53+
<script src="public/javascripts/DV/models/document.js" type="text/javascript"></script>
54+
<script src="public/javascripts/DV/models/page.js" type="text/javascript"></script>
55+
<script src="public/javascripts/DV/events/events.js" type="text/javascript"></script>
56+
<script src="public/javascripts/DV/events/ViewAnnotation.js" type="text/javascript"></script>
57+
<script src="public/javascripts/DV/events/ViewDocument.js" type="text/javascript"></script>
58+
<script src="public/javascripts/DV/events/ViewSearch.js" type="text/javascript"></script>
59+
<script src="public/javascripts/DV/events/ViewText.js" type="text/javascript"></script>
60+
<script src="public/javascripts/DV/events/ViewThumbnails.js" type="text/javascript"></script>
61+
<script src="public/javascripts/DV/events/history.js" type="text/javascript"></script>
62+
<script src="public/javascripts/DV/events/navigation.js" type="text/javascript"></script>
63+
<script src="public/javascripts/DV/helpers/helpers.js" type="text/javascript"></script>
64+
<script src="public/javascripts/DV/helpers/annotations.js" type="text/javascript"></script>
65+
<script src="public/javascripts/DV/helpers/construction.js" type="text/javascript"></script>
66+
<script src="public/javascripts/DV/helpers/editor.js" type="text/javascript"></script>
67+
<script src="public/javascripts/DV/helpers/navigation.js" type="text/javascript"></script>
68+
<script src="public/javascripts/DV/helpers/search.js" type="text/javascript"></script>
69+
<script src="public/javascripts/DV/states/states.js" type="text/javascript"></script>
70+
<script src="public/javascripts/DV/controllers/document_viewer.js" type="text/javascript"></script>
71+
<script src="public/javascripts/DV/controllers/api.js" type="text/javascript"></script>
72+
<script src="public/assets/templates.js" type="text/javascript"></script>
73+
74+
</head>
75+
<body>
76+
77+
<style>
78+
h1 {
79+
font-family: Arial;
80+
text-align: center;
81+
}
82+
83+
#document-viewer {
84+
margin: 100px auto 500px;
85+
width: auto;
86+
}
87+
@media (min-width: 520px) {
88+
#document-viewer {
89+
width: 520px;
90+
}
91+
}
92+
@media (min-width: 720px) {
93+
#document-viewer {
94+
width: 720px;
95+
}
96+
}
97+
@media (min-width: 945px) {
98+
#document-viewer {
99+
width: 945px;
100+
}
101+
}
102+
@media (min-width: 1050px) {
103+
#document-viewer {
104+
width: 1050px;
105+
}
106+
}
107+
108+
</style>
109+
110+
<h1>Responsive Test Page</h1>
111+
112+
<div id="document-viewer"></div>
113+
114+
<script type="text/javascript">
115+
window.currentDocument = DV.load(
116+
'http://www.documentcloud.org/documents/96522-torrance-statement-on-crime-map.js', {
117+
container: '#document-viewer',
118+
responsive: true
119+
}
120+
);
121+
</script>
122+
123+
</body>
124+
</html>

0 commit comments

Comments
 (0)