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

js/libs/jQueryPluginsCollection.js

@@ -1,6 +1,7 @@
 define(['plugins/jquery.rating.pack', 
         'plugins/jquery.mobile.alphascroll.min', 
         'plugins/jquery.validate.min',
+		'plugins/jquery.touchSwipe',
         'plugins/freewall'], function ($) {
 	// Do nothing
 });

js/modules/item/item.js

@@ -1,4 +1,4 @@
-define(['jquery', 'underscore', 'backbone', 'text!modules/item/itemViewTemplate.html', 'modules/base/baseView', 'classes/profile'],
+define(['jquery', 'underscore', 'backbone', 'text!modules/item/itemViewTemplate.html', 'modules/base/baseView', 'classes/profile', 'jQueryPlugins'],
         function ($, _, Backbone, itemViewTemplate, BaseView, Profile) {
 
             var ItemView = BaseView.extend({
@@ -6,6 +6,10 @@ define(['jquery', 'underscore', 'backbone', 'text!modules/item/itemViewTemplate.
                 collIngredienti: null,
                 fetchedRicetta: false,
                 fetchedIngredienti: false,
+                IMG_WIDTH: 500,
+                currentImg: 0,
+                maxImages: 3,
+                speed: 500,
                 //initialize template
                 template: _.template(itemViewTemplate),
                 initialize: function (options) {
@@ -55,6 +59,13 @@ define(['jquery', 'underscore', 'backbone', 'text!modules/item/itemViewTemplate.
                 },
                 onShowed: function(){
                     $('body').scrollTop(0);
+
+                    this.$el.find("#Gallery").swipe({
+                            triggerOnTouchEnd: true,
+                            swipeStatus: this._swipeStatus,
+                            allowPageScroll: "vertical",
+                            threshold: 75
+                        });
                 },
                 //render the content into div of view
                 render: function () {
@@ -65,6 +76,8 @@ define(['jquery', 'underscore', 'backbone', 'text!modules/item/itemViewTemplate.
 
                         var ric = self.collRicetta.toJSON()[0];
 
+                        this.maxImages = ric.foto.length;
+
                         Profile.existRicettaBloccoNote(ric.ricetta_id,
                                 function (exist) {
                                     self.$el.append(self.template({
@@ -102,7 +115,7 @@ define(['jquery', 'underscore', 'backbone', 'text!modules/item/itemViewTemplate.
                                 }
                         );
 
-
+                        
 
                         //this.el is the root element of Backbone.View. By default, it is a div.
                         //$el is cached jQuery object for the view's element.
@@ -112,6 +125,48 @@ define(['jquery', 'underscore', 'backbone', 'text!modules/item/itemViewTemplate.
                         return this;
                     }
                 },
+                /**
+                 * Catch each phase of the swipe.
+                 * move : we drag the div
+                 * cancel : we animate back to where we were
+                 * end : we animate to the next image
+                 */
+                _swipeStatus: function (event, phase, direction, distance) {
+                    //If we are moving before swipe, and we are going L or R in X mode, or U or D in Y mode then drag.
+                    if (phase == "move" && (direction == "left" || direction == "right")) {
+                        var duration = 0;
+                        if (direction == "left") {
+                            scrollImages((this.IMG_WIDTH * this.currentImg) + distance, duration);
+                        } else if (direction == "right") {
+                            scrollImages((this.IMG_WIDTH * this.currentImg) - distance, duration);
+                        }
+                    } else if (phase == "cancel") {
+                        scrollImages(this.IMG_WIDTH * this.currentImg, this.speed);
+                    } else if (phase == "end") {
+                        if (direction == "right") {
+                            self._previousImage();
+                        } else if (direction == "left") {
+                            self._nextImage();
+                        }
+                    }
+                },
+                _previousImage: function () {
+                    this.currentImg = Math.max(this.currentImg - 1, 0);
+                    scrollImages(this.IMG_WIDTH * this.currentImg, this.speed);
+                },
+                _nextImage: function() {
+                    this.currentImg = Math.min(this.currentImg + 1, this.maxImages - 1);
+                    this._scrollImages(this.IMG_WIDTH * this.currentImg, this.speed);
+                },
+                /**
+                 * Manually update the position of the imgs on drag
+                 */
+                _scrollImages: function (distance, duration) {
+                    imgs.css("transition-duration", (duration / 1000).toFixed(1) + "s");
+                    //inverse the number we set in the css
+                    var value = (distance < 0 ? "" : "-") + Math.abs(distance).toString();
+                    imgs.css("transform", "translate(" + value + "px,0)");
+                },
                 goToContent: function (newIndex)
                 {
                     if (this.$arrayContent.length > newIndex && newIndex >= 0)

js/modules/item/itemViewTemplate.html

@@ -2,7 +2,31 @@
     <a id="favoriteBtn" href="#" class="nav-glyphish-example ui-btn ui-icon-myHome ui-btn-icon-notext ui-btn-left" data-icon="custom"></a>
     <h3 id='titoloRicetta'><%= unescape(ricetta.titolo)%></h3>
     <a id="backBtn" href="#" class="nav-glyphish-example ui-btn ui-icon-myHome ui-btn-icon-notext ui-btn-right" data-icon="custom"></a>
-</div>		 
+</div>
+<style>
+    #Gallery {
+        float: left;
+        display: inline;
+        padding: 0;
+        margin: 0;
+        /*width: 1510px;*/
+        transition-property: transform;
+        transition-duration: 0.5s;
+        transition-timing-function: ease-out;
+        /*apply a transform to kick in the hardware acceleration.  Without this, the first
+        time we add the transform you get odd rendering of the divs (half missing) */
+        transform: translate(0, 0);
+    }
+    #Gallery img {
+        padding: 0;
+        margin: 0;
+        /*width: 500px;
+        height: 340px;*/
+        /*apply a transform to kick in the hardware acceleration.  Without this, the first
+        time we add the transform you get odd rendering of the divs (half missing) */
+        transform: translate(0, 0);
+    }
+</style>
 <div id="contentIngredienti" data-role="content">
 	<h1>Ingredienti</h1>
     <center><p id='ingredienti'>
@@ -24,12 +48,15 @@
     <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" data-theme="d" style="display: none;" data-iscroll>
+<div id="contentFoto" data-role="content" style="display: none;">
     <h1>Foto</h1>
-    <ul id="Gallery" class="gallery">
+    <div id="Gallery">
-	</ul>
+        <% _.each(ricetta.foto, function(fotoID) {%>
+            <img src='<%=myManifest.Settings.DefaultURL%>/api/photo/<%=fotoID.ID%>'>
+        <%});%>
+	</div>
 </div>
-<div id="contentVideo" data-role="content" data-theme="d" style="display: none;" data-iscroll>
+<!--<div id="contentVideo" data-role="content" data-theme="d" style="display: none;" data-iscroll>
     <h1>Video</h1>
     <p id='video'></p>
 </div>-->
@@ -38,8 +65,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){ %>