akre54 / chaplin Goto Github PK
View Code? Open in Web Editor NEWThis project forked from chaplinjs/chaplin
An Application Architecture Using Backbone.js
Home Page: http://moviepilot.com/
License: Other
This project forked from chaplinjs/chaplin
An Application Architecture Using Backbone.js
Home Page: http://moviepilot.com/
License: Other
I've had this sitting in my queue for a while, haven't had time to fully work out all the bugs. Here's a work-in-progress edit to the bb-view-hooks branch.
diff --git a/src/chaplin/views/collection_view.coffee b/src/chaplin/views/collection_view.coffee
index 96ffc29..b7fa10c 100644
--- a/src/chaplin/views/collection_view.coffee
+++ b/src/chaplin/views/collection_view.coffee
@@ -5,6 +5,8 @@ Backbone = require 'backbone'
View = require 'chaplin/views/view'
utils = require 'chaplin/lib/utils'
+# jQuery's $.fn.toggle is much more advanced than simply hiding. We're including
+# it here because it'd be a huge block of code to include
toggleElement = (elem, visible) ->
if Backbone.$
Backbone.$(elem).toggle visible
@@ -30,7 +32,7 @@ insertView = (list, viewEl, position, length, itemSelector) ->
if insertInMiddle or itemSelector
# Get the children which originate from item views.
- children = list.querySelectorAll(itemSelector)
+ children = list.querySelectorAll itemSelector
childrenLength = children.length
# Check if it needs to be inserted.
@@ -203,7 +205,7 @@ module.exports = class CollectionView extends View
# When an item is added, create a new view and insert it.
itemAdded: (item, collection, options) =>
- @insertView item, @renderItem(item), options.at
+ @insertView @listEl, item.el, @renderItem(item), options.at
# When an item is removed, remove the corresponding view from DOM and caches.
itemRemoved: (item) =>
@@ -354,10 +356,10 @@ module.exports = class CollectionView extends View
view = @subview "itemView:#{item.cid}"
if view
# Re-insert the view.
- @insertView item, view, index, false
+ @insertView @listEl, item.el, view, index, false
else
# Create a new view, render and insert it.
- @insertView item, @renderItem(item), index
+ @insertView @listEl, item.el, @renderItem(item), index
# If no view was created, trigger `visibilityChange` event manually.
@trigger 'visibilityChange', @visibleItems if items.length is 0
@@ -404,7 +406,10 @@ module.exports = class CollectionView extends View
# Start animation.
if included and enableAnimation
- startAnimation view.el, @useCssAnimation, @animationStartClass
+ if @useCssAnimation
+ view.el.classList.add @animationStartClass
+ else
+ view.el.style.opacity = 0
# Hide or mark the view if it’s filtered.
@filterCallback view, included if @filterer
@@ -427,7 +432,8 @@ module.exports = class CollectionView extends View
setTimeout (=> view.el.classList.add @animationEndClass), 0
else
# Fade the view in if it was made transparent before.
- endAnimation view.el, @animationDuration
+ view.el.style.transition = "opacity #{(@animationDuration / 1000)}s"
+ view.el.opacity = 1
view
diff --git a/src/chaplin/views/layout.coffee b/src/chaplin/views/layout.coffee
index e21c81e..453bf94 100644
--- a/src/chaplin/views/layout.coffee
+++ b/src/chaplin/views/layout.coffee
@@ -203,18 +203,13 @@ module.exports = class Layout extends View
# Apply the region selector.
instance.container = if region.selector is ''
- if Backbone.$
- region.instance.$el
- else
- region.instance.el
+ region.instance.el
else
- if region.instance.noWrap
- if Backbone.$
- Backbone.$(region.instance.container).find region.selector
+ root = if region.instance.noWrap
+ region.instance.container
else
- region.instance.container.querySelector region.selector
- else
- region.instance.$ region.selector
+ region.instance.el
+ root.querySelector region.selector
# Disposal
# --------
diff --git a/test/spec/collection_view_spec.coffee b/test/spec/collection_view_spec.coffee
index f534f73..2743321 100644
--- a/test/spec/collection_view_spec.coffee
+++ b/test/spec/collection_view_spec.coffee
@@ -86,7 +86,7 @@ define [
collectionView.$list.children collectionView.itemSelector
else
if collectionView.itemSelector
- (item for item in collectionView.list.children when Backbone.utils.matchesSelector item, collectionView.itemSelector)
+ (item for item in collectionView.list.children when item.tagName is collectionView.itemSelector)
else
collectionView.list.children
@@ -609,11 +609,7 @@ define [
model.get('title') is 'new'
filterCallback = (view, included) ->
- cls = if included then 'included' else 'not-included'
- if jQuery
- view.$el.addClass cls
- else
- view.el.classList.add cls
+ view.el.classList.add if included then 'included' else 'not-included'
filterCallbackSpy = sinon.spy filterCallback
collectionView.filter filterer, filterCallbackSpy
diff --git a/test/spec/layout_spec.coffee b/test/spec/layout_spec.coffee
index 70c46ac..daaf403 100644
--- a/test/spec/layout_spec.coffee
+++ b/test/spec/layout_spec.coffee
@@ -343,12 +343,8 @@ define [
instance2 = new Test2View {region: 'test2'}
instance3 = new Test2View {region: 'test0'}
- if $
- expect(instance2.container.attr('id')).to.be 'test2'
- expect(instance3.container).to.be instance1.$el
- else
- expect(instance2.container.id).to.be 'test2'
- expect(instance3.container).to.be instance1.el
+ expect(instance2.container.id).to.be 'test2'
+ expect(instance3.container).to.be instance1.el
instance1.dispose()
instance2.dispose()
@@ -375,10 +371,8 @@ define [
instance1 = new Test1View()
instance2 = new Test2View()
instance3 = new Test3View {region: 'test2'}
- if $
- expect(instance3.container.attr('id')).to.be 'test5'
- else
- expect(instance3.container.id).to.be 'test5'
+
+ expect(instance3.container.id).to.be 'test5'
instance1.dispose()
instance2.dispose()
@@ -407,10 +401,8 @@ define [
instance2 = new Test2View()
instance2.stale = true
instance3 = new Test3View {region: 'test2'}
- if $
- expect(instance3.container.attr('id')).to.be 'test2'
- else
- expect(instance3.container.id).to.be 'test2'
+
+ expect(instance3.container.id).to.be 'test2'
instance1.dispose()
instance2.dispose()
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.