[SSE] added list of functions for hint while function is entering

apps/spreadsheeteditor/mobile/app/controller/CellEditor.js

@@ -61,9 +61,15 @@ define([
         },
 
         initialize: function() {
+            var me = this;
             this.addListeners({
                 'CellEditor': {
-                    'function:click': this.onInsertFunction.bind(this)
+                    'function:click': this.onInsertFunction.bind(this),
+                    'function:hint': function (name, type) {
+                        setTimeout(function(){
+                            me.api.asc_insertFormula(name, type, false);
+                        }, 0);
+                    }
                 }
             //     'Viewport': {
                     // 'layout:resizedrag': _.bind(this.onLayoutResize, this)
@@ -77,6 +83,7 @@ define([
             // this.api.isCEditorFocused = false;
             this.api.asc_registerCallback('asc_onSelectionNameChanged', _.bind(this.onApiCellSelection, this));
             this.api.asc_registerCallback('asc_onEditCell', _.bind(this.onApiEditCell, this));
+            this.api.asc_registerCallback('asc_onFormulaCompleteMenu',  _.bind(this.onFormulaCompleteMenu, this));
             // this.api.asc_registerCallback('asc_onCoAuthoringDisconnect', _.bind(this.onApiDisconnect,this));
             // Common.NotificationCenter.on('api:disconnect', _.bind(this.onApiDisconnect, this));
             // Common.NotificationCenter.on('cells:range', _.bind(this.onCellsRange, this));
@@ -176,6 +183,15 @@ define([
                     button: '#ce-function'
                 });
             }
+        },
+
+        onFormulaCompleteMenu: function(funcarr) {
+            if ( funcarr && funcarr.length ) {
+                this.editor.resetFunctionsHint(funcarr);
+                !this.editor.$boxfuncs.hasClass('.opened') && this.editor.$boxfuncs.addClass('opened');
+            } else {
+                this.editor.$boxfuncs.removeClass('opened');
+            }
         }
     });
 });

apps/spreadsheeteditor/mobile/app/template/CellEditor.template

@@ -11,4 +11,7 @@
     <div class="ce-group group-expand">
         <button id="ce-btn-expand" type="button" class="btn"><span class="caret"></span></button>
     </div>
+    <div class="ce-group group-functions-list">
+        <ul class="func-list"></ul>
+    </div>
 </div>

apps/spreadsheeteditor/mobile/app/view/CellEditor.js

@@ -47,7 +47,6 @@ define([
     'use strict';
 
     SSE.Views.CellEditor = Backbone.View.extend({
-
         el: '.pages > .page',
         template: _.template(template),
 
@@ -58,6 +57,9 @@ define([
             }
         },
 
+        touch: {},
+        tplHintItem: _.template('<li><a><%= caption %></a></li>'),
+
         initialize: function (options) {
         },
 
@@ -67,8 +69,17 @@ define([
 
             this.$cellname = $('#ce-cell-name', this.el);
             this.$btnexpand = $('#ce-btn-expand', this.el);
+            this.$boxfuncs = $('.group-functions-list', this.el);
+            this.$listfuncs = $('.func-list', this.$boxfuncs);
+
             // this.$btnfunc = $('#ce-function', this.el);
 
+            this.$listfuncs.on({
+                'touchstart': this.onTouchStart.bind(this),
+                'touchmove': this.onTouchMove.bind(this),
+                'touchend': this.onTouchEnd.bind(this)
+            });
+
             return this;
         },
 
@@ -91,10 +102,90 @@ define([
             // Common.NotificationCenter.trigger('edit:complete', this.editor, {restorefocus:true});
         },
 
+        clearFunctionsHint: function () {
+            this.$listfuncs.find('li').off('click');
+            this.$listfuncs.empty();
+            this.$listfuncs.scrollLeft(0);
+        },
+
         cellNameDisabled: function(disabled){
             // (disabled) ? this.$cellname.attr('disabled', 'disabled') : this.$cellname.removeAttr('disabled');
             // this.$btnfunc.toggleClass('disabled', disabled);
             // this.btnNamedRanges.setDisabled(disabled);
+        },
+
+        resetFunctionsHint: function(funcarr) {
+            this.clearFunctionsHint();
+
+            var me = this;
+            var onhintclick = function(name, type, e) {
+                this.fireEvent('function:hint', [name, type]);
+            };
+
+            var items = [];
+            _.each(funcarr, function(func, index) {
+                var $item = $(me.tplHintItem({
+                    caption: func.asc_getName()
+                }));
+
+                $item.on('click', onhintclick.bind(me, func.asc_getName(), func.asc_getType()));
+                items.push($item);
+            });
+
+            this.$listfuncs.append(items);
+        },
+
+        hasHiddenFunctionsHint: function() {
+            var _left_bound_ = this.$boxfuncs.offset().left,
+                _right_bound_ = _left_bound_ + this.$boxfuncs.width();
+
+            var $items = this.$listfuncs.find('li');
+            var rect = $items.first().get(0).getBoundingClientRect();
+
+            if ( !(rect.left < _left_bound_) ) {
+                rect = $items.last().get(0).getBoundingClientRect();
+
+                if ( !(rect.right > _right_bound_) )
+                    return false;
             }
+
+            return true;
+        },
+
+        onTouchStart: function(e) {
+            if ( this.hasHiddenFunctionsHint() ) {
+                var touches = e.originalEvent.changedTouches;
+                this.touch.startx = touches[0].clientX;
+                this.touch.scrollx = this.$listfuncs.scrollLeft();
+
+                this.touch.timer = setTimeout(function () {
+                    // touch.longtouch = true;
+                }, 500);
+                e.preventDefault();
+            }
+        },
+
+        onTouchMove: function(e) {
+            if ( this.touch.startx !== undefined ) {
+                var touches = e.originalEvent.changedTouches;
+
+                if ( this.touch.longtouch ) {}
+                else {
+                    if ( this.touch.timer ) clearTimeout(this.touch.timer), delete this.touch.timer;
+                    this.$listfuncs.scrollLeft(this.touch.scrollx + (this.touch.startx - touches[0].clientX));
+                }
+
+                e.preventDefault();
+            }
+        },
+
+        onTouchEnd: function(e) {
+            if ( this.touch.startx !== undefined ) {
+                this.touch.longtouch = false;
+                delete this.touch.startx;
+                e.preventDefault();
+            }
+        }
+
     });
 });

apps/spreadsheeteditor/mobile/resources/less/celleditor.less

@@ -24,7 +24,6 @@
     background-color: #fff;
     display: flex;
     //align-items: stretch;
-    overflow: hidden;
     z-index: 500;
     .hairline(bottom, @gray-dark);//@toolbarBorderColor);
 
@@ -37,17 +36,36 @@
     .btn {
         border: 0 none;
         height: @cellEditorHeight;
-        background-color: transparent;
     }
 
     .ce-group {
         overflow: hidden;
         height: 100%;
+        position: relative;
     }
 
     .group-name {
         display: inline-flex;
         background-color: @gray-light;
+        z-index: 1;
+    }
+
+    .group-content {
+        position: relative;
+        padding-left: 1px;
+        .hairline(left, @gray-dark);
+        flex-grow: 1;
+        //height: 100%;
+    }
+
+    .group-name, .group-content,
+    .group-expand {
+        z-index: 1;
+    }
+
+    .group-functions-list {
+        position: absolute;
+        height: @cellEditorHeight;
     }
 
     #ce-cell-name {
@@ -71,20 +89,9 @@
         padding: 0 10px;
     }
 
-    .group-expand {
-    }
-
-    .group-content {
-        position: relative;
-        padding-left: 1px;
-        .hairline(left, @gray-dark);
-        flex-grow: 1;
-        //height: 100%;
-    }
-
     #ce-btn-expand {
         width: @cellEditorHeight;
-        background: transparent;
+        background-color: #fff;
         padding: 0 2px 0;
 
         .caret {
@@ -126,10 +133,51 @@
     #ce-cell-name, #ce-cell-content {
         border-radius: 0;
     }
+
+    &.expanded {
+        .group-functions-list {
+            &.opened {
+                top: @cellEditorExpandedHeight;
+            }
+        }
+    }
+}
+
+.group-functions-list {
+    width: 100%;
+    background-color: #fff;
+    top: 0;
+    .hairline(bottom, @gray-dark);
+
+    transition: top .2s;
+
+    &.opened {
+        top: @cellEditorHeight;
+    }
+
+    &:not(.opened) {
+        display: none;
+    }
+
+    ul {
+        white-space: nowrap;
+        overflow: hidden;
+        padding: 0;
+        margin: 0;
+
+        > li {
+            display: inline-block;
+
+            > a {
+                line-height: 30px;
+                padding: 0 8px 0;
+            }
+        }
+    }
 }
 
 .phone {
     #cell-editing-box #ce-cell-name {
-        width: 70px;
+        display: none;
     }
 }