updating to zepto and other changes

nitobi · Aug 15, 2011 · b988fbb · b988fbb
1 parent 92110fd
commit b988fbb
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 37 deletions.
diff --git a/assets/photoshare/_attachments/index.html b/assets/photoshare/_attachments/index.html
@@ -3,7 +3,7 @@
   <head>
     <title>PhoneGap</title>
     <link href="style/photoshare.css" type="text/css" rel="stylesheet" />
-    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1" />
+    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1" />
   </head>
   <body style="text-align:center;">
     <!-- main -->
@@ -28,7 +28,7 @@ <h3>Pictures in CouchDB</h3>
       <div id="pictures"></div>
     </div>
     <!-- end main -->
-    <div id="photoview">
+    <div id="photoview" style="display:none">
       <img id="photoview-image" src="http://www.phonegap.com/assets/carousel/dw5_4.jpg" alt="" />
       <div id="comments">
         <textarea id="comment-area">Put your comment here...</textarea> 

diff --git a/assets/photoshare/_attachments/script/capture.js b/assets/photoshare/_attachments/script/capture.js
@@ -1,37 +1,40 @@
 // Use PhoneGap polling because of cross-origin&speed problem when loading from couchDB
 PhoneGap.UsePolling = true;
 
-var pictures = document.getElementById("pictures");
+var selectedPictureId = null;
 
 // Helper Methods
 
-function addImage(imageSrc) {
-    var newImg = document.createElement("img");
-    newImg.style.width = "60px";
-    newImg.style.float = "left";
-    newImg.style.padding = "2px";
-    newImg.src = imageSrc;
-    newImg.onclick = onImageClick;
-    pictures.appendChild(newImg);
+function addImage(imageId) {
+    var newImg = $("<img></img>")
+                 .addClass('thumbnail')
+                 .css('width', '60px')
+                 .css('float', 'left')
+                 .css('padding', '2px')
+                 .attr({id: imageId,
+                        src: '/photoshare/'+imageId+'/original.jpg'
+                       });
+    newImg.click(onImageClick);
+    $('#pictures').append(newImg);
 }
 
 function toggleButton() {
-  var capture = document.getElementById('capturePhoto');
-  if(capture.disabled) {
-    capture.disabled = '';
+  var capture = $('#capturePhoto');
+  if(capture.attr('disabled')) {
+    capture.removeAttr('disabled');
   } else {
-    capture.disabled = 'disabled';
+    capture.attr('disabled', true);
   }
 }
 
 function setMessage(message) {
-  document.getElementById('message').innerHTML = message;
+  $('#message').html(message);
 }
 
 // Syncpoint
 
 function onSyncPointSuccess(syncpoint) {
-  document.getElementById('syncpoint').innerHTML = "PhotoShare is in sync with: " + syncpoint;
+  $('#syncpoint').html("PhotoShare is in sync with: " + syncpoint);
   toggleButton();
   listPictures();
 }
@@ -49,18 +52,20 @@ document.addEventListener("deviceready", function() {
 
 function onCaptureSuccess(imageData) {
   var onSaveSuccess = function(imageDoc) {
-    addImage('/photoshare/'+imageDoc.id+'/original.jpg');
+    addImage(imageDoc.id);
     setMessage('');
   };
   var onSaveFailure = function(xhr, type) {
     alert(type + ' ' + xhr.responseText);
   };
   setMessage('Saving image...');
-  var imageDoc = {"_attachments": {
-    "original.jpg": {
-      "content-type": "image/jpeg",
-      "data": imageData
-    }
+  var imageDoc = {
+    "comments": ['First Comment'],
+    "_attachments": {
+      "original.jpg": {
+        "content-type": "image/jpeg",
+        "data": imageData
+      }
   }};
   CouchDbPlugin.save(imageDoc, onSaveSuccess, onSaveFailure);
 }
@@ -77,14 +82,15 @@ function capturePhoto() {
 
 function onListSuccess(dbObj) {
   if(dbObj.total_rows == 0) {
-    pictures.innerHTML = "<p>No pictures in the DB</p>";
+    $('#pictures').html("<p>No pictures in the DB</p>");
   }
   else {
     // FIXME: there should be a better way to skip _design/photoshare doc
     setMessage('Fetching images from the DB...');
     for(var i = 0, j = dbObj.total_rows ; i < j ; i++) {
-      if(dbObj.rows[i].id != '_design/photoshare')
-        addImage('/photoshare/'+dbObj.rows[i].id+'/original.jpg');
+      if(dbObj.rows[i].id != '_design/photoshare') {
+        addImage(dbObj.rows[i].id);
+      }
     }
     setMessage('');
   }
@@ -97,34 +103,31 @@ var onListFailure = function(xhr, error) {
 function listPictures() {
   // resetting the pictures
   toggleButton();
-  pictures.innerHTML = "";
+  $('#pictures').html("");
   CouchDbPlugin.list(onListSuccess, onListFailure);
 }
 
 function sendComment() {
   // TODO: save comment in the db
-  try {
     $('#comments').prepend('<p>'+$('#comment-area').val()+'</p>');
-  } catch(e) {
-    alert(e.message);
-  }
 }
 
 function onImageClick() {
-  var photoviewImage = document.getElementById('photoview-image');
-  photoviewImage.src = this.src;
-  photoviewImage.style.width = "100%";
-  document.addEventListener('backbutton', backKeyDown, true);
-  $('#send-comment').click(sendComment);
+  selectedPictureId = this.id;
+  $('#photoview-image').attr('src', this.src);
+                       .css('width', '100%');
   $('#photoview').css("-webkit-transform","translate(0,0)");
+  $('#photoview').show();
   $('#main').hide();
+  $('#send-comment').click(sendComment);
+  document.addEventListener('backbutton', backKeyDown, true);
 }
 
 function backKeyDown() {
-  var photoview = document.getElementById('photoview');
   document.removeEventListener('backbutton', backKeyDown, true);
   $('#send-comment').unbind('click');
   $('#photoview').css("-webkit-transform","translate(100%,0)");
+  $('#photoview').hide();
   $('#main').show();
 }
 
diff --git a/assets/photoshare/_attachments/script/couchdbplugin.js b/assets/photoshare/_attachments/script/couchdbplugin.js
@@ -19,6 +19,26 @@ var CouchDbPlugin = {
        error: failureCallback
      });
    },
+   update: function(imageDoc, successCallback, failureCallback) {
+     $.ajax({
+       type: 'PUT',
+       url: '/photoshare',
+       data: JSON.stringify(imageDoc),
+       dataType: 'json',
+       contentType: 'application/json',
+       success: successCallback,
+       error: failureCallback
+     });
+   },
+   fetch: function(imageId, successCallback, failureCallback) {
+     $.ajax({
+       type: 'GET',
+       url: '/photoshare/'+imageId,
+       dataType: 'json',
+       success: successCallback,
+       error: failureCallback
+     });
+   },
    list: function(successCallback, failureCallback) {
      $.ajax({
        type: 'GET',

diff --git a/assets/photoshare/_attachments/style/photoshare.css b/assets/photoshare/_attachments/style/photoshare.css
@@ -20,6 +20,13 @@ button {
   margin-right: auto;
   top:0;left:0;right:0;bottom:0;background:rgba(255,255,255,1);
 }
+
+.thumbnail {
+  width: "60px";
+  float: "left";
+  padding: "2px";
+}
+
 #comments {
   color: black;
 }