git-svn-id: https://msi/svn/firstRepo/WebClient/branches/NewRelease@80 0f545695-f87b-41b6-9a03-7f16563b5454

css/IlLievitario.css

@@ -262,3 +262,45 @@ html .ui-alt-icon .ui-radio-off:after {
 	height: 24px;
 	background-size: 24px 24px;
 }
+
+.alphabetContainer{
+	position: fixed;
+    top: 35px;
+    right: 2px;
+
+	width: 20px;
+    padding: 0;
+    margin: 18px 0 0;    
+    font-size: larger;
+    font-weight: 700;
+    z-index: 10;
+    background-color: rgba(199, 199, 199, 0.36);
+    border-radius: 4px;
+
+    overflow-x: hidden;
+    overflow-y: hidden;
+}
+
+.alphabetContainer_hover{
+	background-color: rgb(199, 199, 199)!important;
+}
+
+.alphabetContainer:hover{
+	background-color: rgb(199, 199, 199)!important;
+}
+
+.alphabetList{
+    list-style: none;    
+    padding: 0;
+    margin: 0px;
+    margin-left: 3px;
+    text-shadow: none;
+}
+
+.alphabetList li a{
+	color: white !important;
+}
+
+.alphabeticalListed{
+	margin-right: 6px!important;
+}

js/manifest.js

@@ -1,7 +1,7 @@
 var myManifest = {
     Debug: (window.location.port !== ""),
     Name: "Il Lievitario",
-    Version: "3.0.6.1",
+    Version: "3.0.7.2",
     Author: "Denis Ironi",
     Settings: {
         ShowStartMessage: true,

js/modules/category/category.js

@@ -8,6 +8,9 @@ define(['jquery', 'underscore', 'backbone', 'text!modules/category/categoryViewT
                 //initialize template
                 template: _.template(categoryViewTemplate),
                 itemtemplate: _.template(categoryItemTemplate, {variable: 'data'}),
+                events: {
+                    "click a[data-ordinal-divider]": "scrollDivider",
+                },
                 initialize: function (options) {
                     this.id = "CategoryView" + options.categoryId;
                     var self = this;
@@ -46,12 +49,42 @@ define(['jquery', 'underscore', 'backbone', 'text!modules/category/categoryViewT
                         $ul.listview("refresh");
                     }
 
+                    var alphaList = "";
+                    this.$el.find(".ui-li-divider").each(function(index, item){
+                        alphaList += "<li><a data-ordinal-divider='" + index + "'>" + $(item).text() + "</a></li>";
+                    });
+                    this.$el.find("#alphabetList").append(alphaList);
+
+                    this.$el.find("#alphabetConteiner").on("touchend", function(e){
+                        if(self.$el.find("#alphabetConteiner").hasClass("alphabetContainer_hover"))
+                            self.$el.find("#alphabetConteiner").removeClass("alphabetContainer_hover");
+                    });
+                    this.$el.find("#alphabetConteiner").on("touchmove", function(e){
+                        if(!self.$el.find("#alphabetConteiner").hasClass("alphabetContainer_hover"))
+                            self.$el.find("#alphabetConteiner").addClass("alphabetContainer_hover");
+                        e.preventDefault();
+                        var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
+                        // scroll to divider position
+                        var y= touch.pageY;
+
+                        self.$el.find("#alphabetList>*").each(function(){
+                            if ( ! ( y <= $( this ).offset().top || y >= $( this ).offset().top + $( this ).outerHeight() ) ) {
+                                $($( this ).children()[0]).trigger("click");
+                                return;
+                            }
+                        });
+                    });
+                    
                     $.mobile.loading('hide');
-
+                },
-
+                scrollDivider:function(e){
+                    var a = $(e.currentTarget);
+                    var header = $(this.$el.find("div[data-role='header']"));
+                    var divider = $(this.$el.find(".ui-li-divider")[a.attr("data-ordinal-divider")]);
+                    $('body').scrollTop(divider.position().top - header.height());
                 },
                 onShowed: function(){
-                    $('body').scrollTop(0);
+                    
                     setTimeout(function(){
                         $('img[data-src!=""]').each(function(index, item){
                             setTimeout(function(){

js/modules/category/categoryViewTemplate.html

@@ -1,5 +1,33 @@
 <div id="categoryListContent" data-role="content">
 	<h1>Indice <%= categoryName %></h1>
-    <ul id="allRicette" data-role="listview" data-autodividers="true" data-alpha="true" data-inset="true">    	
+	<div id="alphabetConteiner" data-role="none" class="alphabetContainer">
+		<ul id="alphabetList" class="alphabetList">
+			<!-- <li><a data-ordinal-divider='1'>A</a></li>
+			<li><a data-ordinal-divider='2'>B</a></li>
+			<li><a data-ordinal-divider='3'>C</a></li>
+			<li><a data-ordinal-divider='4'>D</a></li>
+			<li><a data-ordinal-divider='5'>E</a></li>
+			<li><a data-ordinal-divider='6'>F</a></li>
+			<li><a data-ordinal-divider='7'>G</a></li>
+			<li><a data-ordinal-divider='8'>H</a></li>
+			<li><a data-ordinal-divider='9'>I</a></li>
+			<li><a data-ordinal-divider='10'>J</a></li>
+			<li><a data-ordinal-divider='11'>K</a></li>
+			<li><a data-ordinal-divider='12'>L</a></li>
+			<li><a data-ordinal-divider='13'>M</a></li>
+			<li><a data-ordinal-divider='14'>N</a></li>
+			<li><a data-ordinal-divider='15'>O</a></li>
+			<li><a data-ordinal-divider='16'>P</a></li>
+			<li><a data-ordinal-divider='17'>Q</a></li>
+			<li><a data-ordinal-divider='18'>R</a></li>
+			<li><a data-ordinal-divider='19'>S</a></li>
+			<li><a data-ordinal-divider='20'>T</a></li>
+			<li><a data-ordinal-divider='21'>U</a></li>
+			<li><a data-ordinal-divider='22'>V</a></li>
+			<li><a data-ordinal-divider='23'>W</a></li>
+			<li><a data-ordinal-divider='24'>Z</a></li> -->
+		</ul>
+	</div>
+    <ul id="allRicette" class="alphabeticalListed" data-role="listview" data-autodividers="true" data-alpha="true" data-inset="true">    	
     </ul>
 </div>