Split cycle fit mode button to 1 for each fit mode

public_html/css/post.css

@@ -118,6 +118,13 @@
     line-height: 150%;
 }
 
+#sidebar .fit-mode a {
+    opacity: .25;
+}
+#sidebar .fit-mode a.active {
+    opacity: 1;
+}
+
 #sidebar .essential {
     display: -webkit-flex;
     -webkit-justify-content: space-around;

public_html/js/Presenters/PostContentPresenter.js

@@ -36,19 +36,24 @@ App.Presenters.PostContentPresenter = function(
             var ratio = originalWidth / originalHeight;
             var height = jQuery(window).height() - $wrapper.offset().top;
             var width = (height - 10) * ratio;
-            $wrapper.css({maxWidth: width + 'px'});
+            $wrapper.css({maxWidth: width + 'px', width: ''});
         },
         'fit-width': function($wrapper) {
             var originalWidth = $wrapper.attr('data-width');
-            $wrapper.css({maxWidth: originalWidth + 'px', width: 'auto'});
+            $wrapper.css({maxWidth: originalWidth + 'px', width: ''});
         },
         'original': function($wrapper) {
             var originalWidth = $wrapper.attr('data-width');
-            $wrapper.css({maxWidth: null, width: originalWidth + 'px'});
+            $wrapper.css({maxWidth: '', width: originalWidth + 'px'});
         }
     };
     var fitterNames = Object.keys(fitters);
 
+    function getFitMode() {
+        var $wrapper = $target.find('.object-wrapper');
+        return $wrapper.data('current-fit');
+    }
+
     function changeFitMode(mode) {
         var $wrapper = $target.find('.object-wrapper');
 
@@ -58,8 +63,8 @@ App.Presenters.PostContentPresenter = function(
 
     function cycleFitMode() {
         var $wrapper = $target.find('.object-wrapper');
-        var mode = $wrapper.data('current-fit');
-        var newMode = fitterNames[(fitterNames.indexOf(mode) + 1) % fitterNames.length];
+        var oldMode = getFitMode();
+        var newMode = fitterNames[(fitterNames.indexOf(oldMode) + 1) % fitterNames.length];
         $wrapper.data('current-fit', newMode);
         fitters[$wrapper.data('current-fit')]($wrapper);
         updatePostNotesSize();
@@ -105,6 +110,11 @@ App.Presenters.PostContentPresenter = function(
         render: render,
         addNewPostNote: addNewPostNote,
         updatePostNotesSize: updatePostNotesSize,
+        fitWidth: function() { changeFitMode('fit-width'); },
+        fitHeight: function() { changeFitMode('fit-height'); },
+        fitOriginal: function() { changeFitMode('original'); },
+        getFitMode: getFitMode,
+        changeFitMode: changeFitMode,
         cycleFitMode: cycleFitMode,
     };
 };

public_html/js/Presenters/PostPresenter.js

@@ -72,7 +72,9 @@ App.Presenters.PostPresenter = function(
                     [postContentPresenter, {post: post, $target: $el.find('#post-content-target')}],
                     [postEditPresenter, {post: post, $target: $el.find('#post-edit-target'), updateCallback: postEdited}],
                     [commentListPresenter, {post: post, $target: $el.find('#post-comments-target')}]],
-                    function() { });
+                    function() {
+                        syncFitModeButtons();
+                    });
 
             }).fail(function() {
                 console.log(arguments);
@@ -178,7 +180,7 @@ App.Presenters.PostPresenter = function(
     function attachSidebarEvents() {
         $el.find('#sidebar .delete').click(deleteButtonClicked);
         $el.find('#sidebar .feature').click(featureButtonClicked);
-        $el.find('#sidebar .fit-mode').click(fitModeButtonClicked);
+        $el.find('#sidebar .fit-mode a').click(fitModeButtonsClicked);
         $el.find('#sidebar .edit').click(editButtonClicked);
         $el.find('#sidebar .history').click(historyButtonClicked);
         $el.find('#sidebar .add-favorite').click(addFavoriteButtonClicked);
@@ -208,6 +210,14 @@ App.Presenters.PostPresenter = function(
             }).fail(showGenericError);
     }
 
+    function syncFitModeButtons() {
+        var fitMode = postContentPresenter.getFitMode();
+        $el.find('#sidebar .fit-mode a').each(function(i, item) {
+            var $item = jQuery(item);
+            $item.toggleClass('active', $item.attr('data-fit-mode') === fitMode);
+        });
+    }
+
     function featureButtonClicked(e) {
         e.preventDefault();
         messagePresenter.hideMessages($messages);
@@ -216,9 +226,10 @@ App.Presenters.PostPresenter = function(
         }
     }
 
-    function fitModeButtonClicked(e) {
+    function fitModeButtonsClicked(e) {
         e.preventDefault();
-        postContentPresenter.cycleFitMode();
+        postContentPresenter.changeFitMode(jQuery(e.target).attr('data-fit-mode'));
+        syncFitModeButtons();
     }
 
     function featurePost() {

public_html/templates/post.tpl

@@ -268,10 +268,11 @@ if (forceHttpInPermalinks > 0) {
                     </li>
                 <% } %>
 
-                <li>
-                    <a class="fit-mode" href="#">
-                        Cycle fit mode
-                    </a>
+                <li class="fit-mode">
+                    Fit:
+                    <a data-fit-mode="fit-width" href="#">width</a>,
+                    <a data-fit-mode="fit-height" href="#">height</a>,
+                    <a data-fit-mode="original" href="#">original</a>
                 </li>
             </ul>
         <% } %>