Commits

Håvard Gulldahl committed 3a2d7bc

a lot of ui/ux changes

Comments (0)

Files changed (4)

templates/album_mobile.html

 
 {% block script %}
   //$(function() {
-  $(document).on("pageinit", function() {
+  $(document).bind("pageinit", function() {
      var images = {
         url : "{{root}}/{{album.id}}/json",
         paginator : {},
 
         get : function(page) {
             console.log("getting image page: %o", page);
+            $.mobile.showPageLoadingMsg();
             jQuery.getJSON(this.url, 
                            { "pg": page || 1 },
                            function(data) {
                     .append((data.paginator.has_next) ? "Scroll to see more" : "Last image")
                     .appendTo("#image-list");
 
+                $.mobile.hidePageLoadingMsg();
                 
             });
         },
             }
         }
     };
-    $(window).off("scroll"); // turn it off --- before we turn it on for this page only:
-    $(window).scroll(function () {
+    $(window).unbind("scroll"); // turn it off --- before we turn it on for this page only:
+    $(window).bind("scroll", function () {
         if ($(window).scrollTop() == $(document).height() - $(window).height()) {
             console.log("load more images!");
             images.next();

templates/albums_mobile.html

 {% extends "base_template_mobile.html" %}
 
 {% block script %}
-  //$(function() {
-  $(document).on("pageinit", function() {
+  $(document).bind("pageinit", function() {
      var albums = {
         url : "{{root}}/json",
         paginator : {},
 
         get : function(page) {
             console.log("getting album page: %o", page);
+            $.mobile.showPageLoadingMsg();
             jQuery.getJSON(this.url, 
                            { "pg": page || 1 },
                            function(data) {
                     row.appendTo("#album-list");
                 });
                 $("#album-list").listview("refresh");
-
+                $.mobile.hidePageLoadingMsg();
             });
         },
         next : function() {
             }
         }
     };
-    $(window).off("scroll");
-    $(window).scroll(function () {
+    $(window).unbind("scroll");
+    $(window).bind("scroll", function () {
         if ($(window).scrollTop() == $(document).height() - $(window).height()) {
             console.log("load more albums!");
             albums.next();

templates/base_template_mobile.html

 
 </div><!-- end page: settings -->
 
+<div data-role="dialog" id="deleteimage" data-imageid="-1">
+<script type="text/javascript">
+  $(document).bind("pageinit", function() {
+      $("#delete-image-yes").click(function() {
+        var delpage = $("#deleteimage");
+        console.log("deleting image: %o", delpage.data("imageid"));
+        $("#deleteimage").dialog('close');
+      });
+  });
+</script>
+
+<div data-role="header">
+  <h1>Delete image</h1>
+</div>
+
+<div data-role="content">
+
+  Do you really wish do delete <span id="delete-image-id">the image</span>?
+
+  <div data-role="controlgroup" data-type="horizontal">
+    <a href="#" data-icon="back" data-role="button" data-rel="back" data-theme="b">No</a>
+    <button data-icon="check" id="delete-image-yes">Yes</button>
+  </div>
+
+</div>
+
+</div><!-- end page: deleteimage -->
+
 </body>
 </html>
 

templates/image_mobile.html

 
 {% block script %}
 
-$(function() {
-    $('div[data-role="page"]').live("swiperight", function(event, ui)  {
-        $(".prev-button", $.mobile.activePage).click();
+$(document).bind("pageinit", function() {
+    $(window).unbind("scroll");
+    var swiped = false;
+    var swipeclock;
+    var imageid = parseInt("{{image.id}}") || -1;
+    function swipe(direction) {
+        if(swiped) return;
+        console.log("swipe "+direction);
+        $("."+direction+"-button", $.mobile.activePage).click();
+        swiped = true;
+    }
+    $("#page-image-{{image.id}}").bind("swiperight", function(event, ui)  {
+        window.clearTimeout(swipeclock);
+        swipeclock = window.setTimeout(swipe, 300, "prev");
     });
-    $('div[data-role="page"]').live("swipeleft", function(event, ui)  {
-        $(".next-button", $.mobile.activePage).click();
+    $("#page-image-{{image.id}}").bind("swipeleft", function(event, ui)  {
+        window.clearTimeout(swipeclock);
+        swipeclock = window.setTimeout(swipe, 500, "next");
+    });
+
+    $("button.deleteimage", "#page-image-{{image.id}}").click(function() {
+        console.log("delete butn presseD: %o", imageid);
+        var delpage = $("#deleteimage");
+        delpage.data("imageid", imageid);
+        $.mobile.changePage(delpage);
+
     });
 });
 
 
 <div class="image-box" data-imageid="{{image.id}}">
   
-<div>
-  <img src="/digiweb/image/mn{{ image.id }}/mn-{{ image.name }}" class="digiweb-image image-mn">
+<div style="float:left">
+  <img src="/digiweb/image/mn{{ image.id }}/mn-{{ image.name }}" class="digiweb-image image-mn" alt="{{image.name}}">
 </div>
 
-</div><!-- /#image -->
+<div class="image-controls" style="float:left">
+
+<div data-role="controlgroup" data-type="horizontal">
+<a href="/digiweb/image/fs{{image.id}}" rel="external" data-role="button" data-icon="arrow-d">Get</a>
+{% if paging.prev %}
+<a href="/digiweb/m/i/{{paging.prev}}" class="prev-button" data-role="button" data-direction="reverse" data-icon="arrow-l" data-prefetch
+data-inline="true">Prev</a>
+{% endif %}
+
+{% if paging.next %}
+<a href="/digiweb/m/i/{{paging.next}}" class="next-button" data-role="button" data-icon="arrow-r" data-prefetch data-transition="slide"
+data-inline="true">Next</a>
+{% endif %}
+</div>
+
+
+</div><!-- /image-controls -->
+
+
+</div><!-- /image-box -->
 
 <div class="image-extra">
 
 <div class="image-title">
+  <div style="float: left">
   {{ image.name }}
-  <span class="image-info" style="font-size: 75%; font-weight: normal">[{{ image.modificationDate }}]</span>
+  <span class="image-info">[{{ image.modificationDate }}]</span>
+  </div>
+    <div data-role="controlgroup" data-type="horizontal">
+    <button data-icon="back" data-iconpos="notext">Rotate left</button>
+    <button data-icon="forward" data-iconpos="notext">Rotate right</button>
+    </div>
+
 </div>
 
 <div class="image-metadata" data-role="collapsible-set">
 
-  <div data-role="collapsible">
+  <div data-role="collapsible" data-collapsed="false">
     <h3>Tags</h3>
     <ul>{% for t in tags %}<li><a
     href="/digiweb/m/tag/{{t.tagid__name}}">{{t.tagid__name}}</a></li>{% endfor %}</ul>
 
   <div data-role="collapsible" data-collapsed="true">
     <h3>Image details</h3>
-    <p>
+    <div>
       <ul>
         <li>Width: {{image.imageinformation.width}}px</li>
         <li>Height: {{image.imageinformation.height}}px</li>
         <li>Aperture: {{image.imagemetadata.aperture}}</li>
         <li>Shutter: {{image.imagemetadata.exposureTime}}</li>
         <li>ISO: {{image.imagemetadata.sensitivity}}</li>
-      <ul>
-    </p>
+      </ul>
+    </div>
   </div>
 
   <div data-role="collapsible" data-collapsed="true">
-    <h3>Edit</h3>
+    <h3>Delete</h3>
     <p> 
-      <button class="downloadimage" data-icon="save">Download image</button>
       <button class="deleteimage" data-icon="delete">Delete image</button>
     </p>
   </div>
 
 </div><!-- /collapsible-set -->
 
-<div class="image-controls">
-{% if paging.prev %}
-<a href="/digiweb/m/i/{{paging.prev}}" class="prev-button" data-role="button" data-direction="reverse" data-icon="arrow-l" data-prefetch>Previous</a>
-{% endif %}
-
-{% if paging.next %}
-<a href="/digiweb/m/i/{{paging.next}}" class="next-button" data-role="button" data-icon="arrow-r" data-prefetch data-transition="slide">Next</a>
-{% endif %}
-</div><!-- /image-controls -->
-
 
 </div><!-- /image-extra -->