diff --git a/Chart/Chart.js b/Chart/Chart.js index 4335f02..c108136 100644 --- a/Chart/Chart.js +++ b/Chart/Chart.js @@ -1,67 +1,508 @@ -(function (jsOMS, undefined) { - jsOMS.Chart = function() { - this.title = null; - this.subtitle = null; - this.footer = null; - this.legend = null; - this.dataset = null; - this.dimension = {width: 100, height: 100, position: jsOMS.Chart.PositionEnum.RELATIVE}; - this.margin = {top: 0, right: 0, bottom: 0, left: 0, position: jsOMS.Chart.PositionEnum.ABSOLUTE}; +(function (jsOMS, undefined) +{ + jsOMS.Chart = function (id) + { + this.chartId = id; + this.chartSelect = d3.select('#' + this.chartId); + + this.title = { + visible: true, + text: "Title", + anchor: "middle", + position: "center" + }; + this.subtitle = { + visible: true, + text: "This is a short subtitle", + anchor: "middle", + position: "center" + }; + this.footer = { + visible: true, + text: "(c) Orange Management Solutions", + anchor: "end", + position: "right" + }; + this.legend = { + visible: true + }; + this.color = d3.scale.category10(); + this.dataset = []; + this.dataSettings = { + style: { + strokewidth: 3 + }, + marker: { + visible: true + }, + info: { + visible: true + }, + extremum: { + visible: false + }, + values: { + visible: false + }, + dataset: true, /* show dataset below */ + interpolate: "linear", /* splines interpolation? */ + }; + + this.axis = {}; + this.grid = {}; + + this.purge(); }; - jsOMS.Chart.prototype.setDimension = function(dimension) { - this.dimension = dimension; + jsOMS.Chart.prototype.calculateHorizontalPosition = function (position) + { + var x = 0; + if (position === 'center') { + x = ( + this.dimension.width + - this.margin.right + - this.margin.left + ) / 2; + } else if (position === 'left') { + x = 0; + } else if (position === 'right') { + x = this.dimension.width - this.margin.right - this.margin.left; + } + + return x; + } + + jsOMS.Chart.prototype.calculateVerticalPosition = function (position) + { + var y = 0; + if (position === 'center') { + y = -(this.dimension.height + - this.margin.top + - this.margin.bottom + ) / 2; + } else if (position === 'bottom') { + y = -(this.dimension.height + - this.margin.top + - this.margin.bottom + ); + } else if (position === 'top') { + y = -this.margin.top; + } + + return y; + } + + jsOMS.Chart.prototype.setColor = function (color) + { + this.color = color; + } + + jsOMS.Chart.prototype.getColor = function () + { + return this.color; + } + + jsOMS.Chart.prototype.setAxis = function (id, axis) + { + this.axis[id] = axis; + + // Setting axis dimensions in case dataset existss + if (Object.keys(this.dataset).length > 0) { + this.axis[id].max = d3.max(this.dataset, function (m) + { + return d3.max(m.points, function (d) + { + return d[id]; + }); + }); + } }; - jsOMS.Chart.prototype.getDimension = function() { + jsOMS.Chart.prototype.setMargin = function (top, right, bottom, left) + { + this.margin = {top: top, right: right, bottom: bottom, left: left}; + }; + + jsOMS.Chart.prototype.setDimension = function (width, height) + { + this.dimension = {width: width, height: height}; + }; + + jsOMS.Chart.prototype.getDimension = function () + { return this.dimension; }; - jsOMS.Chart.prototype.setDimensionRelative = function(relative) { + jsOMS.Chart.prototype.setDimensionRelative = function (relative) + { this.relative = relative; }; - jsOMS.Chart.prototype.setTitle = function(title) { + jsOMS.Chart.prototype.setTitle = function (title) + { this.title = title; }; - jsOMS.Chart.prototype.getTitle = function() { + jsOMS.Chart.prototype.getTitle = function () + { return this.title; }; - jsOMS.Chart.prototype.setSubtitle = function(subtitle) { + jsOMS.Chart.prototype.setSubtitle = function (subtitle) + { this.subtitle = subtitle; }; - jsOMS.Chart.prototype.getSubtitle = function() { + jsOMS.Chart.prototype.getSubtitle = function () + { return this.subtitle; }; - jsOMS.Chart.prototype.setFooter = function(footer) { + jsOMS.Chart.prototype.setFooter = function (footer) + { this.footer = footer; }; - jsOMS.Chart.prototype.getFooter = function() { + jsOMS.Chart.prototype.getFooter = function () + { return this.footer; }; - jsOMS.Chart.prototype.setLegend = function(legend) { + jsOMS.Chart.prototype.setLegend = function (legend) + { this.legend = legend; }; - jsOMS.Chart.prototype.getLegend = function() { - if(!this.legend) { + jsOMS.Chart.prototype.getLegend = function () + { + if (!this.legend) { this.legend = new jsOMS.ChartLegend(); } return this.legend; }; - jsOMS.Chart.prototype.setDataset = function(dataset) { - this.dataset = dataset; + jsOMS.Chart.prototype.addDataset = function (dataset) + { + this.dataset.push(dataset); + + this.findAxisDomain(); }; - jsOMS.Chart.prototype.getDataset = function() { + jsOMS.Chart.prototype.setData = function (data) + { + this.dataset = data; + + this.findAxisDomain(); + } + + jsOMS.Chart.prototype.findAxisDomain = function () + { + for (var id in this.axis) { + this.axis[id].max = d3.max(this.dataset, function (m) + { + return d3.max(m.points, function (d) + { + return d[id]; + }); + }); + + this.axis[id].min = d3.min(this.dataset, function (d) + { + return d3.min(d.points, function (t) + { + return t[id]; + }); + }) + } + } + + jsOMS.Chart.prototype.getData = function () + { return this.dataset; + } + + jsOMS.Chart.prototype.drawLegend = function (svg, dataPointEnter, dataPoint) + { + var self = this; + + if (this.legend !== undefined && this.legend.visible) { + dataPointEnter.append("text").attr('class', 'dataPoint-name'); + dataPoint.select("text.dataPoint-name").attr("x", + this.dimension.width + - this.margin.right + - this.margin.left + 20 + ).attr("y", function (d, i) + { + return i * 20 + 10 - 1; + }).attr("dy", ".35em").text(function (d) + { + return d.name; + }); + dataPointEnter.append('circle').attr('class', 'dataPoint-dot'); + dataPoint.select('circle.dataPoint-dot').attr('cx', + this.dimension.width + - this.margin.right + - this.margin.left + 10 + ).attr('cy', function (d, i) + { + return i * 20 + 10; + }).attr('r', 4).style('stroke', function (d) + { + return self.color(d.name); + }); + dataPoint.exit().remove(); + + // Adding margin for legend + if (this.margin.right < (tlength = this.chartSelect.select('.dataPoint-name').node().getComputedTextLength())) { + this.margin.right = tlength + 30; + this.shouldRedraw = true; + } + } else if (this.margin.right > 10) { + this.margin.right = 10; + this.shouldRedraw = true; + } + } + + jsOMS.Chart.prototype.drawMarker = function (svg, x, y, dataPointEnter, dataPoint) + { + var self = this, temp; + + if (this.dataSettings.marker.visible) { + temp = dataPointEnter.append('g').attr('class', 'dots').attr('clip-path', 'url(#clipper1)').selectAll('circle').data(function (d) + { + return d.points; + }).enter().append('circle').attr('class', 'dot'); + dataPoint.select('.dots').style('stroke', function (d) + { + return self.color(d.name); + }).selectAll('circle').transition().duration(500).attr('cy', function (d) + { + return y(d.y1); + }).attr('cx', function (d) + { + return x(d.x1); + }).attr('r', 4); + } + + if (this.dataSettings.info.visible && this.dataSettings.marker.visible) { + var div = this.chartSelect.append("div").attr("class", "charttooltip").style("opacity", 0); + + /* todo: allow also hover on charts without marker... not possible since hover only on marker and not on point? */ + temp.on("mouseover", function (d) + { + var dim = div.node().getBoundingClientRect(); + var pos = this.getBoundingClientRect(); + + div.transition() + .duration(200) + .style("opacity", .9); + div.html(self.axis.x1.label.text + ': ' + d.x1 + "
" + self.axis.y1.label.text + ': ' + d.y1) + .style("left", (pos.left + 3 - dim.width / 2) + "px") + .style("top", (pos.top - dim.height - 5) + "px"); + }) + .on("mouseout", function (d) + { + div.transition() + .duration(500) + .style("opacity", 0); + }); + } + } + + jsOMS.Chart.prototype.drawText = function (svg) + { + var temp, pos = 0, topmargin = 0; + + /* No subtitle without title */ + if (this.subtitle !== undefined && this.subtitle.visible && this.title !== undefined && this.title.visible) { + pos = this.calculateHorizontalPosition(this.subtitle.position); + + temp = svg.append("text") + .attr("class", "subtitle") + .attr('y', this.position.title.top) + .attr('x', pos) + .style("text-anchor", this.subtitle.anchor) + .text(this.subtitle.text); + + topmargin = 10; + /* only add margin if subtitle exists */ + + if (!this.defined.text.subtitle) { + this.position.subtitle.top = temp.node().getBoundingClientRect().height / 2; + this.margin.top += temp.node().getBoundingClientRect().height / 2 + topmargin; + this.defined.text.subtitle = true; + this.shouldRedraw = true; + } + } + + if (this.title !== undefined && this.title.visible) { + pos = this.calculateHorizontalPosition(this.title.position); + + temp = svg.append("text") + .attr("class", "title") + .attr('y', -this.position.subtitle.top - topmargin) + .attr('x', pos) + .style("text-anchor", this.title.anchor) + .text(this.title.text); + + if (!this.defined.text.title) { + this.position.title.top = 0; + this.margin.top += (temp.node().getBoundingClientRect().height) / 2 + this.position.subtitle.top / 2; + this.defined.text.title = true; + this.shouldRedraw = true; + } + } + + if (this.footer !== undefined && this.footer.visible) { + pos = this.calculateHorizontalPosition(this.footer.position); + + temp = svg.append("text") + .attr("class", "footer") + .attr('y', this.dimension.height + - this.margin.bottom + this.position.footer.top + 10) + .attr('x', pos) + .style("text-anchor", this.footer.anchor) + .text(this.footer.text); + + if (!this.defined.text.footer) { + this.position.footer.top = temp.node().getBoundingClientRect().height; + this.margin.bottom += temp.node().getBoundingClientRect().height + 10; + this.defined.text.footer = true; + this.shouldRedraw = true; + } + } + } + + jsOMS.Chart.prototype.drawAxis = function (svg, xAxis1, yAxis1) + { + // draw clipper + var defs = svg.append('svg').attr('width', 0).attr('height', 0).append('defs'), pos = 0, temp; + defs.append('clipPath').attr('id', 'clipper1').append('rect').attr('x', 0).attr('y', 0) + .attr('width', + this.dimension.width + - this.margin.right + - this.margin.left + ) + .attr('height', + this.dimension.height + - this.margin.top + - this.margin.bottom + ); + + if (this.axis.x1 !== undefined && this.axis.x1.visible) { + temp = svg.append("g") + .attr("class", "x axis") + .attr("transform", "translate(0," + ( + this.dimension.height + - this.margin.top + - this.margin.bottom + ) + ")") + .call(xAxis1); + + if (this.axis.x1.label.visible) { + pos = this.calculateHorizontalPosition(this.axis.x1.label.position); + + temp.append("text") + .attr('y', 45) + .attr('x', pos) + .style("text-anchor", this.axis.x1.label.anchor) + .text(this.axis.x1.label.text); + } + + if (!this.defined.axis.x1) { + this.margin.bottom += 50; + this.defined.axis.x1 = true; + this.shouldRedraw = true; + } + } + + if (this.axis.y1 !== undefined && this.axis.y1.visible) { + temp = svg.append("g") + .attr("class", "y axis") + .attr("transform", "translate(0,0)") + .call(yAxis1); + + if (this.axis.y1.label.visible) { + pos = this.calculateVerticalPosition(this.axis.y1.label.position); + + temp.append("text") + .attr("transform", "rotate(-90)") + .attr("y", -this.margin.left + 10) + .attr('x', pos) + .style("text-anchor", this.axis.y1.label.anchor) + .text(this.axis.y1.label.text); + } + + if (!this.defined.axis.y1) { + this.margin.left += svg.select('.y.axis .tick').node().getBoundingClientRect().width + 25; + this.defined.axis.y1 = true; + this.shouldRedraw = true; + } + } + + if (this.axis.x2 !== undefined) { + + } + + if (this.axis.y2 !== undefined) { + + } + } + + jsOMS.Chart.prototype.drawGrid = function (svg, xGrid, yGrid) + { + if (this.grid.x !== undefined && this.grid.x.visible) { + svg.append("g") + .attr("class", "x grid") + .attr("transform", "translate(0," + (this.dimension.height - this.margin.top - this.margin.bottom) + ")") + .call(xGrid); + } + + if (this.grid.y !== undefined && this.grid.y.visible) { + svg.append("g") + .attr("class", "y grid") + .call(yGrid); + } + }; + + jsOMS.Chart.prototype.purge = function () + { + this.margin = {top: 0, right: 0, bottom: 0, left: 0}; + this.dimension = {width: 0, height: 0}; + this.position = { + title: { + top: 0, + left: 0 + }, + subtitle: { + top: 0, + left: 0 + }, + footer: { + top: 0, + left: 0 + }, + zoompanel: { + top: 0, + left: 0 + } + }; + + this.shouldRedraw = false; + this.defined = { + axis: { + x1: false, + y1: false + }, + text: { + title: false, + subtitle: false, + footer: false, + }, + legend: false + }; + + this.chartSelect.select("*").remove(); }; }(window.jsOMS = window.jsOMS || {})); diff --git a/Chart/ChartLegend.js b/Chart/ChartLegend.js index c3ea723..28f3b5a 100644 --- a/Chart/ChartLegend.js +++ b/Chart/ChartLegend.js @@ -1,5 +1,5 @@ (function (jsOMS, undefined) { - jsOMS.ChartLegend = function () { + jsOMS.Chart.Legend = function () { this.position = {x: 0, y: 0}; this.relative = true; this.horizontal = false; @@ -7,39 +7,39 @@ this.labels = []; // {title, color, marker} }; - jsOMS.ChartLegend.prototype.addLabel = function(label) { + jsOMS.Chart.Legend.prototype.addLabel = function(label) { this.labels.push(label); }; - jsOMS.ChartLegend.prototype.setVisibility = function(visibility) { + jsOMS.Chart.Legend.prototype.setVisibility = function(visibility) { this.visible = visibility; }; - jsOMS.ChartLegend.prototype.getVisibility = function() { + jsOMS.Chart.Legend.prototype.getVisibility = function() { return this.visible; }; - jsOMS.ChartLegend.prototype.setPosition = function(position) { + jsOMS.Chart.Legend.prototype.setPosition = function(position) { this.position = position; }; - jsOMS.ChartLegend.prototype.getPosition = function() { + jsOMS.Chart.Legend.prototype.getPosition = function() { return this.position; }; - jsOMS.ChartLegend.prototype.setRelative = function(relative) { + jsOMS.Chart.Legend.prototype.setRelative = function(relative) { this.relative = relative; }; - jsOMS.ChartLegend.prototype.isRelative = function() { + jsOMS.Chart.Legend.prototype.isRelative = function() { return this.relative; }; - jsOMS.ChartLegend.prototype.setHorizontal = function(horizontal) { + jsOMS.Chart.Legend.prototype.setHorizontal = function(horizontal) { this.horizontal = horizontal; }; - jsOMS.ChartLegend.prototype.isHorizontal = function() { + jsOMS.Chart.Legend.prototype.isHorizontal = function() { return this.horizontal; }; diff --git a/Chart/LineChart.js b/Chart/LineChart.js index 5a41484..ef65bd3 100644 --- a/Chart/LineChart.js +++ b/Chart/LineChart.js @@ -1,31 +1,281 @@ -(function (jsOMS, undefined) { - jsOMS.LineChart = function () { - this.chart = new jsOMS.Chart(); - this.xIsDate = false; - this.yIsDate = false; +(function (jsOMS, undefined) +{ + jsOMS.Chart.LineChart = function (id) + { + this.chart = new jsOMS.Chart(id); + + // Setting default chart values + this.chart.margin = {top: 5, right: 0, bottom: 0, left: 0}; + this.chart.color = d3.scale.category10(); + this.chart.axis = { + x1: { + visible: true, + label: { + visible: true, + text: 'X-Axis', + position: "center", + anchor: 'middle' + }, + tick: { + prefix: '', + orientation: 'bottom', + size: 7 + }, + min: 0, + max: 0 + }, + y1: { + visible: true, + label: { + visible: true, + text: 'Y-Axis', + position: 'center', + anchor: 'middle' + }, + tick: { + prefix: '', + orientation: 'bottom', + size: 7 + }, + min: 0, + max: 0 + } + }; + + this.chart.grid = { + x: { + visible: true + }, + y: { + visible: true + } + }; }; - jsOMS.LineChart.prototype.setXDate = function(date) { - this.xIsDate = date; - }; + jsOMS.Chart.LineChart.prototype.getChart = function () + { + return this.chart; + } - jsOMS.LineChart.prototype.setYDate = function(date) { - this.yIsDate = date; - }; + jsOMS.Chart.LineChart.prototype.draw = function () + { + var line, svg, x, xAxis1, xAxis2, y, yAxis1, yAxis2, xGrid, yGrid, zoom, self = this, box = this.chart.chartSelect.node().getBoundingClientRect(); - jsOMS.LineChart.prototype.draw = function() { - var x, y; + this.chart.dimension = { + width: box.width, + height: box.height + }; - if(this.xIsDate) { - x = d3.time.scale().range([0, this.chart.getDimension().width]); - } else { - x = d3.scale.linear().range([0, this.chart.getDimension().width]); + x = d3.scale.linear().range([ + 0, + this.chart.dimension.width + - this.chart.margin.right + - this.chart.margin.left + ]); + + y = d3.scale.linear().range([ + this.chart.dimension.height + - this.chart.margin.top + - this.chart.margin.bottom, + 10 + ]); + + // axis + xAxis1 = d3.svg.axis().scale(x).tickFormat(function (d) + { + return self.chart.axis.x1.tick.prefix + d; + }).orient("bottom").outerTickSize(this.chart.axis.x1.tick.size).innerTickSize(this.chart.axis.x1.tick.size).tickPadding(7); + + yAxis1 = d3.svg.axis().scale(y).tickFormat(function (d) + { + return self.chart.axis.y1.tick.prefix + d; + }).orient("left").outerTickSize(this.chart.axis.y1.tick.size).innerTickSize(this.chart.axis.y1.tick.size).tickPadding(7); + + xGrid = d3.svg.axis() + .scale(x) + .orient("bottom") + //.ticks(0) + .tickSize( + -(this.chart.dimension.height + - this.chart.margin.top - 10 + - this.chart.margin.bottom), 0, 0) + .tickFormat(""); + + yGrid = d3.svg.axis() + .scale(y) + .orient("left") + //.ticks(0) + .tickSize( + -this.chart.dimension.width + + this.chart.margin.right + + this.chart.margin.left, 0, 0) + .tickFormat(""); + + x.domain([this.chart.axis.x1.min, this.chart.axis.x1.max + 1]); + y.domain([this.chart.axis.y1.min - 1, this.chart.axis.y1.max + 1]); + + line = d3.svg.line().interpolate(this.chart.dataSettings.interpolate).x(function (d) + { + return x(d.x1); + }).y(function (d) + { + return y(d.y1); + }); + + zoom = d3.behavior.zoom().x(x).scaleExtent([1, 2]).on('zoom', function () + { + var tx, ty; + tx = d3.event.translate[0]; + ty = d3.event.translate[1]; + tx = Math.min(1, + Math.max(tx, + self.chart.dimension.width + - self.chart.margin.right + - self.chart.margin.left + - Math.round(x(self.chart.axis.y1.max) - x(1)), + self.chart.dimension.width + - self.chart.margin.right + - self.chart.margin.left + - Math.round(x(self.chart.axis.y1.max) - x(1)) * d3.event.scale)); + + zoom.translate([tx, ty]); + svg.select('.x.axis').call(xAxis1); + svg.select('.x.grid').call(xGrid); + svg.selectAll('.line').attr("d", function (d) + { + return line(d.points); + }).style("stroke", function (d) + { + return self.chart.color(d.name); + }); + return svg.selectAll('circle.dot').attr('cy', function (d) + { + return y(d.y1); + }).attr('cx', function (d) + { + return x(d.x1); + }).attr('r', 4); + }); + + svg = this.chart.chartSelect.append("svg") + .attr("width", this.chart.dimension.width) + .attr("height", this.chart.dimension.height) + .append("g").attr("transform", "translate(" + + (this.chart.margin.left) + "," + + (this.chart.margin.top) + ")"); + + this.chart.drawGrid(svg, xGrid, yGrid); + this.drawZoomPanel(svg, zoom); + + zoom.scaleExtent([1, Number.MAX_VALUE]); + //svg.selectAll('.x.grid').transition().duration(500).call(xGrid); + //svg.selectAll('.x.axis').transition().duration(500).call(xAxis1); + //svg.selectAll('.y.axis').transition().duration(500).call(yAxis1); + + var dataPoint, dataPointEnter; + var temp = this.drawData(svg, line, dataPointEnter, dataPoint); + dataPointEnter = temp[0]; + dataPoint = temp[1]; + this.chart.drawMarker(svg, x, y, dataPointEnter, dataPoint); + this.chart.drawLegend(svg, dataPointEnter, dataPoint); + this.chart.drawText(svg); + this.chart.drawAxis(svg, xAxis1, yAxis1); + + if (this.chart.shouldRedraw) { + this.redraw(); } - if(this.yIsDate) { - y = d3.time.scale().range([this.chart.getDimension().height, 0]); - } else { - y = d3.scale.linear().range([this.chart.getDimension().height, 0]); - } + return zoom.x(x); + }; + + jsOMS.Chart.LineChart.prototype.redraw = function () + { + this.chart.shouldRedraw = false; + this.chart.chartSelect.select("*").remove(); + this.draw(); + } + + jsOMS.Chart.LineChart.prototype.drawData = function (svg, line, dataPointEnter, dataPoint) + { + var self = this; + + dataPoint = svg.selectAll(".dataPoint").data(this.chart.dataset, function (c) + { + return c.id; + }); + + dataPointEnter = dataPoint.enter().append("g").attr("class", "dataPoint"); + dataPointEnter.append("path").attr('clip-path', 'url(#clipper1)').attr("class", "line"); + dataPoint.select('path').style("stroke-width", this.chart.dataSettings.style.strokewidth).transition().duration(500).attr("d", function (d) + { + return line(d.points); + }).style("stroke", function (d) + { + return self.chart.color(d.name); + }); + + return [dataPointEnter, dataPoint]; + } + + jsOMS.Chart.LineChart.prototype.drawZoomPanel = function (svg, zoom) + { + this.chart.position.zoompanel.top = 10; + + svg.append("rect") + .attr('class', 'zoom-panel') + .attr('y', this.chart.position.zoompanel.top) + .attr("width", + this.chart.dimension.width + - this.chart.margin.right + - this.chart.margin.left + ) + .attr("height", + this.chart.dimension.height + - this.chart.margin.top + - this.chart.margin.bottom - this.chart.position.zoompanel.top + ).call(zoom); } }(window.jsOMS = window.jsOMS || {})); + +var c, chart, data, dataGen, i, k; + +dataGen = (function () +{ + return (function (id) + { + return function () + { + var data, j, nums, y1Seed; + nums = Math.ceil(Math.random() * 50) + 4; + y1Seed = Math.round(Math.random() * 20); + data = { + id: id, + name: "Dataset " + id, + points: (function () + { + var k, ref, results; + results = []; + for (j = k = 1, ref = nums; 1 <= ref ? k <= ref : k >= ref; j = 1 <= ref ? ++k : --k) { + results.push({ + x1: j, + y1: y1Seed + Math.round(Math.random() * 5) + }); + } + return results; + })() + }; + id = id + 1; + return data; + }; + })(1); +})(); + +data = []; + +for (i = k = 1; k <= 10; i = ++k) { + data.push(dataGen()); +} + +var mychart = new jsOMS.Chart.LineChart('chart'); +mychart.getChart().setData(data); +mychart.draw(); diff --git a/Chart/Position.enum.js b/Chart/Position.enum.js new file mode 100644 index 0000000..e69de29 diff --git a/Chart/RadarChart.js b/Chart/RadarChart.js new file mode 100644 index 0000000..e69de29 diff --git a/Chart/TextElement.js b/Chart/TextElement.js new file mode 100644 index 0000000..2bacee7 --- /dev/null +++ b/Chart/TextElement.js @@ -0,0 +1,4 @@ +(function (jsOMS, undefined) { + jsOMS.Chart.TextElement = function() { + }; +}(window.jsOMS = window.jsOMS || {})); diff --git a/README.md b/README.md index e69de29..01923ff 100644 --- a/README.md +++ b/README.md @@ -0,0 +1 @@ +# Framework # diff --git a/UI/FormManager.js b/UI/FormManager.js index 56f32e4..c1ff85d 100644 --- a/UI/FormManager.js +++ b/UI/FormManager.js @@ -22,6 +22,7 @@ this.ignore = []; this.success = []; this.injectSelector = []; + this.forms = []; }; /** @@ -95,13 +96,19 @@ */ jsOMS.FormManager.prototype.bind = function (id) { + this.forms = []; + if (typeof id !== 'undefined' && this.ignore.indexOf(id) === -1) { - this.bindElement(document.getElementById(id)); + var form = document.getElementById(id); + + this.forms.push(form); + this.bindElement(form); } else { var forms = document.getElementsByTagName('form'); for (var i = 0; i < forms.length; i++) { if (this.ignore.indexOf(forms[i].id) === -1) { + this.forms.push(forms[i]) this.bindElement(forms[i]); } } @@ -405,4 +412,14 @@ } } }; + + jsOMS.FormManager.prototype.getElements = function () + { + return this.forms; + } + + jsOMS.FormManager.prototype.count = function () + { + return this.forms.length; + } }(window.jsOMS = window.jsOMS || {}));