-describe("Ext.slider.Thumb", function() {\r
- var slider, thumb, createSlider, createThumb;\r
- \r
- beforeEach(function() {\r
- createSlider = function(config) {\r
- slider = new Ext.slider.Multi(Ext.apply({\r
- renderTo: Ext.getBody(),\r
- name: "test",\r
- width: 219,\r
- labelWidth: 0,\r
- hideEmptyLabel: false,\r
- minValue: 0,\r
- maxValue: 100,\r
- animate: false\r
- }, config));\r
- };\r
- createThumb = function(config) {\r
- thumb = new Ext.slider.Thumb(config);\r
- };\r
- });\r
- \r
- afterEach(function() {\r
- if (slider) {\r
- slider.destroy();\r
- }\r
- slider = null;\r
- \r
- if (thumb) {\r
- thumb.destroy();\r
- }\r
- thumb = null;\r
- });\r
- \r
- describe("component initialization", function() {\r
- describe("if slider is vertical", function() {\r
- beforeEach(function() {\r
- createThumb({\r
- slider: {\r
- vertical: true\r
- }\r
- });\r
- });\r
- \r
- specFor(Ext.slider.Thumb.Vertical, function(key, value) {\r
- it("should override " + key + " method", function() {\r
- expect(thumb[key]).toBe(value);\r
- });\r
- });\r
- });\r
- });\r
- \r
- describe("thumb slide", function() {\r
- describe("horizontal", function() {\r
- var thumb0, thumb60, thumb90,\r
- setupSlider = function(config) {\r
- createSlider(Ext.apply({\r
- values: [0, 60, 90]\r
- }, config));\r
- \r
- thumb0 = slider.thumbs[0];\r
- thumb60 = slider.thumbs[1];\r
- thumb90 = slider.thumbs[2];\r
- \r
- spyOn(slider, "fireEvent").andCallThrough();\r
- };\r
- \r
- describe("mouse events", function() {\r
- describe("on slider mousedown", function() {\r
- describe("on thumb", function() {\r
- describe("no drag (mousedown/mouseup)", function() {\r
- beforeEach(function() {\r
- setupSlider();\r
- var xy = thumb0.el.getXY();\r
- jasmine.fireMouseEvent(thumb0.el, 'mousedown', xy[0], xy[1]);\r
- jasmine.fireMouseEvent(thumb0.el, 'mouseup', xy[0], xy[1]);\r
- });\r
-\r
- it("should not change the thumb value", function() {\r
- expect(thumb0.value).toEqual(0);\r
- }); \r
- });\r
-\r
- var dragConfig = {};\r
- \r
- dragConfig["drag without snapping"] = {\r
- config: {},\r
- expected: 3\r
- };\r
- \r
- dragConfig["drag with snapping"] = {\r
- config: {\r
- increment: 5\r
- },\r
- expected: 5\r
- };\r
- \r
- specFor(dragConfig, function(key, value) {\r
- describe(key, function() {\r
- beforeEach(function() {\r
- setupSlider(value.config);\r
- var xy = thumb0.el.getXY(),\r
- innerEl = slider.innerEl,\r
- trackLength = innerEl.getWidth(),\r
- // Work out the exact correct mousemove offset based difference between cur value and expected value\r
- xOffset = trackLength * (slider.calculateThumbPosition(value.expected - slider.getValue(0)) / 100);\r
-\r
- // Mousedown on edge of thumb\r
- jasmine.fireMouseEvent(thumb0.el, 'mousedown', xy[0], xy[1]);\r
- xy[0] += xOffset;\r
- jasmine.fireMouseEvent(thumb0.el, 'mousemove', xy[0], xy[1]);\r
- jasmine.fireMouseEvent(thumb0.el, 'mouseup', xy[0], xy[1]);\r
- });\r
-\r
- it("should change the thumb value", function() {\r
- expect(thumb0.value).toEqual(value.expected);\r
- });\r
-\r
- describe("z-index", function() {\r
- it("should increase z-index of dragged thumb", function() {\r
- expect(thumb0.el.dom.style.zIndex).toBeGreaterThan(0);\r
- });\r
- \r
- it("should remove z-index of non-dragged thumb", function() {\r
- // z-indices will work down from the top one which is at 10000\r
- expect(thumb60.el.dom.style.zIndex == 9000).toBe(true);\r
- expect(thumb90.el.dom.style.zIndex == 8000).toBe(true); \r
- });\r
- });\r
- });\r
- });\r
- });\r
-\r
- describe("outside thumbs", function() {\r
- beforeEach(function() {\r
- setupSlider();\r
- });\r
- \r
- describe("if slider enabled", function() {\r
- beforeEach(function() {\r
- var xy = slider.innerEl.getXY();\r
- jasmine.fireMouseEvent(slider.el, 'click', xy[0] + 100, xy[1] + 10);\r
- });\r
- \r
- it("should change the thumb value", function() {\r
- expect(thumb60.value).toEqual(50);\r
- });\r
- });\r
- \r
- describe("if slider disabled", function() {\r
- beforeEach(function() {\r
- slider.disable();\r
- var xy = slider.innerEl.getXY();\r
- jasmine.fireMouseEvent(slider.el, 'mousedown', xy[0] + 10, xy[1] + 10);\r
- });\r
-\r
- it("should not change the thumb value", function() {\r
- expect(thumb0.value).toEqual(0);\r
- }); \r
- });\r
- }); \r
- });\r
- });\r
- });\r
-\r
- describe("vertical", function() {\r
- var thumb0, thumb60, thumb90,\r
- setupSlider = function(config) {\r
- createSlider(Ext.apply({\r
- values: [0, 60, 90],\r
- height: 214,\r
- vertical: true\r
- }, config));\r
-\r
- thumb0 = slider.thumbs[0];\r
- thumb60 = slider.thumbs[1];\r
- thumb90 = slider.thumbs[2];\r
- \r
- spyOn(slider, "fireEvent").andCallThrough();\r
- };\r
- \r
- describe("mouse events", function() {\r
- describe("on slider mousedown", function() {\r
- describe("on thumb", function() {\r
- var dragConfig = {};\r
- \r
- dragConfig["drag without snapping"] = {\r
- config: {},\r
- expected: 54\r
- };\r
- \r
- dragConfig["drag with snapping"] = {\r
- config: {\r
- increment: 10\r
- },\r
- expected: 50\r
- };\r
- \r
- specFor(dragConfig, function(key, value) {\r
- describe(key, function() {\r
- beforeEach(function() {\r
- setupSlider(value.config);\r
- var xy = thumb0.el.getXY(),\r
- innerEl = slider.innerEl,\r
- trackLength = innerEl.getHeight(),\r
- // Work out the exact correct mousemove offset based on new value.\r
- yOffset = trackLength * (slider.calculateThumbPosition(slider.getValue(0) - value.expected) / 100);\r
-\r
- // Mousedown on edge of thumb\r
- jasmine.fireMouseEvent(thumb0.el, 'mousedown', xy[0], xy[1]);\r
- xy[1] += yOffset;\r
- jasmine.fireMouseEvent(thumb0.el, 'mousemove', xy[0], xy[1]);\r
- jasmine.fireMouseEvent(thumb0.el, 'mouseup', xy[0], xy[1]);\r
- });\r
-\r
- it("should change the thumb value", function() {\r
- expect(thumb0.value).toEqual(value.expected);\r
- });\r
-\r
- describe("z-index", function() {\r
- it("should increase z-index of dragged thumb", function() {\r
- expect(thumb0.el.dom.style.zIndex).toBeGreaterThan(0);\r
- });\r
- \r
- it("should remove z-index of non-dragged thumb", function() {\r
- // z-indices will work down from the top one which is at 10000\r
- expect(thumb60.el.dom.style.zIndex == 9000).toBe(true);\r
- expect(thumb90.el.dom.style.zIndex == 8000).toBe(true); \r
- });\r
- });\r
- });\r
- });\r
- });\r
- describe("outside thumbs", function() {\r
- beforeEach(function() {\r
- setupSlider();\r
- });\r
- \r
- describe("if slider enabled", function() {\r
- beforeEach(function() {\r
- var xy = slider.innerEl.getXY(),\r
- offset = Math.floor(slider.innerEl.getHeight() / 2);\r
-\r
- jasmine.fireMouseEvent(slider.el, 'click', xy[0] + 8, xy[1] + offset);\r
- });\r
- \r
-\r
- it("should change the thumb value", function() {\r
- expect(thumb60.value).toEqual(50);\r
- });\r
- });\r
- \r
- describe("if slider disabled", function() {\r
- beforeEach(function() {\r
- slider.disable();\r
- var xy = slider.innerEl.getXY();\r
- jasmine.fireMouseEvent(slider.el, 'mousedown', xy[0] + 10, xy[1] - 10);\r
- });\r
-\r
- it("should not change the thumb value", function() {\r
- expect(thumb0.value).toEqual(0);\r
- }); \r
- });\r
- });\r
- });\r
- });\r
- });\r
- });\r
-});\r
+topSuite("Ext.slider.Thumb", ['Ext.slider.Single'], function() {
+ var slider, thumb, createSlider, createThumb;
+
+ beforeEach(function() {
+ createSlider = function(config) {
+ slider = new Ext.slider.Multi(Ext.apply({
+ renderTo: Ext.getBody(),
+ name: "test",
+ width: 219,
+ labelWidth: 0,
+ hideEmptyLabel: false,
+ minValue: 0,
+ maxValue: 100,
+ animate: false
+ }, config));
+ };
+
+ createThumb = function(config) {
+ thumb = new Ext.slider.Thumb(config);
+ };
+ });
+
+ afterEach(function() {
+ if (slider) {
+ slider.destroy();
+ }
+
+ slider = null;
+
+ if (thumb) {
+ thumb.destroy();
+ }
+
+ thumb = null;
+ });
+
+ describe("component initialization", function() {
+ describe("if slider is vertical", function() {
+ beforeEach(function() {
+ createThumb({
+ slider: {
+ vertical: true
+ }
+ });
+ });
+
+ specFor(Ext.slider.Thumb.Vertical, function(key, value) {
+ it("should override " + key + " method", function() {
+ expect(thumb[key]).toBe(value);
+ });
+ });
+ });
+ });
+
+ describe("thumb slide", function() {
+ describe("horizontal", function() {
+ var thumb0, thumb60, thumb90,
+ setupSlider = function(config) {
+ createSlider(Ext.apply({
+ values: [0, 60, 90]
+ }, config));
+
+ thumb0 = slider.thumbs[0];
+ thumb60 = slider.thumbs[1];
+ thumb90 = slider.thumbs[2];
+
+ spyOn(slider, "fireEvent").andCallThrough();
+ };
+
+ describe("mouse events", function() {
+ describe("on slider mousedown", function() {
+ describe("on thumb", function() {
+ describe("no drag (mousedown/mouseup)", function() {
+ beforeEach(function() {
+ setupSlider();
+ var xy = thumb0.el.getXY();
+
+ jasmine.fireMouseEvent(thumb0.el, 'mousedown', xy[0], xy[1]);
+ jasmine.fireMouseEvent(thumb0.el, 'mouseup', xy[0], xy[1]);
+ });
+
+ it("should not change the thumb value", function() {
+ expect(thumb0.value).toEqual(0);
+ });
+ });
+
+ var dragConfig = {};
+
+ dragConfig["drag without snapping"] = {
+ config: {},
+ expected: 3
+ };
+
+ dragConfig["drag with snapping"] = {
+ config: {
+ increment: 5
+ },
+ expected: 5
+ };
+
+ specFor(dragConfig, function(key, value) {
+ describe(key, function() {
+ beforeEach(function() {
+ setupSlider(value.config);
+ var xy = thumb0.el.getXY(),
+ innerEl = slider.innerEl,
+ trackLength = innerEl.getWidth(),
+ // Work out the exact correct mousemove offset based difference between cur value and expected value
+ xOffset = trackLength * (slider.calculateThumbPosition(value.expected - slider.getValue(0)) / 100);
+
+ // Mousedown on edge of thumb
+ jasmine.fireMouseEvent(thumb0.el, 'mousedown', xy[0], xy[1]);
+ xy[0] += xOffset;
+ jasmine.fireMouseEvent(thumb0.el, 'mousemove', xy[0], xy[1]);
+ jasmine.fireMouseEvent(thumb0.el, 'mouseup', xy[0], xy[1]);
+ });
+
+ it("should change the thumb value", function() {
+ expect(thumb0.value).toEqual(value.expected);
+ });
+
+ describe("z-index", function() {
+ it("should increase z-index of dragged thumb", function() {
+ expect(thumb0.el.dom.style.zIndex).toBeGreaterThan(0);
+ });
+
+ it("should remove z-index of non-dragged thumb", function() {
+ // z-indices will work down from the top one which is at 10000
+ expect(+thumb60.el.dom.style.zIndex).toBe(9000);
+ expect(+thumb90.el.dom.style.zIndex).toBe(8000);
+ });
+ });
+ });
+ });
+ });
+
+ describe("outside thumbs", function() {
+ beforeEach(function() {
+ setupSlider();
+ });
+
+ describe("if slider enabled", function() {
+ beforeEach(function() {
+ var xy = slider.innerEl.getXY();
+
+ jasmine.fireMouseEvent(slider.el, 'click', xy[0] + 100, xy[1] + 10);
+ });
+
+ it("should change the thumb value", function() {
+ expect(thumb60.value).toEqual(50);
+ });
+ });
+
+ describe("if slider disabled", function() {
+ beforeEach(function() {
+ slider.disable();
+ var xy = slider.innerEl.getXY();
+
+ jasmine.fireMouseEvent(slider.el, 'mousedown', xy[0] + 10, xy[1] + 10);
+ });
+
+ afterEach(function() {
+ var xy = slider.innerEl.getXY();
+
+ jasmine.fireMouseEvent(slider.el, 'mouseup', xy[0] + 10, xy[1] + 10);
+ });
+
+ it("should not change the thumb value", function() {
+ expect(thumb0.value).toEqual(0);
+ });
+ });
+ });
+ });
+ });
+ });
+
+ describe("vertical", function() {
+ var thumb0, thumb60, thumb90,
+ setupSlider = function(config) {
+ createSlider(Ext.apply({
+ values: [0, 60, 90],
+ height: 214,
+ vertical: true
+ }, config));
+
+ thumb0 = slider.thumbs[0];
+ thumb60 = slider.thumbs[1];
+ thumb90 = slider.thumbs[2];
+
+ spyOn(slider, "fireEvent").andCallThrough();
+ };
+
+ describe("mouse events", function() {
+ describe("on slider mousedown", function() {
+ describe("on thumb", function() {
+ var dragConfig = {};
+
+ dragConfig["drag without snapping"] = {
+ config: {},
+ expected: 54
+ };
+
+ dragConfig["drag with snapping"] = {
+ config: {
+ increment: 10
+ },
+ expected: 50
+ };
+
+ specFor(dragConfig, function(key, value) {
+ describe(key, function() {
+ beforeEach(function() {
+ setupSlider(value.config);
+ var xy = thumb0.el.getXY(),
+ innerEl = slider.innerEl,
+ trackLength = innerEl.getHeight(),
+ // Work out the exact correct mousemove offset based on new value.
+ yOffset = trackLength * (slider.calculateThumbPosition(slider.getValue(0) - value.expected) / 100);
+
+ // Mousedown on edge of thumb
+ jasmine.fireMouseEvent(thumb0.el, 'mousedown', xy[0], xy[1]);
+ xy[1] += yOffset;
+ jasmine.fireMouseEvent(thumb0.el, 'mousemove', xy[0], xy[1]);
+ jasmine.fireMouseEvent(thumb0.el, 'mouseup', xy[0], xy[1]);
+ });
+
+ it("should change the thumb value", function() {
+ expect(thumb0.value).toEqual(value.expected);
+ });
+
+ describe("z-index", function() {
+ it("should increase z-index of dragged thumb", function() {
+ expect(thumb0.el.dom.style.zIndex).toBeGreaterThan(0);
+ });
+
+ it("should remove z-index of non-dragged thumb", function() {
+ // z-indices will work down from the top one which is at 10000
+ expect(+thumb60.el.dom.style.zIndex).toBe(9000);
+ expect(+thumb90.el.dom.style.zIndex).toBe(8000);
+ });
+ });
+ });
+ });
+ });
+ describe("outside thumbs", function() {
+ beforeEach(function() {
+ setupSlider();
+ });
+
+ describe("if slider enabled", function() {
+ beforeEach(function() {
+ var xy = slider.innerEl.getXY(),
+ offset = Math.floor(slider.innerEl.getHeight() / 2);
+
+ jasmine.fireMouseEvent(slider.el, 'click', xy[0] + 8, xy[1] + offset);
+ });
+
+ it("should change the thumb value", function() {
+ expect(thumb60.value).toEqual(50);
+ });
+ });
+
+ describe("if slider disabled", function() {
+ beforeEach(function() {
+ slider.disable();
+ var xy = slider.innerEl.getXY();
+
+ jasmine.fireMouseEvent(slider.el, 'mousedown', xy[0] + 10, xy[1] - 10);
+ });
+
+ afterEach(function() {
+ var xy = slider.innerEl.getXY();
+
+ jasmine.fireMouseEvent(slider.el, 'mouseup', xy[0] + 10, xy[1] - 10);
+ });
+
+ it("should not change the thumb value", function() {
+ expect(thumb0.value).toEqual(0);
+ });
+ });
+ });
+ });
+ });
+ });
+ });
+});
projects / extjs.git / blobdiff