Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add scrolling and spread modes to web viewer #9208

Merged
merged 6 commits into from
May 15, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 26 additions & 0 deletions extensions/chromium/options/options.html
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,32 @@
</div>
</template>

<template id="scrollModeOnLoad-template">
<div class="settings-row">
<label>
<span></span>
<select>
<option value="0">Vertical scrolling</option>
<option value="1">Horizontal scrolling</option>
<option value="2">Wrapped scrolling</option>
</select>
</label>
</div>
</template>

<template id="spreadModeOnLoad-template">
<div class="settings-row">
<label>
<span></span>
<select>
<option value="0">No spreads</option>
<option value="1">Odd spreads</option>
<option value="2">Even spreads</option>
</select>
</label>
</div>
</template>

<script src="options.js"></script>
</body>
</html>
100 changes: 24 additions & 76 deletions extensions/chromium/options/options.js
Original file line number Diff line number Diff line change
Expand Up @@ -75,16 +75,15 @@ Promise.all([
renderPreference = renderBooleanPref(prefSchema.title,
prefSchema.description,
prefName);
} else if (prefSchema.type === 'integer' && prefSchema.enum) {
// Most other prefs are integer-valued enumerations, render them in a
// generic way too.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unlike the boolean pref, each enum also requires an explicit HTML template in the document with ID prefName + "-template". Can you document that too?

[ Previously, if a new enum is added without updating options.js/html, then the option would just not show up (and an error message be printed in the console, because of the else-block below). With this new change, an error will be thrown inside getTemplate, called via renderEnumPref (and the preference rendering will break). Proper documentation should prevent this from happening. ]

// Unlike the renderBooleanPref branch, each preference handled by this
// branch still needs its own template in options.html with
// id="$prefName-template".
renderPreference = renderEnumPref(prefSchema.title, prefName);
} else if (prefName === 'defaultZoomValue') {
renderPreference = renderDefaultZoomValue(prefSchema.title);
} else if (prefName === 'sidebarViewOnLoad') {
renderPreference = renderSidebarViewOnLoad(prefSchema.title);
} else if (prefName === 'cursorToolOnLoad') {
renderPreference = renderCursorToolOnLoad(prefSchema.title);
} else if (prefName === 'textLayerMode') {
renderPreference = renderTextLayerMode(prefSchema.title);
} else if (prefName === 'externalLinkTarget') {
renderPreference = renderExternalLinkTarget(prefSchema.title);
} else {
// Should NEVER be reached. Only happens if a new type of preference is
// added to the storage manifest.
Expand Down Expand Up @@ -156,6 +155,23 @@ function renderBooleanPref(shortDescription, description, prefName) {
return renderPreference;
}

function renderEnumPref(shortDescription, prefName) {
var wrapper = importTemplate(prefName + '-template');
var select = wrapper.querySelector('select');
select.onchange = function() {
var pref = {};
pref[prefName] = parseInt(this.value);
storageArea.set(pref);
};
wrapper.querySelector('span').textContent = shortDescription;
document.getElementById('settings-boxes').appendChild(wrapper);

function renderPreference(value) {
select.value = value;
}
return renderPreference;
}

function renderDefaultZoomValue(shortDescription) {
var wrapper = importTemplate('defaultZoomValue-template');
var select = wrapper.querySelector('select');
Expand Down Expand Up @@ -184,71 +200,3 @@ function renderDefaultZoomValue(shortDescription) {
}
return renderPreference;
}

function renderSidebarViewOnLoad(shortDescription) {
var wrapper = importTemplate('sidebarViewOnLoad-template');
var select = wrapper.querySelector('select');
select.onchange = function() {
storageArea.set({
sidebarViewOnLoad: parseInt(this.value),
});
};
wrapper.querySelector('span').textContent = shortDescription;
document.getElementById('settings-boxes').appendChild(wrapper);

function renderPreference(value) {
select.value = value;
}
return renderPreference;
}

function renderCursorToolOnLoad(shortDescription) {
var wrapper = importTemplate('cursorToolOnLoad-template');
var select = wrapper.querySelector('select');
select.onchange = function() {
storageArea.set({
cursorToolOnLoad: parseInt(this.value),
});
};
wrapper.querySelector('span').textContent = shortDescription;
document.getElementById('settings-boxes').appendChild(wrapper);

function renderPreference(value) {
select.value = value;
}
return renderPreference;
}

function renderTextLayerMode(shortDescription) {
var wrapper = importTemplate('textLayerMode-template');
var select = wrapper.querySelector('select');
select.onchange = function() {
storageArea.set({
textLayerMode: parseInt(this.value),
});
};
wrapper.querySelector('span').textContent = shortDescription;
document.getElementById('settings-boxes').appendChild(wrapper);

function renderPreference(value) {
select.value = value;
}
return renderPreference;
}

function renderExternalLinkTarget(shortDescription) {
var wrapper = importTemplate('externalLinkTarget-template');
var select = wrapper.querySelector('select');
select.onchange = function() {
storageArea.set({
externalLinkTarget: parseInt(this.value),
});
};
wrapper.querySelector('span').textContent = shortDescription;
document.getElementById('settings-boxes').appendChild(wrapper);

function renderPreference(value) {
select.value = value;
}
return renderPreference;
}
22 changes: 22 additions & 0 deletions extensions/chromium/preferences_schema.json
Original file line number Diff line number Diff line change
Expand Up @@ -144,6 +144,28 @@
"description": "When enabled, pages whose orientation differ from the first page are rotated when printed.",
"type": "boolean",
"default": false
},
"scrollModeOnLoad": {
"title": "Scroll mode on load",
"description": "Controls how the viewer scrolls upon load.\n 0 = Vertical scrolling.\n 1 = Horizontal scrolling.\n 2 = Wrapped scrolling.",
"type": "integer",
"enum": [
0,
1,
2
],
"default": 0
},
"spreadModeOnLoad": {
"title": "Spread mode on load",
"description": "Whether the viewer should join pages into spreads upon load.\n 0 = No spreads.\n 1 = Odd spreads.\n 2 = Even spreads.",
"type": "integer",
"enum": [
0,
1,
2
],
"default": 0
}
}
}
14 changes: 14 additions & 0 deletions l10n/en-US/viewer.properties
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,20 @@ cursor_text_select_tool_label=Text Selection Tool
cursor_hand_tool.title=Enable Hand Tool
cursor_hand_tool_label=Hand Tool

scroll_vertical.title=Use Vertical Scrolling
scroll_vertical_label=Vertical Scrolling
scroll_horizontal.title=Use Horizontal Scrolling
scroll_horizontal_label=Horizontal Scrolling
scroll_wrapped.title=Use Wrapped Scrolling
scroll_wrapped_label=Wrapped Scrolling

spread_none.title=Do not join page spreads
spread_none_label=No Spreads
spread_odd.title=Join page spreads starting with odd-numbered pages
spread_odd_label=Odd Spreads
spread_even.title=Join page spreads starting with even-numbered pages
spread_even_label=Even Spreads

# Document properties dialog box
document_properties.title=Document Properties…
document_properties_label=Document Properties…
Expand Down
Loading