[SSE mobile] add navbar dynamically

This commit is contained in:
Maxim Kadushkin 2017-01-11 13:45:53 +03:00
parent 174d5fd5eb
commit cc8843b75d
2 changed files with 47 additions and 26 deletions

View file

@ -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">

View file

@ -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]);