[DEV] Split candidates rendering to be reused externally

Author: Francois-Xavier Gentilhomme

myscript-text-candidates-element.html

@@ -0,0 +1,155 @@
+<!--
+Copyright © MyScript.
+LICENSE: [Apache License 2.0](http://www.apache.org/licenses/LICENSE-2.0)
+-->
+<link rel="import" href="../polymer/polymer.html">
+
+<dom-module id="myscript-text-candidates-element">
+    <style>
+        :host {
+            display: block;
+            overflow: auto;
+            text-align: center;
+            font-size: xx-large;
+            min-height: 95px;
+            max-height: 95px;
+        }
+
+        .text {
+            color: #1580CD;
+            background-color: #EDF0F2;
+            font-size: 1.75rem;
+            padding: .5rem .75rem;
+            border-radius: 3px;
+            cursor: pointer;
+        }
+
+        .text[selected] {
+            color: #FFFFFF;
+            background-color: #1580CD;
+        }
+
+        .candidate[selected] * {
+            color: inherit;
+            background-color: inherit;
+        }
+
+        .char.predicted {
+            color: #73818C;
+        }
+
+        .char.completed {
+            color: #1A9FFF;
+        }
+    </style>
+    <template>
+        <template is="dom-repeat" id="textCandidateList" items="[[ result.textSegmentResult.candidates ]]"
+                  as="textCandidate"
+                  index-as="textIndex">
+            <span class$="text {{ _getCandidateFlags(candidate) }}"
+                  selected$="[[ _isSelected(textIndex, result.textSegmentResult.selectedCandidateIdx) ]]"
+                  on-tap="_select">
+                <template is="dom-if" if="[[ !textCandidate.children ]]">
+                        {{ textCandidate.label }}
+                </template>
+                <template is="dom-if" if="[[ textCandidate.children ]]"><!--WARN: templates needs to be inline to avoid carriage return after span-->
+                    <template is="dom-repeat" id="wordCandidateList"
+                              items="[[ _getChildCandidates(textCandidate, result, 'text') ]]" as="wordCandidate">
+                        <span class$="word {{ _getCandidateFlags(wordCandidate) }}">
+                            <template is="dom-if" if="[[ !wordCandidate.children ]]">
+                                {{ wordCandidate.label }}
+                            </template>
+                            <template is="dom-if" if="[[ wordCandidate.children ]]">
+                                <template is="dom-repeat" id="charCandidateList"
+                                          items="[[ _getChildCandidates(wordCandidate, result, 'word') ]]"
+                                          as="charCandidate"><span
+                                    class$="char {{ _getCandidateFlags(charCandidate) }}">{{ charCandidate.label }}</span></template>
+                            </template>
+                        </span>
+                     </template>
+                 </template>
+            </span>
+        </template>
+    </template>
+</dom-module>
+
+<script>
+    Polymer({
+        is: 'myscript-text-candidates-element',
+        properties: {
+            /**
+             * Recognition result.
+             * @attribute result
+             * @type {Object<String, Object>} Attributes depends on recognition type already configured.
+             */
+            result: {
+                type: Object,
+                notify: true
+            }
+        },
+        /**
+         * Select a new candidate
+         * @param e
+         */
+        _select: function (e) {
+            var result = this.result;
+            result.textSegmentResult.selectedCandidateIdx = this.$.textCandidateList.indexForElement(e.target);
+            this.result = {};
+            this.result = result;
+            this.dispatchEvent(new CustomEvent('myscript-text-candidates-element-change'), { detail: this.result });
+        },
+        _isSelected: function (index, selectedIndex) {
+            return index === selectedIndex;
+        },
+        _getChildSegments: function (candidate, result, type) {
+            var segments = [];
+
+            function addSegment(child, segment) {
+                if (segment.inkRanges === child.inkRanges) {
+                    segment.selectedCandidateIdx = child.selectedCandidateIdx;
+                    segments.push(segment);
+                }
+            }
+
+            if (candidate.children) {
+                candidate.children.forEach(function (child, index) {
+                    if (type === 'text' && result.wordSegments && result.wordSegments.length > -1) {
+                        result.wordSegments.forEach(function (segment) {
+                            addSegment(child, segment);
+                        });
+                    } else if (type === 'word' && result.charSegments && result.charSegments.length > -1) {
+                        if (!child.inkRanges) {
+                            var seg = {
+                                candidates: [{
+                                    label: candidate.label.charAt(index),
+                                    flags: candidate.flags
+                                }],
+                                selectedCandidateIdx: 0
+                            };
+                            segments.push(seg);
+                        } else {
+                            result.charSegments.forEach(function (segment) {
+                                addSegment(child, segment);
+                            });
+                        }
+                    }
+                });
+            }
+            return segments;
+        },
+        _getChildCandidates: function (candidate, result, type) {
+            var candidates = [];
+            this._getChildSegments(candidate, result, type)
+                .forEach(function (segment) {
+                    candidates.push(segment.candidates[segment.selectedCandidateIdx]);
+                });
+            return candidates;
+        },
+        _getCandidateFlags: function (candidate) {
+            if (candidate.flags) {
+                return candidate.flags.join(' ').toLowerCase();
+            }
+            return '';
+        }
+    });
+</script>