diff options
| author | Takayuki MATSUOKA <takayuki.matsuoka@gmail.com> | 2015-04-02 21:17:29 (GMT) |
|---|---|---|
| committer | Takayuki MATSUOKA <takayuki.matsuoka@gmail.com> | 2015-04-02 21:17:29 (GMT) |
| commit | faf5d67b9046d1d52dac9873bdeed9ec961c085c (patch) | |
| tree | fe8191bb8664de8c8c1d6f78e0c4de293a3cd3c2 /js | |
| parent | 90711ef2caef76289fd771c1196e8d4aef18dc43 (diff) | |
| download | lz4-faf5d67b9046d1d52dac9873bdeed9ec961c085c.zip lz4-faf5d67b9046d1d52dac9873bdeed9ec961c085c.tar.gz lz4-faf5d67b9046d1d52dac9873bdeed9ec961c085c.tar.bz2 | |
Replace chartselector by Bootstrap's tab.
js/bootstrap-patch.css is copied from the following answer on SO :
http://stackoverflow.com/a/23267110/2132223
Diffstat (limited to 'js')
| -rw-r--r-- | js/bootstrap-patch.css | 13 | ||||
| -rw-r--r-- | js/chartselector.js | 57 | ||||
| -rw-r--r-- | js/rendercharts.js | 4 |
3 files changed, 15 insertions, 59 deletions
diff --git a/js/bootstrap-patch.css b/js/bootstrap-patch.css new file mode 100644 index 0000000..db40801 --- /dev/null +++ b/js/bootstrap-patch.css @@ -0,0 +1,13 @@ +/* bootstrap hack: fix content width inside hidden tabs
+ http://stackoverflow.com/a/23267110/2132223
+ */
+.tab-content > .tab-pane,
+.pill-content > .pill-pane {
+ display: block !important; /* undo display:none */
+ height: 0; /* height:0 is also invisible */
+ overflow-y: hidden; /* no-overflow */
+}
+.tab-content > .active,
+.pill-content > .active {
+ height: auto; /* let the content decide it */
+} /* bootstrap hack end */
diff --git a/js/chartselector.js b/js/chartselector.js deleted file mode 100644 index 67c81aa..0000000 --- a/js/chartselector.js +++ /dev/null @@ -1,57 +0,0 @@ -/*
-Usage:
-
-Add data-chartselector-chart-id="YOUR-CHART-ID" as buttons attibute.
-
- <button data-chartselector-chart-id="my-chart-1" type="button" class="btn btn-primary">Test Chart #1</button>
- ^^^^^^^^^^^^^^^^^^^^^^^^^^^ ~~~~~~~~~~~~
-
- <button data-chartselector-chart-id="my-chart-2" type="button" class="btn btn-primary">Test Chart #2</button>
- ^^^^^^^^^^^^^^^^^^^^^^^^^^^ ~~~~~~~~~~~~
-
-Create parent <div> as chart group and child <div> as chart entity.
-
- <div id="my-chart-group-1" class="chartselector-group">
- ^^^^^^^^^^^^^^^^^^^^^^^^^^^
- <div id="my-chart-1" class="chartselector-chart" data-csv-props='{...}'></div>
- ~~~~~~~~~~~~ ^^^^^^^^^^^^^^^^^^^^^^^^^^^
- <div id="my-chart-2" class="chartselector-chart" data-csv-props='{...}'></div>
- ~~~~~~~~~~~~ ^^^^^^^^^^^^^^^^^^^^^^^^^^^
- </div>
-*/
-(function($) {
- $(document).ready(function() {
- $("button[data-chartselector-chart-id]").click(function() {
- var chartId = $(this).attr("data-chartselector-chart-id");
- showChart(chartId);
- });
- });
-
- function showChart(chartId) {
- var e = $("#" + chartId);
- var p = e.closest(".chartselector-group");
- var divs = p.children(".chartselector-chart");
- divs.each(function() {
- if(this.id == chartId) {
- $(this).css("display", "block");
- $(this).css("visibility", "visible");
- } else {
- $(this).css("display", "none");
- }
- });
- }
-
- var cssStyleText = '\
- .chartselector-group { \
- position: relative; \
- } \
- \
- .chartselector-chart { \
- position: absolute; \
- width: 100%; \
- height: 100%; \
- } \
- ';
-
- $("<style>").prop("type", "text/css").html(cssStyleText).appendTo("head");
-})(jQuery);
diff --git a/js/rendercharts.js b/js/rendercharts.js index 1fd3373..24bce90 100644 --- a/js/rendercharts.js +++ b/js/rendercharts.js @@ -109,7 +109,7 @@ };
// end of http://code.google.com/p/csv-to-array/
- var drawTable = function (gvCtor, gvOptions, csvUrl, tableEl) {
+ var drawTable = function (gvCtor, gvOptions, csvUrl, csvEl) {
var r = new XMLHttpRequest();
r.open("GET", csvUrl, true);
r.onreadystatechange = function() {
@@ -140,7 +140,7 @@ }
gvdt.addRows(csvAsArray);
var ctor = getNestedObjectByName(gvCtor);
- var table = new ctor (tableEl);
+ var table = new ctor (csvEl);
table.draw(gvdt, gvOptions);
}
}
|