Added an alphabetical operators presentation and a switch to select one

TODO

@@ -76,6 +76,8 @@ DONE Fix marble hover and dragging styles for Firefox
 DONE Fix affordance animation stuck for combineLatest
 >>> v1.4.0
 
+DONE Added an alphabetical operators presentation and a switch to select one
+
 TODO Fix visual semantics of concat diagram
 >>>
 

package.json

@@ -13,6 +13,7 @@
     "@cycle/core": "1.0.x",
     "@cycle/dom": "3.1.x",
     "immutable": "^3.7.2",
+    "lodash": "4.6.1",
     "rxtween": "0.3.3"
   },
   "devDependencies": {

src/components/operators-menu-link.js

@@ -2,17 +2,12 @@ import {Rx} from '@cycle/core';
 import {h} from '@cycle/dom';
 import Colors from 'rxmarbles/styles/colors';
 import Dimens from 'rxmarbles/styles/dimens';
-import {mergeStyles} from 'rxmarbles/styles/utils';
+import {mergeStyles, makeIsHighlighted$} from 'rxmarbles/styles/utils';
 
 function operatorsMenuLink({DOM, props}) {
-  let startHighlight$ = DOM.get('.link', 'mouseenter').map(() => 1);
-  let stopHighlight$ = DOM.get('.link', 'mouseleave').map(() => 1);
   let href$ = props.get('href');
   let content$ = props.get('content').startWith('');
-  let isHighlighted$ = Rx.Observable.merge(
-    startHighlight$.map(() => true),
-    stopHighlight$.map(() => false)
-  ).startWith(false);
+  let isHighlighted$ = makeIsHighlighted$(DOM, '.link');
   let highlightingArrow = h('span', {
       style: {
         display: 'inline-block',

src/components/operators-menu.js

@@ -3,25 +3,7 @@ import {h} from '@cycle/dom';
 import Colors from 'rxmarbles/styles/colors';
 import Dimens from 'rxmarbles/styles/dimens';
 import Examples from 'rxmarbles/data/examples';
-import {mergeStyles} from 'rxmarbles/styles/utils';
-
-/**
- * Returns a hashmap of category headers to lists of examples in that category.
- */
-function organizeExamplesByCategory(examples) {
-  let categoryMap = {};
-  for (let key in examples) {
-    if (!examples.hasOwnProperty(key)) continue;
-    let value = examples[key];
-    value.key = key;
-    if (categoryMap.hasOwnProperty(value.category)) {
-      categoryMap[value.category].push(value);
-    } else {
-      categoryMap[value.category] = [value];
-    }
-  }
-  return categoryMap;
-}
+import {mergeStyles, makeIsHighlighted$} from 'rxmarbles/styles/utils';
 
 const operatorsMenuCategoryStyle = {
   textTransform: 'uppercase',
@@ -64,7 +46,7 @@ function renderExampleCategory(categoryName, isFirstCategory) {
   );
 }
 
-function renderMenuContent(categoryMap) {
+function renderMenuByCategory(categoryMap) {
   let listItems = [];
   let isFirstCategory = true;
   for (let categoryName in categoryMap) {
@@ -78,26 +60,53 @@ function renderMenuContent(categoryMap) {
   return listItems;
 }
 
-function operatorsMenuComponent() {
-  let categoryMap$ = Rx.Observable.just(organizeExamplesByCategory(Examples));
+function renderSwitchItem(key, label, isActive, isHighlighted) {
+  return h('div.switch.' + key, {
+    style: {
+      cursor: 'pointer',
+      float: 'left',
+      'padding-right': '10px',
+      'box-sizing': 'border-box',
+      'text-align': 'left',
+      color: isHighlighted ? Colors.greyDark : Colors.grey,
+      'text-decoration': 'underline'
+  }}, label);
+}
 
-  return {
-    DOM: categoryMap$.map(categoryMap =>
-      h('div',
+function renderMenu(byCategory, byCategoryIsHighlighted, byAlphabetIsHighlighted) {
+  let menuItemsByCategory = renderMenuByCategory(Examples.byCategory);
+  let menuItemsByAlphabet = renderExampleItems(Examples.byAlphabet);
+  return h('div', {}, [
+    h('div',
+      {style: {
+        paddingRight: '36px',
+        boxSizing: 'border-box',
+        // 100px is the estimated header page row height
+        height: 'calc(100vh - 100px)'}},
+      [h('div', {},
+        [ renderSwitchItem('byAlphabet', 'by Name', !byCategory, byAlphabetIsHighlighted),
+          renderSwitchItem('byCategory', 'by Category', byCategory, byCategoryIsHighlighted)]),
+       h('div', {style: {clear: 'both'}}),
+       h('ul',
         {style: {
-          paddingRight: '36px',
-          boxSizing: 'border-box',
-          // 100px is the estimated header page row height
-          height: 'calc(100vh - 100px)'}},
-        [h('ul',
-          {style: {
-            margin: '0',
-            padding: '0',
-            listStyleType: 'none',
-            overflowY: 'scroll',
-            height: '100%'}},
-          renderMenuContent(categoryMap))])
-    )
+          margin: '0',
+          'margin-top': Dimens.spaceSmall,
+          padding: '0',
+          listStyleType: 'none',
+          overflowY: 'scroll',
+          height: '100%'}}, byCategory ? menuItemsByCategory : menuItemsByAlphabet)])
+    ]);
+}
+
+function operatorsMenuComponent({DOM, props}) {
+
+  let switchMouseDown$ = DOM.get('.switch', 'mousedown');
+  let showItemsByCategory$ = switchMouseDown$.map((ev) => ev.currentTarget.className.indexOf('byCategory') >= 0).startWith(true);
+  let byCategoryIsHighlighted$ = makeIsHighlighted$(DOM, '.byCategory');
+  let byAlphabetIsHighlighted$ = makeIsHighlighted$(DOM, '.byAlphabet');
+
+  return {
+    DOM: Rx.Observable.combineLatest(showItemsByCategory$, byCategoryIsHighlighted$, byAlphabetIsHighlighted$, renderMenu)
   };
 }
 

src/data/examples.js

@@ -7,6 +7,7 @@ var filterExamples = require('rxmarbles/data/filter-examples');
 var mathExamples = require('rxmarbles/data/math-examples');
 var booleanExamples = require('rxmarbles/data/boolean-examples');
 var conditionalExamples = require('rxmarbles/data/conditional-examples');
+var sortBy = require('lodash/sortBy');
 
 function merge() {
   var args = (1 <= arguments.length) ? Array.prototype.slice.call(arguments) : [];
@@ -29,11 +30,44 @@ function applyCategory(examples, categoryName) {
   return examples;
 };
 
-module.exports = merge(
+/**
+ * Returns a hashmap of category headers to lists of examples in that category.
+ */
+function organizeExamplesByCategory(examples) {
+  let categoryMap = {};
+  for (let key in examples) {
+    if (!examples.hasOwnProperty(key)) continue;
+    let value = examples[key];
+    value.key = key;
+    if (categoryMap.hasOwnProperty(value.category)) {
+      categoryMap[value.category].push(value);
+    } else {
+      categoryMap[value.category] = [value];
+    }
+  }
+  return categoryMap;
+}
+
+function organizeExamplesByAlphabet(examples) {
+  let array = [];
+  for (let key in examples) {
+    if (!examples.hasOwnProperty(key)) continue;
+    let value = examples[key];
+    array.push(value);
+  }
+  return sortBy(array, 'key');
+}
+
+let examples = merge(
   applyCategory(transformExamples, "Transforming Operators"),
   applyCategory(combineExamples, "Combining Operators"),
   applyCategory(filterExamples, "Filtering Operators"),
   applyCategory(mathExamples, "Mathematical Operators"),
   applyCategory(booleanExamples, "Boolean Operators"),
   applyCategory(conditionalExamples, "Conditional Operators")
 );
+
+examples.byCategory = organizeExamplesByCategory(examples);
+examples.byAlphabet = organizeExamplesByAlphabet(examples);
+
+module.exports = examples;

src/styles/utils.js

@@ -1,5 +1,6 @@
 import Immutable from 'immutable';
 import {h, svg} from '@cycle/dom';
+import {Rx} from '@cycle/core';
 
 let isTruthy = x => !!x;
 
@@ -31,6 +32,16 @@ function renderSvgDropshadow() {
   ]);
 }
 
+function makeIsHighlighted$(DOM, cssSelector) {
+  let startHighlight$ = DOM.get(cssSelector, 'mouseenter').map(() => 1);
+  let stopHighlight$ = DOM.get(cssSelector, 'mouseleave').map(() => 1);
+
+  return Rx.Observable.merge(
+    startHighlight$.map(() => true),
+    stopHighlight$.map(() => false)
+  ).startWith(false);
+}
+
 const marbleElevation1Style = {
   filter: 'url(#' + DROPSHADOW_FILTER_ID + ')'
 };
@@ -80,6 +91,7 @@ const textUnselectable = {
 
 export default {
   mergeStyles,
+  makeIsHighlighted$,
   elevation1Style,
   elevation2Style,
   elevation2Before,