[Testbot] Plone 5.0 - Python 2.7 - Build # 1550 - Still failing! - 8 failure(s)
jenkins at plone.org
jenkins at plone.org
Thu Feb 13 23:48:37 UTC 2014
-------------------------------------------------------------------------------
Plone 5.0 - Python 2.7 - Build # 1550 - Still Failing!
-------------------------------------------------------------------------------
http://jenkins.plone.org/job/plone-5.0-python-2.7/1550/
-------------------------------------------------------------------------------
CHANGES
-------------------------------------------------------------------------------
Repository: mockup
Branch: refs/heads/master
Date: 2014-02-13T14:08:26-08:00
Author: MrTango () <md at inqbus.de>
Commit: https://github.com/plone/mockup/commit/86d107fec3e5f9fc55220a35dfe73cb158468e69
rewrite of toggle pattern
- fixing toggling on same element
- removed menu, externalClose and preventDefault options
- add targetScope option
- add tests and make them faster
- complete documentation of options and provide more examples
Files changed:
M js/patterns/toggle.js
M tests/pattern-toggle-test.js
diff --git a/js/patterns/toggle.js b/js/patterns/toggle.js
index 71fd8a4..1c41c61 100644
--- a/js/patterns/toggle.js
+++ b/js/patterns/toggle.js
@@ -1,21 +1,121 @@
/* Toggle pattern.
*
* Options:
+ * target(string): selector of the target elements to toggle ('undefied')
+ * targetScope(string): selector of a target scope element in anchestors ('global')
* attribute(string): element attribute which will be toggeled ('class')
* event(string): event which will trigger toggling ('click')
- * externalClose(bool): TODO (true)
- * preventDefault(bool): TODO (true)
- * menu('global', 'parent', 'parents', 'children', 'child', 'siblings'): a jquery selector function that specifies where in relation to $el the list to use is. 'global' is special and will be the default and select in the entire document ('global')
*
* Documentation:
- * # Example
+ * # Toggle itself
*
* {{ example-1 }}
*
+ * # Toggle all targets (global scope)
+ *
+ * {{ example-2 }}
+ *
+ * # Toggle specific target inside a target scope
+ *
+ * {{ example-3 }}
+ *
+ * # Toggle more than one target inside a specific target scope
+ *
+ * {{ example-4 }}
+ *
+ * # Toggle an element by hover event
+ *
+ * {{ example-5 }}
+ *
+ * # Toggle another element than class, like 'rel'
+ *
+ * {{ example-6 }}
+ *
+ * # Build a collapsable with toggle
+ *
+ * {{ example-7 }}
+ *
* Example: example-1
* <button type="button"
* class="btn btn-default pat-toggle"
- * data-pat-toggle="value:btn-lg;externalClose:false">This button goes bigger/smaller!</button>
+ * data-pat-toggle="value:btn-lg;">This button goes bigger/smaller!</button>
+ *
+ * Example: example-2
+ * <div class="wrapper">
+ * <button type="button"
+ * class="btn btn-default pat-toggle"
+ * data-pat-toggle="value:label-success;target:.targetElement">This button is toggling the background of a element.</button><br />
+ * <p class="targetElement label label-default">Hello World</p>
+ * </div>
+ *
+ * Example: example-3
+ * <div class="wrapper">
+ * <div class="myScope">
+ * <button type="button"
+ * class="btn btn-default pat-toggle"
+ * data-pat-toggle="value:label-success;target:.targetElement;targetScope:.myScope;">toggle</button><br />
+ * <p class="targetElement label label-default">Hello World</p>
+ * </div>
+ * <div class="myScope">
+ * <button type="button"
+ * class="btn btn-default pat-toggle"
+ * data-pat-toggle="value:label-success;target:.targetElement;targetScope:.myScope;">toggle</button><br />
+ * <p class="targetElement label label-default">Hello World</p>
+ * </div>
+ * </div>
+ *
+ * Example: example-4
+ * <div class="wrapper">
+ * <div class="myScope">
+ * <button type="button"
+ * class="btn btn-default pat-toggle"
+ * data-pat-toggle="value:label-success;target:.targetElement;targetScope:.myScope;">toggle</button><br />
+ * <p class="targetElement label label-default">Hello World</p>
+ * <p class="targetElement label label-default">Hello again</p>
+ * </div>
+ * <div class="myScope">
+ * <button type="button"
+ * class="btn btn-default pat-toggle"
+ * data-pat-toggle="value:label-success;target:.targetElement;targetScope:.myScope;">toggle</button><br />
+ * <p class="targetElement label label-default">Hello World</p>
+ * </div>
+ * </div>
+ *
+ * Example: example-5
+ * <div class="wrapper">
+ * <div class="myScope">
+ * <button type="button"
+ * class="btn btn-default pat-toggle"
+ * data-pat-toggle="event:hover;value:label-success;target:.targetElement;targetScope:.myScope;">toggle</button><br />
+ * <p class="targetElement label label-default">Hello World</p>
+ * </div>
+ * </div>
+ *
+ * Example: example-6
+ * <div class="wrapper">
+ * <div class="myScope">
+ * <button type="button"
+ * class="btn btn-default pat-toggle"
+ * data-pat-toggle="attribute:rel; value:myRel; target:.targetElement; targetScope:.myScope">toggle</button><br />
+ * <p class="targetElement label label-default">Hello World</p>
+ * </div>
+ * </div>
+ *
+ * Example: example-7
+ * <div class="panel panel-default">
+ * <div class="panel-heading">
+ * <a class="btn btn-default pat-toggle"
+ * data-pat-toggle="value:in; target:.collapse; targetScope:.panel">toggle</a>
+ * </div>
+ * <div>
+ * <ul class="collapse in">
+ * <li>We use toggle for</li>
+ * <li>toggling collapsable CSS classes</li>
+ * <li>this is awesome</li>
+ * </ul>
+ * </div>
+ * </div>
+ *
*
* License:
* Copyright (C) 2010 Plone Foundation
@@ -46,9 +146,7 @@ define([
defaults: {
attribute: 'class',
event: 'click',
- externalClose: true,
- preventDefault: true,
- menu: 'global'
+ targetScope: 'global'
},
ensureBool: function(value) {
if (typeof(value) === 'string') {
@@ -63,16 +161,16 @@ define([
init: function() {
var self = this;
- self.options.externalClose = self.ensureBool(self.options.externalClose);
- self.options.preventDefault = self.ensureBool(self.options.preventDefault);
if (!self.options.target) {
self.$target = self.$el;
}
- else if(self.options.menu === 'global') {
+ else if(self.options.targetScope === 'global') {
self.$target = $(self.options.target);
}
else {
- self.$target = self.$el[self.options.menu](self.options.target);
+ //self.$target = self.$el[self.options.menu](self.options.target);
+ self.$target = self.$el.parents(
+ self.options.targetScope).first().find(self.options.target);
}
if (!self.$target || self.$target.size() === 0) {
@@ -82,25 +180,14 @@ define([
self.on(self.options.event, function(e) {
self.toggle();
e.stopPropagation();
- if (self.options.preventDefault){
- return false;
- }
+ e.preventDefault();
});
- if (self.options.externalClose) {
- $('html').on(self.options.event, function () {
- self.remove();
- });
- }
},
isMarked: function() {
var self = this;
var marked = false;
for (var i=0;i<this.$target.length;i+=1){
- if (this.$target.eq(i)[0] === self.$el[0]){
- // If this is the toggle button, ignore checking
- continue;
- }
if (self.options.attribute === 'class') {
if (this.$target.eq(i).hasClass(this.options.value)){
marked = true;
diff --git a/tests/pattern-toggle-test.js b/tests/pattern-toggle-test.js
index 2542351..c3ef7ea 100644
--- a/tests/pattern-toggle-test.js
+++ b/tests/pattern-toggle-test.js
@@ -16,23 +16,25 @@ define([
describe("Toggle", function() {
beforeEach(function() {
this.$el = $('' +
- '<div>' +
+ '<div id="body">' +
' <a class="pat-toggle"' +
' data-pat-toggle="target: #target;' +
+ ' targetScope: #body;' +
' value: toggled">Button</a>' +
' <div id="target">' +
' <a href="patterns.html">Click here to go somewhere else</a>' +
' </div>' +
- '</div>').appendTo('body');
+ '</div>');
});
afterEach(function() {
this.$el.remove();
});
- it("by default toggles on click event", function() {
- window.DEBUG = true;
+ it("by default toggles on click event", function() {
expect($('.toggled', this.$el).size()).to.equal(0);
+
+ // scan dom for patterns
registry.scan(this.$el);
expect($('.toggled', this.$el).size()).to.equal(0);
$('.pat-toggle', this.$el).trigger('click');
@@ -42,7 +44,7 @@ define([
});
it("can also listen to custom event", function() {
- $('.pat-toggle', this.$el).attr('data-pat-toggle', 'target: #target; value: toggled; event: customEvent');
+ $('.pat-toggle', this.$el).attr('data-pat-toggle', 'target: #target; targetScope: #body; value: toggled; event: customEvent');
expect($('.toggled', this.$el).size()).to.equal(0);
registry.scan(this.$el);
expect($('.toggled', this.$el).size()).to.equal(0);
@@ -51,7 +53,7 @@ define([
});
it("can also toggle custom element attribute", function() {
- $('.pat-toggle', this.$el).attr('data-pat-toggle', 'target: #target; value: toggled; attribute: rel');
+ $('.pat-toggle', this.$el).attr('data-pat-toggle', 'target: #target; targetScope: #body; value: toggled; attribute: rel');
expect($('.toggled', this.$el).size()).to.equal(0);
expect($('[rel="toggled"]', this.$el).size()).to.equal(0);
registry.scan(this.$el);
@@ -64,26 +66,15 @@ define([
expect($('[rel="toggled"]', this.$el).size()).to.equal(0);
});
- it("passing boolean options as strings (true)", function() {
- $('.pat-toggle', this.$el).patternToggle({preventDefault: "true"});
- var pattern = $('.pat-toggle', this.$el).data('pattern-toggle');
- expect(pattern.options.preventDefault).to.equal(true);
- });
-
- it("passing boolean options as strings (false)", function() {
- $('.pat-toggle', this.$el).patternToggle({preventDefault: "false"});
- var pattern = $('.pat-toggle', this.$el).data('pattern-toggle');
- expect(pattern.options.preventDefault).to.equal(false);
- });
-
it("toggle multiple targets", function() {
var $el = $('' +
- '<div>' +
+ '<div id="body">' +
' <div>' +
' <div>' +
' <div>' +
' <a class="pat-toggle"' +
' data-pat-toggle="target: .target;' +
+ ' targetScope: #body;' +
' value: toggled">Button</a>' +
' </div>' +
' <div class="target"></div>' +
@@ -93,24 +84,24 @@ define([
' </div>' +
' <div class="target"></div>' +
' <div class="target"></div>' +
- '</div>').appendTo('body');
+ '</div>');
registry.scan($el);
expect($('.toggled', $el).size()).to.equal(0);
$('.pat-toggle', $el).trigger('click');
expect($('.toggled', $el).size()).to.equal(5);
$('.pat-toggle', $el).trigger('click');
expect($('.toggled', $el).size()).to.equal(0);
- $el.remove();
});
it("if some elements already marked, mark all with first click", function() {
var $el = $('' +
- '<div>' +
+ '<div id="body">' +
' <div>' +
' <div>' +
' <div>' +
' <a class="pat-toggle"' +
' data-pat-toggle="target: .target;' +
+ ' targetScope: #body;' +
' value: toggled">Button</a>' +
' </div>' +
' <div class="target toggled"></div>' +
@@ -120,24 +111,24 @@ define([
' </div>' +
' <div class="target toggled"></div>' +
' <div class="target"></div>' +
- '</div>').appendTo('body');
+ '</div>');
registry.scan($el);
expect($('.toggled', $el).size()).to.equal(3);
$('.pat-toggle', $el).trigger('click');
expect($('.toggled', $el).size()).to.equal(5);
$('.pat-toggle', $el).trigger('click');
expect($('.toggled', $el).size()).to.equal(0);
- $el.remove();
});
it("if all elements already marked, unmark all with first click", function() {
var $el = $('' +
- '<div>' +
+ '<div id="body">' +
' <div>' +
' <div>' +
' <div>' +
' <a class="pat-toggle"' +
' data-pat-toggle="target: .target;' +
+ ' targetScope: #body;' +
' value: toggled">Button</a>' +
' </div>' +
' <div class="target toggled"></div>' +
@@ -147,22 +138,22 @@ define([
' </div>' +
' <div class="target toggled"></div>' +
' <div class="target toggled"></div>' +
- '</div>').appendTo('body');
+ '</div>');
registry.scan($el);
expect($('.toggled', $el).size()).to.equal(5);
$('.pat-toggle', $el).trigger('click');
expect($('.toggled', $el).size()).to.equal(0);
- $el.remove();
});
it("should also be able to mark the toggle itself", function() {
var $el = $('' +
- '<div>' +
+ '<div id="body">' +
' <div>' +
' <div>' +
' <div>' +
' <a class="pat-toggle target"' +
' data-pat-toggle="target: .target;' +
+ ' targetScope: #body;' +
' value: toggled">Button</a>' +
' </div>' +
' <div class="target"></div>' +
@@ -172,14 +163,13 @@ define([
' </div>' +
' <div class="target"></div>' +
' <div class="target"></div>' +
- '</div>').appendTo('body');
+ '</div>');
registry.scan($el);
expect($('.toggled', $el).size()).to.equal(0);
$('.pat-toggle', $el).trigger('click');
expect($('.toggled', $el).size()).to.equal(6);
$('.pat-toggle', $el).trigger('click');
expect($('.toggled', $el).size()).to.equal(0);
- $el.remove();
});
it("should target itself when no target is specified", function() {
@@ -187,49 +177,90 @@ define([
'<div>' +
' <a class="pat-toggle"' +
' data-pat-toggle="value: toggled">Button</a>' +
- '</div>').appendTo('body');
+ '</div>');
registry.scan($el);
expect($('.toggled', $el).size()).to.equal(0);
$('.pat-toggle', $el).trigger('click');
expect($('.toggled', $el).size()).to.equal(1);
- $el.remove();
+ $('.pat-toggle', $el).trigger('click');
+ expect($('.toggled', $el).size()).to.equal(0);
});
- it("should use the menu option to find the target when specified", function() {
+ it("should use the targetScope option to find the target when specified", function() {
var $el = $('' +
'<div>' +
- ' <a class="pat-toggle"' +
- ' data-pat-toggle="target: #target;' +
- ' value: toggled;' +
- ' menu: siblings">Button</a>' +
- ' <div id="target">' +
- ' <a href="patterns.html">Click here to go somewhere else</a>' +
- ' </div>' +
- '</div>').appendTo('body');
+ ' <div class="parent1 myParent">' +
+ ' <a class="pat-toggle"' +
+ ' data-pat-toggle="target: .target;' +
+ ' value: toggled;' +
+ ' targetScope: .myParent">Button</a>' +
+ ' <div class="target pt1">' +
+ ' <a href="patterns.html">Click here to go somewhere else</a>' +
+ ' </div>' +
+ ' </div>' +
+ ' <div class="parent2 myParent">' +
+ ' <a class="pat-toggle"' +
+ ' data-pat-toggle="target: .target;' +
+ ' value: toggled;' +
+ ' targetScope: .myParent">Button</a>' +
+ ' <div class="target pt2">' +
+ ' <a href="patterns.html">Click here to go somewhere else</a>' +
+ ' </div>' +
+ ' </div>' +
+ '</div>');
registry.scan($el);
+ var $pattern1 = $el.find('.pat-toggle').first();
expect($('.toggled', $el).size()).to.equal(0);
- $('.pat-toggle', $el).trigger('click');
+ $pattern1.trigger('click');
expect($('.toggled', $el).size()).to.equal(1);
- $el.remove();
+ expect($('.parent1 .toggled', $el).size()).to.equal(1);
+ expect($('.parent2 .toggled', $el).size()).to.equal(0);
+ });
+
+ it("the targetScope option should also work with other tags like p tag", function() {
+ var $el = $('' +
+ '<div>' +
+ ' <p class="parent1 myParent">' +
+ ' <a class="pat-toggle"' +
+ ' data-pat-toggle="target: .target;' +
+ ' value: toggled;' +
+ ' targetScope: .myParent">Button</a>' +
+ ' <a class="target" href="patterns.html">Click here to go somewhere else</a>' +
+ ' </p>' +
+ ' <p class="parent2 myParent">' +
+ ' <a class="uupat-toggle"' +
+ ' data-pat-toggle="target: .target;' +
+ ' value: toggled;' +
+ ' targetScope: .myParent">Button</a>' +
+ ' <p><a class="target" href="patterns.html">Click here to go somewhere else</a></p>' +
+ ' </p>' +
+ '</div>');
+ registry.scan($el);
+ var $pattern1 = $el.find('.pat-toggle').first();
+ expect($('.toggled', $el).size()).to.equal(0);
+ $pattern1.trigger('click');
+ expect($('.toggled', $el).size()).to.equal(1);
+ expect($('.parent1 .toggled', $el).size()).to.equal(1);
+ expect($('.parent2 .toggled', $el).size()).to.equal(0);
});
it("should throw an error when it cannot find the target", function() {
var $el = $('' +
- '<div>' +
+ '<div id="body">' +
' <a class="pat-toggle"' +
' data-pat-toggle="target: #notarget;' +
+ ' targetScope: #body;' +
' value: toggled">Button</a>' +
' <div id="target">' +
' <a href="patterns.html">Click here to go somewhere else</a>' +
' </div>' +
- '</div>').appendTo('body');
+ '</div>');
try {
registry.scan($el);
}
catch(err) {
expect(err.message).to.equal('No target found for "#notarget".');
}
- $el.remove();
});
});
Repository: mockup
Branch: refs/heads/master
Date: 2014-02-13T15:04:25-08:00
Author: Rok Garbas (garbas) <rok at garbas.si>
Commit: https://github.com/plone/mockup/commit/64ade8c0389ecb5f53fea22886771ce92dc932c1
Merge pull request #310 from plone/mrtango-toggle
rewrite of toggle pattern
Files changed:
M js/patterns/toggle.js
M tests/pattern-toggle-test.js
diff --git a/js/patterns/toggle.js b/js/patterns/toggle.js
index 71fd8a4..1c41c61 100644
--- a/js/patterns/toggle.js
+++ b/js/patterns/toggle.js
@@ -1,21 +1,121 @@
/* Toggle pattern.
*
* Options:
+ * target(string): selector of the target elements to toggle ('undefied')
+ * targetScope(string): selector of a target scope element in anchestors ('global')
* attribute(string): element attribute which will be toggeled ('class')
* event(string): event which will trigger toggling ('click')
- * externalClose(bool): TODO (true)
- * preventDefault(bool): TODO (true)
- * menu('global', 'parent', 'parents', 'children', 'child', 'siblings'): a jquery selector function that specifies where in relation to $el the list to use is. 'global' is special and will be the default and select in the entire document ('global')
*
* Documentation:
- * # Example
+ * # Toggle itself
*
* {{ example-1 }}
*
+ * # Toggle all targets (global scope)
+ *
+ * {{ example-2 }}
+ *
+ * # Toggle specific target inside a target scope
+ *
+ * {{ example-3 }}
+ *
+ * # Toggle more than one target inside a specific target scope
+ *
+ * {{ example-4 }}
+ *
+ * # Toggle an element by hover event
+ *
+ * {{ example-5 }}
+ *
+ * # Toggle another element than class, like 'rel'
+ *
+ * {{ example-6 }}
+ *
+ * # Build a collapsable with toggle
+ *
+ * {{ example-7 }}
+ *
* Example: example-1
* <button type="button"
* class="btn btn-default pat-toggle"
- * data-pat-toggle="value:btn-lg;externalClose:false">This button goes bigger/smaller!</button>
+ * data-pat-toggle="value:btn-lg;">This button goes bigger/smaller!</button>
+ *
+ * Example: example-2
+ * <div class="wrapper">
+ * <button type="button"
+ * class="btn btn-default pat-toggle"
+ * data-pat-toggle="value:label-success;target:.targetElement">This button is toggling the background of a element.</button><br />
+ * <p class="targetElement label label-default">Hello World</p>
+ * </div>
+ *
+ * Example: example-3
+ * <div class="wrapper">
+ * <div class="myScope">
+ * <button type="button"
+ * class="btn btn-default pat-toggle"
+ * data-pat-toggle="value:label-success;target:.targetElement;targetScope:.myScope;">toggle</button><br />
+ * <p class="targetElement label label-default">Hello World</p>
+ * </div>
+ * <div class="myScope">
+ * <button type="button"
+ * class="btn btn-default pat-toggle"
+ * data-pat-toggle="value:label-success;target:.targetElement;targetScope:.myScope;">toggle</button><br />
+ * <p class="targetElement label label-default">Hello World</p>
+ * </div>
+ * </div>
+ *
+ * Example: example-4
+ * <div class="wrapper">
+ * <div class="myScope">
+ * <button type="button"
+ * class="btn btn-default pat-toggle"
+ * data-pat-toggle="value:label-success;target:.targetElement;targetScope:.myScope;">toggle</button><br />
+ * <p class="targetElement label label-default">Hello World</p>
+ * <p class="targetElement label label-default">Hello again</p>
+ * </div>
+ * <div class="myScope">
+ * <button type="button"
+ * class="btn btn-default pat-toggle"
+ * data-pat-toggle="value:label-success;target:.targetElement;targetScope:.myScope;">toggle</button><br />
+ * <p class="targetElement label label-default">Hello World</p>
+ * </div>
+ * </div>
+ *
+ * Example: example-5
+ * <div class="wrapper">
+ * <div class="myScope">
+ * <button type="button"
+ * class="btn btn-default pat-toggle"
+ * data-pat-toggle="event:hover;value:label-success;target:.targetElement;targetScope:.myScope;">toggle</button><br />
+ * <p class="targetElement label label-default">Hello World</p>
+ * </div>
+ * </div>
+ *
+ * Example: example-6
+ * <div class="wrapper">
+ * <div class="myScope">
+ * <button type="button"
+ * class="btn btn-default pat-toggle"
+ * data-pat-toggle="attribute:rel; value:myRel; target:.targetElement; targetScope:.myScope">toggle</button><br />
+ * <p class="targetElement label label-default">Hello World</p>
+ * </div>
+ * </div>
+ *
+ * Example: example-7
+ * <div class="panel panel-default">
+ * <div class="panel-heading">
+ * <a class="btn btn-default pat-toggle"
+ * data-pat-toggle="value:in; target:.collapse; targetScope:.panel">toggle</a>
+ * </div>
+ * <div>
+ * <ul class="collapse in">
+ * <li>We use toggle for</li>
+ * <li>toggling collapsable CSS classes</li>
+ * <li>this is awesome</li>
+ * </ul>
+ * </div>
+ * </div>
+ *
*
* License:
* Copyright (C) 2010 Plone Foundation
@@ -46,9 +146,7 @@ define([
defaults: {
attribute: 'class',
event: 'click',
- externalClose: true,
- preventDefault: true,
- menu: 'global'
+ targetScope: 'global'
},
ensureBool: function(value) {
if (typeof(value) === 'string') {
@@ -63,16 +161,16 @@ define([
init: function() {
var self = this;
- self.options.externalClose = self.ensureBool(self.options.externalClose);
- self.options.preventDefault = self.ensureBool(self.options.preventDefault);
if (!self.options.target) {
self.$target = self.$el;
}
- else if(self.options.menu === 'global') {
+ else if(self.options.targetScope === 'global') {
self.$target = $(self.options.target);
}
else {
- self.$target = self.$el[self.options.menu](self.options.target);
+ //self.$target = self.$el[self.options.menu](self.options.target);
+ self.$target = self.$el.parents(
+ self.options.targetScope).first().find(self.options.target);
}
if (!self.$target || self.$target.size() === 0) {
@@ -82,25 +180,14 @@ define([
self.on(self.options.event, function(e) {
self.toggle();
e.stopPropagation();
- if (self.options.preventDefault){
- return false;
- }
+ e.preventDefault();
});
- if (self.options.externalClose) {
- $('html').on(self.options.event, function () {
- self.remove();
- });
- }
},
isMarked: function() {
var self = this;
var marked = false;
for (var i=0;i<this.$target.length;i+=1){
- if (this.$target.eq(i)[0] === self.$el[0]){
- // If this is the toggle button, ignore checking
- continue;
- }
if (self.options.attribute === 'class') {
if (this.$target.eq(i).hasClass(this.options.value)){
marked = true;
diff --git a/tests/pattern-toggle-test.js b/tests/pattern-toggle-test.js
index 2542351..c3ef7ea 100644
--- a/tests/pattern-toggle-test.js
+++ b/tests/pattern-toggle-test.js
@@ -16,23 +16,25 @@ define([
describe("Toggle", function() {
beforeEach(function() {
this.$el = $('' +
- '<div>' +
+ '<div id="body">' +
' <a class="pat-toggle"' +
' data-pat-toggle="target: #target;' +
+ ' targetScope: #body;' +
' value: toggled">Button</a>' +
' <div id="target">' +
' <a href="patterns.html">Click here to go somewhere else</a>' +
' </div>' +
- '</div>').appendTo('body');
+ '</div>');
});
afterEach(function() {
this.$el.remove();
});
- it("by default toggles on click event", function() {
- window.DEBUG = true;
+ it("by default toggles on click event", function() {
expect($('.toggled', this.$el).size()).to.equal(0);
+
+ // scan dom for patterns
registry.scan(this.$el);
expect($('.toggled', this.$el).size()).to.equal(0);
$('.pat-toggle', this.$el).trigger('click');
@@ -42,7 +44,7 @@ define([
});
it("can also listen to custom event", function() {
- $('.pat-toggle', this.$el).attr('data-pat-toggle', 'target: #target; value: toggled; event: customEvent');
+ $('.pat-toggle', this.$el).attr('data-pat-toggle', 'target: #target; targetScope: #body; value: toggled; event: customEvent');
expect($('.toggled', this.$el).size()).to.equal(0);
registry.scan(this.$el);
expect($('.toggled', this.$el).size()).to.equal(0);
@@ -51,7 +53,7 @@ define([
});
it("can also toggle custom element attribute", function() {
- $('.pat-toggle', this.$el).attr('data-pat-toggle', 'target: #target; value: toggled; attribute: rel');
+ $('.pat-toggle', this.$el).attr('data-pat-toggle', 'target: #target; targetScope: #body; value: toggled; attribute: rel');
expect($('.toggled', this.$el).size()).to.equal(0);
expect($('[rel="toggled"]', this.$el).size()).to.equal(0);
registry.scan(this.$el);
@@ -64,26 +66,15 @@ define([
expect($('[rel="toggled"]', this.$el).size()).to.equal(0);
});
- it("passing boolean options as strings (true)", function() {
- $('.pat-toggle', this.$el).patternToggle({preventDefault: "true"});
- var pattern = $('.pat-toggle', this.$el).data('pattern-toggle');
- expect(pattern.options.preventDefault).to.equal(true);
- });
-
- it("passing boolean options as strings (false)", function() {
- $('.pat-toggle', this.$el).patternToggle({preventDefault: "false"});
- var pattern = $('.pat-toggle', this.$el).data('pattern-toggle');
- expect(pattern.options.preventDefault).to.equal(false);
- });
-
it("toggle multiple targets", function() {
var $el = $('' +
- '<div>' +
+ '<div id="body">' +
' <div>' +
' <div>' +
' <div>' +
' <a class="pat-toggle"' +
' data-pat-toggle="target: .target;' +
+ ' targetScope: #body;' +
' value: toggled">Button</a>' +
' </div>' +
' <div class="target"></div>' +
@@ -93,24 +84,24 @@ define([
' </div>' +
' <div class="target"></div>' +
' <div class="target"></div>' +
- '</div>').appendTo('body');
+ '</div>');
registry.scan($el);
expect($('.toggled', $el).size()).to.equal(0);
$('.pat-toggle', $el).trigger('click');
expect($('.toggled', $el).size()).to.equal(5);
$('.pat-toggle', $el).trigger('click');
expect($('.toggled', $el).size()).to.equal(0);
- $el.remove();
});
it("if some elements already marked, mark all with first click", function() {
var $el = $('' +
- '<div>' +
+ '<div id="body">' +
' <div>' +
' <div>' +
' <div>' +
' <a class="pat-toggle"' +
' data-pat-toggle="target: .target;' +
+ ' targetScope: #body;' +
' value: toggled">Button</a>' +
' </div>' +
' <div class="target toggled"></div>' +
@@ -120,24 +111,24 @@ define([
' </div>' +
' <div class="target toggled"></div>' +
' <div class="target"></div>' +
- '</div>').appendTo('body');
+ '</div>');
registry.scan($el);
expect($('.toggled', $el).size()).to.equal(3);
$('.pat-toggle', $el).trigger('click');
expect($('.toggled', $el).size()).to.equal(5);
$('.pat-toggle', $el).trigger('click');
expect($('.toggled', $el).size()).to.equal(0);
- $el.remove();
});
it("if all elements already marked, unmark all with first click", function() {
var $el = $('' +
- '<div>' +
+ '<div id="body">' +
' <div>' +
' <div>' +
' <div>' +
' <a class="pat-toggle"' +
' data-pat-toggle="target: .target;' +
+ ' targetScope: #body;' +
' value: toggled">Button</a>' +
' </div>' +
' <div class="target toggled"></div>' +
@@ -147,22 +138,22 @@ define([
' </div>' +
' <div class="target toggled"></div>' +
' <div class="target toggled"></div>' +
- '</div>').appendTo('body');
+ '</div>');
registry.scan($el);
expect($('.toggled', $el).size()).to.equal(5);
$('.pat-toggle', $el).trigger('click');
expect($('.toggled', $el).size()).to.equal(0);
- $el.remove();
});
it("should also be able to mark the toggle itself", function() {
var $el = $('' +
- '<div>' +
+ '<div id="body">' +
' <div>' +
' <div>' +
' <div>' +
' <a class="pat-toggle target"' +
' data-pat-toggle="target: .target;' +
+ ' targetScope: #body;' +
' value: toggled">Button</a>' +
' </div>' +
' <div class="target"></div>' +
@@ -172,14 +163,13 @@ define([
' </div>' +
' <div class="target"></div>' +
' <div class="target"></div>' +
- '</div>').appendTo('body');
+ '</div>');
registry.scan($el);
expect($('.toggled', $el).size()).to.equal(0);
$('.pat-toggle', $el).trigger('click');
expect($('.toggled', $el).size()).to.equal(6);
$('.pat-toggle', $el).trigger('click');
expect($('.toggled', $el).size()).to.equal(0);
- $el.remove();
});
it("should target itself when no target is specified", function() {
@@ -187,49 +177,90 @@ define([
'<div>' +
' <a class="pat-toggle"' +
' data-pat-toggle="value: toggled">Button</a>' +
- '</div>').appendTo('body');
+ '</div>');
registry.scan($el);
expect($('.toggled', $el).size()).to.equal(0);
$('.pat-toggle', $el).trigger('click');
expect($('.toggled', $el).size()).to.equal(1);
- $el.remove();
+ $('.pat-toggle', $el).trigger('click');
+ expect($('.toggled', $el).size()).to.equal(0);
});
- it("should use the menu option to find the target when specified", function() {
+ it("should use the targetScope option to find the target when specified", function() {
var $el = $('' +
'<div>' +
- ' <a class="pat-toggle"' +
- ' data-pat-toggle="target: #target;' +
- ' value: toggled;' +
- ' menu: siblings">Button</a>' +
- ' <div id="target">' +
- ' <a href="patterns.html">Click here to go somewhere else</a>' +
- ' </div>' +
- '</div>').appendTo('body');
+ ' <div class="parent1 myParent">' +
+ ' <a class="pat-toggle"' +
+ ' data-pat-toggle="target: .target;' +
+ ' value: toggled;' +
+ ' targetScope: .myParent">Button</a>' +
+ ' <div class="target pt1">' +
+ ' <a href="patterns.html">Click here to go somewhere else</a>' +
+ ' </div>' +
+ ' </div>' +
+ ' <div class="parent2 myParent">' +
+ ' <a class="pat-toggle"' +
+ ' data-pat-toggle="target: .target;' +
+ ' value: toggled;' +
+ ' targetScope: .myParent">Button</a>' +
+ ' <div class="target pt2">' +
+ ' <a href="patterns.html">Click here to go somewhere else</a>' +
+ ' </div>' +
+ ' </div>' +
+ '</div>');
registry.scan($el);
+ var $pattern1 = $el.find('.pat-toggle').first();
expect($('.toggled', $el).size()).to.equal(0);
- $('.pat-toggle', $el).trigger('click');
+ $pattern1.trigger('click');
expect($('.toggled', $el).size()).to.equal(1);
- $el.remove();
+ expect($('.parent1 .toggled', $el).size()).to.equal(1);
+ expect($('.parent2 .toggled', $el).size()).to.equal(0);
+ });
+
+ it("the targetScope option should also work with other tags like p tag", function() {
+ var $el = $('' +
+ '<div>' +
+ ' <p class="parent1 myParent">' +
+ ' <a class="pat-toggle"' +
+ ' data-pat-toggle="target: .target;' +
+ ' value: toggled;' +
+ ' targetScope: .myParent">Button</a>' +
+ ' <a class="target" href="patterns.html">Click here to go somewhere else</a>' +
+ ' </p>' +
+ ' <p class="parent2 myParent">' +
+ ' <a class="uupat-toggle"' +
+ ' data-pat-toggle="target: .target;' +
+ ' value: toggled;' +
+ ' targetScope: .myParent">Button</a>' +
+ ' <p><a class="target" href="patterns.html">Click here to go somewhere else</a></p>' +
+ ' </p>' +
+ '</div>');
+ registry.scan($el);
+ var $pattern1 = $el.find('.pat-toggle').first();
+ expect($('.toggled', $el).size()).to.equal(0);
+ $pattern1.trigger('click');
+ expect($('.toggled', $el).size()).to.equal(1);
+ expect($('.parent1 .toggled', $el).size()).to.equal(1);
+ expect($('.parent2 .toggled', $el).size()).to.equal(0);
});
it("should throw an error when it cannot find the target", function() {
var $el = $('' +
- '<div>' +
+ '<div id="body">' +
' <a class="pat-toggle"' +
' data-pat-toggle="target: #notarget;' +
+ ' targetScope: #body;' +
' value: toggled">Button</a>' +
' <div id="target">' +
' <a href="patterns.html">Click here to go somewhere else</a>' +
' </div>' +
- '</div>').appendTo('body');
+ '</div>');
try {
registry.scan($el);
}
catch(err) {
expect(err.message).to.equal('No target found for "#notarget".');
}
- $el.remove();
});
});
-------------------------------------------------------------------------------
-------------- next part --------------
A non-text attachment was scrubbed...
Name: CHANGES.log
Type: application/octet-stream
Size: 37137 bytes
Desc: not available
URL: <http://lists.plone.org/pipermail/plone-testbot/attachments/20140213/5d4c6780/attachment-0002.obj>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: build.log
Type: application/octet-stream
Size: 140920 bytes
Desc: not available
URL: <http://lists.plone.org/pipermail/plone-testbot/attachments/20140213/5d4c6780/attachment-0003.obj>
More information about the Testbot
mailing list