Permalink
Browse files

Simplified transitions implementation and added stylus for vendor pre…

…fix.
  • Loading branch information...
1 parent f63e258 commit d40fa78f68e70bb72fe8a28abb8ea87f3fb0cee5 Kevin Malakoff committed Sep 24, 2012
Showing with 796 additions and 418 deletions.
  1. +1 −5 Bakefile.coffee
  2. +0 −13 README.md
  3. +1 −0 RELEASE_NOTES.md
  4. +39 −38 examples/vendor/knockback-core-stack-0.16.7.js
  5. +1 −0 index.html
  6. +1 −14 knockback-navigators.css
  7. +0 −1 knockback-page-navigator-panes.min.js
  8. +0 −1 knockback-page-navigator-simple.js
  9. +0 −1 knockback-page-navigator-simple.min.js
  10. +0 −1 knockback-pane-navigator.js
  11. +0 −1 knockback-pane-navigator.min.js
  12. +166 −26 knockback-transitions.css
  13. +42 −23 knockback-transitions.js
  14. +1 −2 knockback-transitions.min.js
  15. +0 −13 packages/npm/README.md
  16. +1 −14 packages/npm/knockback-navigators.css
  17. +0 −1 packages/npm/knockback-page-navigator-panes.js
  18. +0 −1 packages/npm/knockback-page-navigator-panes.min.js
  19. +0 −1 packages/npm/knockback-page-navigator-simple.js
  20. +0 −1 packages/npm/knockback-page-navigator-simple.min.js
  21. +0 −1 packages/npm/knockback-pane-navigator.js
  22. +0 −1 packages/npm/knockback-pane-navigator.min.js
  23. +166 −26 packages/npm/knockback-transitions.css
  24. +42 −23 packages/npm/knockback-transitions.js
  25. +1 −2 packages/npm/knockback-transitions.min.js
  26. +1 −14 packages/nuget/Content/Scripts/knockback-navigators.css
  27. +0 −1 packages/nuget/Content/Scripts/knockback-page-navigator-panes.js
  28. +0 −1 packages/nuget/Content/Scripts/knockback-page-navigator-panes.min.js
  29. +0 −1 packages/nuget/Content/Scripts/knockback-page-navigator-simple.js
  30. +0 −1 packages/nuget/Content/Scripts/knockback-page-navigator-simple.min.js
  31. +0 −1 packages/nuget/Content/Scripts/knockback-pane-navigator.js
  32. +0 −1 packages/nuget/Content/Scripts/knockback-pane-navigator.min.js
  33. +166 −26 packages/nuget/Content/Scripts/knockback-transitions.css
  34. +42 −23 packages/nuget/Content/Scripts/knockback-transitions.js
  35. +1 −2 packages/nuget/Content/Scripts/knockback-transitions.min.js
  36. +1 −1 src/knockback-pane-navigator/knockback-pane-navigator.coffee
  37. +2 −0 src/knockback-transitions/component-imports.coffee
  38. +4 −1 src/knockback-transitions/css-transition-fade-in.coffee
  39. +8 −5 src/knockback-transitions/fallback-transition-fade-in.coffee
  40. +0 −2 src/knockback-transitions/fallback-transition-helpers.coffee
  41. +6 −5 src/knockback-transitions/fallback-transition-slide-up.coffee
  42. +5 −3 src/knockback-transitions/fallback-transition-slide.coffee
  43. +15 −5 src/knockback-transitions/knockback-transitions.styl
  44. +4 −2 src/knockback-transitions/transition-helpers.coffee
  45. +1 −1 src/knockback-transitions/transition-saved-state.coffee
  46. +0 −18 src/shared/knockback-page-navigators.css
  47. +0 −18 src/shared/knockback-panes.css
  48. +39 −38 test/vendor/knockback-core-0.16.7.js
  49. +39 −38 test/vendor/knockback-core-stack-0.16.7.js
View
@@ -56,14 +56,10 @@ module.exports =
'src/knockback-transitions/fallback-transition-fade-in.coffee'
'src/knockback-transitions/fallback-transition-slide.coffee'
]
- commands: [
- 'stylus --use nib --out . src/knockback-transitions/knockback-transitions.styl'
- ]
knockback_navigators_css:
commands: [
- 'cat src/shared/knockback-page-navigators.css src/shared/knockback-panes.css > knockback-navigators.css'
- 'cp src/knockback-transitions/knockback-transitions.css knockback-transitions.css'
+ 'stylus --use nib --out . src/knockback-transitions/knockback-transitions.styl'
]
publishing:
View
@@ -121,19 +121,6 @@ router.route('', null, page_navigator.dispatcher(function(){
...
```
-With options:
-
-```
-...
-router.route('', null, page_navigator.dispatcher(function(){
- page_navigator.loadPage({
- el: kb.renderTemplate('page', new PageViewModel(pages.get('main'))),
- transition: {name: 'FadeIn', duration: 1000}
- });
-}));
-...
-```
-
With buttons (HTML):
```
View
@@ -2,6 +2,7 @@ Please refer to the following release notes when upgrading your version of Knock
## 0.1.2
+* introduced css optimized transitions - now the transitions module is knockback-transitions instead of knockback-sample-transitions. Removed optoins from animations -> should all be possible to set using css classes.
* made pane navigator check for DOM changes using setInterval to ensure an active element is always present.
* introduced css transitions and renamed sample-transtions-jquery to default-transitions
* made TransitionSavedState internal to pane navigators and automatically save and restore
@@ -6475,7 +6475,7 @@ kb.Store = (function() {
return;
}
kb.utils.wrappedObject(observable, obj);
- options.no_share || obj || (observable.__kb_null = true);
+ obj || (observable.__kb_null = true);
creator = options.creator ? options.creator : (options.path && options.factory ? options.factory.creatorForPath(obj, options.path) : null);
if (!creator) {
creator = observable.constructor;
@@ -6871,7 +6871,7 @@ kb.Observable = (function() {
model_watcher = create_options.model_watcher;
delete create_options.model_watcher;
this.vo = ko.observable(null);
- this._mdl = ko.observable();
+ this._model = ko.observable();
observable = kb.utils.wrappedObservable(this, ko.dependentObservable({
read: function() {
var arg, args, current_model, new_value, _i, _len, _ref;
@@ -6887,7 +6887,7 @@ kb.Observable = (function() {
args.push(ko.utils.unwrapObservable(_this.args));
}
}
- if ((current_model = _this._mdl())) {
+ if ((current_model = _this._model())) {
new_value = _this.read ? _this.read.apply(_this.vm, args) : current_model.get.apply(current_model, args);
_this.update(new_value);
}
@@ -6910,7 +6910,7 @@ kb.Observable = (function() {
args.push(ko.utils.unwrapObservable(_this.args));
}
}
- if ((current_model = _this._mdl())) {
+ if ((current_model = _this._model())) {
if (_this.write) {
_this.write.apply(_this.vm, args);
} else {
@@ -6936,13 +6936,13 @@ kb.Observable = (function() {
observable.destroy = _.bind(this.destroy, this);
observable.model = this.model = ko.dependentObservable({
read: function() {
- return _this._mdl();
+ return _this._model();
},
write: function(new_model) {
- if (_this.__kb_destroyed || (_this._mdl() === new_model)) {
+ if (_this.__kb_destroyed || (_this._model() === new_model)) {
return;
}
- _this._mdl(new_model);
+ _this._model(new_model);
return _this.update();
}
});
@@ -6983,7 +6983,7 @@ kb.Observable = (function() {
Observable.prototype.valueType = function() {
var model, new_value;
- new_value = (model = this._mdl()) ? model.get(this.key) : null;
+ new_value = (model = this._model()) ? model.get(this.key) : null;
this.value_type || this._updateValueObservable(new_value);
return this.value_type;
};
@@ -6993,7 +6993,7 @@ kb.Observable = (function() {
if (this.__kb_destroyed) {
return;
}
- if ((model = this._mdl()) && !arguments.length) {
+ if ((model = this._model()) && !arguments.length) {
new_value = model.get(ko.utils.unwrapObservable(this.key));
}
(new_value !== void 0) || (new_value = null);
@@ -7031,7 +7031,7 @@ kb.Observable = (function() {
Observable.prototype._updateValueObservable = function(new_value) {
var create_options, creator, previous_value, value;
create_options = this.create_options;
- create_options.creator = kb.utils.inferCreator(new_value, create_options.factory, create_options.path, this._mdl(), this.key);
+ create_options.creator = kb.utils.inferCreator(new_value, create_options.factory, create_options.path, this._model(), this.key);
this.value_type = KB_TYPE_UNKNOWN;
creator = create_options.creator;
previous_value = this.__kb_value;
@@ -7296,18 +7296,18 @@ kb.CollectionObservable = (function() {
this.__kb._onCollectionChange = _.bind(this._onCollectionChange, this);
options = collapseOptions(options);
if (options.sort_attribute) {
- this.sorted_index_fn = ko.observable(this._sortAttributeFn(options.sort_attribute));
+ this._sorted_index = ko.observable(this._sortAttributeFn(options.sort_attribute));
} else {
if (options.sorted_index) {
legacyWarning(this, '0.16.3', 'use sorted_index_fn instead');
options.sorted_index_fn = options.sorted_index;
}
- this.sorted_index_fn = ko.observable(options.sorted_index_fn);
+ this._sorted_index = ko.observable(options.sorted_index_fn);
}
if (options.filters) {
- this.filters = ko.observableArray(_.isArray(options.filters) ? options.filters : options.filters ? [options.filters] : void 0);
+ this._filters = ko.observableArray(_.isArray(options.filters) ? options.filters : options.filters ? [options.filters] : void 0);
} else {
- this.filters = ko.observableArray([]);
+ this._filters = ko.observableArray([]);
}
create_options = this.create_options = {
store: kb.Store.useOptionsOrCreate(options, collection, observable)
@@ -7321,21 +7321,22 @@ kb.CollectionObservable = (function() {
}
observable.destroy = _.bind(this.destroy, this);
observable.shareOptions = _.bind(this.shareOptions, this);
- observable.viewModelByModel = _.bind(this.viewModelByModel, this);
+ observable.filters = _.bind(this.filters, this);
observable.sortedIndex = _.bind(this.sortedIndex, this);
observable.sortAttribute = _.bind(this.sortAttribute, this);
+ observable.viewModelByModel = _.bind(this.viewModelByModel, this);
observable.hasViewModels = _.bind(this.hasViewModels, this);
- this._col = ko.observable(collection);
+ this._collection = ko.observable(collection);
observable.collection = this.collection = ko.dependentObservable({
read: function() {
- return _this._col();
+ return _this._collection();
},
write: function(new_collection) {
var previous_collection;
- if ((previous_collection = _this._col()) === new_collection) {
+ if ((previous_collection = _this._collection()) === new_collection) {
return;
}
- _this._col(new_collection);
+ _this._collection(new_collection);
if (previous_collection) {
previous_collection.unbind('all', _this.__kb._onCollectionChange);
}
@@ -7353,12 +7354,12 @@ kb.CollectionObservable = (function() {
return;
}
observable = kb.utils.wrappedObservable(_this);
- current_collection = _this._col();
+ current_collection = _this._collection();
if (current_collection) {
models = current_collection.models;
}
- sorted_index_fn = _this.sorted_index_fn();
- filters = _this.filters();
+ sorted_index_fn = _this._sorted_index();
+ filters = _this._filters();
if (!models || (current_collection.models.length === 0)) {
view_models = [];
} else {
@@ -7396,15 +7397,15 @@ kb.CollectionObservable = (function() {
CollectionObservable.prototype.destroy = function() {
var array, collection, observable;
observable = kb.utils.wrappedObservable(this);
- collection = this._col();
+ collection = this._collection();
if (collection) {
collection.unbind('all', this.__kb._onCollectionChange);
array = observable();
array.splice(0, array.length);
}
this._mapper.dispose();
this.collection.dispose();
- kb.release(this.filters);
+ kb.release(this._filters);
observable.collection = null;
kb.utils.wrappedDestroy(this);
return !kb.statistics || kb.statistics.unregister('CollectionObservable', this);
@@ -7421,18 +7422,18 @@ kb.CollectionObservable = (function() {
CollectionObservable.prototype.filters = function(filters) {
if (filters) {
- return this.filters(_.isArray(filters) ? filters : [filters]);
+ return this._filters(_.isArray(filters) ? filters : [filters]);
} else {
- return this.filters([]);
+ return this._filters([]);
}
};
CollectionObservable.prototype.sortedIndex = function(sorted_index_fn) {
- return this.sorted_index_fn(sorted_index_fn);
+ return this._sorted_index(sorted_index_fn);
};
CollectionObservable.prototype.sortAttribute = function(sort_attribute) {
- return this.sorted_index_fn(sort_attribute ? this._sortAttributeFn(sort_attribute) : null);
+ return this._sorted_index(sort_attribute ? this._sortAttributeFn(sort_attribute) : null);
};
CollectionObservable.prototype.viewModelByModel = function(model) {
@@ -7498,19 +7499,19 @@ kb.CollectionObservable = (function() {
switch (event) {
case 'reset':
case 'resort':
- if (event === 'resort' && !this.sorted_index_fn()) {
+ if (event === 'resort' && !this._sorted_index()) {
return;
}
- return this._col.notifySubscribers(this._col());
+ return this._collection.notifySubscribers(this._collection());
case 'new':
case 'add':
if (this._modelIsFiltered(arg)) {
return;
}
observable = kb.utils.wrappedObservable(this);
- collection = this._col();
+ collection = this._collection();
view_model = this._createViewModel(arg);
- if ((sorted_index_fn = this.sorted_index_fn())) {
+ if ((sorted_index_fn = this._sorted_index())) {
add_index = sorted_index_fn(observable(), view_model);
} else {
add_index = collection.indexOf(arg);
@@ -7524,7 +7525,7 @@ kb.CollectionObservable = (function() {
case 'change':
if (this._modelIsFiltered(arg)) {
return this._onModelRemove(arg);
- } else if (this.sorted_index_fn()) {
+ } else if (this._sorted_index()) {
return this._onModelResort(arg);
}
}
@@ -7547,12 +7548,12 @@ kb.CollectionObservable = (function() {
observable = kb.utils.wrappedObservable(this);
view_model = this.models_only ? model : this.viewModelByModel(model);
previous_index = observable.indexOf(view_model);
- if ((sorted_index_fn = this.sorted_index_fn())) {
+ if ((sorted_index_fn = this._sorted_index())) {
sorted_view_models = _.clone(observable());
sorted_view_models.splice(previous_index, 1);
new_index = sorted_index_fn(sorted_view_models, view_model);
} else {
- new_index = this._col().indexOf(model);
+ new_index = this._collection().indexOf(model);
}
if (previous_index === new_index) {
return;
@@ -7570,7 +7571,7 @@ kb.CollectionObservable = (function() {
return;
}
observable = kb.utils.wrappedObservable(this);
- collection = this._col();
+ collection = this._collection();
if (!collection || (collection.models === models)) {
return;
}
@@ -7593,7 +7594,7 @@ kb.CollectionObservable = (function() {
});
}
}
- if (this.filters().length) {
+ if (this._filters().length) {
models = _.filter(models, function(model) {
return !_this._modelIsFiltered(model);
});
@@ -7633,7 +7634,7 @@ kb.CollectionObservable = (function() {
CollectionObservable.prototype._modelIsFiltered = function(model) {
var filter, filters, _i, _len;
- filters = this.filters();
+ filters = this._filters();
for (_i = 0, _len = filters.length; _i < _len; _i++) {
filter = filters[_i];
filter = ko.utils.unwrapObservable(filter);
View
@@ -8,6 +8,7 @@
<link rel="stylesheet" href="examples/vendor/normalize.css">
<link rel="stylesheet" href="examples/vendor/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="knockback-navigators.css">
+ <link rel="stylesheet" href="knockback-transitions.css">
<style type="text/css">
.pane-navigator.page {top: 80px;} /* offset the page to start after the fixed-position header */
View
@@ -1,5 +1,5 @@
/*
- knockback-page-navigators.css 0.1.1
+ knockback-navigators.css 0.1.1
(c) 2011, 2012 Kevin Malakoff - http://kmalakoff.github.com/knockback/
License: MIT (http://www.opensource.org/licenses/mit-license.php)
Dependencies: Knockout.js, Backbone.js, and Underscore.js.
@@ -9,19 +9,6 @@
position: relative;
}
-.pane-navigator.page {
- overflow: visible; /* will resize the browser window */
-}
-
-.pane-navigator.page.embed {
- overflow: hidden; /* will stay in its pane instead of resizing the page */
-}
-/*
- knockback-panes.css 0.1.1
- (c) 2011, 2012 Kevin Malakoff - http://kmalakoff.github.com/knockback/
- License: MIT (http://www.opensource.org/licenses/mit-license.php)
- Dependencies: Knockout.js, Backbone.js, and Underscore.js.
-*/
.pane {
padding: 0; margin: 0; width: 100%; /* panes take up their pane-navigator */
display: none; /* panes are not visible by default */
Oops, something went wrong.

0 comments on commit d40fa78

Please sign in to comment.