pushpop-rails 1.0.0

data/vendor/assets/Pushpop/pushpop-split-view/pushpop-split-view.js

@@ -0,0 +1,33 @@
+;'use strict';
+
+// The base Pushpop object.
+var Pushpop = window['Pushpop'] || {};
+
+/**
+  Creates a new SplitView.
+  @param {HTMLDivElement} element The DIV element to initialize as a new SplitView.
+  @constructor
+  @extends Pushpop.View
+*/
+Pushpop.SplitView = function SplitView(element) {
+  
+  // Call the "super" constructor.
+  Pushpop.View.prototype.constructor.apply(this, arguments);
+  
+  this.$element.addClass('pp-view');
+  
+  // TODO: Implement responsive design and auto-collapse the split view into a
+  // single view stack on a mobile phone.
+};
+
+// Create the prototype for the Pushpop.SplitView as a "sub-class" of Pushpop.View.
+Pushpop.SplitView.prototype = new Pushpop.View();
+Pushpop.SplitView.prototype.constructor = Pushpop.SplitView;
+
+Pushpop.SplitView.prototype.getMasterViewStack = function() {
+  return this.$element.children('.pp-split-view-stack-master')[0].viewStack;
+};
+
+Pushpop.SplitView.prototype.getDetailViewStack = function() {
+  return this.$element.children('.pp-split-view-stack-detail')[0].viewStack;
+};

data/vendor/assets/Pushpop/pushpop-tab-view/pushpop-tab-view.css

@@ -0,0 +1,130 @@
+.pp-tab-view > .pp-view-stack {
+  bottom: 49px;
+  display: none;
+  -webkit-perspective: none;
+     -moz-perspective: none;
+      -ms-perspective: none;
+       -o-perspective: none;
+          perspective: none;
+}
+
+.pp-tab-view > .pp-view-stack.pp-active {
+  display: block;
+}
+
+.pp-tab-bar {
+  background: #000; /* Old browsers */
+  background: -moz-linear-gradient(top,  #636363 0%, #202020 48%, #000 49%, #000 100%); /* FF3.6+ */
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#636363), color-stop(48%,#202020), color-stop(49%,#000), color-stop(100%,#000)); /* Chrome,Safari4+ */
+  background: -webkit-linear-gradient(top,  #636363 0%,#202020 48%,#000 49%,#000 100%); /* Chrome10+,Safari5.1+ */
+  background: -o-linear-gradient(top,  #636363 0%,#202020 48%,#000 49%,#000 100%); /* Opera 11.10+ */
+  background: -ms-linear-gradient(top,  #636363 0%,#202020 48%,#000 49%,#000 100%); /* IE10+ */
+  background: linear-gradient(top,  #636363 0%,#202020 48%,#000 49%,#000 100%); /* W3C */
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#636363', endColorstr='#000',GradientType=0 ); /* IE6-9 */
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-size: 1em;
+  border-top: 1px solid rgba(255, 255, 255, 0.15);
+  border-bottom: 1px solid #000;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  padding: 2px;
+  width: auto;
+  height: 43px;
+  -webkit-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.3);
+     -moz-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.3);
+          box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.3);
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+       -o-user-select: none;
+          user-select: none;
+  -webkit-backface-visibility: hidden;
+     -moz-backface-visibility: hidden;
+      -ms-backface-visibility: hidden;
+       -o-backface-visibility: hidden;
+          backface-visibility: hidden;
+  -webkit-transform: translate3d(0, 0, 0);
+     -moz-transform:   translate(0, 0);
+      -ms-transform:   translate(0, 0);
+       -o-transform:   translate(0, 0);
+          transform:   translate(0, 0);
+}
+
+.pp-tab-bar-button {
+  cursor: pointer;
+  display: inline-block;
+  height: 44px;
+  text-align: center;
+  text-decoration: none;
+  -webkit-border-radius: 3px;
+     -moz-border-radius: 3px;
+          border-radius: 3px;
+}
+
+.pp-tab-bar-button:hover {
+  text-decoration: none;
+}
+
+.pp-tab-bar-button:first-child:nth-last-child(1) {
+  width: 100%;
+}
+
+.pp-tab-bar-button:first-child:nth-last-child(2),
+.pp-tab-bar-button:first-child:nth-last-child(2) ~ .pp-tab-bar-button {
+  width: 50%;
+}
+
+.pp-tab-bar-button:first-child:nth-last-child(3),
+.pp-tab-bar-button:first-child:nth-last-child(3) ~ .pp-tab-bar-button {
+  width: 33.33333%;
+}
+
+.pp-tab-bar-button:first-child:nth-last-child(4),
+.pp-tab-bar-button:first-child:nth-last-child(4) ~ .pp-tab-bar-button {
+  width: 25%;
+}
+
+.pp-tab-bar-button:first-child:nth-last-child(5),
+.pp-tab-bar-button:first-child:nth-last-child(5) ~ .pp-tab-bar-button {
+  width: 20%;
+}
+
+.pp-tab-bar-button.pp-active {
+  background: rgba(255, 255, 255, 0.15);
+}
+
+.pp-tab-bar-button-icon {
+  color: #888;
+  font-size: 26px;
+  display: block !important;
+}
+
+.pp-tab-bar-button-icon::before {
+  background: none;
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(161,161,161,1)), color-stop(100%,rgba(95,95,95,1))); /* Chrome,Safari4+ */
+  background: -webkit-linear-gradient(top,  rgba(161,161,161,1) 0%,rgba(95,95,95,1) 100%); /* Chrome10+,Safari5.1+ */
+  color: #808080;
+  -webkit-text-fill-color: transparent;
+  -webkit-background-clip: text;
+}
+
+.pp-active > .pp-tab-bar-button-icon::before {
+  background: none;
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(209,225,248,1)), color-stop(50%,rgba(126,183,236,1)), color-stop(51%,rgba(39,138,242,1)), color-stop(100%,rgba(59,191,248,1))); /* Chrome,Safari4+ */
+  background: -webkit-linear-gradient(top,  rgba(209,225,248,1) 0%,rgba(126,183,236,1) 50%,rgba(39,138,242,1) 51%,rgba(59,191,248,1) 100%); /* Chrome10+,Safari5.1+ */
+  color: #3bbff8;
+  -webkit-text-fill-color: transparent;
+  -webkit-background-clip: text;
+}
+
+.pp-tab-bar-button-title {
+  color: #999;
+  font-size: 10px;
+  font-weight: bold;
+}
+
+.pp-active > .pp-tab-bar-button-title {
+  color: #fff;
+}

data/vendor/assets/Pushpop/pushpop-tab-view/pushpop-tab-view.js

@@ -0,0 +1,298 @@
+;'use strict';
+
+// The base Pushpop object.
+var Pushpop = window['Pushpop'] || {};
+
+/**
+  Creates a new TabView.
+  @param {HTMLDivElement} element The DIV element to initialize as a new TabView.
+  @constructor
+  @extends Pushpop.View
+*/
+Pushpop.TabView = function TabView(element) {
+  
+  // Call the "super" constructor.
+  Pushpop.View.prototype.constructor.apply(this, arguments);
+  
+  var $element = this.$element.addClass('pp-view');
+  
+  // Initialize the tab bar.
+  var tabBar = this._tabBar = new Pushpop.TabBar(this);
+  
+  // Initialize the tab view stacks.
+  var tabViewStacks = this._tabViewStacks = [], viewStacks = [];
+  $element.children('.pp-view-stack').each(function(index, element) {
+    viewStacks.push(new Pushpop.ViewStack(element));
+  });
+  
+  this.setTabViewStacks(viewStacks);
+  
+  // Set the initial selected index.
+  if (tabViewStacks.length > 0) this.setSelectedIndex(0);
+};
+
+/**
+  Event types for Pushpop.TabView.
+*/
+Pushpop.TabView.EventType = {
+  DidSelectTabViewStack: 'Pushpop:TabView:DidSelectTabViewStack'
+};
+
+// Create the prototype for the Pushpop.TabView as a "sub-class" of Pushpop.View.
+Pushpop.TabView.prototype = new Pushpop.View();
+Pushpop.TabView.prototype.constructor = Pushpop.TabView;
+
+Pushpop.TabView.prototype._tabBar = null;
+
+/**
+
+*/
+Pushpop.TabView.prototype.getTabBar = function() { return this._tabBar; };
+
+Pushpop.TabView.prototype._tabViewStacks = null; // []
+
+/**
+
+*/
+Pushpop.TabView.prototype.getTabViewStacks = function() { return this._tabViewStacks; };
+
+/**
+
+*/
+Pushpop.TabView.prototype.setTabViewStacks = function(tabViewStacks) {
+  var _tabViewStacks = this._tabViewStacks;
+  _tabViewStacks.length = 0;
+  
+  var tabBarButtons = [];
+  
+  for (var i = 0, length = tabViewStacks.length, tabViewStack; i < length; i++) {
+    _tabViewStacks.push(tabViewStack = tabViewStacks[i]);
+    tabBarButtons.push(new Pushpop.TabBarButton(tabViewStack));
+  }
+  
+  this.getTabBar().setTabBarButtons(tabBarButtons);
+};
+
+Pushpop.TabView.prototype._selectedIndex = -1;
+
+/**
+
+*/
+Pushpop.TabView.prototype.getSelectedIndex = function() { return this._selectedIndex; };
+
+/**
+
+*/
+Pushpop.TabView.prototype.setSelectedIndex = function(selectedIndex) {
+  var tabViewStacks = this.getTabViewStacks();
+  if (selectedIndex === this._selectedIndex || selectedIndex < 0 || selectedIndex >= tabViewStacks.length) return;
+  
+  var previousSelectedTabViewStack = this._selectedTabViewStack;
+  var selectedTabViewStack = this._selectedTabViewStack = tabViewStacks[this._selectedIndex = selectedIndex];
+  
+  if (previousSelectedTabViewStack) previousSelectedTabViewStack.$element.removeClass('pp-active');
+  selectedTabViewStack.$element.addClass('pp-active');
+  
+  var activeViewInSelectedTab = selectedTabViewStack.getActiveView();
+  if (activeViewInSelectedTab) activeViewInSelectedTab.forceReflow();
+  
+  var activeScrollViewInSelectedTab = (activeViewInSelectedTab) ? activeViewInSelectedTab.getScrollView() : null;
+  if (activeScrollViewInSelectedTab) activeScrollViewInSelectedTab.recalculateDimensions();
+  
+  this.$element.trigger($.Event(Pushpop.TabView.EventType.DidSelectTabViewStack, {
+    previousSelectedTabViewStack: previousSelectedTabViewStack,
+    selectedTabViewStack: selectedTabViewStack
+  }));
+};
+
+Pushpop.TabView.prototype._selectedTabViewStack = null;
+
+/**
+
+*/
+Pushpop.TabView.prototype.getSelectedTabViewStack = function() { return this._selectedTabViewStack; };
+
+/**
+
+*/
+Pushpop.TabView.prototype.setSelectedTabViewStack = function(selectedTabViewStack) {
+  var tabViewStacks = this.getTabViewStacks();
+  var previousSelectedTabViewStack = this._selectedTabViewStack;
+  if (!selectedTabViewStack || selectedTabViewStack === previousSelectedTabViewStack) return;
+  
+  for (var i = 0, length = tabViewStacks.length; i < length; i++) {
+    if (selectedTabViewStack === tabViewStacks[i]) {
+      this._selectedTabViewStack = selectedTabViewStack;
+      this._selectedIndex = i;
+      break;
+    }
+  }
+  
+  if (previousSelectedTabViewStack) previousSelectedTabViewStack.$element.removeClass('pp-active');
+  selectedTabViewStack.$element.addClass('pp-active');
+  
+  var activeViewInSelectedTab = selectedTabViewStack.getActiveView();
+  if (activeViewInSelectedTab) activeViewInSelectedTab.forceReflow();
+  
+  var activeScrollViewInSelectedTab = (activeViewInSelectedTab) ? activeViewInSelectedTab.getScrollView() : null;
+  if (activeScrollViewInSelectedTab) activeScrollViewInSelectedTab.recalculateDimensions();
+  
+  this.$element.trigger($.Event(Pushpop.TabView.EventType.DidSelectTabViewStack, {
+    previousSelectedTabViewStack: previousSelectedTabViewStack,
+    selectedTabViewStack: selectedTabViewStack
+  }));
+};
+
+/**
+  Creates a new TabBar.
+  @param {Pushpop.TabView} tabView The tab view to initialize this tab bar for.
+  @constructor
+*/
+Pushpop.TabBar = function TabBar(tabView) {
+  var $element = this.$element = $('<div class="pp-tab-bar"/>');
+  var element = this.element = $element[0];
+  
+  var self = element.tabBar = this;
+  
+  this.tabView = tabView;
+  
+  var tabBarButtons = this._tabBarButtons = [];
+
+  tabView.$element.append($element).bind(Pushpop.TabView.EventType.DidSelectTabViewStack, function(evt) {
+    var previousSelectedTabViewStack = evt.previousSelectedTabViewStack;
+    var selectedTabViewStack = evt.selectedTabViewStack;
+    var previousSelectedTabBarButton, selectedTabBarButton;
+    
+    for (var i = 0, length = tabBarButtons.length, tabBarButton, tabBarButtonViewStack; i < length; i++) {
+      tabBarButton = tabBarButtons[i];
+      tabBarButtonViewStack = tabBarButton.getTabViewStack();
+      
+      if (previousSelectedTabViewStack && tabBarButtonViewStack === previousSelectedTabViewStack) previousSelectedTabBarButton = tabBarButton;
+      if (selectedTabViewStack && tabBarButtonViewStack === selectedTabViewStack) selectedTabBarButton = tabBarButton;
+      
+      if ((previousSelectedTabBarButton || !previousSelectedTabViewStack) && (selectedTabBarButton || !selectedTabViewStack)) break;
+    }
+    
+    if (previousSelectedTabBarButton) previousSelectedTabBarButton.$element.removeClass('pp-active');
+    if (selectedTabBarButton) selectedTabBarButton.$element.addClass('pp-active');
+  });
+
+  $element.delegate('.pp-tab-bar-button', !!('ontouchstart' in window) ? 'touchstart' : 'mousedown', function(evt) {
+    var tabBarButton = this.tabBarButton;
+    tabView.setSelectedTabViewStack(tabBarButton.getTabViewStack());
+  });
+};
+
+Pushpop.TabBar.prototype = {
+  constructor: Pushpop.TabBar,
+  
+  element: null,
+  $element: null,
+  
+  tabView: null,
+  
+  _tabBarButtons: null, // []
+  
+  /**
+  
+  */
+  getTabBarButtons: function() { return this._tabBarButtons; },
+  
+  /**
+  
+  */
+  setTabBarButtons: function(tabBarButtons) {
+    var _tabBarButtons = this._tabBarButtons;
+    _tabBarButtons.length = 0;
+    
+    var $element = this.$element;
+    $element.html('');
+    
+    for (var i = 0, length = tabBarButtons.length, tabBarButton; i < length; i++) {
+      _tabBarButtons.push(tabBarButton = tabBarButtons[i]);
+      tabBarButton.setTabBar(this);
+      $element.append(tabBarButton.$element);
+    }
+  }
+};
+
+/**
+  Creates a new TabBarButton.
+  @param {Pushpop.ViewStack} tabViewStack The view stack containing the tab bar button to initialize.
+  @constructor
+*/
+Pushpop.TabBarButton = function TabBarButton(tabViewStack) {
+  var $element = this.$element = tabViewStack.$element.children('.pp-tab-bar-button').first();
+  var element = this.element = $element[0];
+  
+  var self = element.tabBarButton = this;
+  
+  this._tabViewStack = tabViewStack;
+  
+  var $iconElement = this.$iconElement = $element.children('.pp-tab-bar-button-icon').first();
+  var icon = this._icon = ''; // TODO: Implement this.
+  
+  var $titleElement = this.$titleElement = $element.children('.pp-tab-bar-button-title').first();
+  var title = this._title = $titleElement.html();
+};
+
+Pushpop.TabBarButton.prototype = {
+  constructor: Pushpop.TabBarButton,
+  
+  element: null,
+  $element: null,
+  $iconElement: null,
+  $titleElement: null,
+  
+  _tabViewStack: null, // []
+  
+  /**
+  
+  */
+  getTabViewStack: function() { return this._tabViewStack; },
+  
+  /**
+  
+  */
+  setTabViewStack: function(tabViewStack) {
+    this._tabViewStack = tabViewStack;
+  },
+  
+  _tabBar: null,
+  
+  /**
+  
+  */
+  getTabBar: function() { return this._tabBar; },
+  
+  /**
+  
+  */
+  setTabBar: function(tabBar) { this._tabBar = tabBar; },
+  
+  _icon: '',
+  
+  /**
+  
+  */
+  getIcon: function() { return this._icon; },
+  
+  /**
+  
+  */
+  setIcon: function(icon) {
+    this._icon = icon;
+  },
+  
+  _title: '',
+  
+  /**
+  
+  */
+  getTitle: function() { return this._title; },
+  
+  /**
+  
+  */
+  setTitle: function(title) { this.$titleElement.html(this._title = title); }
+};