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

css/base.style.css

@@ -236,10 +236,9 @@ label.error {
 
 .thmbImg
 {
-    border: 2px solid #cdcdcd!important;
+    border-right: 2px solid #cdcdcd!important;
-    border-radius: 15px;
+    width: 80px;
-    width: 76px;
+    height: 100%;
-    height: 76px;
 }
 
 .emptyItemList
@@ -258,6 +257,16 @@ label.error {
 
 .imageborder {
     border: 2px solid #3b5998!important;
-    border-radius: 15px;
+    border-radius: 7px;
     width: 100%;
 }
+
+.imageborder-b {
+    border: 2px solid #cdcdcd!important;
+}
+
+.imageborder-a,
+.imageborder-c,
+.imageborder-d {
+    border: 2px solid #3b5998!important;
+}

js/classes/images.js

@@ -0,0 +1,82 @@
+	/* 
+ * To change this license header, choose License Headers in Project Properties.
+ * To change this template file, choose Tools | Templates
+ * and open the template in the editor.
+ */
+
+define(['jquery', 'backbone'],
+        function ($, Backbone) {
+
+            var Images = {                
+                prefix: "images",
+                getThumb: function (id) {
+                	var val = this._get(id);
+                    if(val.thumb !== "")
+                    	return val.thumb;
+
+                    var response = $.ajax({
+                        url: myManifest.Settings.DefaultURL + "/api/photo/thumbnail/" + id + "/1",
+                        type: 'GET',
+                        async: false
+                    }).responseText;
+                    val.thumb = response;
+					this._set(id, val);
+                    return val.thumb;
+                },
+                getMedium: function (id) {
+                	var val = this._get(id);
+                    if(val.medium !== "")
+                    	return val.medium;
+
+                    var response = $.ajax({
+                        url: myManifest.Settings.DefaultURL + "/api/photo/medium/" + id + "/1",
+                        type: 'GET',
+                        async: false
+                    }).responseText;
+                    val.medium = response;
+					this._set(id, val);
+                    return val.medium;
+                },
+                getFull: function (id) {
+                	var val = this._get(id);
+                    if(val.full !== "")
+                    	return val.full;
+
+                    var response = $.ajax({
+                        url: myManifest.Settings.DefaultURL + "/api/photo/" + id + "/1",
+                        type: 'GET',
+                        async: false
+                    }).responseText;
+                    val.full = response;
+					this._set(id, val);
+                    return val.full;
+                },
+                _set:function(id, item){
+                	var list = JSON.parse(window.localStorage.getItem(this.prefix));
+                	if(list !== null)
+                	{
+                		list[id] = item;
+                		window.localStorage.setItem(this.prefix, JSON.stringify(list));
+                	}
+                },
+                _get:function(id){
+                	var ret = null;
+                	var item = JSON.parse(window.localStorage.getItem(this.prefix));
+                    if(item === null){
+                    	item = {};
+                    	window.localStorage.setItem(this.prefix, JSON.stringify(item));
+                    	ret = { thumb: "", medium: "", full:""};
+                    }
+                	else if(item[id] === undefined){
+                		ret = { thumb: "", medium: "", full:""};
+                	}
+                	else{
+                		ret = item[id];
+                	}
+
+                	return ret;
+                }
+            };
+
+            return Images;
+        });

js/manifest.js

@@ -1,7 +1,7 @@
 var myManifest = {
     Debug: (window.location.port !== ""),
     Name: "Il Lievitario",
-    Version: "3.0.1.3",
+    Version: "3.1.1.0",
     Author: "Denis Ironi",
     Settings: {
         DefaultURL: (window.location.port === "" ? "http://" + window.location.host + "/Service": "http://" + window.location.hostname + ":" + window.location.port + "/Service_Manut"),

js/modules/category/category.js

@@ -1,6 +1,6 @@
 define(['jquery', 'underscore', 'backbone', 'text!modules/category/categoryViewTemplate.html',
-    'text!modules/category/categoryItemTemplate.html', 'modules/base/baseView', 'libs/fastclick', 'classes/debug'],
+    'text!modules/category/categoryItemTemplate.html', 'modules/base/baseView', 'libs/fastclick', 'classes/debug', 'classes/images'],
-        function ($, _, Backbone, categoryViewTemplate, categoryItemTemplate, BaseView, FastClick, Debug) {
+        function ($, _, Backbone, categoryViewTemplate, categoryItemTemplate, BaseView, FastClick, Debug, Images) {
 
             var CategoryView = BaseView.extend({
                 collection: null,
@@ -20,7 +20,7 @@ define(['jquery', 'underscore', 'backbone', 'text!modules/category/categoryViewT
                             this.$el.find('#allRicette').length === 0){
                             this.collection.fetch({
                                 success: function (data, textStatus, jqXHR) {
-                                    self.renderItem();
+                                    setTimeout(self.renderItem(), 0);
                                 }
                             });
                         }
@@ -37,9 +37,12 @@ define(['jquery', 'underscore', 'backbone', 'text!modules/category/categoryViewT
                         /*_.each(this.collection.toJSON(), function (d) {
                          html += self.itemtemplate(d);
                          });*/
-                        html = this.itemtemplate(this.collection.toJSON());
+                        html = this.itemtemplate({
+                            items: this.collection.toJSON(),
+                            images: Images
+                        });
 
-                        $ul.html(html);
+                        $(html).appendTo($ul).enhanceWithin();
                         $ul.listview("refresh");
                         //$ul.trigger("updatelayout");                    
                     }

js/modules/category/categoryItemTemplate.html

@@ -1,12 +1,12 @@
-<% if(data.length == 0){ %>
+<% if(data.items.length == 0){ %>
     <h1>Nessuna ricetta trovata</h1>
-<%} else { for (var i = 0; i < data.length; i++) { %>
+<%} else { for (var i = 0; i < data.items.length; i++) { %>
-  <% var item = data[i]; %>
+  <% var item = data.items[i]; %>
-<li><a href="#ricetta/<%= item.ricetta_id%>" class="ui-btn ui-btn-icon-right ui-icon-carat-r">
+<li><a href="#ricetta/<%= item.ricetta_id%>" class="ui-btn ui-btn-icon-right ui-icon-carat-r ui-li-has-thumb">
 	<% if(item.firstImage === ""){ %>
-		<!--<img class="thmbImg emptyItemList">-->
+		<img class="thmbImg emptyItemList">
 	<%}else{%>
-		<!--<img class="thmbImg" src='<%=myManifest.Settings.DefaultURL%>/api/photo/thumbnail/<%=item.firstImage%>'>-->
+		<img class="thmbImg" src='<%=data.images.getThumb(item.firstImage)%>'>
 	<%}%>
     <div class='ricettaTitolo'><%= unescape(item.titolo) %></div>
     <div class='ricettaAutore'><%= unescape(item.autore) %></div>

js/modules/item/item.js

@@ -1,5 +1,5 @@
-define(['jquery', 'underscore', 'backbone', 'text!modules/item/itemViewTemplate.html', 'modules/base/baseView', 'classes/profile', 'jQueryPlugins'],
+define(['jquery', 'underscore', 'backbone', 'text!modules/item/itemViewTemplate.html', 'modules/base/baseView', 'classes/profile', 'classes/images', 'jQueryPlugins'],
-        function ($, _, Backbone, itemViewTemplate, BaseView, Profile) {
+        function ($, _, Backbone, itemViewTemplate, BaseView, Profile, Images) {
 
             var ItemView = BaseView.extend({
                 collRicetta: null,
@@ -57,7 +57,7 @@ define(['jquery', 'underscore', 'backbone', 'text!modules/item/itemViewTemplate.
                 onShowed: function(){
                     var self = this;
                     $('body').scrollTop(0);
-                    /*
+                    
                     this.galleryWall = new Freewall("#Gallery");
                     this.galleryWall.reset({
                         selector: '.brick',
@@ -69,11 +69,13 @@ define(['jquery', 'underscore', 'backbone', 'text!modules/item/itemViewTemplate.
                         }
                     });
 
-                    var images = this.galleryWall.container.find('.brick');
+                    var imgurl = Images.getThumb(48);
+
+                    /*var images = this.galleryWall.container.find('.brick');
                     images.find('img').load(function() {
                         self.galleryWall.fitWidth();
-                    });
+                    });*/
-*/
+
 
                     $.mobile.loading('hide');
                 },
@@ -85,19 +87,28 @@ define(['jquery', 'underscore', 'backbone', 'text!modules/item/itemViewTemplate.
                         var self = this;
 
                         var ric = self.collRicetta.toJSON()[0];
-
+                        var countImgLoaded = 0;
                         Profile.existRicettaBloccoNote(ric.ricetta_id,
                                 function (exist) {
                                     self.$el.append(self.template({
                                         ricetta: self.collRicetta.toJSON()[0],
-                                        ingredienti: self.collIngredienti.toJSON()
+                                        ingredienti: self.collIngredienti.toJSON(),
+                                        profile: Profile,
+                                        images: Images,
                                     }));
 
                                     self.scrollPositions = [];
                                     self.$arrayContent = self.$el.find('div[data-role="content"]');
                                     self.$arrayNavBar = self.$el.find('div[data-role="navbar"] a');
-                                    /*
+                                    
                                     self.$photos = self.$el.find('#contentFoto a');
+                                    self.$el.find('#contentFoto a img').load(function(){
+                                        countImgLoaded++;
+                                        if(self.$photos.length == countImgLoaded)
+                                            if(self.galleryWall !== null)
+                                                self.galleryWall.fitWidth();
+                                    });
+
                                     self.$photos.on("click", function(e){
                                         e.preventDefault();
                                         $.mobile.loading('show', {
@@ -116,7 +127,7 @@ define(['jquery', 'underscore', 'backbone', 'text!modules/item/itemViewTemplate.
                                         });
                                         
                                     });
-                                    */
+                                    
                                     for (var i = self.$arrayContent.length - 1; i >= 0; i--) {
                                         self.scrollPositions.push(0);
                                     };
@@ -160,8 +171,6 @@ define(['jquery', 'underscore', 'backbone', 'text!modules/item/itemViewTemplate.
                         this.scrollPositions[this.indexContent] = $('body').scrollTop();
                         this.indexContent = newIndex;
                         this.switchContent();                        
-                        if(this.indexContent == 2)
-                            this.galleryWall.fitWidth();
                         $('body').scrollTop(this.scrollPositions[this.indexContent]);
                     }
                 },
@@ -172,6 +181,8 @@ define(['jquery', 'underscore', 'backbone', 'text!modules/item/itemViewTemplate.
                     $(this.$arrayContent[this.indexContent]).show();
                     $(this.$arrayNavBar[this.indexContent]).addClass('ui-btn-active');
                     $(this.$arrayNavBar[this.indexContent]).addClass('ui-state-persist');
+                    if(this.indexContent == 2)
+                        this.galleryWall.fitWidth();
                 }
             });
             return ItemView;

js/modules/item/itemViewTemplate.html

@@ -34,14 +34,14 @@
     <p id='procedimento'><%= ricetta.procedimento%></p>
     <p style="font-size: xx-small;font-weight: lighter;">La proprietà del materiale pubblicato nel Lievitario , salvo diversa indicazione, è dei rispettivi autori. E’ vietata la ripubblicazione, anche parziale, di tutto il materiale pubblicato nel sito Lievitario senza preventiva autorizzazione scritta.</p>
 </div>
-<!--<div id="contentFoto" data-role="content" style="display: none;">
+<div id="contentFoto" data-role="content" style="display: none;">
     <h1>Foto</h1>
     <div id="Gallery" class="freewallGallery">
         <% _.each(ricetta.foto, function(fotoID) {%>
-            <div class='brick' style='width:<%=widthImg%>px;'><a id="photo_<%=fotoID.ID%>" data-role="none" data-photoid="<%=fotoID.ID%>" href=""><img src='<%=myManifest.Settings.DefaultURL%>/api/photo/medium/<%=fotoID.ID%>' class="imageborder"></a></div>
+            <div class='brick' style='width:<%=widthImg%>px;'><a id="photo_<%=fotoID.ID%>" data-role="none" data-photoid="<%=fotoID.ID%>" href=""><img src='<%=images.getMedium(fotoID.ID)%>' class="imageborder imageborder-<%=profile.data.tema%>"></a></div>
         <%});%>
 	</div>
-</div>-->
+</div>
 <!--<div id="contentVideo" data-role="content" data-theme="d" style="display: none;" data-iscroll>
     <h1>Video</h1>
     <p id='video'></p>
@@ -51,8 +51,8 @@
 	    <ul>
 	        <li><a href="" class="ui-btn-active ui-state-persist">Ingredienti</a></li>
 	        <li><a href="">Procedimento</a></li>
-	        <!--<li><a href="">Foto</a></li>
+	        <li><a href="">Foto</a></li>
-	        <li><a href="">Video</a></li>-->
+	        <!--<li><a href="">Video</a></li>-->
 	    </ul>
 	</div><!-- /navbar -->
     <% if(ricetta.autore.length > 0){ %>