sharing url formats

app/stylesheets/outfits/_edit.sass

@@ -21,6 +21,10 @@ $outfit-header-padding: 24px
 $outfit-content-width: $sidebar-unit-inner-width - $outfit-thumbnail-size - $outfit-thumbnail-margin - 32px
 $outfit-content-inner-width: $outfit-content-width - $outfit-header-padding
 
+=user-select($select)
+  select: unquote($select)
+  +experimental(user-select, $select, -moz, -webkit, not -o, not -ms, -khtml, official)
+
 =active-mode
   color: $text-color
   font-weight: bold
@@ -476,7 +480,7 @@ body.outfits-edit
   #preview-sharing
     display: none
     
-    > ul
+    #preview-sharing-urls
       +sidebar-view-child
     
       li
@@ -492,6 +496,40 @@ body.outfits-edit
           display: block
           width: 100%
     
+    #preview-sharing-url-formats
+      +sidebar-view-child
+      +user-select(none)
+      // remove whitespace between inline-block elements
+      font-size: 0
+      margin-top: 12px
+      text-align: center
+      
+      li
+        +inline-block
+        
+        border: 1px solid $module-border-color
+        border-left-width: 0
+        border-right-color: $soft-border-color
+        color: $soft-text-color
+        cursor: pointer
+        font-size: 12px
+        padding: 0 .75em
+        
+        &.active
+          background: $module-bg-color
+          color: inherit
+          font-weight: bold
+        
+        &:first-child
+          +border-top-left-radius(5px)
+          +border-bottom-left-radius(5px)
+          border-left-width: 1px
+        
+        &:last-child
+          +border-top-right-radius(5px)
+          +border-bottom-right-radius(5px)
+          border-right-color: $module-border-color
+    
     #preview-sharing-thumbnail-wrapper
       border: 1px solid $soft-border-color
       display: block
@@ -500,12 +538,14 @@ body.outfits-edit
       width: 150px
       
       #preview-sharing-thumbnail-loading
+        height: 100%
         position: relative
+        width: 100%
         
         span
           color: $soft-text-color
           font-size: 85%
-          margin-top: -1em
+          margin-top: -0.75em
           position: absolute
           text-align: center
           top: 50%

app/views/outfits/edit.html.haml

@@ -84,7 +84,7 @@
             = image_tag 'outfits/small_loading.gif'
             %span Generating…
           %img#preview-sharing-thumbnail
-        %ul
+        %ul#preview-sharing-urls
           %li
             %label{:for => 'preview-sharing-permalink-url'} Outfit page
             %input#preview-sharing-permalink-url.outfit-url{:type => 'text'}
@@ -97,6 +97,10 @@
           %li
             %label{:for => 'preview-sharing-small-image-url'} Small image
             %input#preview-sharing-small-image-url.outfit-url{:type => 'text'}
+        %ul#preview-sharing-url-formats
+          %li.active{'data-format' => 'plain'} Plain
+          %li{'data-format' => 'html'} HTML
+          %li{'data-format' => 'bbcode'} BBCode
   %form#preview-search-form
     %header
       %h2 Add an item

public/javascripts/outfits/edit.js

@@ -445,13 +445,7 @@ View.Outfits = function (wardrobe) {
     stars = $('#preview-outfits div.outfit-star'),
     sidebar_el = $('#preview-sidebar'),
     signed_in,
-    previously_viewing = '',
-    sharing_url_els = {
-      permalink: $('#preview-sharing-permalink-url'),
-      large_image: $('#preview-sharing-large-image-url'),
-      medium_image: $('#preview-sharing-medium-image-url'),
-      small_image: $('#preview-sharing-small-image-url'),
-    };
+    previously_viewing = '';
 
   function liForOutfit(outfit) {
     return $('li.outfit-' + outfit.id);
@@ -652,64 +646,128 @@ View.Outfits = function (wardrobe) {
   
   /* Sharing */
   
-  function setSharingUrls(outfit) {
-    var small_image_url = pathToUrl(outfit.image_versions.small);
-    sharing_thumbnail.setUrl(small_image_url);
-    sharing_url_els.small_image.val(small_image_url);
+  var sharing = new function Sharing() {
+    var sharing_url_els = {
+      permalink: $('#preview-sharing-permalink-url'),
+      large_image: $('#preview-sharing-large-image-url'),
+      medium_image: $('#preview-sharing-medium-image-url'),
+      small_image: $('#preview-sharing-small-image-url'),
+    };
+    var format_selector_els = $('#preview-sharing-url-formats li');
     
-    sharing_url_els.permalink.val(generateOutfitPermalink(outfit));
-    sharing_url_els.large_image.val(pathToUrl(outfit.image_versions.large));
-    sharing_url_els.medium_image.val(pathToUrl(outfit.image_versions.medium));
-  }
-  
-  var sharing_thumbnail = new function SharingThumbnail() {
-    var WRAPPER = $('#preview-sharing-thumbnail-wrapper');
-    var IMAGE = $('#preview-sharing-thumbnail');
-    var RETRY_DELAY = 2000; // 2 seconds
-    var url = null;
-    var xhr = null;
-    
-    function abort() {
-      if(xhr && xhr.readystate != 4) {
-        log("Aborting sharing thumbnail XHR");
-        xhr.abort();
+    var formats = {
+      plain: {
+        image: function (url) { return url },
+        text: function (url) { return url }
+      },
+      html: {
+        image: function (url, permalink) {
+          return '<a href="' + permalink + '"><img src="' + url + '" /></a>';
+        },
+        text: function (url) {
+          return '<a href="' + url + '">Dress to Impress</a>';
+        }
+      },
+      bbcode: {
+        image: function (url, permalink) {
+          return '[URL=' + permalink + '][IMG]' + url + '[/IMG][/URL]';
+        },
+        text: function (url) {
+          return '[URL=' + url + ']Dress to Impress[/URL]';
+        }
       }
+    };
+    
+    var format = formats.plain;
+    var urls = {permalink: null, small_image: null, medium_image: null,
+      large_image: null};
+    
+    format_selector_els.click(function () {
+      var selector_el = $(this);
+      format_selector_els.removeClass('active');
+      selector_el.addClass('active');
+      log("Setting sharing URL format:", selector_el.attr('data-format'));
+      format = formats[selector_el.attr('data-format')];
+      formatUrls();
+    });
+    
+    this.setOutfit = function (outfit) {
+      urls.permalink = generateOutfitPermalink(outfit);
+      urls.small_image = pathToUrl(outfit.image_versions.small);
+      urls.medium_image = pathToUrl(outfit.image_versions.medium);
+      urls.large_image = pathToUrl(outfit.image_versions.large);
+      thumbnail.setUrl(urls.small_image);
+      formatUrls();
     }
     
-    function hide() {
-      WRAPPER.removeClass('loaded');
+    function formatUrls() {
+      formatImageUrl('small_image');
+      formatImageUrl('medium_image');
+      formatImageUrl('large_image');
+      formatTextUrl('permalink');
     }
     
-    function load() {
-      log("Loading sharing thumbnail", url);
-      xhr = $.ajax({
-        type: 'HEAD',
-        cache: false, // in case some browser tries to cache a 404
-        url: url,
-        success: show,
-        error: retry
-      });
+    function formatTextUrl(key) {
+      formatUrl(key, format.text(urls[key]));
     }
     
-    function retry() {
-      log("Sharing thumbnail not found, retry in", RETRY_DELAY);
-      setTimeout(load, RETRY_DELAY);
+    function formatImageUrl(key) {
+      formatUrl(key, format.image(urls[key], urls.permalink));
     }
     
-    function show() {
-      log("Sharing thumbnail found");
-      IMAGE.attr('src', url);
-      WRAPPER.addClass('loaded');
+    function formatUrl(key, url) {
+      sharing_url_els[key].val(url);
     }
-    
-    this.setUrl = function (newUrl) {
-      if(newUrl != url) {
-        abort();
-        hide();
-        url = newUrl;
-        load();
-      } else {
-        log("Sharing thumbnail URLs are identical; no change.");
+  
+    var thumbnail = new function SharingThumbnail() {
+      var WRAPPER = $('#preview-sharing-thumbnail-wrapper');
+      var IMAGE = $('#preview-sharing-thumbnail');
+      var RETRY_DELAY = 2000; // 2 seconds
+      var url = null;
+      var xhr = null;
+      
+      function abort() {
+        if(xhr && xhr.readystate != 4) {
+          log("Aborting sharing thumbnail XHR");
+          xhr.abort();
+        }
+      }
+      
+      function hide() {
+        WRAPPER.removeClass('loaded');
+      }
+      
+      function load() {
+        log("Loading sharing thumbnail", url);
+        xhr = $.ajax({
+          type: 'HEAD',
+          cache: false, // in case some browser tries to cache a 404
+          url: url,
+          success: show,
+          error: retry
+        });
+      }
+      
+      function retry() {
+        log("Sharing thumbnail not found, retry in", RETRY_DELAY);
+        setTimeout(load, RETRY_DELAY);
+      }
+      
+      function show() {
+        log("Sharing thumbnail found");
+        IMAGE.attr('src', url);
+        WRAPPER.addClass('loaded');
+      }
+      
+      this.setUrl = function (newUrl) {
+        if(newUrl != url) {
+          abort();
+          hide();
+          url = newUrl;
+          load();
+        } else {
+          log("Sharing thumbnail URLs are identical; no change.");
+        }
       }
     }
   }
@@ -763,7 +821,7 @@ View.Outfits = function (wardrobe) {
   function shareComplete(outfit) {
     save_outfit_wrapper_el.stopLoading().addClass('shared-outfit');
     setSharedOutfitPermalink(outfit);
-    setSharingUrls(outfit);
+    sharing.setOutfit(outfit);
     showSharing();
   }