Skip to content

Commit 8565cf3

Browse files
knowtheoryknowtheory
committed
Merge pull request #46 from documentcloud/responsive
Add responsive flag to automatically switch between desktop & mini versions of viewer.
2 parents e0c0113 + f172e52 commit 8565cf3

13 files changed

Lines changed: 233 additions & 62 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: 45 additions & 34 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 : {}});
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,43 @@ 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 ? this.viewer.helpers.RESPONSIVE_DEFAULT_OFFSET : 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+
var container = DV.jQuery(options.container);
71+
this.viewer.options.sidebarVisible = (container.width() - 2) >= this.viewer.helpers.RESPONSIVE_MIN_SIDEBAR_WIDTH;
72+
container.css({
5473
position: 'relative',
55-
width: this.viewer.options.width,
56-
height: this.viewer.options.height
74+
height: options.height
75+
});
76+
77+
var viewer = this.viewer;
78+
DV.jQuery(window).resize(function() {
79+
viewer.helpers.responsiveRedraw();
5780
});
5881
}
5982

@@ -174,22 +197,21 @@ DV._.extend(DV.Schema.helpers, {
174197
// Hide the overflow of the body, unless we're positioned.
175198
var containerEl = DV.jQuery(this.viewer.options.container);
176199
var position = containerEl.css('position');
177-
if (position != 'relative' && position != 'absolute' && !this.viewer.options.fixedSize) {
200+
if (position != 'relative' && position != 'absolute' && !this.viewer.options.fixedSize && !this.viewer.options.responsive) {
178201
DV.jQuery("html, body").css({overflow : 'hidden'});
179202
// Hide the border, if we're a full-screen viewer in the body tag.
180203
if (containerEl.offset().top == 0) {
181204
this.viewer.elements.viewer.css({border: 0});
182205
}
183206
}
207+
this.viewer.helpers._prevWidth = this.viewer.elements.viewer.width();
184208

185209
// Hide and show navigation flags:
186210
var showAnnotations = this.showAnnotations();
187211
var showPages = this.models.document.totalPages > 1;
188212
var showSearch = (this.viewer.options.search !== false) &&
189213
(this.viewer.options.text !== false) &&
190214
(!this.viewer.options.width || this.viewer.options.width >= 540);
191-
var noFooter = (!showAnnotations && !showPages && !showSearch && !this.viewer.options.sidebar);
192-
193215

194216
// Hide annotations, if there are none:
195217
var $annotationsView = this.viewer.$('.DV-annotationView');
@@ -224,35 +246,24 @@ 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
231253
});
232254
this.viewer.$('.DV-navControlsContainer').html(navControls);
233255
}
234256

235-
this.viewer.$('.DV-fullscreenControl').remove();
236257
if (this.viewer.schema.document.canonicalURL) {
237258
var fullscreenControl = JST.fullscreenControl({});
238-
if (noFooter) {
239-
this.viewer.$('.DV-collapsibleControls').prepend(fullscreenControl);
240-
this.elements.viewer.addClass('DV-hideFooter');
241-
} else {
242-
this.viewer.$('.DV-fullscreenContainer').html(fullscreenControl);
243-
}
259+
this.viewer.$('.DV-fullscreenContainer').html(fullscreenControl);
244260
}
245261

246-
if (this.viewer.options.sidebar) {
247-
this.viewer.$('.DV-sidebar').show();
248-
}
249-
250-
// Check if the zoom is showing, and if not, shorten the width of search
251-
DV._.defer(DV._.bind(function() {
252-
if ((this.elements.viewer.width() <= 700) && (showAnnotations || showPages || showSearch)) {
253-
this.viewer.$('.DV-controls').addClass('DV-narrowControls');
254-
}
255-
}, this));
262+
var v = this.viewer.elements.viewer;
263+
v.toggleClass('DV-hideSidebar', !this.viewer.options.sidebarVisible);
264+
v.toggleClass('DV-mini', !this.viewer.options.sidebarVisible);
265+
v.toggleClass('DV-supermini', this.viewer.elements.viewer.width() < 500);
266+
v.toggleClass('DV-hideFooter', this.viewer.options.sidebarVisible);
256267

257268
// Set the currentPage element reference.
258269
this.elements.currentPage = this.viewer.$('span.DV-currentPage');

‎public/javascripts/DV/helpers/helpers.js‎

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

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

5+
RESPONSIVE_MIN_SIDEBAR_WIDTH: 900,
6+
7+
RESPONSIVE_DEFAULT_OFFSET: 100,
8+
59
annotationClassName: '.DV-annotation',
610

711
// Bind all events for the docviewer
@@ -32,8 +36,8 @@ DV.Schema.helpers = {
3236

3337

3438
var states = context.states;
35-
viewer.$('.DV-navControls').delegate('span.DV-next','click', compiled.next);
36-
viewer.$('.DV-navControls').delegate('span.DV-previous','click', compiled.previous);
39+
viewer.elements.viewer.delegate('.DV-next','click', compiled.next);
40+
viewer.elements.viewer.delegate('.DV-previous','click', compiled.previous);
3741

3842
viewer.$('.DV-annotationView').delegate('.DV-trigger','click',function(e){
3943
e.preventDefault();
@@ -516,6 +520,15 @@ DV.Schema.helpers = {
516520
this.events.zoom(zoom);
517521
},
518522

523+
responsiveRedraw: function() {
524+
var width = this.viewer.elements.viewer.width();
525+
if (width != this._prevWidth) {
526+
this.viewer.options.sidebarVisible = width >= this.viewer.helpers.RESPONSIVE_MIN_SIDEBAR_WIDTH;
527+
this.viewer.api.redraw(true);
528+
this._prevWidth = width;
529+
}
530+
},
531+
519532
handleInitialState: function(){
520533
var initialRouteMatch = this.viewer.history.loadURL(true);
521534
if(!initialRouteMatch) {

‎public/javascripts/DV/models/page.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ DV.model.Pages.prototype = {
5757

5858
// Return the appropriate padding for the size of the viewer.
5959
getPadding: function() {
60-
if (this.viewer.options.mini) {
60+
if (this.viewer.elements.viewer.hasClass('DV-mini')) {
6161
return this.MINI_PADDING;
6262
} else if (this.viewer.options.zoom == 'auto') {
6363
return this.REDUCED_PADDING;
@@ -87,7 +87,9 @@ DV.model.Pages.prototype = {
8787

8888
this.viewer.elements.sets.width(this.zoomLevel);
8989
this.viewer.elements.collection.css({width : this.width + padding });
90-
this.viewer.$('.DV-textContents').css({'font-size' : this.zoomLevel * 0.02 + 'px'});
90+
var minFontSize = 10;
91+
var fontSize = Math.max(minFontSize, this.zoomLevel * 0.02);
92+
this.viewer.$('.DV-textContents').css({'font-size' : fontSize + 'px'});
9193
},
9294

9395
// Update the height for a page, when its real image has loaded.

‎public/javascripts/DV/views/footer.jst‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
1-
<% if (!options.sidebar) { %>
2-
<div class="DV-footer">
3-
<div class="DV-fullscreenContainer"></div>
4-
<div class="DV-navControlsContainer"></div>
5-
</div>
6-
<% } %>
1+
<div class="DV-footer">
2+
<div class="DV-fullscreenContainer"></div>
3+
<div class="DV-navControlsContainer"></div>
4+
</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/minimode.css‎

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,25 @@
22
/* = Header = */
33
/* ========== */
44

5-
.DV-docViewer .DV-narrowControls .DV-searchBar {
5+
.DV-mini .DV-searchBox {
6+
margin-top: 2px;
7+
}
8+
.DV-mini .DV-searchInput {
9+
padding: 3px 20px 2px;
10+
}
11+
12+
.DV-mini .DV-searchBar {
613
right: 16px;
714
}
815

9-
.DV-docViewer .DV-narrowControls .DV-searchInput {
16+
.DV-mini .DV-searchInput {
1017
width: 80px;
1118
}
1219

20+
.DV-mini .DV-searchDocument .DV-searchInput-cancel {
21+
top: 7px;
22+
}
23+
1324
/* ================== */
1425
/* = Page Container = */
1526
/* ================== */
@@ -20,6 +31,9 @@
2031
.DV-mini .DV-textPage {
2132
margin-left: 7px;
2233
}
34+
.DV-mini .DV-textContents {
35+
margin: 20px;
36+
}
2337

2438
.DV-autoZoom .p0,
2539
.DV-autoZoom .p1,
@@ -65,6 +79,14 @@
6579
padding-left: 0px;
6680
}
6781

82+
.DV-mini .DV-textCurrentPage {
83+
display: none;
84+
}
85+
86+
.DV-supermini .DV-views .DV-thumbnailsView {
87+
display: none;
88+
}
89+
6890
/* Annotations ---------------------------------------*/
6991

7092
.DV-mini .DV-annotationTab {

‎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

‎public/stylesheets/DV/components/ui-search.css‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,9 @@
2626
.DV-docViewer.DV-searchable .DV-searchBox {
2727
display:inline;
2828
}
29+
.DV-docViewer.DV-supermini .DV-searchBox {
30+
display: none;
31+
}
2932

3033
.DV-docViewer .DV-searchInput {
3134
display: block;
@@ -34,15 +37,15 @@
3437
margin: 2px 5px 0 0;
3538
padding: 4px 20px 3px;
3639
height: auto;
37-
width:210px;
40+
width:215px;
3841
font-size: 11px;
3942
line-height: 14px;
4043
background: #FFF url(../../../images/DV/embed/search_icon.png) no-repeat 5px 5px;
4144
outline: none;
4245
}
4346

4447
.DV-docViewer .DV-searchInput[type=text] {
45-
margin: 4px 10px 0 0;
48+
margin: 2px 5px 0 0;
4649
}
4750
.DV-searchInput.placeholder {
4851
color: #A0A0A0;
@@ -65,16 +68,13 @@
6568
visibility: hidden;
6669
position: absolute;
6770
right: 17px;
68-
top: 10px;
71+
top: 8px;
6972
background: transparent url(../../../images/DV/embed/close.png) no-repeat 0 0;
7073
width: 11px;
7174
height: 11px;
7275
cursor: pointer;
7376
z-index: 5;
7477
}
75-
.DV-ie .DV-searchDocument .DV-searchInput-cancel {
76-
top: 7px;
77-
}
7878

7979
.DV-searchDocument .DV-searchInputWrap.DV-searchInput-show-search-cancel .DV-searchInput-cancel {
8080
visibility: visible;

0 commit comments

Comments
 (0)