Use Sammy.js to redesign with a folder structure

agorf · agorf · commit 8a2a477b96ff · 2015-02-03T00:55:26.000+01:00
Similar to how a file manager works
diff --git a/bower.json b/bower.json
@@ -5,6 +5,7 @@
     "font-awesome": "~4.0.3",
     "knockoutjs": "~3.2.0",
     "jquery": "~2.1.3",
-    "lodash": "~3.0.1"
+    "lodash": "~3.0.1",
+    "sammy": "~0.7.6"
   }
 }
diff --git a/lib/thyme/photo.rb b/lib/thyme/photo.rb
@@ -42,7 +42,7 @@ def self.oldest_first
     def as_json(options = {})
       super(
         options.merge(methods: [:big_thumb_url, :small_thumb_url])
-      ).translate_keys(set_id: :set).camelize_keys
+      ).camelize_keys
     end
 
     def big_thumb_url
diff --git a/lib/thyme/server.rb b/lib/thyme/server.rb
@@ -24,5 +24,18 @@ class Server < Sinatra::Base
       content_type :json
       Photo.all(set: { id: params[:set_id].to_i }).oldest_first.to_json
     end
+
+    get '/photo' do
+      pass unless request.accept?('application/json')
+      content_type :json
+
+      conditions = { id: params[:photo_id], set: { id: params[:set_id].to_i } }
+
+      if photo = Photo.first(conditions)
+        photo.to_json
+      else
+        halt 404, 'Not Found'
+      end
+    end
   end
 end
diff --git a/public/app.js b/public/app.js
@@ -49,45 +49,63 @@ function SetViewModel(data) {
 function ThymeViewModel() {
   var self = this;
 
-  self.photo = ko.observable();
+  self.photo = _.tap(ko.observable(), function (observable) {
+    observable.subscribe(function (photo) {
+      if (photo) {
+        location.hash = photo.data.setId + '/' + photo.data.id;
+      }
+    });
+  });
 
   self.photos = ko.observableArray([]);
 
-  self.set = ko.observable();
+  self.set = _.tap(ko.observable(), function (observable) {
+    observable.subscribe(function (set) {
+      location.hash = set.data.id;
+    });
+  });
 
   self.sets = ko.observableArray([]);
 
-  self.loadPhotos = function (set) {
-    self.photos([]); // clear photos
-
-    $.getJSON('/photos', { set_id: set.data.id }, function (photosData) {
-      _.forEach(photosData, function (photoData, i) {
-        var photo = new PhotoViewModel(photoData);
-        self.photos.push(photo);
-
-        if (i === 0) {
-          self.photo(photo); // show photo
-        }
+  Sammy(function () {
+    this.get('#:setId/:photoId', function () {
+      var data = {
+        set_id: this.params.setId,
+        photo_id: this.params.photoId
+      };
+      $.getJSON('/photo', data, function (photoData) {
+        self.photo(new PhotoViewModel(photoData));
       });
     });
-  };
 
-  self.loadSets = function () {
-    $.getJSON('/sets', function (setsData) {
-      _.forEach(setsData, function (setData, i) {
-        var set = new SetViewModel(setData);
-        self.sets.push(set);
+    this.get('#:setId', function () {
+      self.photo(null);
 
-        if (i === 0) {
-          self.set(set); // load photos
-        }
+      if (self.photos().length > 0) { // back pressed
+        return;
+      }
+
+      $.getJSON('/photos', { set_id: this.params.setId }, function (photosData) {
+        _.forEach(photosData, function (photoData) {
+          self.photos.push(new PhotoViewModel(photoData));
+        });
       });
     });
-  };
 
-  self.set.subscribe(self.loadPhotos);
+    this.get('', function () {
+      self.photos([]);
+
+      if (self.sets().length > 0) { // back pressed
+        return;
+      }
 
-  self.loadSets();
+      $.getJSON('/sets', function (setsData) {
+        _.forEach(setsData, function (setData) {
+          self.sets.push(new SetViewModel(setData));
+        });
+      });
+    });
+  }).run();
 };
 
 // lodash extensions
diff --git a/public/index.html b/public/index.html
@@ -6,16 +6,26 @@
   <link rel="stylesheet" href="/thyme.css">
 </head>
 <body>
-  <div id="sets" class="panel">
-    <ol data-bind="template: { name: 'sets-template', foreach: sets }"></ol>
+  <div id="pane">
+    <!-- ko if: photo -->
+      <div id="photo" data-bind="template: { name: 'photo-template', data: photo }"></div>
+    <!-- /ko -->
+    <!-- ko ifnot: photo -->
+      <ol id="thumbs">
+        <!-- ko if: photos().length > 0 -->
+          <!-- ko template: { name: 'photos-template', foreach: photos } -->
+          <!-- /ko -->
+        <!-- /ko -->
+        <!-- ko if: photos().length === 0 -->
+          <!-- ko template: { name: 'sets-template', foreach: sets } -->
+          <!-- /ko -->
+        <!-- /ko -->
+      </ol>
+    <!-- /ko -->
   </div>
-  <div id="photos" class="panel">
-    <ol data-bind="template: { name: 'photos-template', foreach: photos }"></ol>
-  </div>
-  <div id="photo" class="panel" data-bind="template: { name: 'photo-template', data: photo, if: photo }"></div>
   <script type="text/html" id="sets-template">
     <li>
-      <a href="#" data-bind="attr: { title: data.name }, css: { 'set thumb': true, active: $data == $root.set() }, click: $root.set">
+      <a href="#" data-bind="attr: { title: data.name }, css: 'set thumb', click: $root.set">
         <img data-bind="attr: { src: data.thumbUrl, alt: data.name }">
         <h2 data-bind="text: shortName()"></h2>
         <p data-bind="attr: { title: photosCountTitle() }">
@@ -27,7 +37,7 @@ <h2 data-bind="text: shortName()"></h2>
   </script>
   <script type="text/html" id="photos-template">
     <li>
-      <a href="#" data-bind="attr: { title: fileName() }, css: { 'photo thumb': true, active: $data == $root.photo() }, click: $root.photo">
+      <a href="#" data-bind="attr: { title: fileName() }, css: 'photo thumb', click: $root.photo">
         <img data-bind="attr: { src: data.smallThumbUrl, alt: fileName() }">
         <h2 data-bind="text: shortName()"></h2>
       </a>
@@ -56,6 +66,7 @@ <h2 data-bind="text: shortName()"></h2>
   <script src="bower_components/lodash/lodash.js"></script>
   <script src="bower_components/moment/moment.js"></script>
   <script src="bower_components/knockoutjs/dist/knockout.js"></script>
+  <script src="bower_components/sammy/lib/sammy.js"></script>
   <script src="app.js"></script>
 </body>
 </html>
diff --git a/public/thyme.css b/public/thyme.css
@@ -8,37 +8,37 @@ a {
   color: #00f;
 }
 
-.panel {
+#pane {
+  bottom: 0;
+  left: 0;
   position: absolute;
+  right: 0;
   top: 0;
-  bottom: 0;
-  overflow-y: auto;
-  width: 219px;
 }
 
-#photos {
-  left: 219px;
-  overflow-y: scroll;
+#thumbs {
+  list-style: none;
+  margin: 0;
+  overflow: auto;
+  padding: 10px;
 }
 
-#photo {
-  left: 438px;
-  right: 0;
-  width: auto;
+#thumbs li {
+  float: left;
+  margin: 10px;
 }
 
-#sets ol, #photos ol {
-  list-style: none;
-  margin: 0;
-  padding: 0;
+#thumbs li img {
+  border-radius: 5px;
 }
 
-#sets a, #photos a {
-  border: 2px solid #fff;
+#thumbs li h2 {
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
 }
 
-#sets .active, #photos .active {
-  border-color: red;
+#thumbs li p {
+  border-top-right-radius: 5px;
 }
 
 .thumb {

Original file line number	Diff line number	Diff line change
`@@ -5,6 +5,7 @@`
`5`	`5`	`"font-awesome": "~4.0.3",`
`6`	`6`	`"knockoutjs": "~3.2.0",`
`7`	`7`	`"jquery": "~2.1.3",`
`8`		`- "lodash": "~3.0.1"`
	`8`	`+ "lodash": "~3.0.1",`
	`9`	`+ "sammy": "~0.7.6"`
`9`	`10`	`}`
`10`	`11`	`}`