Skip to content

C
cloud-quote
Commit f5f224c7 authored by Sven Franck's avatar Sven Franck
Browse files
Options

started to make gadget ids dynamic

parent c41e7114
Hide whitespace changes
Inline Side-by-side
Showing with 11509 additions and 308 deletions
gadgets/header.html
View file @ f5f224c7
...@@ -4,62 +4,7 @@ ...@@ -4,62 +4,7 @@
/* header wrappers */ /* header wrappers */
.ui-header { height: 41px;} .ui-header { height: 41px;}
.headWrapLeft, .headWrapRight { height: inherit; margin-top: -4px; } .headWrapLeft, .headWrapRight { height: inherit; margin-top: -4px; }
.headWrapLeft .ui-btn, .headWrapRight .ui-btn {margin: 0;}
/* custom icons - languages */
.ui-icon-lang { background-image: url(../img/custom-lang-18.png); }
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-resolution: 240dpi) {
.ui-icon-lang {
-moz-background-size: 1200px 18px;
-o-background-size: 1200px 18px;
-webkit-background-size: 1200px 18px;
background-size: 1200px 18px;
}
.ui-icon-lang {
background-image: url(../img/custom-lang-36.png);
#background-image: url(../img/custom-lang-18.png);
}
}
/* background position for all sprites */
.ui-fake-icon.AT, .AT {background-position: 0px -50%;}
.ui-fake-icon.BE, .BE {background-position: -36px -50%;}
.ui-fake-icon.BG, .BG {background-position: -72px -50%;}
.ui-fake-icon.CH, .CH {background-position: -108px -50%;}
.ui-fake-icon.CZ, .CZ {background-position: -144px -50%;}
.ui-fake-icon.DE, .DE {background-position: -180px -50%;}
.ui-fake-icon.DK, .DK {background-position: -216px -50%;}
.ui-fake-icon.EE, .EE {background-position: -252px -50%;}
.ui-fake-icon.ES, .ES {background-position: -288px -50%;}
.ui-fake-icon.FI, .FI {background-position: -324px -50%;}
.ui-fake-icon.FR, .FR {background-position: -360px -50%;}
.ui-fake-icon.global, .global {background-position: -396px -50%;}
.ui-fake-icon.GR, .GR {background-position: -432px -50%;}
.ui-fake-icon.HU, .HU {background-position: -468px -50%;}
.ui-fake-icon.IE, .IE {background-position: -504px -50%;}
.ui-fake-icon.IS, .IS {background-position: -540px -50%;}
.ui-fake-icon.IT, .IT {background-position: -576px -50%;}
.ui-fake-icon.LT, .LT {background-position: -612px -50%;}
.ui-fake-icon.LV, .LV {background-position: -648px -50%;}
.ui-fake-icon.MT, .MT {background-position: -684px -50%;}
.ui-fake-icon.NL, .NL {background-position: -720px -50%;}
.ui-fake-icon.NO, .NO {background-position: -756px -50%;}
.ui-fake-icon.PL, .PL {background-position: -792px -50%;}
.ui-fake-icon.PT, .PT {background-position: -828px -50%;}
.ui-fake-icon.RO, .RO {background-position: -864px -50%;}
.ui-fake-icon.RU, .RU {background-position: -900px -50%;}
.ui-fake-icon.SCO, .SCO {background-position: -936px -50%;}
.ui-fake-icon.SE, .SE {background-position: -973px -50%;}
.ui-fake-icon.SK, .SK {background-position: -1008px -50%;}
.ui-fake-icon.UA, .UA {background-position: -1044px -50%;}
.ui-fake-icon.EN, .EN {background-position: -1080px -50%;}
.ui-fake-icon.WAL, .WAL {background-position:-1116px -50%;}
/* make some space */
.ui-li-text {padding-left: 40px; paddding-left: 15px; }
.ui-li-divider {text-align: center;}
</style> </style>
</head> </head>
...@@ -70,106 +15,58 @@ ...@@ -70,106 +15,58 @@
</div> </div>
<h1 class="ui-title t" role="heading" data-i18n="" aria-level="1"></h1> <h1 class="ui-title t" role="heading" data-i18n="" aria-level="1"></h1>
<div class="headWrapRight ui-btn-right"> <div class="headWrapRight ui-btn-right">
<div id="translator" data-gadget="../gadgets/translate.html"></div>
<a data-role="button" class="setIcon" href="" data-rel="popup" data-position-to="origin" data-icon="lang" data-iconpos="notext">Languages</a> </div>
<div data-role="popup" id="" class="all_popups"> <div data-gadget="" class="main-interactor" data-gadget-connection="[
<ul data-role="listview" data-inset="true" data-divider-theme="f"> {&quot;source&quot;: &quot;translator.translate&quot;, &quot;destination&quot;: &quot;index_wrapper.translate&quot;}
<li data-role="list-divider" class="t" data-i18n="gen.language"></li> ]">
<li data-icon="false"><a class="t change_language" href="?lang=FR-fr" data-i18n-target=".ui-li-text" data-i18n="[title]gen.language_info;[html]gen.lang.fr"><span class="ui-icon ui-fake-icon ui-li-icon ui-icon-lang ui-li-thumb FR">&nbsp;</span><span class="ui-li-text"></span></a></li> </div>
<li data-icon="false"><a class="t change_language" href="?lang=DE-de" data-i18n-target=".ui-li-text" data-i18n="[title]gen.language_info;[html]gen.lang.de"><span class="ui-icon ui-fake-icon ui-li-icon ui-icon-lang ui-li-thumb DE">&nbsp;</span><span class="ui-li-text"></span></a></li>
<li data-icon="false"><a class="t change_language" href="?lang=EN-en" data-i18n-target=".ui-li-text" data-i18n="[title]gen.language_info;[html]gen.lang.en"><span class="ui-icon ui-fake-icon ui-li-icon ui-icon-lang ui-li-thumb EN">&nbsp;</span><span class="ui-li-text"></span></a></li>
</ul>
</div>
</div> </div>
<script type="text/javascript" language="javascript"> <script type="text/javascript" language="javascript">
//<![CDATA[ //<![CDATA[
$(document).ready(function() { var gadget = RenderJs.getSelfGadget(), i,
var gadget = RenderJs.getSelfGadget(), recursive_gadgets = gadget.dom.find("[data-gadget]").not(".main-interactor"),
lang = $.fn.fauna.i18n_current_lang, len = recursive_gadgets.length;
switchIcon = function () {
// this should be the callback after create, which sets the icon recursive_gadgets.each(function (i) {
// however setting elem here cannot access the JQM enhanced elements var passJSON = gadget[$(this).attr('id')],
// although the functions is called after JQM is done enhancing... string, new_string,
// var elem = gadget.dom.find(".setIcon .ui-icon"); current_id = $(this).attr('id'),
// if (elem.length > 0) { new_id = current_id+"__"+gadget.dom.attr('id');
// elem.removeClass()
// .addClass('ui-icon ui-shadow ui-icon-lang '+set_icon); // pass on JSON if present BEFORE modifying gadget-id
// } if (passJSON !== undefined) {
}, $(this).attr('data-gadget-property','{"self":'+JSON.stringify(passJSON)+'}');
// set interactions }
set_lang = function (language) {
var set_icon, elem;
switch (language) {
case "de-DE":
set_icon = "DE";
break;
case "fr-FR":
set_icon = "FR";
break;
default:
set_icon = "EN";
break;
};
$.fn.fauna.i18n_current_lang = language; // dynamic gadget-id
$(this).attr('id', new_id);
// modfiy elements, trigger translation // update interactions
gadget.dom string = gadget.dom.find(".main-interactor").attr("data-gadget-connection");
.find(".setIcon").attr("href", '#'+gadget.dyn.href).end() new_string = string.replace(current_id,new_id);
.find(".all_popups").attr("id", gadget.dyn.href).end() gadget.dom.find(".main-interactor").attr("data-gadget-connection",new_string);
.trigger("translate"); });
if (gadget.isEnhanced() === false) { // modify gadget
$(document).trigger("render_enhance", {"gadget": gadget.dom, "callback":switchIcon()}); if (gadget.self !== undefined) {
gadget.setEnhanced(true); for (key in gadget.self) {
if (gadget.self.hasOwnProperty(key)) {
gadget.dom.find(key).attr(gadget.self[key][0],gadget.self[key][1]);
} }
}
// NONO!
setTimeout(function () {
elem = gadget.dom.find(".setIcon .ui-icon");
if (elem.length > 0) {
elem.removeClass()
.addClass('ui-icon ui-shadow ui-icon-lang '+set_icon);
}
},50);
};
// set page title
gadget.dom.find('h1').attr('data-i18n', gadget.dyn.title);
// initializing setter
$(document).on('i18n_ready', function (e, data) {
set_lang(data.lang);
});
console.log("hello lang =" +lang);
// regular page setter
if (lang !== undefined) {
set_lang($.fn.fauna.i18n_current_lang);
} }
console.log("binding to this=");
console.log( $(this) ); // interactions
console.log("whats left"); gadget.translate = function(){
console.log( $(this).filter(function() { return $(this).jqmData("i18n") !== true; })) $.fn.util.lang(gadget.dom);
// switch language };
$(this)
.filter(function() { return $(this).jqmData("i18n") !== true; }) $(document).ready(function() {
.jqmData('i18n',true) // trigger enhancement
.on('click', '.change_language', function(e) { $(this).trigger("render_enhance", {gadget: gadget.dom});
var lang = $(this).attr('href').replace('?lang=',''); });
e.preventDefault();
$('.all_popups').popup( "close" );
// switch to new language
$.i18n.setLng(lang, function() {
// translate everything in gadget
$.fn.util.lang(gadget.dom);
// interaction! switch icon (triggers translate on all other gadgets
set_lang($.i18n.lng());
});
});
});
//]]> //]]>
</script> </script>
......
gadgets/results.html
View file @ f5f224c7
<!DOCTYPE html> <!DOCTYPE html>
<head> <head>
<!-- http://www.tekadept.com/M/Charts#pageBarChart <!-- <link rel="stylesheet" type="text/css" href="../js/plugins/jqplot/jquery.jqplot.min.css" /> -->
<script type="text/javascript" src="../js/plugins/jqplot/jqplot.js"></script>
<script type="text/javascript" src="../js/plugins/jqplot/jqplot_barrenderer.js"></script>
<script type="text/javascript" src="../js/plugins/jqplot/jqplot_categoryaxisrenderer.js"></script>-->
<style type="text/css"> <style type="text/css">
/* search_criteria */ /* search_criteria */
.search_info {text-align: center;} .search_info {text-align: center;}
...@@ -21,71 +17,24 @@ ...@@ -21,71 +17,24 @@
.results_wrapper .image_wrapper {max-height: 80px; text-align: center; padding: 0; display: block;} .results_wrapper .image_wrapper {max-height: 80px; text-align: center; padding: 0; display: block;}
.results_wrapper .image_wrapper img {max-height: inherit;} .results_wrapper .image_wrapper img {max-height: inherit;}
.results_wrapper .provider_name {text-align: center;} .results_wrapper .provider_name {text-align: center;}
/* popups */ /* popups */
.ui-collapsible-popup {padding: 0;} .ui-collapsible-popup {padding: 0;}
.ui-collapsible-popup .ui-collapsible-set-horizontal .ui-collapsible-content {margin-top: -15px; border:0 none; padding: 0;} .ui-collapsible-popup .ui-collapsible-set-horizontal .ui-collapsible-content {margin-top: -15px; border:0 none; padding: 0;}
#results .ui-popup { width: 25em;} .ui-collapsible-set-horizontal .ui-collapsible-heading {margin: -1px 0;}
.provider_popup { width: 25em;}
@media all and (min-width: 30em) { @media all and (min-width: 30em) {
#results .ui-popup { width: 25em;} .provider_popup { width: 25em;}
} }
@media all and (max-width: 30em) { @media all and (max-width: 30em) {
#results .ui-popup { width: 25em;} .provider_popup { width: 25em;}
} }
@media all and (min-width: 45em) { @media all and (min-width: 45em) {
#results .ui-popup { width: 35em;} .provider_popup { width: 35em;}
} }
@media all and (min-width: 60em) { @media all and (min-width: 60em) {
#results .ui-popup { width: 50em;} .provider_popup { width: 50em;}
} }
/* jqplot */
/*rules for the plot target div. These will be cascaded down to all plot elements according to css rules*/
.jqplot-target { position: relative; color: #666666; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 1em; height: 300px; width: 400px;}
/*rules applied to all axes*/
.jqplot-axis { font-size: 0.75em;}
.jqplot-xaxis { margin-top: 10px;}
.jqplot-x2axis { margin-bottom: 10px;}
.jqplot-yaxis {margin-right: 10px;}
.jqplot-y2axis, .jqplot-y3axis, .jqplot-y4axis, .jqplot-y5axis, .jqplot-y6axis, .jqplot-y7axis, .jqplot-y8axis, .jqplot-y9axis, .jqplot-yMidAxis { margin-left: 10px;margin-right: 10px;}
/*rules applied to all axis tick divs*/
.jqplot-axis-tick, .jqplot-xaxis-tick, .jqplot-yaxis-tick, .jqplot-x2axis-tick, .jqplot-y2axis-tick, .jqplot-y3axis-tick, .jqplot-y4axis-tick, .jqplot-y5axis-tick, .jqplot-y6axis-tick, .jqplot-y7axis-tick, .jqplot-y8axis-tick, .jqplot-y9axis-tick, .jqplot-yMidAxis-tick {position: absolute;white-space: pre;}
.jqplot-xaxis-tick { top: 0px; left: 15px; padding-top: 10px; vertical-align: top; }
.jqplot-x2axis-tick { bottom: 0px; /* initial position untill tick is drawn in proper place */ left: 15px; /* padding-bottom: 10px;*/ vertical-align: bottom; }
.jqplot-yaxis-tick { right: 0px; /* initial position untill tick is drawn in proper place */ top: 15px; /* padding-right: 10px;*/ text-align: right; }
.jqplot-yaxis-tick.jqplot-breakTick { right: -20px; margin-right: 0px; padding:1px 5px 1px 5px; /* background-color: white;*/ z-index: 2; font-size: 1.5em; }
.jqplot-y2axis-tick, .jqplot-y3axis-tick, .jqplot-y4axis-tick, .jqplot-y5axis-tick, .jqplot-y6axis-tick, .jqplot-y7axis-tick, .jqplot-y8axis-tick, .jqplot-y9axis-tick { left: 0px; /* initial position untill tick is drawn in proper place */ top: 15px; /* padding-left: 10px;*/ /* padding-right: 15px;*/ text-align: left; }
.jqplot-yMidAxis-tick { text-align: center; white-space: nowrap; }
.jqplot-xaxis-label { margin-top: 10px; font-size: 11pt; position: absolute; }
.jqplot-x2axis-label { margin-bottom: 10px; font-size: 11pt; position: absolute; }
.jqplot-yaxis-label { margin-right: 10px; /* text-align: center;*/ font-size: 11pt; position: absolute; }
.jqplot-yMidAxis-label { font-size: 11pt; position: absolute;}
.jqplot-y2axis-label, .jqplot-y3axis-label, .jqplot-y4axis-label, .jqplot-y5axis-label, .jqplot-y6axis-label, .jqplot-y7axis-label, .jqplot-y8axis-label, .jqplot-y9axis-label { /* text-align: center;*/ font-size: 11pt; margin-left: 10px; position: absolute; }
.jqplot-meterGauge-tick { font-size: 0.75em; color: #999999; }
.jqplot-meterGauge-label { font-size: 1em; color: #999999; }
table.jqplot-table-legend { margin-top: 12px; margin-bottom: 12px; margin-left: 12px; margin-right: 12px; }
table.jqplot-table-legend, table.jqplot-cursor-legend { background-color: rgba(255,255,255,0.6); border: 1px solid #cccccc; position: absolute; font-size: 0.75em; }
td.jqplot-table-legend { vertical-align:middle; }
/* These rules could be used instead of assigning element styles and relying on js object properties. */
/* td.jqplot-table-legend-swatch { padding-top: 0.5em; text-align: center; }
tr.jqplot-table-legend:first td.jqplot-table-legend-swatch { padding-top: 0px; } */
td.jqplot-seriesToggle:hover, td.jqplot-seriesToggle:active { cursor: pointer; }
.jqplot-table-legend .jqplot-series-hidden { text-decoration: line-through; }
div.jqplot-table-legend-swatch-outline { border: 1px solid #cccccc; padding:1px; }
div.jqplot-table-legend-swatch { width:0px; height:0px; border-top-width: 5px; border-bottom-width: 5px; border-left-width: 6px; border-right-width: 6px; border-top-style: solid; border-bottom-style: solid; border-left-style: solid; border-right-style: solid; }
.jqplot-title { top: 0px; left: 0px; padding-bottom: 0.5em; font-size: 1.2em; }
table.jqplot-cursor-tooltip { border: 1px solid #cccccc; font-size: 0.75em; }
.jqplot-cursor-tooltip { border: 1px solid #cccccc; font-size: 0.75em; white-space: nowrap; background: rgba(208,208,208,0.5); padding: 1px; }
.jqplot-highlighter-tooltip, .jqplot-canvasOverlay-tooltip { border: 1px solid #cccccc; font-size: 0.75em; white-space: nowrap; background: rgba(208,208,208,0.5); padding: 1px; }
.jqplot-point-label { font-size: 0.75em; z-index: 2; }
td.jqplot-cursor-legend-swatch { vertical-align: middle; text-align: center; }
div.jqplot-cursor-legend-swatch { width: 1.2em; height: 0.7em; }
.jqplot-error { /* Styles added to the plot target container when there is an error go here.*/ text-align: center; }
.jqplot-error-message { /* Styling of the custom error message div goes here.*/ position: relative; top: 46%; display: inline-block; }
div.jqplot-bubble-label { font-size: 0.8em; /* background: rgba(90%, 90%, 90%, 0.15);*/ padding-left: 2px; padding-right: 2px; color: rgb(20%, 20%, 20%); }
div.jqplot-bubble-label.jqplot-bubble-label-highlight { background: rgba(90%, 90%, 90%, 0.7); }
div.jqplot-noData-container { text-align: center; background-color: rgba(96%, 96%, 96%, 0.3); }
</style> </style>
</head> </head>
<body> <body>
...@@ -125,7 +74,7 @@ ...@@ -125,7 +74,7 @@
<td><span class="key super key_cost">120€</span></td> <td><span class="key super key_cost">120€</span></td>
<td> <td>
<a data-position-to="window" class="t scale-a" href="#provider_info_1" data-rel="popup" data-role="button" data-theme="c" data-icon="info" data-inline="true" data-i18n-target=".ui-btn-text" data-i18n="[title]gen.details_info;[html]gen.details"></a> <a data-position-to="window" class="t scale-a" href="#provider_info_1" data-rel="popup" data-role="button" data-theme="c" data-icon="info" data-inline="true" data-i18n-target=".ui-btn-text" data-i18n="[title]gen.details_info;[html]gen.details"></a>
<div data-role="popup" id="provider_info_1" data-overlay-theme="a" data-theme="c" class="ui-content ui-collapsible-popup"> <div data-role="popup" id="provider_info_1" data-overlay-theme="a" data-theme="c" class="provider_popup ui-content ui-collapsible-popup">
<div data-role="collapsible-set" data-type="horizontal" data-theme="f" data-content-theme="c"> <div data-role="collapsible-set" data-type="horizontal" data-theme="f" data-content-theme="c">
<div data-role="collapsible" data-collapsed-icon="arrow-d" data-expanded-icon="info" data-collapsed="false"> <div data-role="collapsible" data-collapsed-icon="arrow-d" data-expanded-icon="info" data-collapsed="false">
<h1>Load</h1> <h1>Load</h1>
...@@ -140,11 +89,7 @@ ...@@ -140,11 +89,7 @@
<input type="button" value="MySQLBench" name="results_dtb_sql" /> <input type="button" value="MySQLBench" name="results_dtb_sql" />
<input type="button" value="something else" name="results_dtb_postgre" /> <input type="button" value="something else" name="results_dtb_postgre" />
</div> </div>
<div id="barChart" class="myChart"></div> <div id="chartdiv" style="height:400px;width:300px;"></div>
<button id="refreshBarChart" value="Refresh Chart" data-mini="true"></button>
<input type="range" id="pageBarSliderA" value="25" min="0" max="50" data-mini="true"/>
<input type="range" id="pageBarSliderB" value="25" min="0" max="50" data-mini="true"/>
<input type="range" id="pageBarSliderC" value="25" min="0" max="50" data-mini="true"/>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem </p> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem </p>
</div> </div>
</div> </div>
...@@ -155,17 +100,18 @@ ...@@ -155,17 +100,18 @@
<h1>IO</h1> <h1>IO</h1>
</div> </div>
</div> </div>
</div>
</td> </td>
</tr> </tr>
<tr> <tr>
<tr> <tr>
<th><a href="#" title=""><span class="image_wrapper"><img src="../img/providers/ovh.png"></a></span><h2 class="provider_name small">OVH SP</h2></th> <th><a href="#" title=""><span class="image_wrapper"><img src="../img/providers/ovh.png"></span></a><h2 class="provider_name small">OVH SP</h2></th>
<td><span class="key super key_loss">10<sup>-6</sup></span></td> <td><span class="key super key_loss">10<sup>-6</sup></span></td>
<td><span class="key super key_availability">99.82%</span></td> <td><span class="key super key_availability">99.82%</span></td>
<td><span class="key super key_cost">110€</span></td> <td><span class="key super key_cost">110€</span></td>
<td> <td>
<a data-position-to="window" class="t scale-a" href="#provider_info_2" data-rel="popup" data-role="button" data-theme="c" data-icon="info" data-inline="true" data-i18n-target=".ui-btn-text" data-i18n="[title]gen.details_info;[html]gen.details"></a> <a data-position-to="window" class="t scale-a" href="#provider_info_2" data-rel="popup" data-role="button" data-theme="c" data-icon="info" data-inline="true" data-i18n-target=".ui-btn-text" data-i18n="[title]gen.details_info;[html]gen.details"></a>
<div data-role="popup" id="provider_info_2" data-overlay-theme="a" data-theme="c" class="ui-content ui-collapsible-popup"> <div data-role="popup" id="provider_info_2" data-overlay-theme="a" data-theme="c" class="provider_popup ui-content ui-collapsible-popup">
<div data-role="header" data-theme="f" class="ui-header ui-body-f" role="banner"> <div data-role="header" data-theme="f" class="ui-header ui-body-f" role="banner">
<h1 class="ui-title t" role="heading" data-i18n="gen.details_info" aria-level="1"></h1> <h1 class="ui-title t" role="heading" data-i18n="gen.details_info" aria-level="1"></h1>
</div> </div>
...@@ -180,7 +126,7 @@ ...@@ -180,7 +126,7 @@
<td><span class="key super key_cost">90€</span></td> <td><span class="key super key_cost">90€</span></td>
<td> <td>
<a data-position-to="window" class="t scale-a" href="#provider_info_3" data-rel="popup" data-role="button" data-theme="c" data-icon="info" data-inline="true" data-i18n-target=".ui-btn-text" data-i18n="[title]gen.details_info;[html]gen.details"></a> <a data-position-to="window" class="t scale-a" href="#provider_info_3" data-rel="popup" data-role="button" data-theme="c" data-icon="info" data-inline="true" data-i18n-target=".ui-btn-text" data-i18n="[title]gen.details_info;[html]gen.details"></a>
<div data-role="popup" id="provider_info_3" data-overlay-theme="a" data-theme="c" class="ui-content ui-collapsible-popup"> <div data-role="popup" id="provider_info_3" data-overlay-theme="a" data-theme="c" class="provider_popup ui-content ui-collapsible-popup">
<div data-role="header" data-theme="f" class="ui-header ui-body-f" role="banner"> <div data-role="header" data-theme="f" class="ui-header ui-body-f" role="banner">
<h1 class="ui-title t" role="heading" data-i18n="gen.details_info" aria-level="1"></h1> <h1 class="ui-title t" role="heading" data-i18n="gen.details_info" aria-level="1"></h1>
</div> </div>
...@@ -191,16 +137,29 @@ ...@@ -191,16 +137,29 @@
</tbody> </tbody>
</table> </table>
</div> </div>
</div>
<script src="../js/plugins/jqplot/jquery.jqplot.js" type="text/javascript"></script> <!--[if lt IE 9]><script type="text/javascript" src="../js/plugins/jqplot/excanvas.js"></script><![endif]-->
<script src="../js/plugins/jqplot/jqplot.barRenderer.js" type="text/javascript"></script> <!--
<script src="../js/plugins/jqplot/jqplot.categoryAxisRenderer.js" type="text/javascript"></script> <script language="javascript" type="text/javascript" src="../js/plugins/jqplot/jquery.jqplot.min.js"></script>
<script type="text/javascript" language="javascript"> <script language="javascript" type="text/javascript" src="../js/plugins/jqplot/plugins/jqplot.categoryAxisRenderer.js"></script>
<script language="javascript" type="text/javascript" src="../js/plugins/jqplot/plugins/jqplot.barRenderer.min.js"></script>
-->
<script type="text/javascript">
//<![CDATA[ //<![CDATA[
$(document).ready(function() { $(document).ready(function() {
var gadget = RenderJs.getSelfGadget(); var gadget = RenderJs.getSelfGadget();
/* jqplot */ console.log(gadget);
// interaction listener
gadget.translate = function(){
$.fn.util.lang(gadget.dom);
};
//$.jqplot('chartdiv', [[34.53, 56.32, 25.1, 18.6]], {series:[{renderer:$.jqplot.BarRenderer}]});
/* jqplot */
/* ADVANCED EXAMPLE
RocknCoder.Pages.manageBarChart = function () { RocknCoder.Pages.manageBarChart = function () {
var pageshow = function () { var pageshow = function () {
updateChart(); updateChart();
...@@ -239,11 +198,7 @@ ...@@ -239,11 +198,7 @@
pagehide: pagehide pagehide: pagehide
} }
}(); }();
*/
// interaction listener
gadget.translate = function(){
$.fn.util.lang(gadget.dom);
};
// trigger enhancement // trigger enhancement
$(this).trigger("render_enhance", {gadget: gadget.dom}); $(this).trigger("render_enhance", {gadget: gadget.dom});
......
js/controller.js
View file @ f5f224c7
...@@ -14,20 +14,6 @@ define([], function () { ...@@ -14,20 +14,6 @@ define([], function () {
util = {} // utility functions (PUBLIC) util = {} // utility functions (PUBLIC)
util = { util = {
// cached-regexes
regex : {
re_lang: /lang=(.*?)$/g
},
// spinner
spin : function (what) {
if ( what === "show"){
$.mobile.showPageLoadingMsg();
} else {
$.mobile.hidePageLoadingMsg();
}
},
// screen size small/medium/large // screen size small/medium/large
framer: function () { framer: function () {
var self = this, framed; var self = this, framed;
...@@ -158,30 +144,29 @@ define([], function () { ...@@ -158,30 +144,29 @@ define([], function () {
// enhancing gadgets when everyone else is done // enhancing gadgets when everyone else is done
$(document).on('render_enhance', function(e, data) { $(document).on('render_enhance', function(e, data) {
console.log("render_enhance registered");
console.log("trying to call trigger create");
data.gadget.trigger("create"); data.gadget.trigger("create");
// if (data.callback !== undefined) { // if (data.callback !== undefined) {
// data.callback(); // data.callback();
// } // }
}); });
// ===========================================================
// init application // init application
if ($.mobile.autoInitializePage === false){ if ($.mobile.autoInitializePage === false){
$.mobile.initializePage(); $.mobile.initializePage();
$('html').removeClass('render').find('body').removeClass('splash'); $('html').removeClass('render').find('body').removeClass('splash');
} }
// resize application // responsive element handling & initial trigger
$(window).on('orientationchange resize', function(){ $(window).on('orientationchange resize', function(){
util.scale(); util.scale();
}); }).trigger('resize');
// initial size trigger // expose public elements
$(window).trigger('resize');
// expose public utilities
$.fn.util = util; $.fn.util = util;
// expose public settings
$.fn.fauna = fauna; $.fn.fauna = fauna;
}); });
}; };
......
js/overrides.js
View file @ f5f224c7
...@@ -12,7 +12,7 @@ vars : true, white : true */ ...@@ -12,7 +12,7 @@ vars : true, white : true */
// [JQM] - prevent confilicts with requireJS docReady by triggering JQM manually // [JQM] - prevent confilicts with requireJS docReady by triggering JQM manually
$.mobile.autoInitializePage = false; $.mobile.autoInitializePage = false;
// [Multiview] - disable pushState to ensure URLs will be correct // [JQM] - disable pushState to ensure URLs will be correct
$.mobile.pushStateEnabled = false; $.mobile.pushStateEnabled = false;
// [Google Analytics] - since we are tracking on pageshow the pageshow // [Google Analytics] - since we are tracking on pageshow the pageshow
......
js/plugins/jqplot/jquery.jqplot.js
View file @ f5f224c7
This source diff could not be displayed because it is too large. You can view the blob instead.
js/plugins/renderjs/renderjs.js
View file @ f5f224c7
...@@ -747,6 +747,13 @@ var RenderJs = (function () { ...@@ -747,6 +747,13 @@ var RenderJs = (function () {
}; };
gadget_id = gadget_dom.attr("id"); gadget_id = gadget_dom.attr("id");
gadget_connection_list = gadget_dom.attr("data-gadget-connection"); gadget_connection_list = gadget_dom.attr("data-gadget-connection");
console.log("so, what do we have");
console.log(gadget_dom);
console.log(gadget_dom.attr('id'));
console.log(gadget_dom.attr("data-gadget-connection"));
console.log($.parseJSON(gadget_connection_list));
gadget_connection_list = $.parseJSON(gadget_connection_list); gadget_connection_list = $.parseJSON(gadget_connection_list);
$.each(gadget_connection_list, function (key, value) { $.each(gadget_connection_list, function (key, value) {
var source, source_gadget_id, source_method_id, var source, source_gadget_id, source_method_id,
......
p/index.html
View file @ f5f224c7
...@@ -7,14 +7,33 @@ ...@@ -7,14 +7,33 @@
</head> </head>
<body class="splash"> <body class="splash">
<div data-role="page" id="index"> <div data-role="page" id="index">
<div id="index_header" data-gadget="../gadgets/header.html" data-gadget-property='{"dyn":{"title":"pages.titles.main","href":"popup_index_lang"}}'></div> <div id="index_header" data-gadget="../gadgets/header.html"
data-gadget-property='{
"self": {
"h1": [
"data-i18n",
"pages.titles.main"
]
},
"translator": {
"a.setIcon": [
"href",
"#popup_index_lang"
],
"div.all_popups": [
"id",
"popup_index_lang"
]
}
}'>
</div>
<div data-role="content"> <div data-role="content">
<div id="index_wrapper" data-gadget="../gadgets/index_wrapper.html"></div> <div id="index_wrapper" data-gadget="../gadgets/index_wrapper.html"></div>
<div data-gadget="" class="main-interactor" <div data-gadget="" class="main-interactor"
data-gadget-connection="[ data-gadget-connection="[
{&quot;source&quot;: &quot;index_header.translate&quot;, &quot;destination&quot;: &quot;index_wrapper.translate&quot;} {&quot;source&quot;: &quot;index_header.translate&quot;, &quot;destination&quot;: &quot;index_wrapper.translate&quot;}
]"> ]">
</div> </div>
</div> </div>
</div> </div>
</body> </body>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7