Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Comparing changes

Choose two branches to see what's changed or to start a new pull request. If you need to, you can also compare across forks.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also compare across forks.
base: ac6814e188
...
compare: 968f0be306
  • 7 commits
  • 9 files changed
  • 0 commit comments
  • 1 contributor
View
2  pushpop-modal-view-stack/index.html
@@ -45,7 +45,7 @@
<a class="pp-button pp-button-style-blue pp-push" data-transition="card-swap" href="#detail-view-other">Card Swap</a>
<a class="pp-button pp-push" data-transition="zoom" href="#detail-view-other">Zoom</a>
<a class="pp-button pp-push" data-transition="cross-fade" href="#detail-view-other">Cross Fade</a>
- <a class="pp-button pp-push" href="#modal-view-1">Page Sheet Modal</a>
+ <a class="pp-button pp-push" href="#modal-view-1">Show Modal</a>
<label class="pp-switch" onclick>
<input type="checkbox"/>
<div class="pp-switch-inner">
View
25 pushpop-modal-view-stack/pushpop-modal-view-stack.css
@@ -60,13 +60,28 @@
height: 620px;
}
+/* On screens smaller than 768px (e.g.: phones) all presentation styles should be full screen. */
+@media (max-width: 768px) {
+ .pp-modal-view-stack.pp-modal-presentation-style-full-screen,
+ .pp-modal-view-stack.pp-modal-presentation-style-page-sheet,
+ .pp-modal-view-stack.pp-modal-presentation-style-form-sheet {
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ margin: 0;
+ width: auto;
+ height: auto;
+ }
+}
+
.pp-modal-view-stack.pp-modal-transition-style-cover-vertical {
margin-top: 100%;
- -webkit-transition: visibility 0s linear 0.3s, margin 0.3s linear;
- -moz-transition: visibility 0s linear 0.3s, margin 0.3s linear;
- -ms-transition: visibility 0s linear 0.3s, margin 0.3s linear;
- -o-transition: visibility 0s linear 0.3s, margin 0.3s linear;
- transition: visibility 0s linear 0.3s, margin 0.3s linear;
+ -webkit-transition: visibility 0s linear 0.3s, margin-top 0.3s linear;
+ -moz-transition: visibility 0s linear 0.3s, margin-top 0.3s linear;
+ -ms-transition: visibility 0s linear 0.3s, margin-top 0.3s linear;
+ -o-transition: visibility 0s linear 0.3s, margin-top 0.3s linear;
+ transition: visibility 0s linear 0.3s, margin-top 0.3s linear;
}
.pp-modal-view-stack.pp-modal-transition-style-cover-vertical.pp-active {
View
10 pushpop-modal-view-stack/pushpop-modal-view-stack.js
@@ -206,14 +206,18 @@ $(function() {
var $viewElement, view, viewStack;
if (href === '#') {
- $viewElement = $this.parents('.pp-view').first();
+ if ($this.parent().hasClass('pp-navigationbar')) {
+ $viewElement = $this.parent().parent().children('.pp-view.active').first();
+ } else {
+ $viewElement = $this.parents('.pp-view').first();
+ }
} else {
$viewElement = $(href);
}
- if ($viewElement.length > 0) view = $viewElement[0].view;
+ if ($viewElement.length === 0) return;
- view = view || new Pushpop.View($viewElement);
+ view = $viewElement[0].view || new Pushpop.View($viewElement);
viewStack = view.getViewStack();
if (viewStack) viewStack.dismiss();
View
24 pushpop-navigationbar/pushpop-navigationbar.css
@@ -78,8 +78,8 @@
font-size: 1em;
font-weight: bold;
padding: 0.5em 0.65em;
- margin: 0.5em;
- min-width: 2em;
+ margin: 0.5em 0.4em;
+ min-width: 1.6em;
line-height: 1.25em;
color: #fff;
text-shadow: 0 -1px 1px #000;
@@ -88,6 +88,7 @@
cursor: default;
opacity: 0;
outline: none;
+ z-index: 2;
-webkit-border-radius: 0.5em;
-moz-border-radius: 0.5em;
border-radius: 0.5em;
@@ -117,10 +118,12 @@
.pp-navigationbar > .pp-barbutton.pp-barbutton-align-left {
float: left;
+ margin-right: 0;
}
.pp-navigationbar > .pp-barbutton.pp-barbutton-align-right {
float: right;
+ margin-left: 0;
}
.pp-navigationbar > .pp-barbutton.pp-barbutton-align-left.pp-barbutton-style-back {
@@ -200,7 +203,20 @@
z-index: -1;
}
+.pp-navigationbar > .pp-barbutton.pp-barbutton-style-blue {
+ background: #7a9de9; /* Old browsers */
+ background: -moz-linear-gradient(top, #7a9de9 0%, #376fe0 50%, #2260dd 51%, #2362dd 100%); /* FF3.6+ */
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7a9de9), color-stop(50%,#376fe0), color-stop(51%,#2260dd), color-stop(100%,#2362dd)); /* Chrome,Safari4+ */
+ background: -webkit-linear-gradient(top, #7a9de9 0%,#376fe0 50%,#2260dd 51%,#2362dd 100%); /* Chrome10+,Safari5.1+ */
+ background: -o-linear-gradient(top, #7a9de9 0%,#376fe0 50%,#2260dd 51%,#2362dd 100%); /* Opera 11.10+ */
+ background: -ms-linear-gradient(top, #7a9de9 0%,#376fe0 50%,#2260dd 51%,#2362dd 100%); /* IE10+ */
+ background: linear-gradient(top, #7a9de9 0%,#376fe0 50%,#2260dd 51%,#2362dd 100%); /* W3C */
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7a9de9', endColorstr='#2362dd',GradientType=0 ); /* IE6-9 */
+}
+
.pp-navigationbar > .pp-barbutton i {
- line-height: 1em;
- font-size: 1.2em;
+ position: relative;
+ top: 0.1em;
+ line-height: 0.4em;
+ font-size: 1.75em;
}
View
13 pushpop-navigationbar/pushpop-navigationbar.js
@@ -14,7 +14,8 @@ Pushpop.NavigationBar = function(element) {
var self = this;
- var viewStack = this.viewStack = $element.parent('.pp-view-stack')[0].viewStack;
+ var viewStack = this.viewStack = Pushpop.getViewStackForElement(element);
+ if (!viewStack) return;
var tapToTop = $element.attr('data-tap-to-top') || 'false';
tapToTop = this.tapToTop = this.tapToTop || (tapToTop !== 'false');
@@ -30,10 +31,6 @@ Pushpop.NavigationBar = function(element) {
var $backButtonElement = this.$backButtonElement = $('<a class="pp-barbutton pp-barbutton-align-left pp-barbutton-style-back" href="#">Back</a>').appendTo($element);
- var activeView = viewStack.getActiveView();
- this.setTitle(activeView.title);
- this.loadNavbarButtons(activeView);
-
viewStack.$element.bind(Pushpop.EventType.WillPresentView, function(evt) {
var view = evt.view;
self.setTitle(view.title);
@@ -42,6 +39,12 @@ Pushpop.NavigationBar = function(element) {
// Prevent dragging of the Navigation Bar.
$element.bind('touchmove', function(evt) { return false; });
+
+ var activeView = viewStack.getActiveView();
+ if (!activeView) return;
+
+ this.setTitle(activeView.title);
+ this.loadNavbarButtons(activeView);
};
Pushpop.NavigationBar.prototype = {
View
48 pushpop-table-view2/pushpop-table-view.css
@@ -15,6 +15,52 @@ ul.pp-table-view {
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
+ -webkit-transition: margin-left 0.2s linear;
+ -moz-transition: margin-left 0.2s linear;
+ -ms-transition: margin-left 0.2s linear;
+ -o-transition: margin-left 0.2s linear;
+ transition: margin-left 0.2s linear;
+}
+
+ul.pp-table-view.pp-table-view-editing {
+ margin-left: 2em;
+}
+
+ul.pp-table-view.pp-table-view-editing > li::after {
+ background: #bd1522; /* Old browsers */
+ background: -moz-linear-gradient(top, #d77077 0%, #bd1522 100%); /* FF3.6+ */
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d77077), color-stop(100%,#bd1522)); /* Chrome,Safari4+ */
+ background: -webkit-linear-gradient(top, #d77077 0%,#bd1522 100%); /* Chrome10+,Safari5.1+ */
+ background: -o-linear-gradient(top, #d77077 0%,#bd1522 100%); /* Opera 11.10+ */
+ background: -ms-linear-gradient(top, #d77077 0%,#bd1522 100%); /* IE10+ */
+ background: linear-gradient(top, #d77077 0%,#bd1522 100%); /* W3C */
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d77077', endColorstr='#bd1522',GradientType=0 ); /* IE6-9 */
+ border: 2px solid #fff;
+ content: '-';
+ color: #fff;
+ font-family: Helvetica, Arial, sans-serif;
+ font-size: 1.8em;
+ font-weight: 500;
+ line-height: 0.475em;
+ display: inline-block;
+ position: absolute;
+ top: 50%;
+ left: -1.25em;
+ width: 0.475em;
+ height: 0.6em;
+ margin-top: -0.3em;
+ padding-left: 0.125em;
+ -webkit-border-radius: 1em;
+ -moz-border-radius: 1em;
+ border-radius: 1em;
+ -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.8);
+ -moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.8);
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.8);
+ -webkit-transform: rotate(0deg);
+ -moz-transform: rotate(0deg);
+ -ms-transform: rotate(0deg);
+ -o-transform: rotate(0deg);
+ transform: rotate(0deg);
}
ul.pp-table-view > li > ul.pp-table-view {
@@ -49,7 +95,7 @@ ul.pp-table-view > li.pp-table-view-selected-state {
}
ul.pp-table-view > li.pp-table-view-selected-state * {
- color: #fff !important;
+ color: #fff;
}
/* Clearfix */
View
56 pushpop-table-view2/pushpop-table-view.js
@@ -560,9 +560,35 @@ Pushpop.TableView.prototype = {
Sets this TableView in or out of editing mode and optionally animates the transition.
@param {Boolean} editing A flag indicating if the TableView should be in editing mode.
@param {Boolean} [animated] An optional flag indicating if the transition in or out of
- editing mode should be animated.
+ editing mode should be animated (default: true).
*/
- setEditing: function(editing, animated) { this._editing = editing; }
+ setEditing: function(editing, animated) {
+ if (this._editing = editing) {
+ this.$element.addClass('pp-table-view-editing');
+ } else {
+ this.$element.removeClass('pp-table-view-editing');
+ }
+ },
+
+ /**
+ Convenience accessor for jQuery's .bind() method.
+ */
+ $bind: function() { this.$element.bind.apply(this.$element, arguments); },
+
+ /**
+ Convenience accessor for jQuery's .unbind() method.
+ */
+ $unbind: function() { this.$element.unbind.apply(this.$element, arguments); },
+
+ /**
+ Convenience accessor for jQuery's .delegate() method.
+ */
+ $delegate: function() { this.$element.delegate.apply(this.$element, arguments); },
+
+ /**
+ Convenience accessor for jQuery's .undelegate() method.
+ */
+ $undelegate: function() { this.$element.undelegate.apply(this.$element, arguments); }
};
/**
@@ -571,12 +597,15 @@ Pushpop.TableView.prototype = {
@param {Array} [dataSet.id] The unique identifier for a specific record.
@param {Array} [dataSet.value] The (sometimes) hidden value for a specific record.
@param {Array} [dataSet.title] The title to be displayed in a TableViewCell for a specific record.
+ @param {String} [defaultReuseIdentifier] The optional reuse identifier to be used for rows that do
+ not specify a specific reuse identifier.
@constructor
*/
-Pushpop.TableViewDataSource = function TableViewDataSource(dataSet) {
+Pushpop.TableViewDataSource = function TableViewDataSource(dataSet, defaultReuseIdentifier) {
if (!dataSet || dataSet.constructor !== Array) return;
this.setDataSet(dataSet);
+ this.setDefaultReuseIdentifier(defaultReuseIdentifier);
// Default implementation if using an in-memory data set.
this.getNumberOfRows = function() { return this.getFilteredDataSet().length; };
@@ -1193,4 +1222,23 @@ Pushpop.InlineTextInputTableViewCell.prototype.setSelected = function(value) {
// Register the prototype for Pushpop.InlineTextInputTableViewCell as a reusable cell type.
Pushpop.TableView.registerReusableCellPrototype(Pushpop.InlineTextInputTableViewCell.prototype);
-$(function() { $('.pp-table-view').each(function(index, element) { new Pushpop.TableView(element); }); });
+$(function() {
+ $('.pp-table-view').each(function(index, element) { new Pushpop.TableView(element); });
+
+ // Set up table view "edit" buttons (ex.: in a navigation bar) to toggle the "editing"
+ // flag of the table view its "href" points to.
+ $(document.body).delegate('.pp-table-view-edit-button', 'click', function(evt) {
+ var $this = $(this);
+ var $tableViewElement = $($this.attr('href'));
+ if ($tableViewElement.length === 0) return;
+
+ var tableView = $tableViewElement[0].tableView;
+ if (!tableView) return;
+
+ var isEditing = !tableView.getEditing()
+ if (isEditing) $this.addClass('pp-barbutton-style-blue'); else $this.removeClass('pp-barbutton-style-blue');
+ tableView.setEditing(isEditing);
+
+ evt.preventDefault();
+ });
+});
View
4 pushpop.css
@@ -23,8 +23,12 @@ html {
body {
background: #000;
+ position: absolute;
+ width: 100%;
+ height: 100%;
margin: 0;
padding: 0;
+ overflow: hidden;
font-size: 13px;
line-height: 1.25em;
}
View
24 pushpop.js
@@ -116,6 +116,26 @@ Pushpop.View.prototype = {
setBackButtonVisible: function(visible) {
if (this.$navbarButtons.filter('.pp-barbutton-align-left').length === 0) this.hideNavBackButton = !visible;
},
+
+ /**
+ Convenience accessor for jQuery's .bind() method.
+ */
+ $bind: function() { this.$element.bind.apply(this.$element, arguments); },
+
+ /**
+ Convenience accessor for jQuery's .unbind() method.
+ */
+ $unbind: function() { this.$element.unbind.apply(this.$element, arguments); },
+
+ /**
+ Convenience accessor for jQuery's .delegate() method.
+ */
+ $delegate: function() { this.$element.delegate.apply(this.$element, arguments); },
+
+ /**
+ Convenience accessor for jQuery's .undelegate() method.
+ */
+ $undelegate: function() { this.$element.undelegate.apply(this.$element, arguments); }
};
/**
@@ -211,7 +231,7 @@ Pushpop.ViewStack.prototype = {
var viewStack = element.viewStack;
var activeView = viewStack.getActiveView();
if (!activeView) return;
-
+
activeView.$element.trigger($.Event(Pushpop.EventType.DidDismissView, {
view: activeView,
action: 'parent-' + action
@@ -230,7 +250,7 @@ Pushpop.ViewStack.prototype = {
var viewStack = element.viewStack;
var activeView = viewStack.getActiveView();
if (!activeView) return;
-
+
activeView.$element.trigger($.Event(Pushpop.EventType.DidPresentView, {
view: activeView,
action: 'parent-' + action

No commit comments for this range

Something went wrong with that request. Please try again.