mirror of
https://github.com/Yetangitu/owncloud-apps.git
synced 2025-10-03 14:59:19 +02:00
- files_reader: v1.2.0, implemented night mode, scroll to top on page
change (#73), default viewer selection in personal preferences section (#74), fixed undefined $title in template (#72)
This commit is contained in:
frankdelange
parent
d7df75fbc3
commit
6b0ab64fe4
33 changed files with 810 additions and 622 deletions
|
|
@ -1,90 +1,27 @@
|
|||
PDFJS.reader.StylesController = function (renderer) {
|
||||
|
||||
var reader = this,
|
||||
book = this.book,
|
||||
settings = reader.settings,
|
||||
customStyles = reader.settings.customStyles,
|
||||
activeStyles = reader.settings.activeStyles,
|
||||
$viewer = $("#viewer"),
|
||||
$day_example = $('#day_example'),
|
||||
$night_example = $('#night_example'),
|
||||
$font_example = $('#font_example'),
|
||||
$page_width = $("#page_width"),
|
||||
$day_background = $('#day_background'),
|
||||
$day_color = $('#day_color'),
|
||||
$night_background = $('#night_background'),
|
||||
$night_color = $('#night_color'),
|
||||
$use_custom_colors = $('#use_custom_colors'),
|
||||
$nightshift = $('.nightshift'),
|
||||
$custom_font_family = $('#custom_font_family'),
|
||||
$font_family = $('#font_family'),
|
||||
$custom_font_size = $('#custom_font_size'),
|
||||
$font_size = $("#font_size"),
|
||||
$custom_font_weight = $('#custom_font_weight'),
|
||||
$font_weight = $("#font_weight"),
|
||||
$maximize_page = $('#maximize_page');
|
||||
$main = $("#main"),
|
||||
$nightmode_form = $('#nightmode_form'),
|
||||
$nightmode_reset = $('#nightmode_reset'),
|
||||
$night_brightness = $('#night_brightness'),
|
||||
$night_contrast = $('#night_contrast'),
|
||||
$night_sepia = $('#night_sepia'),
|
||||
$night_huerotate = $('#night_huerotate'),
|
||||
$night_saturate = $('#night_saturate'),
|
||||
$nightshift = $('.nightshift');
|
||||
|
||||
// register hook to refresh styles on chapter change
|
||||
renderer.registerHook("beforeChapterDisplay", this.refreshStyles.bind(this), true);
|
||||
|
||||
this.addStyle("dayMode", "*", {
|
||||
color: $day_color.val(),
|
||||
background: $day_background.val()
|
||||
});
|
||||
|
||||
this.addStyle("nightMode", "*", {
|
||||
color: $night_color.val(),
|
||||
background: $night_background.val()
|
||||
filter: 'invert(1) sepia(' + $night_sepia.val() + ') hue-rotate(' + $night_huerotate.val() + 'deg) brightness(' + $night_brightness.val() + ') contrast(' + $night_contrast.val() + ') saturate(' + $night_saturate.val() + ')'
|
||||
});
|
||||
|
||||
this.addStyle("fontFamily", "*", {
|
||||
"font-family": $font_family.val()
|
||||
});
|
||||
|
||||
this.addStyle("fontSize", "*", {
|
||||
"font-size": $font_size.val() + '%'
|
||||
});
|
||||
|
||||
this.addStyle("fontWeight", "*", {
|
||||
"font-weight": $font_weight.val()
|
||||
});
|
||||
|
||||
this.addStyle("pageWidth", "#viewer", {
|
||||
"max-width": $page_width.val() + 'em'
|
||||
});
|
||||
|
||||
this.addStyle("maximizePage", "#viewer", {
|
||||
"margin": "auto",
|
||||
"width": "100%",
|
||||
"height": "95%",
|
||||
"top": "5%"
|
||||
});
|
||||
|
||||
this.addStyle("appleBugs", "document, html, body, p, span, div", {
|
||||
"cursor": "pointer"
|
||||
});
|
||||
|
||||
$day_example.css({
|
||||
'background': customStyles.dayMode.rules.background,
|
||||
'color': customStyles.dayMode.rules.color
|
||||
});
|
||||
|
||||
$night_example.css({
|
||||
'background': customStyles.nightMode.rules.background,
|
||||
'color': customStyles.nightMode.rules.color
|
||||
});
|
||||
|
||||
$font_example.css({
|
||||
'font-size': customStyles.fontSize.rules["font-size"],
|
||||
'font-family': customStyles.fontFamily.rules["font-family"],
|
||||
'font-weight': customStyles.fontWeight.rules["font-weight"]
|
||||
});
|
||||
|
||||
$font_family.val(customStyles.fontFamily.rules["font-family"]);
|
||||
$font_size.val(parseInt(customStyles.fontSize.rules["font-size"]));
|
||||
$font_weight.val(customStyles.fontWeight.rules["font-weight"]);
|
||||
$page_width.val(parseInt(0 + parseInt(customStyles.pageWidth.rules["max-width"])));
|
||||
|
||||
// fix click-bug in apple products
|
||||
if (navigator.userAgent.match(/(iPad|iPhone|iPod)/g))
|
||||
activeStyles['appleBugs'] = true;
|
||||
|
|
@ -93,19 +30,8 @@ PDFJS.reader.StylesController = function (renderer) {
|
|||
if (!activeStyles.hasOwnProperty(style)) continue;
|
||||
|
||||
switch (style) {
|
||||
case "dayMode":
|
||||
$use_custom_colors.prop("checked", true);
|
||||
break;
|
||||
case "fontFamily":
|
||||
$custom_font_family.prop("checked", true);
|
||||
$font_family.prop('disabled',false);
|
||||
break;
|
||||
case "fontSize":
|
||||
$custom_font_size.prop("checked", true);
|
||||
$font_size.prop('disabled',false);
|
||||
break;
|
||||
case "maximizePage":
|
||||
$maximize_page.prop("checked", true);
|
||||
case "nightMode":
|
||||
reader.ControlsController.setNightmodeIcon(true);
|
||||
break;
|
||||
case "appleBugs":
|
||||
console.log("Apple mobile bugs detected, applying workarounds...");
|
||||
|
|
@ -115,115 +41,52 @@ PDFJS.reader.StylesController = function (renderer) {
|
|||
reader.enableStyle(customStyles[style]);
|
||||
}
|
||||
|
||||
$day_background.off('change').on('change', function() {
|
||||
customStyles.dayMode.rules.background = $day_background.val();
|
||||
$day_example.css('background', customStyles.dayMode.rules.background);
|
||||
reader.updateStyle(customStyles.dayMode);
|
||||
$night_brightness.off('change').on('change', function() {
|
||||
updateNightmode();
|
||||
});
|
||||
|
||||
$day_color.off('change').on('change', function() {
|
||||
customStyles.dayMode.rules.color = $day_color.val();
|
||||
$day_example.css('color', customStyles.dayMode.rules.color);
|
||||
reader.updateStyle(customStyles.dayMode);
|
||||
$night_contrast.off('change').on('change', function() {
|
||||
updateNightmode();
|
||||
});
|
||||
|
||||
$night_background.off('change').on('change', function() {
|
||||
customStyles.nightMode.rules.background = $night_background.val();
|
||||
$night_example.css('background', customStyles.nightMode.rules.background);
|
||||
$night_sepia.off('change').on('change', function() {
|
||||
updateNightmode();
|
||||
});
|
||||
|
||||
$night_huerotate.off('change').on('change', function() {
|
||||
updateNightmode();
|
||||
});
|
||||
|
||||
$night_saturate.off('change').on('change', function() {
|
||||
updateNightmode();
|
||||
});
|
||||
|
||||
$nightmode_form.off('reset').on('reset', function () {
|
||||
setTimeout(function() {
|
||||
updateNightmode();
|
||||
}, 10);
|
||||
});
|
||||
|
||||
var parseFilter = function(str, element) {
|
||||
var re = new RegExp(element+'\\(([\\d.]+)\\S*\\)'),
|
||||
value = null;
|
||||
|
||||
if (re.test(str))
|
||||
value = str.match(re)[1];
|
||||
|
||||
return value;
|
||||
};
|
||||
|
||||
var updateNightmode = function() {
|
||||
customStyles.nightMode.rules.filter = 'invert(1) sepia(' + $night_sepia.val() + ') hue-rotate(' + $night_huerotate.val() + 'deg) brightness(' + $night_brightness.val() + ') contrast(' + $night_contrast.val() + ') saturate(' + $night_saturate.val() + ')';
|
||||
reader.updateStyle(customStyles.nightMode);
|
||||
});
|
||||
};
|
||||
|
||||
$night_color.off('change').on('change', function() {
|
||||
customStyles.nightMode.rules.color = $night_color.val();
|
||||
$night_example.css('color', customStyles.nightMode.rules.color);
|
||||
reader.updateStyle(customStyles.nightMode);
|
||||
});
|
||||
|
||||
$use_custom_colors.off('change').on('change', function () {
|
||||
if ($(this).prop('checked')) {
|
||||
reader.enableStyle(customStyles.dayMode);
|
||||
} else {
|
||||
reader.disableStyle(customStyles.dayMode);
|
||||
}
|
||||
});
|
||||
|
||||
$nightshift.off('click').on('click', function () {
|
||||
if (settings.nightMode) {
|
||||
reader.disableStyle(customStyles.nightMode);
|
||||
settings.nightMode = false;
|
||||
} else {
|
||||
reader.enableStyle(customStyles.nightMode);
|
||||
settings.nightMode = true;
|
||||
}
|
||||
});
|
||||
|
||||
$page_width.off('change').on("change", function () {
|
||||
customStyles.pageWidth.rules["page-width"] = $(this).val() + "em";
|
||||
reader.updateStyle(customStyles.pageWidth);
|
||||
$viewer.css("max-width", customStyles.pageWidth.rules["page-width"]);
|
||||
});
|
||||
|
||||
$custom_font_family.off('click').on('click', function() {
|
||||
if ($(this).prop('checked')) {
|
||||
$font_family.prop('disabled',false);
|
||||
reader.enableStyle(customStyles.fontFamily);
|
||||
} else {
|
||||
$font_family.prop('disabled',true);
|
||||
reader.disableStyle(customStyles.fontFamily);
|
||||
}
|
||||
});
|
||||
|
||||
$custom_font_size.off('click').on('click', function() {
|
||||
if ($(this).prop('checked')) {
|
||||
$font_size.prop('disabled',false);
|
||||
reader.enableStyle(customStyles.fontSize);
|
||||
} else {
|
||||
$font_size.prop('disabled',true);
|
||||
reader.disableStyle(customStyles.fontSize);
|
||||
}
|
||||
});
|
||||
|
||||
$custom_font_weight.off('click').on('click', function() {
|
||||
if ($(this).prop('checked')) {
|
||||
$font_weight.prop('disabled',false);
|
||||
reader.enableStyle(customStyles.fontWeight);
|
||||
} else {
|
||||
$font_weight.prop('disabled',true);
|
||||
reader.disableStyle(customStyles.fontWeight);
|
||||
}
|
||||
});
|
||||
|
||||
$maximize_page.off('click').on('click', function() {
|
||||
if ($(this).prop('checked')) {
|
||||
reader.enableStyle(customStyles.maximizePage);
|
||||
} else {
|
||||
reader.disableStyle(customStyles.maximizePage);
|
||||
}
|
||||
});
|
||||
|
||||
$font_size.off('change').on('change', function() {
|
||||
$font_example.css('font-size', $(this).val() + '%');
|
||||
customStyles.fontSize.rules["font-size"] = $(this).val() + '%';
|
||||
reader.updateStyle(customStyles.fontSize);
|
||||
});
|
||||
|
||||
$font_weight.off('change').on('change', function() {
|
||||
customStyles.fontWeight.rules["font-weight"] = $(this).val();
|
||||
$font_example.css('font-weight', $(this).val());
|
||||
reader.updateStyle(customStyles.fontWeight);
|
||||
});
|
||||
|
||||
$font_family.off('change').on('change', function() {
|
||||
customStyles.fontFamily.rules["font-family"] = $(this).val();
|
||||
$font_example.css('font-family', $(this).val());
|
||||
reader.updateStyle(customStyles.fontFamily);
|
||||
});
|
||||
|
||||
$page_width.off('change').on("change", function () {
|
||||
customStyles.pageWidth.rules["page-width"] = $(this).val() + "em";
|
||||
reader.updateStyle(customStyles.pageWidth);
|
||||
$viewer.css("max-width", customStyles.pageWidth.rules["page-width"]);
|
||||
});
|
||||
$night_brightness.val(parseFilter(customStyles.nightMode.rules.filter,"brightness"));
|
||||
$night_contrast.val(parseFilter(customStyles.nightMode.rules.filter,"contrast"));
|
||||
$night_sepia.val(parseFilter(customStyles.nightMode.rules.filter,"sepia"));
|
||||
$night_huerotate.val(parseFilter(customStyles.nightMode.rules.filter,"hue-rotate"));
|
||||
$night_saturate.val(parseFilter(customStyles.nightMode.rules.filter,"saturate"));
|
||||
|
||||
return {
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue