From cc8843b75dbef4f5c0b5989d2e87932bb9dd1945 Mon Sep 17 00:00:00 2001
From: Maxim Kadushkin <maxim.kadushkin@onlyoffice.com>
Date: Wed, 11 Jan 2017 13:45:53 +0300
Subject: [PATCH] [SSE mobile] add navbar dynamically

---
 .../mobile/app/template/AddOther.template     | 24 ---------
 .../mobile/app/view/add/AddOther.js           | 49 ++++++++++++++++++-
 2 files changed, 47 insertions(+), 26 deletions(-)

diff --git a/apps/spreadsheeteditor/mobile/app/template/AddOther.template b/apps/spreadsheeteditor/mobile/app/template/AddOther.template
index 242e8ac85..0b781d1e4 100644
--- a/apps/spreadsheeteditor/mobile/app/template/AddOther.template
+++ b/apps/spreadsheeteditor/mobile/app/template/AddOther.template
@@ -44,12 +44,6 @@
 
 <!-- Link view -->
 <div id="addother-link">
-    <div class="navbar">
-        <div class="navbar-inner">
-            <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></div>
-            <div class="center sliding"><%= scope.textAddLink %></div>
-        </div>
-    </div>
     <div class="page" data-page="addother-link">
         <div class="page-content">
             <div class="list-block">
@@ -145,12 +139,6 @@
 
 <!-- Add image view -->
 <div id="addother-insimage">
-    <div class="navbar">
-        <div class="navbar-inner">
-            <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></div>
-            <div class="center sliding"><%= scope.textInsertImage %></div>
-        </div>
-    </div>
     <div class="page" data-page="addother-image">
         <div class="page-content">
             <div class="list-block">
@@ -187,12 +175,6 @@
 
 <!-- Url view -->
 <div id="addother-imagefromurl">
-    <div class="navbar">
-        <div class="navbar-inner">
-            <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></div>
-            <div class="center sliding"><%= scope.textLinkSettings %></div>
-        </div>
-    </div>
     <div class="page" id="addimage-url" data-page="addimage-url">
         <div class="page-content">
             <div class="content-block-title"><%= scope.textAddress %></div>
@@ -226,12 +208,6 @@
 
 <!-- View for Sort&Filter -->
 <div id="addother-sort">
-    <div class="navbar">
-        <div class="navbar-inner">
-            <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></div>
-            <div class="center sliding"><%= scope.textSort %></div>
-        </div>
-    </div>
     <div class="page">
         <div class="page-content">
             <div class="list-block">
diff --git a/apps/spreadsheeteditor/mobile/app/view/add/AddOther.js b/apps/spreadsheeteditor/mobile/app/view/add/AddOther.js
index 6f5ffe7b1..fd11f0ef3 100644
--- a/apps/spreadsheeteditor/mobile/app/view/add/AddOther.js
+++ b/apps/spreadsheeteditor/mobile/app/view/add/AddOther.js
@@ -48,6 +48,47 @@ define([
     SSE.Views.AddOther = Backbone.View.extend(_.extend((function() {
         // private
 
+        var tplNavigation = '<div class="navbar">' +
+                                '<div class="navbar-inner">' +
+                                    '<div class="left sliding">' +
+                                        '<a href="#" class="back link">' +
+                                            '<i class="icon icon-back"></i>' +
+                                            '<% if (!android) { %><span><%= textBack %></span><% } %>' +
+                                        '</a>' +
+                                    '</div>' +
+                                    '<div class="center sliding"><%= title %></div>' +
+                                '</div>' +
+                            '</div>';
+
+        var mapNavigation = {};
+
+        var getNavigation = function (panelid) {
+            var el = mapNavigation[panelid];
+            if ( !el ) {
+                var _title;
+                switch ( panelid ) {
+                case '#addlink':
+                    _title = SSE.getController('AddLink').getView('AddLink').getTitle();
+                    break;
+                case '#addother-insimage': _title = this.textInsertImage; break;
+                case '#addother-sort': _title = this.textSort; break;
+                case '#addother-imagefromurl': _title = this.textLinkSettings; break;
+                }
+
+                mapNavigation =
+                    el = _.template(tplNavigation,
+                        {
+                            android     : Common.SharedSettings.get('android'),
+                            phone       : Common.SharedSettings.get('phone'),
+                            textBack    : this.textBack,
+                            title       : _title
+                        }
+                    );
+            }
+
+            return el;
+        };
+
         return {
             // el: '.view-main',
 
@@ -101,14 +142,18 @@ define([
 
                 if (rootView && this.layout) {
                     var $content = this.layout.find(templateId);
+                    var html, navbar = getNavigation.call(this, templateId);
 
                     // Android fix for navigation
                     if (Framework7.prototype.device.android) {
-                        $content.find('.page').append($content.find('.navbar'));
+                        // $content.find('.page').append($content.find('.navbar'));
+                        html = $content.html() + navbar;
+                    } else {
+                        html = navbar + $content.html();
                     }
 
                     rootView.router.load({
-                        content: $content.html()
+                        content: html
                     });
 
                     this.fireEvent('page:show', [this, templateId]);