From b4e42a42f79ddcfc7dbbc9df33e5d480fac2c34b Mon Sep 17 00:00:00 2001 From: Max Lynch Date: Tue, 17 Sep 2013 16:43:20 -0500 Subject: [PATCH] Hacking on Angular extension for TabBar --- hacking/TabAngular.js | 117 +++++++++++++++++++++++++++++++++++++++ hacking/tabsAngular.html | 55 ++++++++++++++++++ scss/ionic/_bar.scss | 9 --- scss/ionic/_base.scss | 18 ++++++ scss/ionic/_tabs.scss | 1 + 5 files changed, 191 insertions(+), 9 deletions(-) create mode 100644 hacking/TabAngular.js create mode 100644 hacking/tabsAngular.html diff --git a/hacking/TabAngular.js b/hacking/TabAngular.js new file mode 100644 index 0000000000..a24362fb18 --- /dev/null +++ b/hacking/TabAngular.js @@ -0,0 +1,117 @@ +angular.module('ionic.ui', []) + +.directive('content', function() { + return { + restrict: 'E', + replace: true, + transclude: true, + scope: { + hasHeader: '@', + hasTabs: '@' + }, + template: '
' + } +}) + +.controller('TabsCtrl', function($scope) { + // Controller stuff goes here + $scope.items = []; + + this.addItem = function(item) { + console.log('Adding item', item); + $scope.items.push({ + title: item.title + }); + }; +}) + +.directive('tabs', function() { + return { + restrict: 'E', + replace: true, + scope: {}, + transclude: true, + controller: 'TabsCtrl', + //templateUrl: 'ext/angular/tmpl/ionicTabBar.tmpl.html', + template: '
', + compile: function(element, attr, transclude, tabsCtrl) { + return function($scope, $element, $attr) { + }; + } + } +}) + +// Generic controller directive +.directive('tabController', function() { + return { + restrict: 'E', + replace: true, + transclude: true, + template: '
', + require: '^tabs', + scope: { + title: '@' + }, + link: function(scope, element, attrs, tabsCtrl) { + tabsCtrl.addItem(scope); + } + } +}) + + +.directive('tabBar', function() { + return { + restrict: 'E', + require: '^tabs', + transclude: true, + replace: true, + template: '
' + + '' + + ' {{item.title}}' + + '' + + '
' + } +}) + +.directive('tabItem', function() { + return { + restrict: 'E', + replace: true, + require: '^tabBar', + scope: { + text: '@', + icon: '@', + active: '=', + tabSelected: '@', + }, + compile: function(element, attrs, transclude) { + return function(scope, element, attrs, tabBarCtrl) { + var getActive, setActive; + + scope.$watch('active', function(active) { + console.log('ACTIVE CHANGED', active); + }); + }; + }, + link: function(scope, element, attrs, tabBarCtrl) { + + // Store the index of this list item, which + // specifies which tab item it is + scope.tabIndex = element.index(); + + scope.active = true; + + scope.selectTab = function(index) { + console.log('SELECT TAB', index); + tabBarCtrl.selectTabAtIndex(index); + }; + + tabBarCtrl.addTab(scope); + }, + template: '
  • ' + + '' + + '' + + '{{text}}' + + '
    • ' + } +}); diff --git a/hacking/tabsAngular.html b/hacking/tabsAngular.html new file mode 100644 index 0000000000..e0b997e487 --- /dev/null +++ b/hacking/tabsAngular.html @@ -0,0 +1,55 @@ + + + + Tab Bars + + + + + + + + + + + +
    +

    Tab Bars

    +
    + +

    Home

    +     +     + +
    +

    About

    +
    + +

    About Us

    +     +     + +
    +

    Settings

    +
    + +

    Settings

    +     +     +     + + + + + + + + + diff --git a/scss/ionic/_bar.scss b/scss/ionic/_bar.scss index fa335af69d..9b851318ea 100644 --- a/scss/ionic/_bar.scss +++ b/scss/ionic/_bar.scss @@ -189,12 +189,3 @@ display: block; } -/* Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab. - Note: For these to work, content must come after both bars in the markup */ -.has-header { - top: $bar-height; -} - -.has-footer { - bottom: $bar-height; -} diff --git a/scss/ionic/_base.scss b/scss/ionic/_base.scss index 96e57b6b49..187e80d513 100644 --- a/scss/ionic/_base.scss +++ b/scss/ionic/_base.scss @@ -29,6 +29,9 @@ body { } .view { + position: fixed; + top: 0; + left: 0; width: 100%; height: 100%; } @@ -53,6 +56,21 @@ body { padding: $content-padding; } +// Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab. +// Note: For these to work, content must come after both bars in the markup +.has-header { + top: $bar-height; +} + +.has-footer { + bottom: $bar-height; +} + +// Specify that a content area will have tabs +.has-tabs { + bottom: $tabs-height; +} + .inset { margin: $inset-margin; } diff --git a/scss/ionic/_tabs.scss b/scss/ionic/_tabs.scss index 5c25ab809a..6c33bee02f 100644 --- a/scss/ionic/_tabs.scss +++ b/scss/ionic/_tabs.scss @@ -98,3 +98,4 @@ font-weight: bold; font-size: 10px; } +