Commit 0ffb4110 authored by Sven Franck's avatar Sven Franck

adding content

parent 43e4e52d
...@@ -5,85 +5,12 @@ article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,su ...@@ -5,85 +5,12 @@ article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,su
.ui-mobile-rendering > * { visibility:visible!important; /* no need */} .ui-mobile-rendering > * { visibility:visible!important; /* no need */}
.splash:before { width: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: block; height: 115%; z-index: 999999; background-color: white; content: "offline version initializing..."; text-align: center; color: #bbb; text-shadow: none; line-height: 150px; vertical-align: bottom; } .splash:before { width: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: block; height: 115%; z-index: 999999; background-color: white; content: "offline version initializing..."; text-align: center; color: #bbb; text-shadow: none; line-height: 150px; vertical-align: bottom; }
/* webfonts /* webfonts
* { font-family: "Open Sans",Arial; font-size: 14.5px; } */ * { font-family: "Open Sans",Arial; font-size: 14.5px; } */
h1,h2,h3,h4, .ui-btn-inner{ font-weight: 400; } h1,h2,h3,h4, .ui-btn-inner{ font-weight: 400; }
/* responsive css */
.rwd { margin: 1em 0;}
.rwd .ui-first-child {
-webkit-border-top-right-radius: inherit;
border-top-right-radius: inherit;
-webkit-border-top-left-radius: inherit;
border-top-left-radius: inherit;
}
.rwd .ui-last-child {
-webkit-border-bottom-right-radius: inherit;
border-bottom-right-radius: inherit;
-webkit-border-bottom-left-radius: inherit;
border-bottom-left-radius: inherit;
}
.rwd .ui-body {
-webkit-border-radius: inherit;
border-radius: inherit;
border-top-width: 0px;
border-bottom-width: 0px;
}
.rwd .ui-first-child .ui-body {
border-width: 1px 1px 0 1px;
}
.rwd .ui-last-child .ui-body {
border-width: 0 1px 1px 1px;
}
.rwd .ui-rwd-a, .rwd .ui-rwd-b, .rwd .ui-rwd-c { width: 100%; float:none;}
.rwd .ui-slider-track, .rwd .ui-slider-switch {min-width: 8em;}
.rwd .ui-table-reflow tbody th {margin-top: 1.5em;}
@media all and (min-width: 30em) {
.rwd .ui-slider-track, .rwd .ui-slider-switch {min-width: 12em;}
.rwd .ui-table-reflow tbody th {margin-top: 1em;}
/*
.ui-popup-container { max-width: 80%; margin: 0 auto;}
.rwd div { min-height:12em; }
.rwd .ui-rwd-a, .rwd .ui-rwd-b { float:left; width: 49.95%; }
.rwd .ui-rwd-a p, .rwd .ui-rwd-b p { font-size:.8em;}
*/
}
@media all and (max-width: 30em) {
.results_wrapper table ul li { max-width: 250px; }
}
@media all and (min-width: 45em) {
.rwd .ui-slider-track, .rwd .ui-slider-switch {min-width: 16em;}
.rwd .ui-table-reflow tbody th {margin: 0;}
/*
.ui-popup-container { max-width: 70%; margin: 0 auto;}
.rwd div { min-height:17em; }
.rwd .ui-rwd-b { float:left; width: 100%; }
.rwd .ui-rwd-a, .rwd .ui-rwd-c { float:left; width: 49.95%; }
*/
}
@media all and (min-width: 60em) {
.rwd .ui-slider-track, .rwd .ui-slider-switch {min-width: 24em;}
.rwd .ui-table-reflow tbody th {margin: 0;}
/*
.ui-popup { max-width: 60%; margin: 0 auto;}
.rwd { font-size:125%; }
.rwd .ui-rwd-b { float:left; width: 100%; }
.rwd .ui-rwd-a, .rwd .ui-rwd-c { float:left; width: 49.95%; }
*/
}
/* results table */
.results_wrapper table thead th {padding: 0.1em 0.25em;}
/* custom layouting */ /* custom layouting */
.ui-title { .ui-title {
color: white; color: white;
...@@ -104,6 +31,12 @@ h1,h2,h3,h4, .ui-btn-inner{ font-weight: 400; } ...@@ -104,6 +31,12 @@ h1,h2,h3,h4, .ui-btn-inner{ font-weight: 400; }
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
} }
.super {
font-size: 1em !important;
color: #636363;
font-weight: bold;
text-align: center;
}
.small { .small {
font-size: .8em !important; font-size: .8em !important;
color: #636363; color: #636363;
...@@ -125,7 +58,8 @@ h1,h2,h3,h4, .ui-btn-inner{ font-weight: 400; } ...@@ -125,7 +58,8 @@ h1,h2,h3,h4, .ui-btn-inner{ font-weight: 400; }
.ui-header-fixed.ui-fixed-hidden { padding-top: 1px; top: -1px; } .ui-header-fixed.ui-fixed-hidden { padding-top: 1px; top: -1px; }
/* center the table, override JQM CSS */ /* center the table, override JQM CSS */
table { margin: 0 auto; width: auto !important; display: table !important; } table { margin: 0 auto; }
table.table-inline { width: auto !important; display: table !important; }
.ui-table thead th { padding-bottom: .25em; } .ui-table thead th { padding-bottom: .25em; }
/* remove dotted abbr border */ /* remove dotted abbr border */
...@@ -138,7 +72,6 @@ div.ui-body h2 { margin: 0.5em 0 0; } ...@@ -138,7 +72,6 @@ div.ui-body h2 { margin: 0.5em 0 0; }
/* ui-popup */ /* ui-popup */
.ui-popup { max-width: 400px;}
.ui-popup .ui-header {margin: -15px -15px 15px; } .ui-popup .ui-header {margin: -15px -15px 15px; }
.ui-popup .ui-header { .ui-popup .ui-header {
-webkit-border-bottom-right-radius: 0 !important; -webkit-border-bottom-right-radius: 0 !important;
...@@ -157,8 +90,3 @@ div.ui-body h2 { margin: 0.5em 0 0; } ...@@ -157,8 +90,3 @@ div.ui-body h2 { margin: 0.5em 0 0; }
/* ad */ /* ad */
.ad_wrapper {text-align: center;} .ad_wrapper {text-align: center;}
.ad_self {height: 80px;} .ad_self {height: 80px;}
/* results */
/* configure */
/* move slider input to the right, add meter */
.ui-slider {float:left;}
.measure {float: right; line-height: 30px;padding: 7px 2px 5px 6px;}
input.ui-input-text.ui-slider-input { float: right;}
.ui-slider-track, .ui-slider-switch { margin: 0 68px 0 15px; }
/* table */
.quote_config .ui-block-c { padding-top: 0; padding-bottom: 0; text-align: center; }
.quote_config .get_quote{ margin-top: 0;}
.quote_config .get_quote .ui-btn-text {font-weight: bold !important;}
\ No newline at end of file
/* simple menu */
.simple_menu {list-style: none; display: inline-block; padding: 0 !important;}
.simple_menu li {float: right; padding: 0 0.5em;}
section {text-align: center; }
section p {margin: 0.2em 0;}
\ No newline at end of file
<html> <!DOCTYPE html>
<head> <head>
<!--
<script type="text/javascript" src="js/jqm-gadget.js"></script>
<link rel="stylesheet" href="css/jqm-gadget.css" />
-->
</head> </head>
<body> <body>
<div class="ad_wrapper"> <div class="ad_wrapper">
<a href="#" title=""><img src="../img/placeholder.jpg" data-i18n="[alt]tx.ad_here" alt="" class="ad_self" /></a> <a href="#" title=""><img src="../img/placeholder.jpg" data-i18n="[alt]tx.ad_here" alt="" class="ad_self" /></a>
<!-- </div>
<script type="text/javascript" language="javascript"> <script type="text/javascript" language="javascript">
//<![CDATA[ //<![CDATA[
$(document).ready(function() { $(document).ready(function() {
console.log("attaching gadget_call1 and 3"); var gadget = RenderJs.getSelfGadget();
gadget1 = RenderJs.GadgetIndex.getGadgetById("g1");
gadget1.gadget_call3 = function (e){gadget_call3("test parameter")}; // interaction listener
gadget1.gadget_call1 = function (e){gadget_call1()}; gadget.translate = function(){
}); $.fn.util.lang(gadget.dom);
};
// trigger enhancement
$(this).trigger("render_enhance", {gadget: gadget.dom});
});
//]]> //]]>
</script> </script>
-->
</body> </body>
</html> </html>
<html> <!DOCTYPE html>
<head> <head>
<style type="text/css">
.menu_analysis { text-align: center;}
</style>
</head> </head>
<body> <body>
<div class="menu_analysis">
<div class="method_menu" data-role="controlgroup" datatype="horizontal"> <div class="method_menu" data-role="controlgroup" data-type="horizontal">
<a href="providers.html" data-role="button" data-i18n="[title]gen.providers">bla</a> <a class="t" data-inline="true" href="providers.html" data-role="button" data-i18n-target=".ui-btn-text" data-i18n="[title]gen.providers_info;gen.providers"></a>
<a href="criteria.html" data-role="button" data-i18n="[title]gen.monitoring">bla</a> <a class="t" data-inline="true" href="criteria.html" data-role="button" data-i18n-target=".ui-btn-text" data-i18n="[title]gen.monitoring_info;gen.monitoring"></a>
</div> </div>
</div>
<script type="text/javascript" language="javascript"> </script>
//<![CDATA[ <script type="text/javascript" language="javascript">
$(document).ready(function() { //<![CDATA[
$(document).ready(function() {
var gadget = RenderJs.getSelfGadget(); var gadget = RenderJs.getSelfGadget();
// interaction listener
gadget.translate = function(){ gadget.translate = function(){
$.fn.util.lang(gadget.dom); $.fn.util.lang(gadget.dom);
}; };
gadget.dom.find('.method_menu').controlgroup({ // trigger enhancement
create: function( event, ui ) {} $(this).trigger("render_enhance", {gadget: gadget.dom});
});
}); });
//]]> //]]>
</script> </script>
......
<html> <!DOCTYPE html>
<head> <head>
<style type="text/css">
/* move slider input to the right, add meter */
.ui-slider {float:left;}
.measure {float: right; line-height: 30px;padding: 7px 2px 5px 6px;}
input.ui-input-text.ui-slider-input { float: right;}
.ui-slider-track, .ui-slider-switch { margin: 0 68px 0 15px; }
/* table */
.quote_config .ui-block-c { padding-top: 0; padding-bottom: 0; text-align: center; }
.quote_config .get_quote { margin-top: 0;}
.quote_config .get_quote .ui-btn-text {font-weight: bold !important;}
.menu_compare {text-align: center;}
/* responsive css */
quote_config.rwd { margin: 1em 0;}
.rwd .ui-first-child {
-webkit-border-top-right-radius: inherit;
border-top-right-radius: inherit;
-webkit-border-top-left-radius: inherit;
border-top-left-radius: inherit;
}
.rwd .ui-last-child {
-webkit-border-bottom-right-radius: inherit;
border-bottom-right-radius: inherit;
-webkit-border-bottom-left-radius: inherit;
border-bottom-left-radius: inherit;
}
.rwd .ui-body {
-webkit-border-radius: inherit;
border-radius: inherit;
border-top-width: 0px;
border-bottom-width: 0px;
}
.rwd .ui-first-child .ui-body {
border-width: 1px 1px 0 1px;
}
.rwd .ui-last-child .ui-body {
border-width: 0 1px 1px 1px;
}
.rwd .ui-rwd-a, .rwd .ui-rwd-b, .rwd .ui-rwd-c { width: 100%; float:none;}
.rwd .ui-slider-track, .rwd .ui-slider-switch {min-width: 8em;}
.rwd .ui-table-reflow tbody th {margin-top: 1.5em; text-align: center;}
.rwd .info_popup { margin: 0 .5em;}
@media all and (min-width: 30em) {
.rwd .ui-slider-track, .rwd .ui-slider-switch {min-width: 12em;}
.rwd .ui-table-reflow tbody th {margin-top: 1em;}
.rwd .info_popup { margin: 0;}
/*
.ui-popup-container { max-width: 80%; margin: 0 auto;}
.rwd div { min-height:12em; }
.rwd .ui-rwd-a p, .rwd .ui-rwd-b p { font-size:.8em;}
.rwd .ui-rwd-a, .rwd .ui-rwd-b { float:left; width: 49.95%; }*/
}
@media all and (max-width: 30em) {
.results_wrapper table ul li { max-width: 250px; }
}
@media all and (min-width: 45em) {
.rwd .ui-slider-track, .rwd .ui-slider-switch {min-width: 16em;}
.rwd .ui-table-reflow tbody th {margin: 0;}
.rwd .info_popup { margin: 0;}
/*
.ui-popup-container { max-width: 70%; margin: 0 auto;}
.rwd div { min-height:17em; }
.rwd .ui-rwd-b { float:left; width: 100%; }
.rwd .ui-rwd-a, .rwd .ui-rwd-c { float:left; width: 49.95%; }*/
}
@media all and (min-width: 60em) {
.rwd .ui-slider-track, .rwd .ui-slider-switch {min-width: 24em;}
.rwd .ui-table-reflow tbody th {margin: 0;}
.rwd .info_popup { margin: 0;}
/*
.ui-popup { max-width: 60%; margin: 0 auto;}
.rwd { font-size:125%; }
.rwd .ui-rwd-b { float:left; width: 100%; }
.rwd .ui-rwd-a, .rwd .ui-rwd-c { float:left; width: 49.95%; }*/
}
</style>
</head> </head>
<body> <body>
...@@ -11,7 +95,7 @@ ...@@ -11,7 +95,7 @@
</div> </div>
<div class="ui-rwd-b"> <div class="ui-rwd-b">
<div class="ui-body ui-body-d"> <div class="ui-body ui-body-d">
<table data-role="table" id="configure" data-mode="reflow" class="ui-responsive table-stroke"> <table data-role="table" id="configure" data-mode="reflow" class="ui-responsive table-stroke table-inline">
<thead> <thead>
<tr> <tr>
<th data-priority="persist"><abbr class="t" data-i18n="[title]gen.feature_name;gen.feature_name"></abbr></th> <th data-priority="persist"><abbr class="t" data-i18n="[title]gen.feature_name;gen.feature_name"></abbr></th>
...@@ -26,7 +110,7 @@ ...@@ -26,7 +110,7 @@
<div class="measure">GB</div> <div class="measure">GB</div>
</td> </td>
<td> <td>
<a data-position-to="window" class="t scale-a" href="#database_info" 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.info;[html]gen.info"></a> <a data-position-to="window" class="info_popup t scale-a" href="#database_info" 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.info;[html]gen.info"></a>
<div data-role="popup" id="database_info" data-overlay-theme="a" data-theme="c" class="ui-content"> <div data-role="popup" id="database_info" data-overlay-theme="a" data-theme="c" class="ui-content">
<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="feat.database_info" aria-level="1"></h1> <h1 class="ui-title t" role="heading" data-i18n="feat.database_info" aria-level="1"></h1>
...@@ -42,7 +126,7 @@ ...@@ -42,7 +126,7 @@
<div class="measure">GB</div> <div class="measure">GB</div>
</td> </td>
<td> <td>
<a data-position-to="window" class="t scale-a" data-role="button" data-overlay-theme="a" data-theme="c" data-icon="info" data-inline="true" data-i18n-target=".ui-btn-text" data-i18n="[title]gen.info;[html]gen.info" href="#archive_info" data-rel="popup"></a> <a data-position-to="window" class="info_popup t scale-a" data-role="button" data-overlay-theme="a" data-theme="c" data-icon="info" data-inline="true" data-i18n-target=".ui-btn-text" data-i18n="[title]gen.info;[html]gen.info" href="#archive_info" data-rel="popup"></a>
<div data-role="popup" id="archive_info" data-overlay-theme="a" data-theme="c" class="ui-content"> <div data-role="popup" id="archive_info" data-overlay-theme="a" data-theme="c" class="ui-content">
<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="feat.archive_info" aria-level="1"></h1> <h1 class="ui-title t" role="heading" data-i18n="feat.archive_info" aria-level="1"></h1>
...@@ -58,7 +142,7 @@ ...@@ -58,7 +142,7 @@
<div class="measure">GB</div> <div class="measure">GB</div>
</td> </td>
<td> <td>
<a data-position-to="window" class="t scale-a" data-role="button" data-overlay-theme="a" data-theme="c" data-icon="info" data-inline="true" data-i18n-target=".ui-btn-text" data-i18n="[title]gen.info;[html]gen.info" href="#ram_info" data-rel="popup"></a> <a data-position-to="window" class="info_popup t scale-a" data-role="button" data-overlay-theme="a" data-theme="c" data-icon="info" data-inline="true" data-i18n-target=".ui-btn-text" data-i18n="[title]gen.info;[html]gen.info" href="#ram_info" data-rel="popup"></a>
<div data-role="popup" id="ram_info" data-overlay-theme="a" data-theme="c" class="ui-content"> <div data-role="popup" id="ram_info" data-overlay-theme="a" data-theme="c" class="ui-content">
<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="feat.ram_info" aria-level="1"></h1> <h1 class="ui-title t" role="heading" data-i18n="feat.ram_info" aria-level="1"></h1>
...@@ -74,7 +158,7 @@ ...@@ -74,7 +158,7 @@
<div class="measure">GHz</div> <div class="measure">GHz</div>
</td> </td>
<td> <td>
<a data-position-to="window" class="t scale-a" data-role="button" data-overlay-theme="a" data-theme="c" data-icon="info" data-inline="true" data-i18n-target=".ui-btn-text" data-i18n="[title]gen.info;[html]gen.info" href="#cpu_info" data-rel="popup"></a> <a data-position-to="window" class="info_popup t scale-a" data-role="button" data-overlay-theme="a" data-theme="c" data-icon="info" data-inline="true" data-i18n-target=".ui-btn-text" data-i18n="[title]gen.info;[html]gen.info" href="#cpu_info" data-rel="popup"></a>
<div data-role="popup" id="cpu_info" data-overlay-theme="a" data-theme="c" class="ui-content"> <div data-role="popup" id="cpu_info" data-overlay-theme="a" data-theme="c" class="ui-content">
<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="feat.cpu_info" aria-level="1"></h1> <h1 class="ui-title t" role="heading" data-i18n="feat.cpu_info" aria-level="1"></h1>
...@@ -94,7 +178,7 @@ ...@@ -94,7 +178,7 @@
</div> </div>
</td> </td>
<td> <td>
<a data-position-to="window" class="t scale-a" data-role="button" data-overlay-theme="a" data-theme="c" data-icon="info" data-inline="true" data-i18n-target=".ui-btn-text" data-i18n="[title]gen.info;[html]gen.info" href="#type_info" data-rel="popup"></a> <a data-position-to="window" class="info_popup t scale-a" data-role="button" data-overlay-theme="a" data-theme="c" data-icon="info" data-inline="true" data-i18n-target=".ui-btn-text" data-i18n="[title]gen.info;[html]gen.info" href="#type_info" data-rel="popup"></a>
<div data-role="popup" id="type_info" data-overlay-theme="a" data-theme="c" class="ui-content"> <div data-role="popup" id="type_info" data-overlay-theme="a" data-theme="c" class="ui-content">
<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="feat.type_info" aria-level="1"></h1> <h1 class="ui-title t" role="heading" data-i18n="feat.type_info" aria-level="1"></h1>
...@@ -113,7 +197,7 @@ ...@@ -113,7 +197,7 @@
</select> </select>
</td> </td>
<td> <td>
<a data-position-to="window" class="t scale-a" data-role="button" data-theme="c" data-icon="info" data-inline="true" href="#architecture_info" data-rel="popup">Info</a> <a data-position-to="window" class="info_popup t scale-a" data-role="button" data-theme="c" data-icon="info" data-inline="true" href="#architecture_info" data-rel="popup">Info</a>
<div data-role="popup" id="architecture_info" data-theme="c" data-overlay-theme="a" class="ui-content"> <div data-role="popup" id="architecture_info" data-theme="c" data-overlay-theme="a" class="ui-content">
<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="feat.architecture_info" aria-level="1"></h1> <h1 class="ui-title t" role="heading" data-i18n="feat.architecture_info" aria-level="1"></h1>
...@@ -127,7 +211,7 @@ ...@@ -127,7 +211,7 @@
</div> </div>
</div> </div>
<div class="ui-rwd-c ui-last-child"> <div class="ui-rwd-c ui-last-child">
<div class="ui-body ui-body-d"> <div class="ui-body ui-body-d menu_compare">
<a href="results.html" data-transitions="slide" data-role="button" data-icon="arrow-r" data-iconpos="right" data-theme="b" data-inline="true" class="t get_quote" data-i18n-target=".ui-btn-text" data-i18n="[title]tx.get_quote_info;[html]tx.get_quote"></a> <a href="results.html" data-transitions="slide" data-role="button" data-icon="arrow-r" data-iconpos="right" data-theme="b" data-inline="true" class="t get_quote" data-i18n-target=".ui-btn-text" data-i18n="[title]tx.get_quote_info;[html]tx.get_quote"></a>
</div> </div>
</div> </div>
......
<html> <!DOCTYPE html>
<head> <head>
<style type="text/css"> <style type="text/css">
/* header wrappers */ /* header wrappers */
...@@ -85,50 +85,57 @@ ...@@ -85,50 +85,57 @@
<script type="text/javascript" language="javascript"> <script type="text/javascript" language="javascript">
//<![CDATA[ //<![CDATA[
$(document).ready(function() { $(document).ready(function() {
// TODOS: make RenderJs.getSelfGadget() available on JQM events
var gadget = RenderJs.getSelfGadget(), var gadget = RenderJs.getSelfGadget(),
lang = $.fn.fauna.i18n_current_lang, lang = $.fn.fauna.i18n_current_lang,
switchIcon = function () {
// this should be the callback after create, which sets the icon
// however setting elem here cannot access the JQM enhanced elements
// although the functions is called after JQM is done enhancing...
// var elem = gadget.dom.find(".setIcon .ui-icon");
// if (elem.length > 0) {
// elem.removeClass()
// .addClass('ui-icon ui-shadow ui-icon-lang '+set_icon);
// }
},
// 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;
// modfiy elements, trigger translation
gadget.dom
.find(".setIcon").attr("href", '#'+gadget.dyn.href).end()
.find(".all_popups").attr("id", gadget.dyn.href).end()
.trigger("translate");
if (gadget.isEnhanced() === false) {
$(document).trigger("render_enhance", {"gadget": gadget.dom, "callback":switchIcon()});
gadget.setEnhanced(true);
}
// set interactions // NONO!
set_lang = function (language) { setTimeout(function () {
var set_icon, elem; elem = gadget.dom.find(".setIcon .ui-icon");
if (elem.length > 0) {
switch (language) { elem.removeClass()
case "de-DE": .addClass('ui-icon ui-shadow ui-icon-lang '+set_icon);
set_icon = "DE"; }
break; },50);
case "fr-FR":
set_icon = "FR";
break;
default:
set_icon = "EN";
break;
}; };
$.fn.fauna.i18n_current_lang = language;
// modfiy elements, trigger translation
gadget.dom
.find(".setIcon").attr("href", '#'+gadget.dyn.href).end()
.find(".all_popups").attr("id", gadget.dyn.href).end()
.trigger("translate");
if (gadget.isEnhanced() === false) {
$(document).trigger("render_enhance", {gadget: gadget.dom});
gadget.setEnhanced(true);
}
// if jqm has not rendered the elements inside the gadget
// this will do nothing wihout a timeout set
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);
}
},5);
};
// set page title // set page title
gadget.dom.find('h1').attr('data-i18n', gadget.dyn.title); gadget.dom.find('h1').attr('data-i18n', gadget.dyn.title);
...@@ -136,12 +143,15 @@ ...@@ -136,12 +143,15 @@
$(document).on('i18n_ready', function (e, data) { $(document).on('i18n_ready', function (e, data) {
set_lang(data.lang); set_lang(data.lang);
}); });
console.log("hello lang =" +lang);
// regular page setter // regular page setter
if (lang !== undefined) { if (lang !== undefined) {
set_lang($.fn.fauna.i18n_current_lang); set_lang($.fn.fauna.i18n_current_lang);
} }
console.log("binding to this=");
console.log( $(this) );
console.log("whats left");
console.log( $(this).filter(function() { return $(this).jqmData("i18n") !== true; }))
// switch language // switch language
$(this) $(this)
.filter(function() { return $(this).jqmData("i18n") !== true; }) .filter(function() { return $(this).jqmData("i18n") !== true; })
......
<html> <!DOCTYPE html>
<head> <head>
</head> </head>
<body> <body>
......
<html> <!DOCTYPE html>
<head> <head>
<style type="text/css">
/* simple menu */
.simple_menu {list-style: none; display: inline-block; padding: 0 !important;}
.simple_menu li {float: right; padding: 0 0.5em;}
section {text-align: center; }
section p {margin: 0.2em 0;}
</style>
</head> </head>
<body> <body>
...@@ -19,11 +25,16 @@ ...@@ -19,11 +25,16 @@
<script type="text/javascript" language="javascript"> <script type="text/javascript" language="javascript">
//<![CDATA[ //<![CDATA[
$(document).ready(function() { $(document).ready(function() {
var gadget = RenderJs.getSelfGadget(); var gadget = RenderJs.getSelfGadget();
// interaction listener
gadget.translate = function(){ gadget.translate = function(){
$.fn.util.lang(gadget.dom); $.fn.util.lang(gadget.dom);
}; };
// trigger enhancement
$(this).trigger("render_enhance", {gadget: gadget.dom});
}); });
//]]> //]]>
</script> </script>
......
This diff is collapsed.
<!DOCTYPE html>
<head>
</head>
<body>
<div id="results_list" data-gadget="../gadgets/results.html"></div>
<div id="results_ad" data-gadget="../gadgets/ad.html"></div>
<div class="rwd">
<div class="ui-rwd-a">
<div id="results_social" data-gadget="../gadgets/social.html"></div>
</div>
<div class="ui-rwd-b">
<div id="results_analysis" data-gadget="../gadgets/analysis.html"></div>
</div>
</div>
<div id="results_nav" data-gadget="../gadgets/navigation.html"></div>
<p class="mini t" data-i18n="gen.disclaimer"></p>
<!-- interactions -->
<div data-gadget="" class="main-interactor"
data-gadget-connection="[
{&quot;source&quot;: &quot;results_wrapper.route_translate&quot;, &quot;destination&quot;: &quot;results_list.translate&quot;}
, {&quot;source&quot;: &quot;results_wrapper.route_translate&quot;, &quot;destination&quot;: &quot;results_ad.translate&quot;}
, {&quot;source&quot;: &quot;results_wrapper.route_translate&quot;, &quot;destination&quot;: &quot;results_social.translate&quot;}
, {&quot;source&quot;: &quot;results_wrapper.route_translate&quot;, &quot;destination&quot;: &quot;results_analysis.translate&quot;}
, {&quot;source&quot;: &quot;results_wrapper.route_translate&quot;, &quot;destination&quot;: &quot;results_nav.translate&quot;}
]">
<script type="text/javascript" language="javascript">
//<![CDATA[
$(document).ready(function() {
var gadget = RenderJs.getSelfGadget();
gadget.translate = function(){
$.fn.util.lang(gadget.dom);
gadget.dom.trigger("route_translate");
};
});
//]]>
</script>
</body>
</html>
\ No newline at end of file
<html> <!DOCTYPE html>
<head> <head>
<style type="text/css">
.menu_social {text-align: center;}
.action_menu {display: inline-block;}
.follow_us {display: inline-block; margin: 0; padding: 0 .5em 0 0;}
</style>
</head> </head>
<body> <body>
<div data-role="fieldcontain" class="align_right"> <div class="menu_social">
<p class="super t float_left" data-i18n="soc.fw"></p> <div>
<div data-role="controlgroup" data-type="horizontal" data-theme="c" class="action_menu"> <p class="super t follow_us" data-i18n="soc.fw"></p>
<a href="#" id="follow_twitter" data-role="button" data-icon="tw" data-theme="c" class="t scale-a" data-i18n-target=".ui-btn-text" data-i18n="[title]soc.tw_fw;[html]soc.tw"></a> <div data-role="controlgroup" data-type="horizontal" data-theme="c" class="action_menu">
<a href="#" id="follow_facebook" data-role="button" data-icon="fb" data-theme="c" class="t scale-a" data-i18n-target=".ui-btn-text" data-i18n="[title]soc.fb_fw;[html]soc.fb"></a> <a href="#" id="follow_twitter" data-role="button" data-icon="tw" data-theme="c" class="t scale-a" data-i18n-target=".ui-btn-text" data-i18n="[title]soc.tw_fw;[html]soc.tw"></a>
<a href="#" id="follow_linkedin" data-role="button" data-icon="li" data-theme="c" class="t scale-a" data-i18n-target=".ui-btn-text" data-i18n="[title]soc.li_fw;[html]soc.li"></a> <a href="#" id="follow_facebook" data-role="button" data-icon="fb" data-theme="c" class="t scale-a" data-i18n-target=".ui-btn-text" data-i18n="[title]soc.fb_fw;[html]soc.fb"></a>
<a href="#" id="follow_linkedin" data-role="button" data-icon="li" data-theme="c" class="t scale-a" data-i18n-target=".ui-btn-text" data-i18n="[title]soc.li_fw;[html]soc.li"></a>
</div>
</div> </div>
</div> </div>
......
...@@ -28,10 +28,9 @@ define([], function () { ...@@ -28,10 +28,9 @@ define([], function () {
} }
}, },
// get screen size // screen size small/medium/large
framer: function () { framer: function () {
var self = this, framed; var self = this, framed;
if ($.mobile.media("screen and (max-width:480px)") || ($.mobile.browser.ie && $(window).width() < 480 )) { if ($.mobile.media("screen and (max-width:480px)") || ($.mobile.browser.ie && $(window).width() < 480 )) {
framed = "small"; framed = "small";
} else if ($.mobile.media("screen and (min-width:768px)") || ($.mobile.browser.ie && $(window).width() >= 768 )) { } else if ($.mobile.media("screen and (min-width:768px)") || ($.mobile.browser.ie && $(window).width() >= 768 )) {
...@@ -72,7 +71,7 @@ define([], function () { ...@@ -72,7 +71,7 @@ define([], function () {
} }
}, },
// i18next handler // languages i18n handler
lang : function (elem) { lang : function (elem) {
var translate = function (elem) { var translate = function (elem) {
elem.find('.t').i18n(); elem.find('.t').i18n();
...@@ -104,15 +103,7 @@ define([], function () { ...@@ -104,15 +103,7 @@ define([], function () {
}; };
// global page handling // global page handling
// the problem is, that renderjs will finish way too late for everything else $(document).on('pagecreate', 'div:jqmData(role="page")', function() {
// so we cannot listen to pagebeforecreate (add custom markup) and pagecreate
// add translations and then trigger(create) on pagebeforeshow, because
// renderjs will only be finished after pagebeforeshow.
// running translate and create after each other also does not work, because
// translations will not be done before trigger create is called and there is
// no global callback for the translation plugin, so some text always goes
// untranslated.
$(document).on('pageinit', 'div:jqmData(role="page")', function() {
var widgetsForThisRequest = [ var widgetsForThisRequest = [
"text!../gadgets/pageheader.html", "text!../gadgets/pageheader.html",
...@@ -121,7 +112,7 @@ define([], function () { ...@@ -121,7 +112,7 @@ define([], function () {
target = [$('head'),$('body')], target = [$('head'),$('body')],
page = $(this); page = $(this);
// <head> on first page // <head>/page footer on first page
if (fauna.anchor_page === undefined) { if (fauna.anchor_page === undefined) {
fauna.anchor_page = page.attr('id'); fauna.anchor_page = page.attr('id');
require( widgetsForThisRequest, require( widgetsForThisRequest,
...@@ -138,17 +129,17 @@ define([], function () { ...@@ -138,17 +129,17 @@ define([], function () {
} }
}); });
} }
// initialize renderjs // initialize renderjs
RenderJs.init(); RenderJs.init();
RenderJs.bindReady(function () { RenderJs.bindReady(function () {
var elem = $(this); var elem = $(this);
util.lang(elem); util.lang(elem);
// page.trigger('create');
}); });
}); });
// reset gadgets that are being removed // reset gadgets on pages that are being removed
$(document).on('pageremove', 'div:jqmData(role="page")', function() { $(document).on('pageremove', 'div:jqmData(role="page")', function() {
$(this).find("[data-gadget]").each(function(){ $(this).find("[data-gadget]").each(function(){
var gadget = RenderJs.GadgetIndex.getGadgetById($(this).attr('id')); var gadget = RenderJs.GadgetIndex.getGadgetById($(this).attr('id'));
...@@ -157,23 +148,34 @@ define([], function () { ...@@ -157,23 +148,34 @@ define([], function () {
}); });
}); });
// enhancing when everyone else is done // because render_enhance does not work on external page gadgets...
//$(document).on('pageshow', 'div:jqmData(external-page="true")', function() {
// $(this)
// .filter(function() { return $(this).jqmData("pcm") !== true; })
// .jqmData("pcm", true)
// .trigger('pagecreate');
//});
// 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 detected");
console.log(data.gadget);
data.gadget.trigger("create"); data.gadget.trigger("create");
// if (data.callback !== undefined) {
// data.callback();
// }
}); });
// init // 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
$(window).on('orientationchange resize', function(){ $(window).on('orientationchange resize', function(){
util.scale(); util.scale();
}); });
// initial resize depending on browser window // initial size trigger
$(window).trigger('resize'); $(window).trigger('resize');
// expose public utilities // expose public utilities
......
...@@ -10909,7 +10909,6 @@ $.mobile.document.bind( "pagecreate create", function( e ) { ...@@ -10909,7 +10909,6 @@ $.mobile.document.bind( "pagecreate create", function( e ) {
}, },
_create: function() { _create: function() {
var self = this, var self = this,
o = self.options, o = self.options,
$el = self.element, $el = self.element,
...@@ -11146,8 +11145,6 @@ $.mobile.document.bind( "pagecreate create", function( e ) { ...@@ -11146,8 +11145,6 @@ $.mobile.document.bind( "pagecreate create", function( e ) {
//auto self-init widgets //auto self-init widgets
$.mobile.document $.mobile.document
.bind( "pagecreate create", function( e ) { .bind( "pagecreate create", function( e ) {
console.log("event registered in fixed toolbars");
console.log(e);
// DEPRECATED in 1.1: support for data-fullscreen=true|false on the page element. // DEPRECATED in 1.1: support for data-fullscreen=true|false on the page element.
// This line ensures it still works, but we recommend moving the attribute to the toolbars themselves. // This line ensures it still works, but we recommend moving the attribute to the toolbars themselves.
if ( $( e.target ).jqmData( "fullscreen" ) ) { if ( $( e.target ).jqmData( "fullscreen" ) ) {
......
...@@ -111,9 +111,6 @@ var RenderJs = (function () { ...@@ -111,9 +111,6 @@ var RenderJs = (function () {
*/ */
// set current gadget as being loaded so gadget instance itself knows which gadget it is // set current gadget as being loaded so gadget instance itself knows which gadget it is
setSelfGadget(RenderJs.GadgetIndex.getGadgetById(gadget.attr("id"))); setSelfGadget(RenderJs.GadgetIndex.getGadgetById(gadget.attr("id")));
console.log("where is the gadget");
console.log(gadget)
console.log("should it be on the DOM");
gadget.append(data); gadget.append(data);
// reset as no longer current gadget // reset as no longer current gadget
setSelfGadget(undefined); setSelfGadget(undefined);
...@@ -213,8 +210,6 @@ var RenderJs = (function () { ...@@ -213,8 +210,6 @@ var RenderJs = (function () {
gadget_id = this.yourCustomData.gadget_id; gadget_id = this.yourCustomData.gadget_id;
RenderJs.GadgetIndex.getGadgetById(gadget_id). RenderJs.GadgetIndex.getGadgetById(gadget_id).
setReady(); setReady();
console.log("done loading");
console.log(data);
RenderJs.setGadgetAndRecurse(gadget, data); RenderJs.setGadgetAndRecurse(gadget, data);
RenderJs.checkAndTriggerReady(); RenderJs.checkAndTriggerReady();
RenderJs.updateGadgetData(gadget); RenderJs.updateGadgetData(gadget);
...@@ -475,8 +470,7 @@ var RenderJs = (function () { ...@@ -475,8 +470,7 @@ var RenderJs = (function () {
* Update enhancment status * Update enhancment status
*/ */
this.is_enhanced = value; this.is_enhanced = value;
};
}
this.remove = function () { this.remove = function () {
/* /*
......
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
"en": "English", "en": "English",
"fr": "Français" "fr": "Français"
}, },
"criteria": "Kriterien:",
"feature_name":"Auswahl", "feature_name":"Auswahl",
"feature_range":"Leistung", "feature_range":"Leistung",
"feature_info":"Info", "feature_info":"Info",
...@@ -41,7 +42,7 @@ ...@@ -41,7 +42,7 @@
"pages": { "pages": {
"titles": { "titles": {
"main": "Cloudquote", "main": "Cloudquote",
"results":"Ergebnisse" "results":"Suchergebnisse"
} }
}, },
"tx": { "tx": {
...@@ -50,7 +51,6 @@ ...@@ -50,7 +51,6 @@
"get_quote_info": "Angebote verschiedener Cloud-Anbieter vergleichen", "get_quote_info": "Angebote verschiedener Cloud-Anbieter vergleichen",
"start_over":"Start Over", "start_over":"Start Over",
"start_over_info":"Modify criteria and start a new calculation", "start_over_info":"Modify criteria and start a new calculation",
"search_results":"Search Results",
"ad_here":"Ihre Werbung könnte hier stehen" "ad_here":"Ihre Werbung könnte hier stehen"
}, },
"soc": { "soc": {
......
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
"en": "English", "en": "English",
"fr": "Français" "fr": "Français"
}, },
"criteria": "Criteria:",
"feature_name":"Feature", "feature_name":"Feature",
"feature_range":"Range", "feature_range":"Range",
"feature_info":"Info", "feature_info":"Info",
...@@ -38,7 +39,7 @@ ...@@ -38,7 +39,7 @@
"pages": { "pages": {
"titles": { "titles": {
"main": "Cloudquote", "main": "Cloudquote",
"results":"Results" "results":"Search Results"
} }
}, },
"tx": { "tx": {
...@@ -47,7 +48,6 @@ ...@@ -47,7 +48,6 @@
"get_quote_info": "Compare offers of different cloud hosting providers", "get_quote_info": "Compare offers of different cloud hosting providers",
"start_over":"Start Over", "start_over":"Start Over",
"start_over_info":"Modify criteria and start a new calculation", "start_over_info":"Modify criteria and start a new calculation",
"search_results":"Search Results",
"ad_here":"Advertise with us" "ad_here":"Advertise with us"
}, },
"soc": { "soc": {
......
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
"en": "Anglais", "en": "Anglais",
"fr": "Français" "fr": "Français"
}, },
"criteria": "Critères:",
"feature_name":"Caractéristique", "feature_name":"Caractéristique",
"feature_range":"Gamme", "feature_range":"Gamme",
"feature_info":"Infos", "feature_info":"Infos",
...@@ -38,7 +39,7 @@ ...@@ -38,7 +39,7 @@
"pages": { "pages": {
"titles": { "titles": {
"main": "Cloudquote", "main": "Cloudquote",
"results":"Résultats" "results":"Résultats de la recherche"
} }
}, },
"tx": { "tx": {
...@@ -47,7 +48,6 @@ ...@@ -47,7 +48,6 @@
"get_quote_info": "Comparez les offres des différents fournisseurs d'hébergement cloud", "get_quote_info": "Comparez les offres des différents fournisseurs d'hébergement cloud",
"start_over":"Recommencer", "start_over":"Recommencer",
"start_over_info":"Modifier les critères et lancer un nouveau calcul", "start_over_info":"Modifier les critères et lancer un nouveau calcul",
"search_results":"Résultats de la recherche",
"ad_here":"Annoncez avec nous" "ad_here":"Annoncez avec nous"
}, },
"soc": { "soc": {
......
...@@ -9,13 +9,12 @@ ...@@ -9,13 +9,12 @@
<div data-role="page" id="results" > <div data-role="page" id="results" >
<div id="results_header" data-gadget="../gadgets/header.html" data-gadget-property='{"dyn":{"title":"pages.titles.results","href":"popup_results_lang"}}'></div> <div id="results_header" data-gadget="../gadgets/header.html" data-gadget-property='{"dyn":{"title":"pages.titles.results","href":"popup_results_lang"}}'></div>
<div data-role="content"> <div data-role="content">
<!-- gadgets --> <div id="results_wrapper" data-gadget="../gadgets/results_wrapper.html"></div>
<div id="results_list" data-gadget="../gadgets/results.html"></div> <div data-gadget="" class="main-interactor"
<div id="results_ad" data-gadget="../gadgets/ad.html"></div> data-gadget-connection="[
<div id="results_social" data-gadget="../gadgets/social.html"></div> {&quot;source&quot;: &quot;results_header.translate&quot;, &quot;destination&quot;: &quot;results_wrapper.translate&quot;}
<div id="results_analysis" data-gadget="../gadgets/analysis.html"></div> ]">
<div id="results_nav" data-gadget="../gadgets/navigation.html"></div> </div>
<p class="mini t" data-i18n="gen.disclaimer"></p>
</div> </div>
</div> </div>
......
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