Add display article configurator (font family, font size, line height and max width)

app/Resources/static/themes/_global/index.js

@@ -10,6 +10,11 @@ import 'mathjax/es5/tex-svg';
 /* Fonts */
 import 'material-design-icons-iconfont/dist/material-design-icons.css';
 import 'lato-font/css/lato-font.css';
+import 'open-dyslexic/open-dyslexic-regular.css';
+import '@fontsource/atkinson-hyperlegible';
+import '@fontsource/eb-garamond';
+import '@fontsource/montserrat';
+import '@fontsource/oswald';
 import './global.scss';
 
 /* Shortcuts */
@@ -26,7 +31,7 @@ import { savePercent, retrievePercent } from './js/tools';
  ========================================================================== */
 
 $(document).ready(() => {
-  if ($('article').length) {
+  if ($('#article').length) {
     const app = new annotator.App();
 
     app.include(annotator.ui.main, {

app/Resources/static/themes/material/css/article.scss

@@ -2,7 +2,7 @@
    Article
    ========================================================================== */
 
-#article {
+#article, #preview-article {
   font-size: 20px;
   margin: 0 auto;
   max-width: 45em;

app/Resources/static/themes/material/css/cards.scss

@@ -324,6 +324,12 @@ a.original:not(.waves-effect) {
   height: 3rem;
 }
 
+.settings .settings-range-label {
+  position: absolute;
+  top: -14px;
+  font-size: 0.8rem;
+}
+
 .entries-row {
   display: grid;
   margin: 0.4rem 0 0;

app/Resources/static/themes/material/index.js

@@ -8,7 +8,9 @@ import 'materialize-css/dist/js/materialize';
 import '../_global/index';
 
 /* Tools */
-import { initExport, initFilters, initRandom } from './js/tools';
+import {
+  initExport, initFilters, initRandom, initPreviewText,
+} from './js/tools';
 
 /* Import shortcuts */
 import './js/shortcuts/main';
@@ -177,6 +179,7 @@ $(document).ready(() => {
   initRandom();
   stickyNav();
   articleScroll();
+  initPreviewText();
 
   const toggleNav = (toShow, toFocus) => {
     $('.nav-panel-actions').hide(100);
@@ -199,6 +202,29 @@ $(document).ready(() => {
     return false;
   });
 
+  $('#config_fontsize').on('input', () => {
+    const value = $('#config_fontsize').val();
+    const css = `${value}em`;
+    $('#preview-content').css('font-size', css);
+  });
+
+  $('#config_font').on('change', () => {
+    const value = $('#config_font').val();
+    $('#preview-content').css('font-family', value);
+  });
+
+  $('#config_lineHeight').on('input', () => {
+    const value = $('#config_lineHeight').val();
+    const css = `${value}em`;
+    $('#preview-content').css('line-height', css);
+  });
+
+  $('#config_maxWidth').on('input', () => {
+    const value = $('#config_maxWidth').val();
+    const css = `${value}em`;
+    $('#preview-article').css('max-width', css);
+  });
+
   const materialAddForm = $('.nav-panel-add');
   materialAddForm.on('submit', () => {
     materialAddForm.addClass('disabled');

app/Resources/static/themes/material/js/tools.js

@@ -29,8 +29,25 @@ function initRandom() {
   }
 }
 
+function initPreviewText() {
+  // no display if preview_text not available
+  if ($('div').is('#preview-article')) {
+    const defaultFontFamily = $('#config_font').val();
+    const defaultFontSize = $('#config_fontsize').val();
+    const defaultLineHeight = $('#config_lineHeight').val();
+    const defaultMaxWidth = $('#config_maxWidth').val();
+    const previewContent = $('#preview-content');
+
+    previewContent.css('font-family', defaultFontFamily);
+    previewContent.css('font-size', `${defaultFontSize}em`);
+    previewContent.css('line-height', `${defaultLineHeight}em`);
+    $('#preview-article').css('max-width', `${defaultMaxWidth}em`);
+  }
+}
+
 export {
   initExport,
   initFilters,
   initRandom,
+  initPreviewText,
 };