feat(interval omr search): add frontend components for interval search

- Adds interval search to the OMRSearchProvider
- Creates front-end helpers for entering interval search

nginx/public/node/frontend/public/js/app/search/omr-search/IntervalChoiceView.js

@@ -0,0 +1,16 @@
+import Marionette from 'marionette';
+
+import template from './interval-choice-list.template.html';
+
+export default Marionette.CompositeView.extend({
+    template,
+
+    events: {
+        'click [data-search-value]': 'onChoiceClicked'
+    },
+
+    onChoiceClicked: function (event)
+    {
+        this.trigger('use:interval', $(event.target).attr('data-search-value'));
+    }
+});

nginx/public/node/frontend/public/js/app/search/omr-search/OMRSearchProvider.js

@@ -8,6 +8,7 @@ import IncrementalClientSideLoader from "utils/IncrementalClientSideLoader";
 import SearchResultHeadingView from "../SearchResultHeadingView";
 import NeumeGalleryView from "./NeumeGalleryView";
 import ContourChoiceView from "./ContourChoiceView";
+import IntervalChoiceView from "./IntervalChoiceView";
 import InputView from "./InputView";
 import ResultView from "./ResultView";
 
@@ -54,11 +55,10 @@ export default Marionette.Object.extend({
                     name: 'Contour',
                     type: 'contour'
                 },
-                // TODO: Implement interval search (see #875)
-                // {
-                //     name: 'Interval',
-                //     type: 'intervals'
-                // }
+                {
+                    name: 'Interval',
+                    type: 'intervals'
+                }
             ]
         }
     ],
@@ -188,6 +188,14 @@ export default Marionette.Object.extend({
             });
             regions.searchHelper.show(contourChoices);
         }
+        else if (field.type === 'intervals'){
+            var intervalChoices = new IntervalChoiceView();
+            inputView.listenTo(intervalChoices, 'use:interval', function(newQuery)
+            {
+                inputView.insertSearchString(newQuery, true);
+            });
+            regions.searchHelper.show(intervalChoices);
+        }
         else
         {
             regions.searchHelper.empty();

nginx/public/node/frontend/public/js/app/search/omr-search/contour-choice-list.template.html

@@ -1,7 +1,7 @@
 <div class="text-center">
     <div class="btn-group" role="group">
-         <button class="btn btn-default" data-search-value="u">Up</button>
-         <button class="btn btn-default" data-search-value="d">Down</button>
-         <button class="btn btn-default" data-search-value="r">Repeat</button>
+        <button class="btn btn-default" data-search-value="u">Up</button>
+        <button class="btn btn-default" data-search-value="d">Down</button>
+        <button class="btn btn-default" data-search-value="r">Repeat</button>
     </div>
 </div>

nginx/public/node/frontend/public/js/app/search/omr-search/interval-choice-list.template.html

@@ -0,0 +1,67 @@
+<div class="btn-group" role="group">
+    <div class="btn-group" role="group">
+        <button type="button"
+                class="btn btn-default btn-sm dropdown-toggle"
+                data-toggle="dropdown"
+                aria-haspopup="true"
+                aria-expanded="false">
+            5<sup>th</sup><span class="caret"></span>
+        </button>
+        <ul class="dropdown-menu">
+            <li>
+                <a href="#" data-search-value="d5">5<sup>th</sup></a>
+            </li>
+            <li>
+                <a href="#" data-search-value="d6">6<sup>th</sup></a>
+            </li>
+            <li>
+                <a href="#" data-search-value="d7">7<sup>th</sup></a>
+            </li>
+            <li>
+                <a href="#" data-search-value="d8">8<sup>ve</sup></a>
+            </li>
+        </ul>
+    </div>
+    <button class="btn btn-default btn-sm" data-search-value="d4">
+        4<sup>th</sup>
+    </button>
+    <button class="btn btn-default btn-sm" data-search-value="d3">
+        3<sup>rd</sup>
+    </button>
+    <button class="btn btn-default btn-sm" data-search-value="d2">
+        2<sup>nd</sup>
+    </button>
+    <button class="btn btn-default btn-sm" data-search-value="r">U</button>
+    <button class="btn btn-default btn-sm" data-search-value="u2">
+        2<sup>nd</sup>
+    </button>
+    <button class="btn btn-default btn-sm" data-search-value="d3">
+        3<sup>rd</sup>
+    </button>
+    <button class="btn btn-default btn-sm" data-search-value="u4">
+        4<sup>th</sup>
+    </button>
+    <div class="btn-group" role="group">
+        <button type="button"
+                class="btn btn-default btn-sm dropdown-toggle"
+                data-toggle="dropdown"
+                aria-haspopup="true"
+                aria-expanded="false">
+            5<sup>th</sup><span class="caret"></span>
+        </button>
+        <ul class="dropdown-menu">
+            <li>
+                <a href="#" data-search-value="u5">5<sup>th</sup></a>
+            </li>
+            <li>
+                <a href="#" data-search-value="u6">6<sup>th</sup></a>
+            </li>
+            <li>
+                <a href="#" data-search-value="u7">7<sup>th</sup></a>
+            </li>
+            <li>
+                <a href="#" data-search-value="u8">8<sup>ve</sup></a>
+            </li>
+        </ul>
+    </div>
+</div>