Merge pull request #491 from DDMAL/release/4.0.0

Release Neon v4.0.0
DDMAL · Aug 1, 2019 · b115a29 · b115a29
2 parents af8d1d1 + 8fa62d7
commit b115a29
Show file tree

Hide file tree

Showing 163 changed files with 24,146 additions and 6,161 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -1,17 +1,28 @@
 language: node_js
 node_js: 10
-os: osx
 env:
-  - HOMEBREW_NO_AUTO_UPDATE="1"
+  - NODE_OPTIONS=--max_old_space_size=2048
+os: osx
+osx_image: xcode10.2
 if: (branch = master OR branch = develop)
+cache:
+  directories:
+    - $HOME/Library/Caches/Homebrew
 addons:
   firefox: latest
-before_install:
-  - brew install geckodriver
+  chrome: stable
+  homebrew:
+    update: true
+    packages:
+      - geckodriver
+    casks:
+      - chromedriver
 install:
+  - sudo safaridriver --enable
   - yarn install
 script:
   - yarn build
+  - yarn upgrade verovio-dev
   - yarn start &
   - yarn test
 notifications:

diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-Neon v 3.1.1
+Neon v4.0.0
 =====
 [![Build_Status](https://travis-ci.org/DDMAL/Neon.svg?branch=master)](https://travis-ci.org/DDMAL/Neon)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
@@ -46,11 +46,12 @@ Neon has two main modes: viewer and editor. To learn how to use both, [read the
 Test
 ----
 
-Follow the instructions from above first. The tests for Neon use [Selenium](https://docs.seleniumhq.org/) and so require a web browser ([Firefox](https://mozilla.org/firefox)) and its driver ([geckodriver](https://github.com/mozilla/geckodriver)).
-On Mac install these with Homebrew:
-```
+Follow the instructions from above first. The tests for Neon use [Selenium](https://docs.seleniumhq.org/) and use Firefox, Safari, and Chrome. Their respective webdrivers are required. Safari 12 or greater is required. On Mac, Firefox and Chrome can be installed by:
+```shell
 brew cask install firefox
+brew cask install google-chrome
 brew install geckodriver
+brew cask install chromedriver
 ```
 Then you can run the tests locally using `yarn test`. We use [jest](https://facebook.github.io/jest/) to script our tests.
 

diff --git a/doc/DisplayPanel_DisplayControls.js.html b/doc/DisplayPanel_DisplayControls.js.html
@@ -0,0 +1,259 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>JSDoc: Source: DisplayPanel/DisplayControls.js</title>
+
+    <script src="scripts/prettify/prettify.js"> </script>
+    <script src="scripts/prettify/lang-css.js"> </script>
+    <!--[if lt IE 9]>
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
+    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
+</head>
+
+<body>
+
+<div id="main">
+
+    <h1 class="page-title">Source: DisplayPanel/DisplayControls.js</h1>
+
+
+
+
+
+
+    <section>
+        <article>
+            <pre class="prettyprint source linenums"><code>/** @module DisplayPanel/DisplayControls */
+
+import * as Color from '../utils/Color.js';
+import Icons from '../img/icons.svg';
+
+const $ = require('jquery');
+
+var lastGlyphOpacity, lastImageOpacity;
+
+/**
+ * Initialize listeners and controls for display panel.
+ * @param {string} meiClassName - The class used to signifiy the MEI element(s).
+ * @param {string} background - The class used to signify the background.
+ */
+export function initDisplayControls (meiClassName, background) {
+  setOpacityControls(meiClassName);
+  setBackgroundOpacityControls(background);
+  setHighlightControls();
+  setBurgerControls();
+
+  $('#toggleDisplay').on('click', () => {
+    if ($('#displayContents').is(':hidden')) {
+      $('#displayContents').css('display', '');
+      $('#toggleDisplay').attr('xlink:href', Icons + '#dropdown-down');
+    } else {
+      $('#displayContents').css('display', 'none');
+      $('#toggleDisplay').attr('xlink:href', Icons + '#dropdown-side');
+    }
+  });
+}
+
+/**
+ * Set zoom control listener for button and slider
+ * @param {ZoomHandler} zoomHandler - The zoomHandler, if it exists.
+ */
+export function setZoomControls (zoomHandler) {
+  if (zoomHandler === undefined) {
+    return;
+  }
+  $('#zoomSlider').val(100);
+  $('#reset-zoom').click(() => {
+    $('#zoomOutput').val(100);
+    $('#zoomSlider').val(100);
+    zoomHandler.resetZoomAndPan();
+  });
+
+  $(document).on('input change', '#zoomSlider', () => {
+    $('#zoomOutput').val($('#zoomSlider').val());
+    zoomHandler.zoomTo($('#zoomOutput').val() / 100.0);
+  });
+
+  $('body').on('keydown', (evt) => {
+    let currentZoom = parseInt($('#zoomOutput').val());
+    if (evt.key === '+') { // increase zoom by 20
+      let newZoom = Math.min(currentZoom + 20, parseInt($('#zoomSlider').attr('max')));
+      zoomHandler.zoomTo(newZoom / 100.0);
+      $('#zoomOutput').val(newZoom);
+      $('#zoomSlider').val(newZoom);
+    } else if (evt.key === '-') { // decrease zoom by 20
+      let newZoom = Math.max(currentZoom - 20, parseInt($('#zoomSlider').attr('min')));
+      zoomHandler.zoomTo(newZoom / 100.0);
+      $('#zoomOutput').val(newZoom);
+      $('#zoomSlider').val(newZoom);
+    } else if (evt.key === '0') {
+      $('#zoomOutput').val(100);
+      $('#zoomSlider').val(100);
+      zoomHandler.resetZoomAndPan();
+    }
+  });
+}
+
+/**
+ * Set rendered MEI opacity button and slider listeners.
+ * @param {string} meiClassName
+ */
+function setOpacityControls (meiClassName) {
+  lastGlyphOpacity = 100;
+  $('#opacitySlider').val(100);
+  $('#reset-opacity').click(function () {
+    // Definition scale is the root element of what is generated by verovio
+    let lowerOpacity = lastGlyphOpacity &lt; 95 ? lastGlyphOpacity / 100.0 : 0;
+    let newOpacity = $('#opacitySlider').val() === '100' ? lowerOpacity : 1;
+    $('.' + meiClassName).css('opacity', newOpacity);
+
+    lastGlyphOpacity = Number($('#opacitySlider').val());
+    $('#opacitySlider').val(newOpacity * 100);
+    $('#opacityOutput').val(newOpacity * 100);
+  });
+
+  $(document).on('input change', '#opacitySlider', () => {
+    $('#opacityOutput').val($('#opacitySlider').val());
+    lastGlyphOpacity = Number($('#opacitySlider').val());
+    $('.' + meiClassName).css('opacity', $('#opacityOutput').val() / 100.0);
+  });
+}
+
+/**
+ * Update MEI opacity to value from the slider.
+ * @param {string} meiClassName
+ */
+export function setOpacityFromSlider (meiClassName) {
+  $('#opacityOutput').val($('#opacitySlider').val());
+  $('.' + meiClassName).css('opacity', $('#opacityOutput').val() / 100.0);
+}
+
+/**
+ * Set background image opacity button and slider listeners.
+ * @param {string} background
+ */
+function setBackgroundOpacityControls (background) {
+  lastImageOpacity = 100;
+  $('#bgOpacitySlider').val(100);
+  $('#reset-bg-opacity').click(function () {
+    let lowerOpacity = lastImageOpacity &lt; 95 ? lastImageOpacity / 100.0 : 0;
+    let newOpacity = $('#bgOpacitySlider').val() === '100' ? lowerOpacity : 1;
+    document.getElementsByClassName(background)[0].style.opacity = newOpacity;
+
+    lastImageOpacity = Number($('#bgOpacitySlider').val());
+    $('#bgOpacitySlider').val(newOpacity * 100);
+    $('#bgOpacityOutput').val(newOpacity * 100);
+  });
+
+  $(document).on('input change', '#bgOpacitySlider', function () {
+    $('#bgOpacityOutput').val(parseInt($('#bgOpacitySlider').val()));
+    lastImageOpacity = Number($('#bgOpacitySlider').val());
+    document.getElementsByClassName(background)[0].style.opacity = $('#bgOpacityOutput').val() / 100.0;
+  });
+}
+
+/**
+ * Set listener on staff highlighting checkbox.
+ */
+export function setHighlightControls () {
+  $('#highlight-button').on('click', (evt) => {
+    evt.stopPropagation();
+    $('#highlight-dropdown').toggleClass('is-active');
+    if ($('#highlight-dropdown').hasClass('is-active')) {
+      $('body').one('click', highlightClickaway);
+      $('#highlight-staff').on('click', () => {
+        $('#highlight-dropdown').removeClass('is-active');
+        $('.highlight-selected').removeClass('highlight-selected');
+        $('#highlight-staff').addClass('highlight-selected');
+        $('#highlight-type').html('&amp;nbsp;- Staff');
+        Color.setGroupingHighlight('staff');
+      });
+      $('#highlight-syllable').on('click', () => {
+        $('#highlight-dropdown').removeClass('is-active');
+        $('.highlight-selected').removeClass('highlight-selected');
+        $('#highlight-syllable').addClass('highlight-selected');
+        $('#highlight-type').html('&amp;nbsp;- Syllable');
+        Color.setGroupingHighlight('syllable');
+      });
+      $('#highlight-neume').on('click', () => {
+        $('#highlight-dropdown').removeClass('is-active');
+        $('.highlight-selected').removeClass('highlight-selected');
+        $('#highlight-neume').addClass('highlight-selected');
+        $('#highlight-type').html('&amp;nbsp;- Neume');
+        Color.setGroupingHighlight('neume');
+      });
+      $('#highlight-none').on('click', () => {
+        $('#highlight-dropdown').removeClass('is-active');
+        $('.highlight-selected').removeClass('highlight-selected');
+        $('#highlight-type').html('&amp;nbsp;- Off');
+        Color.unsetGroupingHighlight();
+      });
+    } else {
+      $('body').off('click', highlightClickaway);
+    }
+  });
+}
+
+/**
+ * Reset the highlight for different types based on the 'highlight-selected' class in the DOM.
+ */
+export function updateHighlight () {
+  let highlightId = $('.highlight-selected').attr('id');
+  switch (highlightId) {
+    case 'highlight-staff':
+      Color.setGroupingHighlight('staff');
+      break;
+    case 'highlight-syllable':
+      Color.setGroupingHighlight('syllable');
+      break;
+    case 'highlight-neume':
+      Color.setGroupingHighlight('neume');
+      break;
+    default:
+      Color.unsetGroupingHighlight();
+  }
+}
+
+/**
+ * Set listener on burger menu for smaller screens.
+ */
+function setBurgerControls () {
+  $('#burgerMenu').on('click', () => {
+    $(this).toggleClass('is-active');
+    $('#navMenu').toggleClass('is-active');
+  });
+}
+
+/**
+ * Clickaway listener for the highlight dropdown.
+ */
+function highlightClickaway () {
+  $('body').off('click', highlightClickaway);
+  $('#highlight-dropdown').removeClass('is-active');
+}
+</code></pre>
+        </article>
+    </section>
+
+
+
+
+</div>
+
+<nav>
+    <h2><a href="index.html">Home</a></h2><h3>Modules</h3><ul><li><a href="module-DisplayPanel_DisplayControls.html">DisplayPanel/DisplayControls</a></li><li><a href="module-DisplayPanel_DisplayPanel.html">DisplayPanel/DisplayPanel</a></li><li><a href="module-InfoModule.html">InfoModule</a></li><li><a href="module-SingleView_Zoom.html">SingleView/Zoom</a></li><li><a href="module-SquareEdit_Contents.html">SquareEdit/Contents</a></li><li><a href="module-SquareEdit_Controls.html">SquareEdit/Controls</a></li><li><a href="module-SquareEdit_Grouping.html">SquareEdit/Grouping</a></li><li><a href="module-SquareEdit_SelectOptions.html">SquareEdit/SelectOptions</a></li><li><a href="module-SquareEdit_StaffTools.html">SquareEdit/StaffTools</a></li><li><a href="module-TextView.html">TextView</a></li><li><a href="module-utils_Color.html">utils/Color</a></li><li><a href="module-utils_Cursor.html">utils/Cursor</a></li><li><a href="module-utils_EditContents.html">utils/EditContents</a></li><li><a href="module-utils_EditControls.html">utils/EditControls</a></li><li><a href="module-utils_NeonManifest.html">utils/NeonManifest</a></li><li><a href="module-utils_Notification.html">utils/Notification</a></li><li><a href="module-utils_Resize.html">utils/Resize</a></li><li><a href="module-utils_Select.html">utils/Select</a></li><li><a href="module-utils_SelectTools.html">utils/SelectTools</a></li><li><a href="module-Validation.html">Validation</a></li><li><a href="module-Warnings.html">Warnings</a></li></ul><h3>Classes</h3><ul><li><a href="DivaView.html">DivaView</a></li><li><a href="DragHandler.html">DragHandler</a></li><li><a href="InsertHandler.html">InsertHandler</a></li><li><a href="module.exports.html">exports</a></li><li><a href="module-DisplayPanel_DisplayPanel-DisplayPanel.html">DisplayPanel</a></li><li><a href="module-InfoModule-InfoModule.html">InfoModule</a></li><li><a href="module-SingleView_Zoom.ViewBox.html">ViewBox</a></li><li><a href="module-SingleView_Zoom-ZoomHandler.html">ZoomHandler</a></li><li><a href="module-SquareEdit_StaffTools-SplitHandler.html">SplitHandler</a></li><li><a href="module-TextView-TextView.html">TextView</a></li><li><a href="module-utils_Notification-Notification.html">Notification</a></li><li><a href="module-utils_Resize-Resize.html">Resize</a></li><li><a href="NeonCore.html">NeonCore</a></li><li><a href="NeonView.html">NeonView</a></li><li><a href="SingleEditMode.html">SingleEditMode</a></li><li><a href="SingleView.html">SingleView</a></li></ul><h3>Global</h3><ul><li><a href="global.html#addBBoxListeners">addBBoxListeners</a></li><li><a href="global.html#addEventListener">addEventListener</a></li><li><a href="global.html#formatRaw">formatRaw</a></li><li><a href="global.html#handleNeonEvent">handleNeonEvent</a></li><li><a href="global.html#initEditModeControls">initEditModeControls</a></li><li><a href="global.html#initSelectByBBoxButton">initSelectByBBoxButton</a></li><li><a href="global.html#initTextEdit">initTextEdit</a></li><li><a href="global.html#postMessage">postMessage</a></li><li><a href="global.html#updateSylText">updateSylText</a></li></ul>
+</nav>
+
+<br class="clear">
+
+<footer>
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jul 15 2019 09:24:07 GMT-0400 (GMT-04:00)
+</footer>
+
+<script> prettyPrint(); </script>
+<script src="scripts/linenumber.js"> </script>
+</body>
+</html>