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
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 11509 additions and 308 deletions
gadgets/header.html
View file @ f5f224c7
......@@ -4,62 +4,7 @@
/* header wrappers */
.ui-header { height: 41px;}
.headWrapLeft, .headWrapRight { height: inherit; margin-top: -4px; }
/* 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;}
.headWrapLeft .ui-btn, .headWrapRight .ui-btn {margin: 0;}
</style>
</head>
......@@ -70,106 +15,58 @@
</div>
<h1 class="ui-title t" role="heading" data-i18n="" aria-level="1"></h1>
<div class="headWrapRight ui-btn-right">
<a data-role="button" class="setIcon" href="" data-rel="popup" data-position-to="origin" data-icon="lang" data-iconpos="notext">Languages</a>
<div data-role="popup" id="" class="all_popups">
<ul data-role="listview" data-inset="true" data-divider-theme="f">
<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>
<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 id="translator" data-gadget="../gadgets/translate.html"></div>
</div>
<div data-gadget="" class="main-interactor" data-gadget-connection="[
{&quot;source&quot;: &quot;translator.translate&quot;, &quot;destination&quot;: &quot;index_wrapper.translate&quot;}
]">
</div>
</div>
<script type="text/javascript" language="javascript">
//<![CDATA[
$(document).ready(function() {
var gadget = RenderJs.getSelfGadget(),
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;
};
var gadget = RenderJs.getSelfGadget(), i,
recursive_gadgets = gadget.dom.find("[data-gadget]").not(".main-interactor"),
len = recursive_gadgets.length;
recursive_gadgets.each(function (i) {
var passJSON = gadget[$(this).attr('id')],
string, new_string,
current_id = $(this).attr('id'),
new_id = current_id+"__"+gadget.dom.attr('id');
// pass on JSON if present BEFORE modifying gadget-id
if (passJSON !== undefined) {
$(this).attr('data-gadget-property','{"self":'+JSON.stringify(passJSON)+'}');
}
$.fn.fauna.i18n_current_lang = language;
// dynamic gadget-id
$(this).attr('id', new_id);
// 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");
// update interactions
string = gadget.dom.find(".main-interactor").attr("data-gadget-connection");
new_string = string.replace(current_id,new_id);
gadget.dom.find(".main-interactor").attr("data-gadget-connection",new_string);
});
if (gadget.isEnhanced() === false) {
$(document).trigger("render_enhance", {"gadget": gadget.dom, "callback":switchIcon()});
gadget.setEnhanced(true);
// modify gadget
if (gadget.self !== undefined) {
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) );
console.log("whats left");
console.log( $(this).filter(function() { return $(this).jqmData("i18n") !== true; }))
// switch language
$(this)
.filter(function() { return $(this).jqmData("i18n") !== true; })
.jqmData('i18n',true)
.on('click', '.change_language', function(e) {
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());
});
});
});
// interactions
gadget.translate = function(){
$.fn.util.lang(gadget.dom);
};
$(document).ready(function() {
// trigger enhancement
$(this).trigger("render_enhance", {gadget: gadget.dom});
});
//]]>
</script>
......
gadgets/results.html
View file @ f5f224c7
This diff is collapsed.
js/controller.js
View file @ f5f224c7
......@@ -14,20 +14,6 @@ define([], function () {
util = {} // utility functions (PUBLIC)
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
framer: function () {
var self = this, framed;
......@@ -158,30 +144,29 @@ define([], function () {
// enhancing gadgets when everyone else is done
$(document).on('render_enhance', function(e, data) {
console.log("render_enhance registered");
console.log("trying to call trigger create");
data.gadget.trigger("create");
// if (data.callback !== undefined) {
// data.callback();
// }
});
// ===========================================================
// init application
if ($.mobile.autoInitializePage === false){
$.mobile.initializePage();
$('html').removeClass('render').find('body').removeClass('splash');
}
// resize application
// responsive element handling & initial trigger
$(window).on('orientationchange resize', function(){
util.scale();
});
}).trigger('resize');
// initial size trigger
$(window).trigger('resize');
// expose public utilities
// expose public elements
$.fn.util = util;
// expose public settings
$.fn.fauna = fauna;
});
};
......
js/overrides.js
View file @ f5f224c7
......@@ -12,7 +12,7 @@ vars : true, white : true */
// [JQM] - prevent confilicts with requireJS docReady by triggering JQM manually
$.mobile.autoInitializePage = false;
// [Multiview] - disable pushState to ensure URLs will be correct
// [JQM] - disable pushState to ensure URLs will be correct
$.mobile.pushStateEnabled = false;
// [Google Analytics] - since we are tracking on pageshow the pageshow
......
js/plugins/jqplot/jquery.jqplot.js
View file @ f5f224c7
This diff is collapsed.
js/plugins/renderjs/renderjs.js
View file @ f5f224c7
......@@ -747,6 +747,13 @@ var RenderJs = (function () {
};
gadget_id = gadget_dom.attr("id");
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);
$.each(gadget_connection_list, function (key, value) {
var source, source_gadget_id, source_method_id,
......
p/index.html
View file @ f5f224c7
......@@ -7,14 +7,33 @@
</head>
<body class="splash">
<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 id="index_wrapper" data-gadget="../gadgets/index_wrapper.html"></div>
<div data-gadget="" class="main-interactor"
data-gadget-connection="[
{&quot;source&quot;: &quot;index_header.translate&quot;, &quot;destination&quot;: &quot;index_wrapper.translate&quot;}
]">
</div>
</div>
</div>
</div>
</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