From 476fb4c7a8d3a90ff340d484a73cfb1e7d0a430a Mon Sep 17 00:00:00 2001 From: Alexander Martin Date: Wed, 4 Feb 2015 11:59:01 -0600 Subject: [PATCH 1/2] Prefixed CSS classes with `ampersand-`. --- ampersand-time-range.js | 37 +++++++++++++++++++------------------ 1 file changed, 19 insertions(+), 18 deletions(-) diff --git a/ampersand-time-range.js b/ampersand-time-range.js index 5cdae28..127d7ce 100644 --- a/ampersand-time-range.js +++ b/ampersand-time-range.js @@ -35,30 +35,31 @@ AmpersandView.prototype.render.call(this); var range = this.svg = d3.select(this.el) + .attr('class', 'ampersand-time-range') .style('overflow', 'visible') .attr('width', '100%') .attr('height', '4em'); var leftMidnight = range.append('text') - .attr('class', 'time-range-midnight time-range-midnight-left') + .attr('class', 'ampersand-time-range-midnight ampersand-time-range-midnight-left') .attr('x', '5%') .attr('y', '1.5em') .text('12 am'); var rightMidnight = range.append('text') - .attr('class', 'time-range-midnight time-range-midnight-right') + .attr('class', 'ampersand-time-range-midnight ampersand-time-range-midnight-right') .attr('x', '95%') .attr('y', '1.5em') .text('12 am'); var noon = range.append('text') - .attr('class', 'time-range-midnight time-range-noon') + .attr('class', 'ampersand-time-range-midnight ampersand-time-range-noon') .attr('x', '50%') .attr('y', '1.5em') .text('12 pm'); var bar = range.append('rect') - .attr('class', 'time-range-bar') + .attr('class', 'ampersand-time-range-bar') .attr('x', '5%') .attr('y', '2em') .attr('width', '90%') @@ -67,7 +68,7 @@ .attr('ry', '0.25em'); var durationBar = range.append('line') - .attr('class', 'time-range-duration') + .attr('class', 'ampersand-time-range-duration') .attr('x1', '5%') .attr('y1', '2.25em') .attr('x2', '95%') @@ -78,7 +79,7 @@ d.view.showToolTip(d.model.startX); }) .on('drag', function(d, i) { - var bar = d.view.svg.select('rect.time-range-bar')[0][0]; + var bar = d.view.svg.select('rect.ampersand-time-range-bar')[0][0]; d.model.width = bar.getBBox().width; d.model.endX = d.model.endX > -1 ? d.model.endX : d.model.width + 20; d.x = Math.max(20, d3.mouse(bar)[0]); @@ -96,7 +97,7 @@ var handleStart = range.append('circle') .data([{ x: 0, model: this.model, view: this }]) - .attr('class', 'time-range-handle time-range-handle-start') + .attr('class', 'ampersand-time-range-handle ampersand-time-range-handle-start') .attr('cy', '2.25em') .attr('cx', '5%') .attr('r', '0.5em') @@ -107,7 +108,7 @@ d.view.showToolTip(d.model.endX); }) .on('drag', function(d, i) { - var bar = d.view.svg.select('rect.time-range-bar')[0][0]; + var bar = d.view.svg.select('rect.ampersand-time-range-bar')[0][0]; d.model.width = bar.getBBox().width; d.x = Math.min(d.model.width + 20, d3.mouse(bar)[0]); d.x = Math.max(d.x, d.model.startX); @@ -124,53 +125,53 @@ var handleEnd = range.append('circle') .data([{ x: 0, model: this.model, view: this }]) - .attr('class', 'time-range-handle time-range-handle-end') + .attr('class', 'ampersand-time-range-handle ampersand-time-range-handle-end') .attr('cy', '2.25em') .attr('cx', '95%') .attr('r', '0.5em') .call(handleEndDrag); var toolTip = range.append('g') - .attr('class', 'time-range-tool-tip') + .attr('class', 'ampersand-time-range-tool-tip') .style('opacity', 0); var toolTipRect = toolTip.append('rect') - .attr('class', 'time-range-tool-tip-rect') + .attr('class', 'ampersand-time-range-tool-tip-rect') .attr('width', '4em') .attr('height', '1.5em'); var toolTipTail = toolTip.append('polygon') - .attr('class', 'time-range-tool-tip-tail') + .attr('class', 'ampersand-time-range-tool-tip-tail') .attr('points', '0, 0 20, 0 10, 10') .attr('transform', 'translate(22, 23)'); var toolTipText = toolTip.append('text') - .attr('class', 'time-range-tool-tip-text') + .attr('class', 'ampersand-time-range-tool-tip-text') .attr('x', '2.6em') .attr('y', '1.35em') .text('2:15 pm'); }, showToolTip: function(x) { - this.svg.select('g.time-range-tool-tip') + this.svg.select('g.ampersand-time-range-tool-tip') .attr('transform', 'translate(' + (x - 32) + ', -10)') .transition() .style('opacity', 1); }, setToolTip: function(x, t) { - this.svg.select('g.time-range-tool-tip') + this.svg.select('g.ampersand-time-range-tool-tip') .attr('transform', 'translate(' + (x - 32) + ', -10)'); - this.svg.select('text.time-range-tool-tip-text') + this.svg.select('text.ampersand-time-range-tool-tip-text') .text(this.model.intToTimeString(t)); }, hideToolTip: function() { - this.svg.select('g.time-range-tool-tip') + this.svg.select('g.ampersand-time-range-tool-tip') .transition() .duration(2000) .style('opacity', 0); }, resizeDuration: function() { - this.svg.select('line.time-range-duration') + this.svg.select('line.ampersand-time-range-duration') .attr('x1', this.model.startX) .attr('x2', this.model.endX); } From 62726d20c2089eead2cbdba6b70c418f757c72ba Mon Sep 17 00:00:00 2001 From: Alexander Martin Date: Wed, 4 Feb 2015 11:59:32 -0600 Subject: [PATCH 2/2] Bumped the version. --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 4f99a01..5b21e7d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ampersand-time-range", - "version": "0.1.0", + "version": "0.2.0", "description": "A time range input using Ampersand and D3.", "main": "ampersand-time-range.js", "scripts": {