dyndoc-ruby-core 1.0.0

data/dyndoc/Tools/Web/Html.dyn

@@ -0,0 +1,286 @@
+{#def]require4html[#,]libs[]
+[#rb<]
+	res=""
+	#{=libs}.split(",").each{|lib| #
+		res+={#<]{#load]:{lib}[#}[#<}+"\n"
+	}
+	res=res.strip.split("\n").uniq.join("\n") #remove duplicated lines!
+    #puts "require4html";p #{=libs};p res
+[#>][:{res}]
+[#}
+
+{#meth]new.HtmlLoader[#,]code[][#=].code[#{code}][#}
+
+{#meth]load.HtmlLoader[#>]#{.code}[#}
+
+
+{#def]require4js[#,]libs[]
+[#>]<script type="text/javascript">
+[#rb<]
+    res=""
+    #{=libs}.split(",").uniq.each{|lib| #
+        res+={#<]{#load]:{lib}[#}[#<}+"\n"
+    }
+[#>][:{res}<\n></script>]
+[#}
+
+{#meth]new.JsLoader[#,]code[][#=].code[#{code}][#}
+
+{#meth]load.JsLoader[#>]#{.code}[#}
+
+
+## General method for Html
+
+{#def]defaultFormat[#rb>]defaultFmtContainer[#}
+
+To test the different format! (see method format for TemplateManager in parse_do)
+{#def]testFormat[#rb<]p format[#}
+
+{#def]uv[#,]code[][#,]key[][#,]file[][#,]syntax[dyndoc][#,]render[amy][#,]lines[true]
+[#%]in a html blck to be protected!
+[#rb<]#require "uv"
+syntax,render=#{=syntax}.strip.downcase,#{=render}.strip
+## Dyndoc.warn "syntax",syntax
+#if File.exists? File.join(ENV["HOME"],"dyndoc","share","uv")
+#require File.join(ENV["HOME"],"dyndoc","share","uv","uv")
+require 'dyndoc/common/uv'
+syntax=File.join(Uv.syntax_path,syntax+".syntax")
+#end
+uv_code = (#{=file}.empty? ? nil : File.read(#{=file}))
+uv_code=((!(#{=code}.empty?) or #{=key}.empty?) ? #{=code} : CqlsDoc::Utils.dyndoc_raw_text(#{=key})).strip unless uv_code
+#Dyndoc.warn "CODE",uv_code,#{lines}
+#Uv.parse(uv_code, "xhtml", syntax , #{lines}, render,true)
+#OLD: uv_res=CqlsDoc::AS_IS+Uv.parse(uv_code, "xhtml", #{=syntax}.downcase, true, #{=render})+CqlsDoc::AS_IS
+#Dyndoc.warn "titi"
+uv_res=Uv.parse(uv_code, "xhtml", syntax , #{lines}, render,false)
+uv_res = CqlsDoc::AS_IS+uv_res+CqlsDoc::AS_IS unless CqlsDoc::V3::TemplateManager.interactive
+#Dyndoc.warn "titi"
+#Dyndoc.warn "uv_res:", uv_res
+[#>][:{uv_res}<\n>]
+[#=]::header.css_uv?[amy]
+[#=]::header.css_uv[{#rb>](#{=header.css_uv}.split(",")+[#{=render}]).join(",")[#}]
+[#def}
+
+{#def]rverbUV[#,]code[][#,]render[amy][#,]lines[false]
+[#?]CqlsDoc::V3::TemplateManager.interactive
+[#>]{#rverb]#{code}[#mode]raw[#rverb}
+[#?]else
+[#>]{#uv]{#rverb]#{code}[#mode]raw[#rverb}
+[#syntax]r[#lines]#{lines}[#}
+[#def}
+
+{#meth]new.MenuSwitcher[#,].choices[][#,]first[js]
+[#>]{#case]#{first}
+[#when]init[#>]{#init]self[#}
+[#when]js[#>]{#js]self[#}
+[#case}
+[#}
+
+{#meth]init.MenuSwitcher[#,]choice[][#rb>]
+choices=#{=.choices}.split(",")
+[#>]<div choice=":{lang[i]}"></div>
+[#meth}
+
+
+{#meth]js.MenuSwitcher[#>]
+<script type="text/javascript">
+function update_#{.ObjectName}_Switcher(choice) {
+    var choices="#{.choices}".split(",");
+        for(i in  choices) {
+        //alert("lang="+langs[l]);
+                if(choices[i]==choice) { 
+                        $("[choice="+choices[i]+"]").show();
+                } else {
+                        $("[choice="+choices[i]+"]").hide();
+                }       
+        }
+};
+</script>
+[#meth}
+
+
+{#meth]new.LangSwitcher[#,].lang[fr,en][#,]first[init,js,header]
+[#=]::document.header.lang[]
+[#>]{#case]#{first}
+[#when]init[#>]{#init]self[#}
+[#when]js[#>]{#js]self[#}
+[#when]header[#=]::document.header.lang[{#init]self[#}<\n>{#js]self[#}]
+[#case}
+[#}
+
+{#meth]init.LangSwitcher[#rb>]
+lang=#{=.lang}.split(",")
+lang2=lang.reverse
+[0,1].each {|i| #
+    {#>]<div lang=":{lang[i]}"><img alt=":{lang2[i]}" src="#{document.rsrcSrvUrl?}/images/common/:{lang2[i]}.gif" langSwitcher=":{lang2[i]}"/></div>[#>} 
+}
+[#meth}
+
+
+{#meth]js.LangSwitcher[#>]
+<script type="text/javascript">
+function updateLanguage(lang) {
+    if(lang==null) {
+        lang="fr";
+    }
+    var langs="#{.lang}".split(",");
+        for(l in  langs) {
+        //alert("lang="+langs[l]);
+                if(langs[l]==lang) { 
+                        $("[lang="+langs[l]+"]").show();
+                } else {
+                        $("[lang="+langs[l]+"]").hide();
+                }       
+        }
+    $.cookie("langSwitcher",lang)
+};
+$("img[langSwitcher]").bind("click", function() {
+    var lang=$(this).attr("langSwitcher");
+    updateLanguage(lang);
+});
+$(document).ready(function() {
+    updateLanguage($.cookie("langSwitcher"));
+});
+</script>
+[#meth}
+
+{#def]fr[#,]code[][#,]en[][#,]sp[][#>]
+[#?]#{+?code}[#>][<div lang="fr">#{code}</div>]
+[#?]#{+?en}[#>][<div lang="en">#{en}</div>]
+[#?]#{+?sp}[#>][<div lang="sp">#{sp}</div>]
+[#def}
+
+{#def]en[#,]code[][#,]fr[][#,]sp[][#>]
+[#?]#{+?code}[#>][<div lang="en">#{code}</div>]
+[#?]#{+?fr}[#>][<div lang="fr">#{fr}</div>]
+[#?]#{+?sp}[#>][<div lang="sp">#{sp}</div>]
+[#def}
+
+{#new]JQuerySwitchable[#of]JsLoader[#code]
+function showSwitched(type,key) { 
+    $('.switchable[id="'+type+'"][switch="'+key+'"]').show();
+    $('.switchable[id="'+type+'"][switch!="'+key+'"]').hide();
+};
+
+function activateSwitchedLink(type,key) { 
+    $('a[id="'+type+'"][switch="'+key+'"]').toggleClass("active",true);
+    $('a[id="'+type+'"][switch!="'+key+'"]').toggleClass("active",false);
+
+};
+
+function selectSwitchedPage(type,key) {
+    if(key=="lastPage") {
+        key=$.cookie(type);
+    } else {
+        $.cookie(type,key);
+    }
+    showSwitched(type,key);
+    activateSwitchedLink(type,key);
+};
+[#}
+
+{#newBlck]mainMenu[#aggregate]title,link,page
+[#blck]:pre[#rb<]@vars[blckName[-1]]={:mainMenu=>[]}
+[#blck]active[#do_code]@vars[blckName[-1]][:active]=blckMngr.parse.strip.to_i
+[#blck]title[#do_code]@vars[blckName[-1]][:mainMenu] << {:title => blckMngr.parse.strip, :link => ""};
+[#blck]link[#do_code]@vars[blckName[-1]][:mainMenu][-1][:link]=blckMngr.parse.strip
+[#blck]page[#do_code]@vars[blckName[-1]][:mainMenu][-1][:page]=blckMngr.parse
+[#blck]:post
+[#=]mainMenu[]
+[#=]mainPages[]
+[#rb<]mainMenu=@vars[blckName[-1]][:mainMenu]
+    Dyndoc.warn "blckName[-1]",@vars[blckName[-1]]
+	mainMenu.each_with_index do |menu,i| #
+	#Dyndoc.warn "INSIDE",menu[:title];p i #TO DEBUG: WHY DO I NEED [>] after {>]
+	{#<][#+]mainMenu[#{menuItem.pre?}<a id="mainPage" switch=":{menu[:link]}" {#if]!menu[:page][#>]href=":{menu[:link]}"[#}{#if]i==@vars[blckName[-1]][:active][#>] class="active"[#if} {#if]menu[:page][#>]onclick='selectSwitchedPage("mainPage",":{menu[:link]}");'[#}>:{menu[:title]}<span class="desc"></span> </a> #{menuItem.post?} <\n>][#<}
+
+    if menu[:page]
+    ##Dyndoc.warn "PAGE ",menu[:link]
+    ##Dyndoc.warn "menu-page",menu[:page]
+        {#<][#+]mainPages[<div class="switchable" id="mainPage" switch=":{menu[:link]}"><\n>:{menu[:page]}<\n></div>][#<}
+    end
+end
+[#rb<]Dyndoc.warn "AAAA: mainMenu" "mainMenu",#{=mainMenu};Dyndoc.warn "ZZZZZ: mainPages",#{=mainPages}
+[#=]::document.mainMenu[<div id="mainMenu"> 
+<span class="lastMenuItem"></span><\n>#{mainMenu}<\n></div>]
+[#=]::document.mainPages[<div id="mainPages"><\n>#{mainPages}<\n></div>]
+[#}
+
+{#newBlck]subMenuPage[#aggregate]title,link,subpage
+[#blck]:pre[#=][#rb<]@vars[blckName[-1]]={:subMenu=>[]}
+[#blck]active[#do_code]@vars[blckName[-1]][:active]=blckMngr.parse.strip.to_i
+[#blck]title[#do_code]@vars[blckName[-1]][:subMenu] << {:title => blckMngr.parse.strip, :link => ""};
+[#blck]link[#do_code]@vars[blckName[-1]][:subMenu][-1][:link]=blckMngr.parse.strip
+[#blck]subpage[#do_code]@vars[blckName[-1]][:subMenu][-1][:subpage]=blckMngr.parse
+[#blck]:post
+[#=]subMenu[]
+[#=]subPages[]
+[#rb<]subMenu=@vars[blckName[-1]][:subMenu] 
+    Dyndoc.warn "blckName[-1]", @vars[blckName[-1]]
+    subMenu.each_with_index do |menu,i| #
+    {#<][#+]subMenu[<li class="here"><a id="subPage" switch=":{menu[:link]}" {#if]!menu[:subpage][#>]href=":{menu[:link]}"[#}{#if]i==@vars[blckName[-1]][:active][#>] class="select"[#if} {#if]menu[:subpage][#>]onclick='selectSwitchedPage("subPage",":{menu[:link]}");'[#}>:{menu[:title]}</a></li> <\n>][#<}
+
+    if menu[:subpage]
+    ##puts "SUBPAGE "+menu[:link]
+    ##p menu[:subpage]
+        {#<][#+]subPages[<div class="switchable" id="subPage" switch=":{menu[:link]}"><\n>:{menu[:subpage]}<\n></div>][#<}
+    end
+end
+[#rb<]Dyndoc.warn "subMenu",#{=subMenu}
+[#>]<div id="contentLeft">
+<ul class="subMenu">
+#{subMenu}
+</ul>
+</div>
+<div id="contentRight">
+<div id="subPages">
+#{subPages}
+</div>
+</div>
+[#}
+
+
+{#newBlck]multiPages4WebSite[#aggregate]menu,link,page
+[#blck]:pre[#=][#rb<]@vars[blckName[-1]]={:mainPages=>[]}
+[#blck]menu[#do_code]@vars[blckName[-1]][:mainMenu]=blckMngr.parse
+[#blck]link[#do_code]@vars[blckName[-1]][:mainPages] << {:link => blckMngr.parse.strip};
+[#blck]page[#do_code]@vars[blckName[-1]][:mainPages][-1][:page]=blckMngr.parse
+[#blck]:post
+[#=]mainPages[]
+[#=]mainMenu[]
+[#rb<]
+mainMenu=@vars[blckName[-1]][:mainMenu]
+##puts "ruby mainMenu";p mainMenu
+{#<][#+]mainMenu[:{mainMenu}][#<}
+mainPages=@vars[blckName[-1]][:mainPages]##;p @vars[blckName[-1]]
+mainPages.each_with_index do |page,i| #
+    if page[:page]
+        ##Dyndoc.warn "PAGE "+page[:link],page[:page]
+            {#<][#+]mainPages[<div class="switchable" id="mainPage" switch=":{page[:link]}"><\n>:{page[:page]}<\n></div>][#<}
+    end
+end
+[#rb<]Dyndoc.warn "mainPages",#{=mainPages}
+Dyndoc.warn "mainMenu",#{=mainMenu}
+[#=]::document.mainMenu[#{mainMenu}]
+[#=]::document.mainPages[<div id="mainPages"><\n>#{mainPages}<\n></div>]
+[#newBlck}
+
+{#def]mainPages4WebSite[#>]#{document.mainPages}[#}
+
+{#def]activePage4WebSite[#,]link[lastPage][#,]default[][#>]
+<script>
+$(document).ready(function() {
+    var link="#{link}";
+    if(link=="lastPage" && ($.cookie("mainPage")==null)) {
+        link="#{default}";
+    }
+    selectSwitchedPage("mainPage", link);
+})
+</script>
+[#}
+
+{#def]linkPage4WebSite[#,]link[][#,]fr[][#,]en[]
+    [#?]#{0?en}[#=]en[#{fr}][#?]end
+    [#>]
+    [<a id="mainPage" switch="#{link}"  onclick='selectSwitchedPage("mainPage","#{link}");'>{#fr]#{fr}[#en]#{en}[#}</a>]
+[#}

data/dyndoc/Tools/Web/Html/JQuery.dyn

@@ -0,0 +1,123 @@
+{#new]JQueryAll[#of]HtmlLoader[#code]
+[<script type="text/javascript" src="/javascripts/jquery-1.6.2.min.js"></script>
+   <script type="text/javascript" src="/javascripts/jquery-ui-1.8.16.custom.min.js"></script>
+   <script type="text/javascript" src="/javascripts/jquery.editinplace.js"></script>
+   <script type="text/javascript" src="/javascripts/jquery.taconite.js"></script>
+   <script type="text/javascript" src="/javascripts/jquery.easing.js"></script>
+   <script type="text/javascript" src="/javascripts/jquery.jkey.js"></script>
+   <script type="text/javascript" src="/javascripts/jquery.easyui.min.js"></script>
+   <script type="text/javascript" src="/javascripts/jquery.cookie.js"></script>
+   <link rel="stylesheet" href="/stylesheets/jqueryFileTree.css" type="text/css"/>
+  <script type="text/javascript" src="/javascripts/jqueryFileTree.js"></script>
+  <script type="text/javascript" src="/javascripts/jquery-tools-min-1.2.6.js"></script>
+  {#hide]<script src="http://cdn.jquerytools.org/1.2.6/all/jquery.tools.min.js"></script>[#hide}
+  <script src="/tools/DataTables/js/jquery.dataTables.min.js"></script>]
+[#}
+
+{#new]JQuerySag6[#of]HtmlLoader[#code]
+[<script type="text/javascript" src="http://sagag6.upmf-grenoble.fr/javascripts/jquery-1.6.2.min.js"></script>
+<script type="text/javascript" src="http://sagag6.upmf-grenoble.fr/javascripts/jquery.cookie.js"></script>]
+[#}
+
+{#new]JQuery16[#of]HtmlLoader[#code]
+[<script type="text/javascript" src="/javascripts/jquery-1.6.2.min.js"></script>]
+[#}
+
+{#new]JQueryUI[#of]HtmlLoader[#code]
+[<script type="text/javascript" src="/javascripts/jquery-ui-1.8.16.custom.min.js"></script>]
+[#}
+
+
+{#new]JQueryEditInPlace[#of]HtmlLoader[#code]
+[<script type="text/javascript" src="/javascripts/jquery.editinplace.js"></script>]
+[#}
+
+{#new]JQueryTaconite[#of]HtmlLoader[#code]
+[<script type="text/javascript" src="/javascripts/jquery.taconite.js"></script>]
+[#}
+
+{#new]JQueryEasing[#of]HtmlLoader[#code]
+[<script type="text/javascript" src="/javascripts/jquery.easing.js"></script>]
+[#}
+
+{#new]JQueryJKey[#of]HtmlLoader[#code]
+[<script type="text/javascript" src="/javascripts/jquery.jkey.js"></script>]
+[#}
+
+{#new]JQueryEasyUI[#of]HtmlLoader[#code]
+[<script type="text/javascript" src="/javascripts/jquery.easyui.min.js"></script>]
+[#}
+
+{#new]JQueryFileTree[#of]HtmlLoader[#code]
+[<link rel="stylesheet" href="/stylesheets/jqueryFileTree.css" type="text/css"/>
+  <script type="text/javascript" src="/javascripts/jqueryFileTree.js"></script>]
+[#}
+
+{#new]JQueryTools[#of]HtmlLoader[#code] [<script type="text/javascript" src="/javascripts/jquery-tools-min-1.2.6.js"></script>
+{#hide]<script src="http://cdn.jquerytools.org/1.2.6/all/jquery.tools.min.js"></script>[#hide}
+]
+[#}
+
+{#new]JQueryCookie[#of]HtmlLoader[#code] [<script src="/javascripts/jquery.cookie.js"></script>]
+[#}
+
+{#new]JQueryDataTable[#of]HtmlLoader[#code] [<script src="/tools/DataTables/js/jquery.dataTables.min.js"></script>
+<script src="/tools/DataTables/extras/ColVis/js/ColVis.min.js"></script>
+<script src="/javascripts/jquery.form.js"></script>
+]
+[#}
+
+{#new]JQueryDataTableEditable[#of]HtmlLoader[#code] [<script src="/tools/DataTables/editable/js/jquery.jeditable.js"></script>
+<script src="/tools/DataTables/editable/js/jquery.dataTables.editable.js"></script>
+]
+[#}
+
+
+### For SAGAG6 ###
+
+{#new]Sag6JQueryUI[#of]HtmlLoader[#code]
+[<script type="text/javascript" src="http://sagag6.upmf-grenoble.fr/javascripts/jquery-ui-1.8.16.custom.min.js"></script>]
+[#}
+
+
+{#new]Sag6JQueryEditInPlace[#of]HtmlLoader[#code]
+[<script type="text/javascript" src="http://sagag6.upmf-grenoble.fr/javascripts/jquery.editinplace.js"></script>]
+[#}
+
+{#new]Sag6JQueryTaconite[#of]HtmlLoader[#code]
+[<script type="text/javascript" src="http://sagag6.upmf-grenoble.fr/javascripts/jquery.taconite.js"></script>]
+[#}
+
+{#new]Sag6JQueryEasing[#of]HtmlLoader[#code]
+[<script type="text/javascript" src="http://sagag6.upmf-grenoble.fr/javascripts/jquery.easing.js"></script>]
+[#}
+
+{#new]Sag6JQueryJKey[#of]HtmlLoader[#code]
+[<script type="text/javascript" src="http://sagag6.upmf-grenoble.fr/javascripts/jquery.jkey.js"></script>]
+[#}
+
+{#new]Sag6JQueryEasyUI[#of]HtmlLoader[#code]
+[<script type="text/javascript" src="http://sagag6.upmf-grenoble.fr/javascripts/jquery.easyui.min.js"></script>]
+[#}
+
+{#new]Sag6JQueryFileTree[#of]HtmlLoader[#code]
+[<link rel="stylesheet" href="http://sagag6.upmf-grenoble.fr/stylesheets/jqueryFileTree.css" type="text/css"/>
+  <script type="text/javascript" src="http://sagag6.upmf-grenoble.fr/javascripts/jqueryFileTree.js"></script>]
+[#}
+
+{#new]Sag6JQueryTools[#of]HtmlLoader[#code] [<script src="http://sagag6.upmf-grenoble.fr/javascripts/jquery-tools-min.js"></script>]
+[#}
+
+{#new]Sag6JQueryCookie[#of]HtmlLoader[#code] [<script src="http://sagag6.upmf-grenoble.fr/javascripts/jquery.cookie.js"></script>]
+[#}
+
+{#new]Sag6JQueryDataTable[#of]HtmlLoader[#code] [<script src="http://sagag6.upmf-grenoble.fr/tools/DataTables/js/jquery.dataTables.min.js"></script>
+<script src="http://sagag6.upmf-grenoble.fr/tools/DataTables/extras/ColVis/js/ColVis.min.js"></script>
+<script src="http://sagag6.upmf-grenoble.fr/javascripts/jquery.form.js"></script>
+]
+[#}
+
+{#new]Sag6JQueryDataTableEditable[#of]HtmlLoader[#code] [<script src="http://sagag6.upmf-grenoble.fr/tools/DataTables/editable/js/jquery.jeditable.js"></script>
+<script src="http://sagag6.upmf-grenoble.fr/tools/DataTables/editable/js/jquery.dataTables.editable.js"></script>
+]
+[#}

data/dyndoc/Tools/Web/Html/Styles.dyn

@@ -0,0 +1,4 @@
+{#new]CssCqls[#of]HtmlLoader[#code]
+[<link href="/stylesheets/reflection/screen_cqls.css" media="screen" rel="Stylesheet" type="text/css" />
+ <link href="/stylesheets/common/style.css" media="screen" rel="Stylesheet" type="text/css" />]
+[#}

data/dyndoc/Tools/Web/JQueryTools.dyn

@@ -0,0 +1,87 @@
+{#new]JQueryToolsNavStyle[#of]HtmlLoader[#code]
+[<link rel="stylesheet" href="/tools/jqueryTools/css/scrollable-navigator.css" type="text/css"/>
+<link rel="stylesheet" href="/stylesheets/common/jqueryTools/nav_class.css" type="text/css"/>]
+
+[#}
+
+{#def]navigatorNumber[#,]number[2][#rb<]$navigatorNumber=#{number}[#def}
+
+{#newBlck]navigator[#aggregate]title,page
+[#blck]:pre[#rb<]$navPages=[];$navPageActive=[0,0]; #p $navPages
+[#blck]title[#do_code]$navPages << {:title => blckMngr.parse, :pages => []}
+[#blck]page[#do_code]$navPages[-1][:pages] << blckMngr.parse
+[#blck]active[#do_code]$navPageActive=[$navPages.length-1,$navPages[-1][:pages].length-1]
+puts "ACTIVE";p $navPageActive
+[#blck]:post[#rb<]#puts "navPages";p $navPages
+[#>]
+<!-- main navigator -->
+<ul class="main_navi">
+[#rb>]$navPages.each_with_index do |topic,i| #
+	#puts "INSIDE";p topic[:title];p i #TO DEBUG: WHY DO I NEED [>] after {>]
+	{#>][#>]<li[#?]i==$navPageActive[0][#>] class="active"[#?]end[#>]>
+    :{topic[:title]}
+  	</li>
+	[#>}
+end
+{#>][#>]</ul><\n>[#}
+{#>][#>] <!-- root element for the main scrollable -->
+ <div class="main">
+  <!-- root element for pages -->
+  <div id="pages">
+
+[#>}
+$navPages.each do |topic| #
+	{#>][#>] <div class="page">
+      <!-- sub navigator -->
+      <div class="navi"></div>
+      <!-- inner scrollable -->
+      <div class="scrollable">
+    <!-- root element for scrollable items -->
+        <div class="items">
+        <!-- items  -->
+     [#>}
+	topic[:pages].each do |page| #
+		{#>][#>]<div class="item"><\n>
+		:{page}
+		</div><\n>[#>}
+	end
+	{#>][#>]</div></div></div><\n>[#}
+end
+{#>][#>]</div></div>
+[#?]$navigatorNumber[#rb<]
+$navigatorNumber -= 1
+$navigatorNumber=nil if $navigatorNumber==0
+[#?]$navigatorNumber.nil?[#>]  <!-- navigatorNumber :{$navigatorNumber.nil? ? "no" : $navigatorNumber} -->
+<script>
+  $(document).ready(function() {
+        // main vertical scroll
+      $(".main").scrollable({
+
+        // basic settings
+        vertical: true,
+
+        circular: true,
+
+        // up/down keys will always control this scrollable
+        keyboard: 'static',
+
+        // assign left/right keys to the actively viewed scrollable
+        onSeek: function(event, i) {
+          horizontal.eq(i).data("scrollable").focus();
+        }
+
+        // main navigator
+      }).navigator(".main_navi");
+
+      // horizontal scrollables. each one is circular and has its own navigator instance
+      var horizontal = $(".scrollable").scrollable({ circular: true,keyboard: 'static',}).navigator(".navi");
+
+
+      // when page loads setup keyboard focus on the first horzontal scrollable
+      horizontal.eq(:{$navPageActive[0]}).data("scrollable").seekTo(:{$navPageActive[1]});
+      $(".main").data("scrollable").seekTo(:{$navPageActive[0]});
+
+    });
+</script>
+[#>}
+[#}