atomic-formula-item.html

<link rel="import" href="term-overview-section.html">
<link rel="import" href="graph-section.html">
<link rel="import" href="nextprot-elements-shared-styles.html">
<link rel="import" href="term-overview-section.html">

<!--
`atomic-formula-item-demo`
@demo demo/atomic-formula-item-demo.html
-->
<dom-module id="atomic-formula-item">
    <template>
        <style include="nextprot-elements-shared-styles">
            .atomic-number {
                vertical-align: sub;
                font-size: smaller;
                letter-spacing:-3px;
            }
            .atomic-letter {
                letter-spacing:-3px;
            }
        </style>
        <template class="formula-container" is="dom-repeat" items="[[resultElements]]" as="re">
            <template is="dom-if" if="[[re.isSub]]">
                    <span class="atomic-number">[[re.label]]</span>
            </template>
            <template is="dom-if" if="[[!re.isSub]]">
                    <span class="atomic-letter">[[re.label]]</span>
            </template>
        </template>
    </template>

    <script>
        Polymer({
            is: 'atomic-formula-item',
            properties: {
                formula: {
                    type: String
                },
                resultElements: {
                    type: Array
                }
            },
            ready: function (){
                function isNum(n){
                    return ('0123456789-'.indexOf(n) !== -1)
                };
                var result = [];
                var elements = this.formula.split("")
                var elements = elements.filter(function(a){return a !== ' '})
                for(var i=0; i<elements.length; i++){
                    var e = elements[i];
                    var prevIsNumber = false, nextIsNumber = false;
                    if(i>0){ prevIsNumber = isNum(elements[i-1])}
                    if((i+1)<elements.length){ nextIsNumber = isNum(elements[i+1])}
                    var isNumber = isNum(e);
                    if(isNumber && !prevIsNumber){
                        if(e === "-"){
                            result.push({isSub: true, label: "("})
                        }else {
                            result.push({isSub: true, label: "("})
                            result.push({isSub: true, label: "+"})

                        }

                    }
                    result.push({isSub: isNumber, label: e})
                    if(isNumber && !nextIsNumber){
                        result.push({isSub: true, label: ")"})
                    }
                }
                this.resultElements = result; 
            }
        });
    </script>
</dom-module>