Deepali has uploaded a new change for review.
https://gerrit.wikimedia.org/r/141301
Change subject: Implement options to format text to improve readability
......................................................................
Implement options to format text to improve readability
Bug:65329
Change-Id: I1ac4ef10a08f398a0907f33853480e2bc557f920
---
M BookManagerv2.hooks.php
M BookManagerv2.php
M i18n/en.json
A images/Gear_font_awesome.png
A images/dark.png
A images/justify.png
A images/left_align.png
A images/light.png
A images/right_align.png
M modules/ext.BookManagerv2.css
M modules/ext.BookManagerv2.js
M modules/ext.BookManagerv2js.css
12 files changed, 291 insertions(+), 11 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/BookManagerv2
refs/changes/01/141301/1
diff --git a/BookManagerv2.hooks.php b/BookManagerv2.hooks.php
index 5af91b0..e80b833 100644
--- a/BookManagerv2.hooks.php
+++ b/BookManagerv2.hooks.php
@@ -73,7 +73,7 @@
* @return string HTML string
*/
public static function readingInterfaceUX( $prev, $next, $chapterList,
$metadata,
- $currentPageTitle
+ $currentPageTitle, $readabiltyOptions
) {
if ( $prev === null && $next === null && $chapterList === null
&& $metadata === null ) {
@@ -86,6 +86,23 @@
$html = Html::openElement( 'div', array( 'class' =>
'mw-bookmanagerv2-nav-wrap' ) )
. Html::openElement( 'div', array( 'class' =>
'mw-bookmanagerv2-nav-constrain' ) )
. Html::openElement( 'div', array( 'class' =>
'mw-bookmanagerv2-nav-bar' ) );
+ if ( $readabiltyOptions ) {
+ $imgHtml = Html::element( 'img', array(
+ 'class' =>
'mw-bookmanagerv2-nav-read-opt',
+ 'src' => $imagePath .
'Gear_font_awesome.png',
+ 'alt' => wfMessage(
'bookmanagerv2-read-opt' )->text(),
+ 'title' => wfMessage(
'bookmanagerv2-read-opt' )->text()
+ ), '' );
+ $html .= Linker::link(
+ $currentPageTitle,
+ $imgHtml,
+ array( 'class' => array(
+ 'mw-bookmanagerv2-nav-icon',
+ 'mw-bookmanagerv2-nav-read-opt'
) ),
+ array(),
+ array()
+ );
+ }
if ( $metadata ) {
$imgHtml = Html::element( 'img', array(
'class' => 'mw-bookmanagerv2-nav-data',
@@ -145,6 +162,14 @@
);
}
$html .= Html::closeElement( 'div' )
+ . Html::openElement( 'div', array() )
+ . Html::rawElement( 'div', array(
+ 'class' => array(
+ 'mw-bookmanagerv2-nav-dropdown',
+ 'mw-bookmanagerv2-nav-read-opt' )
+ ),
+ $readabiltyOptions
+ )
. Html::rawElement( 'div', array(
'class' => array(
'mw-bookmanagerv2-nav-dropdown',
@@ -163,6 +188,7 @@
),
$chapterList
)
+ . Html::closeElement( 'div' )
. Html::closeElement( 'div' )
. Html::closeElement( 'div' )
. Html::closeElement( 'div' );
@@ -422,6 +448,172 @@
}
/**
+ * Generates HTML for the readability options.
+ *
+ * @return string HTML unordered list element
+ */
+ public static function createReadabilityOptions() {
+ $html = '';
+ global $wgExtensionAssetsPath;
+ $imagePath = $wgExtensionAssetsPath . "/BookManagerv2/images/";
+ $leftImg = Html::element( 'img', array(
+ 'class' => 'mw-bookmanagerv2-nav-read-opt',
+ 'src' => $imagePath . 'left_align.png',
+ 'alt' => wfMessage( 'bookmanagerv2-read-opt'
)->text(),
+ 'title' => wfMessage( 'bookmanagerv2-read-opt'
)->text()
+ ), '' );
+ $rightImg = Html::element( 'img', array(
+ 'class' => 'mw-bookmanagerv2-nav-read-opt',
+ 'src' => $imagePath . 'right_align.png',
+ 'alt' => wfMessage( 'bookmanagerv2-read-opt'
)->text(),
+ 'title' => wfMessage( 'bookmanagerv2-read-opt'
)->text()
+ ), '' );
+ $justImg = Html::element( 'img', array(
+ 'class' => 'mw-bookmanagerv2-nav-read-opt',
+ 'src' => $imagePath . 'justify.png',
+ 'alt' => wfMessage( 'bookmanagerv2-read-opt'
)->text(),
+ 'title' => wfMessage( 'bookmanagerv2-read-opt'
)->text()
+ ), '' );
+ $lightImg = Html::element( 'img', array(
+ 'class' => 'mw-bookmanagerv2-nav-read-opt',
+ 'src' => $imagePath . 'light.png',
+ 'alt' => wfMessage( 'bookmanagerv2-read-opt'
)->text(),
+ 'title' => wfMessage( 'bookmanagerv2-read-opt'
)->text()
+ ), '' );
+ $darkImg = Html::element( 'img', array(
+ 'class' => 'mw-bookmanagerv2-nav-read-opt',
+ 'src' => $imagePath . 'dark.png',
+ 'alt' => wfMessage( 'bookmanagerv2-read-opt'
)->text(),
+ 'title' => wfMessage( 'bookmanagerv2-read-opt'
)->text()
+ ), '' );
+ $fontOptions = Html::openElement( 'optgroup', array(
+ 'style' => 'font-family:sans-serif'
+ ) )
+ . Html::rawElement( 'option', array(
+ 'value' => 'sans-serif'
+ ),
+ 'Sans-Serif'
+ )
+ . Html::closeElement( 'optgroup' )
+ . Html::openElement( 'optgroup', array(
+ 'style' => 'font-family:serif'
+ ) )
+ . Html::rawElement( 'option', array(
+ 'value' => 'serif'
+ ),
+ 'Serif'
+ )
+ . Html::closeElement( 'optgroup' )
+ . Html::openElement( 'optgroup', array(
+ 'style' => 'font-family:Trebuchet MS'
+ ) )
+ . Html::rawElement( 'option', array(
+ 'value' => 'Trebuchet MS'
+ ),
+ 'Trebuchet MS'
+ )
+ . Html::closeElement( 'optgroup' )
+ . Html::openElement( 'optgroup', array(
+ 'style' => 'font-family:Verdana'
+ ) )
+ . Html::rawElement( 'option', array(
+ 'value' => 'Verdana'
+ ),
+ 'Verdana'
+ )
+ . Html::closeElement( 'optgroup' )
+ . Html::openElement( 'optgroup', array(
+ 'style' => 'font-family:Georgia'
+ ) )
+ . Html::rawElement( 'option', array(
+ 'value' => 'Georgia'
+ ),
+ 'Georgia'
+ )
+ . Html::closeElement( 'optgroup' );
+ $html .= Html::openElement( 'ul', array() )
+ . Html::openElement( 'li', array() )
+ . Html::rawElement( 'span', array(
+ 'class' => 'mw-bookmanagerv2-read-opt-label'
+ ), 'Text Size:' )
+ . Html::rawElement( 'input', array(
+ 'type' => 'range',
+ 'class' => 'mw-bookmanagerv2-size',
+ 'value' => '90',
+ 'min ' => '75',
+ 'max ' => '250'
+ ),
+ ''
+ )
+ . Html::closeElement( 'li' )
+ . Html::openElement( 'li', array() )
+ . Html::rawElement( 'span', array(
+ 'class' => 'mw-bookmanagerv2-read-opt-label'
+ ), 'Font:' )
+ . Html::openElement( 'select', array(
+ 'class' => 'mw-bookmanagerv2-font',
+ 'name' => 'mw-bookmanagerv2-font'
+ ),
+ ''
+ )
+ . $fontOptions
+ . Html::closeElement( 'select' )
+ . Html::closeElement( 'li' )
+ . Html::openElement( 'li', array() )
+ . Html::rawElement( 'span', array(
+ 'class' => 'mw-bookmanagerv2-read-opt-label'
+ ), 'Linespacing:' )
+ . Html::rawElement( 'input', array(
+ 'type' => 'range',
+ 'class' => 'mw-bookmanagerv2-line-spacing',
+ 'name' => 'mw-bookmanagerv2-line-spacing',
+ 'min ' => '100',
+ 'max ' => '300',
+ 'value' => '180'
+ ),
+ ''
+ )
+ . Html::closeElement( 'li' )
+ . Html::openElement( 'li', array() )
+ . Html::rawElement( 'span', array(
+ 'class' => 'mw-bookmanagerv2-read-opt-label'
+ ), 'Justification:' )
+ . Html::rawElement( 'button', array(
+ 'class' => 'mw-bookmanagerv2-left-align'
+ ),
+ $leftImg
+ )
+ . Html::rawElement( 'button', array(
+ 'class' => 'mw-bookmanagerv2-right-align'
+ ),
+ $rightImg
+ )
+ . Html::rawElement( 'button', array(
+ 'class' => 'mw-bookmanagerv2-justify'
+ ),
+ $justImg
+ )
+ . Html::closeElement( 'li' )
+ . Html::openElement( 'li', array() )
+ . Html::rawElement( 'span', array(
+ 'class' => 'mw-bookmanagerv2-read-opt-label'
+ ), 'Background:' )
+ . Html::rawElement( 'button', array(
+ 'class' => 'mw-bookmanagerv2-light-bg'
+ ),
+ $lightImg
+ )
+ . Html::rawElement( 'button', array(
+ 'class' => 'mw-bookmanagerv2-dark-bg'
+ ),
+ $darkImg
+ )
+ . Html::closeElement( 'li' )
+ . Html::closeElement( 'ul' );
+ return $html;
+ }
+
+ /**
* Adds the navigation bar if the page is in the mainspace, and if it
contains
* a category of the format [[Category:Book:Book Title]], where
* [[Book:Book Title]] is an existing page that contains a valid JSON
@@ -431,7 +623,7 @@
global $wgContentNamespaces,
$wgBookManagerv2NavigationNamespaces,
$wgBookManagerv2Metadata, $wgBookManagerv2ChapterList,
$wgBookManagerv2PrevNext, $wgBookManagerv2JsonFrontend,
- $wgBookManagerv2NavigationBars;
+ $wgBookManagerv2NavigationBars,
$wgBookManagerv2ReadabilityOptions;
$request = $out->getRequest();
@@ -540,8 +732,13 @@
} else {
$metadata = null;
}
+ if ( $wgBookManagerv2ReadabilityOptions ) {
+ $readabilityOptions =
self::createReadabilityOptions();
+ } else {
+ $readabilityOptions = null;
+ }
$navbar = self::readingInterfaceUX( $prev,
$next, $chapterList,
- $metadata, $jsonPageTitle );
+ $metadata, $jsonPageTitle,
$readabilityOptions );
$out->prependHtml( $navbar );
}
} else if ( $out->getTitle()->inNamespace( NS_BOOK ) &&
$wgBookManagerv2JsonFrontend ) {
diff --git a/BookManagerv2.php b/BookManagerv2.php
index 378bb86..b5c2ae8 100644
--- a/BookManagerv2.php
+++ b/BookManagerv2.php
@@ -226,6 +226,12 @@
/**
* @var bool
+ * If set to false, this hides the readability options from the navigation bar.
+ */
+$wgBookManagerv2ReadabilityOptions = true;
+
+/**
+ * @var bool
* If set to false, this hides the previous/next links from the navigation bar.
*/
$wgBookManagerv2PrevNext = true;
diff --git a/i18n/en.json b/i18n/en.json
index 550d007..25b21c7 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -83,5 +83,6 @@
"bookmanagerv2-rename-title": "Rename this section",
"bookmanagerv2-sections-complete-notification": "No more sections to add",
"bookmanagerv2-import-sections-placeholder": "Title of the page to import
table of contents from.",
- "bookmanagerv2-import-sections-title": "Import table of contents"
+ "bookmanagerv2-import-sections-title": "Import table of contents",
+ "bookmanagerv2-read-opt": "Change readability settings"
}
\ No newline at end of file
diff --git a/images/Gear_font_awesome.png b/images/Gear_font_awesome.png
new file mode 100644
index 0000000..02f6b27
--- /dev/null
+++ b/images/Gear_font_awesome.png
Binary files differ
diff --git a/images/dark.png b/images/dark.png
new file mode 100644
index 0000000..a921d75
--- /dev/null
+++ b/images/dark.png
Binary files differ
diff --git a/images/justify.png b/images/justify.png
new file mode 100644
index 0000000..4e3f8bd
--- /dev/null
+++ b/images/justify.png
Binary files differ
diff --git a/images/left_align.png b/images/left_align.png
new file mode 100644
index 0000000..4e5565d
--- /dev/null
+++ b/images/left_align.png
Binary files differ
diff --git a/images/light.png b/images/light.png
new file mode 100644
index 0000000..4fc73d1
--- /dev/null
+++ b/images/light.png
Binary files differ
diff --git a/images/right_align.png b/images/right_align.png
new file mode 100644
index 0000000..d379b85
--- /dev/null
+++ b/images/right_align.png
Binary files differ
diff --git a/modules/ext.BookManagerv2.css b/modules/ext.BookManagerv2.css
index 7d72747..cc6473b 100644
--- a/modules/ext.BookManagerv2.css
+++ b/modules/ext.BookManagerv2.css
@@ -88,3 +88,18 @@
ol li.indent-5 {
margin-left: 50px;
}
+
+.mw-bookmanagerv2-read-opt-label {
+ display: inline-block;
+ width: 40%;
+}
+
+.mw-bookmanagerv2-nav-read-opt button {
+ padding: 6px;
+ margin: 6px;
+}
+
+.mw-bookmanagerv2-nav-read-opt button img {
+ width: 18px;
+ height: 17px;
+}
\ No newline at end of file
diff --git a/modules/ext.BookManagerv2.js b/modules/ext.BookManagerv2.js
index eb836e9..39bd31e 100644
--- a/modules/ext.BookManagerv2.js
+++ b/modules/ext.BookManagerv2.js
@@ -20,15 +20,16 @@
// If the metadata dropdown doesn't exist and the table of
// contents one does, shift the TOC one left
- if ( $( 'a.mw-bookmanagerv2-nav-data' ).length === 0
- && $( 'a.mw-bookmanagerv2-nav-toc' ).length !== 0 ) {
- $( 'div.mw-bookmanagerv2-nav-toc' ).css( 'margin-left', '0px' );
- }
+ // if ( $( 'a.mw-bookmanagerv2-nav-data' ).length === 0
+ // && $( 'a.mw-bookmanagerv2-nav-read-opt' ).length === 0
+ // && $( 'a.mw-bookmanagerv2-nav-toc' ).length !== 0 ) {
+ // $( 'div.mw-bookmanagerv2-nav-toc' ).css( 'margin-left', '0px' );
+ // }
// When the metadata icon is clicked, hide the table
// of contents dropdown and toggle the metadata one
$( 'a.mw-bookmanagerv2-nav-data' ).click( function () {
- $( 'div.mw-bookmanagerv2-nav-toc' ).hide();
+ $( 'div.mw-bookmanagerv2-nav-data' ).siblings().hide();
$( 'div.mw-bookmanagerv2-nav-data' ).toggle();
return false;
});
@@ -36,9 +37,52 @@
// When the contents icon is clicked, hide the metadata
// dropdown and toggle the table of contents one
$( 'a.mw-bookmanagerv2-nav-toc' ).click( function () {
- $( 'div.mw-bookmanagerv2-nav-data' ).hide();
+ $( 'div.mw-bookmanagerv2-nav-toc' ).siblings().hide();
$( 'div.mw-bookmanagerv2-nav-toc' ).toggle();
return false;
});
+ // When the contents icon is clicked, hide the metadata
+ // dropdown and toggle the table of contents one
+ $( 'a.mw-bookmanagerv2-nav-read-opt' ).click( function () {
+ $( 'div.mw-bookmanagerv2-nav-read-opt' ).siblings().hide();
+ $( 'div.mw-bookmanagerv2-nav-read-opt' ).toggle();
+ return false;
+ });
+
+ $( '.mw-bookmanagerv2-left-align' ).click( function () {
+ $( 'div#mw-content-text p' ).css( 'text-align', 'left' );
+ });
+
+ $( '.mw-bookmanagerv2-right-align' ).click( function () {
+ $( 'div#mw-content-text p' ).css( 'text-align', 'right' );
+ });
+
+ $( '.mw-bookmanagerv2-justify' ).click( function () {
+ $( 'div#mw-content-text p' ).css( 'text-align', 'justify' );
+ });
+
+ $( '.mw-bookmanagerv2-light-bg' ).click( function () {
+ $( 'div#mw-content-text' ).removeClass( 'darkbg' );
+ $( 'div#mw-content-text p' ).css( 'color', '#252525' );
+ });
+
+ $( '.mw-bookmanagerv2-dark-bg' ).click( function () {
+ $( 'div#mw-content-text' ).removeClass( 'lightbg' );
+ $( 'div#mw-content-text' ).addClass( 'darkbg' );
+ $( 'div#mw-content-text p' ).css( 'color', '#ffffff' );
+ });
+
+ $( '.mw-bookmanagerv2-font' ).change( function () {
+ $( 'div#mw-content-text p' ).css( 'font-family', $( this
).val() );
+ });
+
+ $( '.mw-bookmanagerv2-size' ).change( function () {
+ $( 'div#mw-content-text p' ).css( 'font-size', $( this ).val()
+ '%' );
+ });
+
+ $( '.mw-bookmanagerv2-line-spacing' ).change( function () {
+ $( 'div#mw-content-text p' ).css( 'line-height', $( this
).val() + '%' );
+ });
+
}(jQuery));
diff --git a/modules/ext.BookManagerv2js.css b/modules/ext.BookManagerv2js.css
index 85735b5..b83b4e3 100644
--- a/modules/ext.BookManagerv2js.css
+++ b/modules/ext.BookManagerv2js.css
@@ -58,8 +58,20 @@
margin: 0;
}
-div.mw-bookmanagerv2-nav-toc {
+div.mw-bookmanagerv2-nav-1 {
+ margin-left: 0px;
+}
+
+div.mw-bookmanagerv2-nav-2 {
margin-left: 45px;
+}
+
+div.mw-bookmanagerv2-nav-3 {
+ margin-left: 90px;
+}
+
+div.mw-bookmanagerv2-nav-3 {
+ margin-left: 135px;
}
div.mw-bookmanagerv2-nav-dropdown .title {
@@ -89,3 +101,8 @@
span.mw-bookmanagerv2-link-divider {
margin: 0 2px;
}
+
+.darkbg {
+ background-color: #3f3f3f;
+ padding: 14px;
+}
\ No newline at end of file
--
To view, visit https://gerrit.wikimedia.org/r/141301
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I1ac4ef10a08f398a0907f33853480e2bc557f920
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/BookManagerv2
Gerrit-Branch: master
Gerrit-Owner: Deepali <djdeepalijain...@gmail.com>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
