umlaut 3.3.1 → 4.0.0.beta1

data/app/assets/javascripts/umlaut/search_autocomplete.js

@@ -1,105 +1,110 @@
 /* search_autocomplete.js.  Add autocomplete to Umlaut journal title search. */
 jQuery(document).ready(function($) {
+  if (typeof $.fn.typeahead === "undefined") {
+    if ( window.console && window.console.log ) {
+      window.console.log("ERROR: Can not load Umlaut autocomplete code, jQuery.fn.typeahead not available.")
+    }
+  } else {
 
+   // We override typeahead's 'render' function to NOT have the first
+   // item selected. We simply copy and pasted it, and removed the line
+   // `items.first().addClass('active')`, then set the prototype to our
+   // own function. Yes, this changes typeahead globally, sorry we don't have
+   // a way to change it just for certain typeaheads. 
+   //
+   // The default first-item-selected behavior has been hated by users
+   // in the journal search scenario, since when they hit return they
+   // get it even if they didn't want it. 
+   var newRender = function(items) {
+        var that = this
 
- // We override typeahead's 'render' function to NOT have the first
- // item selected. We simply copy and pasted it, and removed the line
- // `items.first().addClass('active')`, then set the prototype to our
- // own function. Yes, this changes typeahead globally, sorry we don't have
- // a way to change it just for certain typeaheads. 
- //
- // The default first-item-selected behavior has been hated by users
- // in the journal search scenario, since when they hit return they
- // get it even if they didn't want it. 
- var newRender = function(items) {
-      var that = this
+        items = $(items).map(function (i, item) {
+          i = $(that.options.item).attr('data-value', item)
+          i.find('a').html(that.highlighter(item))
+          return i[0]
+        })
 
-      items = $(items).map(function (i, item) {
-        i = $(that.options.item).attr('data-value', item)
-        i.find('a').html(that.highlighter(item))
-        return i[0]
-      })
+        this.$menu.html(items)
+        return this
+   };
+   $.fn.typeahead.Constructor.prototype.render = newRender;
+   // have to fix 'select' to accomodate possible no selection too
+   $.fn.typeahead.Constructor.prototype.select = function() {
+      var val = this.$menu.find('.active').attr('data-value');
+      if (val) {
+        this.$element
+          .val(this.updater(val))
+          .change();
+      }
+      return this.hide()
+   }
 
-      this.$menu.html(items)
-      return this
- };
- $.fn.typeahead.Constructor.prototype.render = newRender;
- // have to fix 'select' to accomodate possible no selection too
- $.fn.typeahead.Constructor.prototype.select = function() {
-    var val = this.$menu.find('.active').attr('data-value');
-    if (val) {
-      this.$element
-        .val(this.updater(val))
-        .change();
-    }
-    return this.hide()
- }
+    $(document).on("submit", "form.OpenURL", function() {
+      var form = $(this);
+      if ( form.find(".rft_title").val() != $(this).val()) {
+        form.find(".rft_object_id").val("");
+        form.find(".rft_title").val("");
+      }
+    });
 
-  $(document).on("submit", "form.OpenURL", function() {
-    var form = $(this);
-    if ( form.find(".rft_title").val() != $(this).val()) {
-      form.find(".rft_object_id").val("");
-      form.find(".rft_title").val("");
+    // Search for the title with the current form. Only search
+    // if there are more than two chars though!
+    //
+    var search_title = function(query, process) {
+      if (query.length > 2) {
+        var form = this.$element.closest("form");
+        var url = form.attr("action").replace("journal_search", "auto_complete_for_journal_title");
+        // Get JSON from 
+        $.getJSON(
+          form.attr("action").replace("journal_search", "auto_complete_for_journal_title"),
+          form.serialize(),
+          function(data) {
+            process(data)
+          }
+        )
+      }
     }
-  });
 
-  // Search for the title with the current form. Only search
-  // if there are more than two chars though!
-  //
-  var search_title = function(query, process) {
-    if (query.length > 2) {
-      var form = this.$element.closest("form");
-      var url = form.attr("action").replace("journal_search", "auto_complete_for_journal_title");
-      // Get JSON from 
-      $.getJSON(
-        form.attr("action").replace("journal_search", "auto_complete_for_journal_title"),
-        form.serialize(),
-        function(data) {
-          process(data)
-        }
-      )
-    }
-  }
 
+    var lookup_limit = 300; //ms 
+    // Uses a timer to only do a lookup at most once every
+    // 300ms . Based on rejected pull request at:
+    // https://github.com/twitter/bootstrap/pull/6320
+    var throttled_search_title = function(query, process) {
+      if(this.lookupTimer) {
+        clearTimeout(this.lookupTimer);
+      }
 
-  var lookup_limit = 300; //ms 
-  // Uses a timer to only do a lookup at most once every
-  // 300ms . Based on rejected pull request at:
-  // https://github.com/twitter/bootstrap/pull/6320
-  var throttled_search_title = function(query, process) {
-    if(this.lookupTimer) {
-      clearTimeout(this.lookupTimer);
+      this.lookupTimer = setTimeout($.proxy(search_title, this, query, process), lookup_limit);
+      return this;
     }
 
-    this.lookupTimer = setTimeout($.proxy(search_title, this, query, process), lookup_limit);
-    return this;
-  }
-
-  $("input.title_search").typeahead({
-    items: 10,
-    minLength: 3,
-    source: throttled_search_title,
-    highlighter: function(item) { 
-      // Bootstrap updates the item as it passes through the callback chain
-      // so this is a hack to ensure we get the proper values.
-      return "<span id=\"" + item.object_id + "\" class=\"title\">"+ item.title + "</span>"; 
-    },
-    sorter: function(items) { return items },
-    matcher: function(item) { return true; },
-    updater: function(item) {
-      // Get the selected item via our hack.
-      var selected_item = this.$menu.find('.active .title');  
-      if (selected_item.length > 0) {
-        // We set the id attribute as the object id
-        var object_id = selected_item.attr("id");
-        // We set the inner text with the title
-        var title = selected_item.text();
-        var form = this.$element.closest("form");
-        form.find("input.rft_object_id").val(object_id);
-        form.find("input.rft_title").val(title);
-        form.find("select.title_search_type").val("exact");
-        return title;
+    $("input.title_search").typeahead({
+      items: 10,
+      minLength: 3,
+      source: throttled_search_title,
+      highlighter: function(item) { 
+        // Bootstrap updates the item as it passes through the callback chain
+        // so this is a hack to ensure we get the proper values.
+        return "<span id=\"" + item.object_id + "\" class=\"title\">"+ item.title + "</span>"; 
+      },
+      sorter: function(items) { return items },
+      matcher: function(item) { return true; },
+      updater: function(item) {
+        // Get the selected item via our hack.
+        var selected_item = this.$menu.find('.active .title');  
+        if (selected_item.length > 0) {
+          // We set the id attribute as the object id
+          var object_id = selected_item.attr("id");
+          // We set the inner text with the title
+          var title = selected_item.text();
+          var form = this.$element.closest("form");
+          form.find("input.rft_object_id").val(object_id);
+          form.find("input.rft_title").val(title);
+          form.find("select.title_search_type").val("exact");
+          return title;
+        }
       }
-    }
-  });
+    });
+  }
 });

data/app/assets/javascripts/umlaut/update_html.js

@@ -44,16 +44,24 @@
 
   // Define an object constructor on the global window object
   // For our UmlautHtmlUpdater object. 
-  function HtmlUpdater(umlaut_base, context_object) {
+  //
+  // Third 'locale' arg is optional locale string eg 'en', 'de'
+  //
+  // Note this object is used by external sites as part of the JQuery updater
+  // javascript API. This is API, which has to be callable by non-Umlaut sites.
+  // Try not to change the method signature in incompatible ways. 
+  function HtmlUpdater(umlaut_base, context_object, locale) {
     if (context_object == undefined)
-      context_object = "";      
-    
+      context_object = "";
+
     // Remove query string (if present)
     umlaut_base = umlaut_base.replace(/\?.*$/, '')
     // Remove trailing slash
     umlaut_base = umlaut_base.replace(/\/$/,'');
     this.umlaut_uri =  umlaut_base + '/resolve/partial_html_sections?umlaut.response_format=json&' + context_object;
-        
+    if (locale)
+      this.umlaut_uri += "&umlaut.locale=" + locale;
+
     this.section_targets = [];
            
     this.add_section_target = function(config) {

data/app/assets/stylesheets/umlaut.css.scss

@@ -1,11 +1,9 @@
 // Bootstrap Variable over-rides can go here
 
-// We make lightGray used for .muted slightly darker than
-//default #999
-$grayLight: #888;
 
+@import "bootstrap-sprockets";
 @import "bootstrap";
-@import "bootstrap-responsive";
+
 @import "umlaut/variables";
 @import "umlaut/mixins";
 @import "umlaut/layout";

data/app/assets/stylesheets/umlaut/_az.scss

@@ -5,17 +5,17 @@
   @include clearfix;
   a, span {
     float: left;
-    margin-bottom: $baseLineHeight / 4;
-    margin-right: $baseLineHeight / 4;
-    @include border-radius(4px);
+    margin-bottom: $line-height-computed / 4;
+    margin-right: $line-height-computed / 4;
+    border-radius: 4px;
     padding: 4px 8px;
     border: 1px solid $umlautAzBorderColor;
-    line-height: $baseLineHeight;
+    line-height: $line-height-base;
     text-decoration: none;
     color: $umlautAzLinkColor;
-    background-color: $paginationBackground;
+    background-color: $pagination-bg;
     &:hover {
-      background-color: $paginationActiveBackground;
+      background-color: $pagination-hover-bg;
     }
 
     &.active {

data/app/assets/stylesheets/umlaut/_forms.scss

@@ -2,30 +2,36 @@ input[type="submit"] {
   @extend .btn;
 }
 
-/* Used on search form, our own .very-inline is added to form-inline, its 
-   SUPER inline, and allows multiple controls on a line, lined up well, with 
-   sub-groups of controls in span.control-sub-group */
-.form-inline.form-very-inline  {
-  .control-group {
-    display: inline-block;
-    line-height: ($baseLineHeight * 2);
+/* sub-groups of controls in span.control-sub-group */
+.form-inline {
+   .form-group {
+    //display: inline-block;
+    line-height: ($line-height-base * 2);
     margin-right: $umlautIndent;
   }
   .control-sub-group {
     display: inline-block;
     margin-right: $umlautIndent;
   }
-  label, select, text-area, input, .uneditable-input {
-    vertical-align: bottom;
-  }
-  legend + .control-group {
-    margin-top: 0; //not sure why bootstrap did a margin here
-  }
-
 }
 
-@media (max-width: 767px) {
+@media (max-width: $screen-sm-min) {
   .umlaut-citation-link {
     text-align: left;
   }
+}
+
+// even smaller than bootstrap's input-mini, for volume/issue/start page
+.form-inline .form-control.input-tiny, .input-tiny {
+ width: 5em; 
+}
+
+/* These seems to be a bug in bootstrap 3.2.0.1... */
+input[type=submit].btn-default {
+  border-color: $btn-default-border;
+}
+input.btn-primary[type="submit"]:hover, input[type="submit"].btn-primary:focus {
+  color: white;
+  background-color: #3071a9;
+  border-color: #285e8e;
 }

data/app/assets/stylesheets/umlaut/_layout.scss

@@ -10,8 +10,6 @@ body {
   @include umlaut-container();  
   // max width and center beyond that
   max-width: $umlautContainerMaxWidth;
-  margin-left: auto;
-  margin-right: auto;
 }
 
 .header {
@@ -21,7 +19,7 @@ body {
   border: {
     bottom: 1px solid $umlautHeaderBorderColor;
   }    
-  color: $navbarBrandColor;
+  color: $navbar-default-brand-color;
   h1 {
     //semantically an h1, but let's make it not so big, inspired
     //by twitter's navbar styles, copied
@@ -31,6 +29,7 @@ body {
     padding: 0;    
     font-size: 20px;
     font-weight: 200;
+    line-height: 40px;
   }
   line-height: 40px;
 }
@@ -38,9 +37,9 @@ body {
 
 .footer {
   @include umlaut-container();
-  @extend .muted;
+  @extend .text-muted;
   margin: {
-    top: $baseLineHeight;
+    top: $line-height-computed;
   }
   padding: {
     top: 10px;

data/app/assets/stylesheets/umlaut/_misc.scss

@@ -5,7 +5,7 @@
 
 .text-small {
   font: {
-    size: $fontSizeSmall
+    size: $font-size-small
   }
 }
 
@@ -17,7 +17,7 @@
 }
 
 .collapsible .collapse {
-  margin-top:  $baseLineHeight / 2; 
+  margin-top:  $line-height-computed / 2; 
 }
 
 /* Google Scholar Link: 
@@ -27,22 +27,19 @@
    font-variant: small-caps;
 }
 
-// even smaller than bootstrap's input-mini, for volume/issue/start page
-.input-tiny      { width: 45px; }
-
 .umlaut-permalink {
   text-align: right;
   margin-left: $umlautIndent;
 }
 
 .umlaut-permalink-container {
-    color: $grayDark;
+    color: $gray-dark;
     @include text-overflow;
 }
 .umlaut-permalink-content {  
   background-color: $umlautBackgroundColor;
-  border-radius: $borderRadiusSmall;
-  border: 1px solid $btnBorder;
+  border-radius: $border-radius-small;
+  border: 1px solid $btn-default-border;
   padding: 3px 6px;  
   .spinner {
     vertical-align: baseline;
@@ -55,13 +52,19 @@
   margin-top: 2px;
 }
 
+.umlaut-locale-selector {
+  float: right;
+  a {
+    padding: 20px;
+  }
+}
+
 // Used to conveniently add a mini spinner to page with
 // JS, usually by adding an <i class='spinner'></i>
 .spinner {
   display: inline-block;
   width: 16px;
   height: 16px;
-  @include ie7-restore-right-whitespace();
   line-height: 16px;
   vertical-align: top;
   margin-top: 1px;  

data/app/assets/stylesheets/umlaut/_mixins.scss

@@ -4,7 +4,7 @@
   padding-right: $umlautContainerPadding * 2;
   
   // get rid of double left margin at smaller
-  @media (max-width: 767px) {
+  @media (max-width: $screen-sm-min) {
     padding: {
       left: $umlautContainerPadding;
       right: $umlautContainerPadding;
@@ -29,7 +29,6 @@
   display: inline-block;
   width: 16px;
   height: 16px;
-  @include ie7-restore-right-whitespace();
   line-height: 16px;
   vertical-align: top;
   margin-top: 1px;
@@ -58,7 +57,7 @@
 
 
   border: 1px solid $borderColor;
-  @include border-radius($baseBorderRadius);
+  border-radius: $border-radius-base;
   @include box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
 }
 

data/app/assets/stylesheets/umlaut/_resolve.scss

@@ -7,12 +7,14 @@
 
 // Main section styles
 .umlaut-main {  
-  padding-right: ($umlautContainerPadding * 2);
+  padding-right: 10px + ($umlautContainerPadding * 2);
 }
 
 .response_list {
+  padding-left: 0;
+
   .response_item  {
-    margin-bottom: ($baseLineHeight / 2);
+    margin-bottom: ($line-height-computed / 2);
     // Try to make line wrap respect space for icon/indent. 
     padding-left: $umlautIndent;
     text-indent: -$umlautIndent;
@@ -20,14 +22,16 @@
 }
 
 .umlaut-section {
-  margin: 0 0 ($baseLineHeight * 1.5) 0;  
+  margin: 0 0 ($line-height-computed * 1.5) 0;  
   .section_heading h3 {
     /* semantically an h3, but make it sized an h4 */
     @extend h4;
+    /* bold for consistency with previous bootstrap2 umlaut, we like it better */
+    font-weight: bold;
     margin-top: 0;    
   }
   .section-subheading {
-    @extend .muted;
+    @extend .text-muted;
   }
 
 
@@ -68,7 +72,7 @@
   &.related_items {
     // Margin between the 'cited by' and 'similar' lists
     .response_list + .response_list {
-      margin-top: $baseLineHeight * 1.5;
+      margin-top: $line-height-computed * 1.5;
     }
 
   }
@@ -78,6 +82,11 @@
       @extend .umlaut_icons-famfamfam-book;
     }
     .umlaut-holdings {
+      .row {
+        margin-left: 0;
+        margin-right: 0;
+      }
+
       .umlaut-holding {
         margin-bottom: $umlautIndent;
       }
@@ -88,10 +97,10 @@
         text-indent: -$umlautIndent;
       }
       .umlaut-holding-notes {
-        @extend .muted;
+        @extend .text-muted;
       }
       .umlaut-holding-match-reliability, .umlaut-holding-notes, .umlaut-holding-coverage {
-        margin: ($baseLineHeight / 3) 0 ($baseLineHeight / 3) $umlautIndent;        
+        margin: ($line-height-computed / 3) 0 ($line-height-computed / 3) $umlautIndent;        
       }
       .item_status_row {
         min-height: 0;
@@ -110,23 +119,23 @@
   }
 
   &.search_inside {
-    .input-append .add-on, .input-prepend .add-on {
+    .input-group .input-group-addon {
       // can't figure out if this is a bug in bootstrap or what
       height: auto;    
     }
     select.id {
-      @include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
+      border-radius: 0 $input-border-radius $input-border-radius 0;
     }
   }
 }
 
 .umlaut-section-highlighted {
   @include umlaut-well($umlautHighlightedSectionBackgroundColor, $umlautHighlightedSectionBorderColor);
-  @include border-radius($umlautBorderRadiusExtraLarge);
+  border-radius: $umlautBorderRadiusExtraLarge;
 }
 
 .section_prompt {
-  @extend .muted;
+  @extend .text-muted;
 }
 
 // extra block-level elements inside a response_item
@@ -134,7 +143,7 @@
 // need any indent. 
 %indented-subitem {
   text-indent: 0;
-  margin: ($baseLineHeight / 6) 0;
+  margin: ($line-height-computed / 6) 0;
 }
 
 .umlaut-content-indent {
@@ -143,7 +152,7 @@
 
 .edition_warning, .response_source, .response_coverage_statement, .response_notes {
   @extend %indented-subitem;
-  @extend .muted;
+  @extend .text-muted;
 }
 
 .response_notes {
@@ -160,26 +169,27 @@
   padding: $umlautIndent;
 
   border:  1px solid $umlautSidebarBorderColor;    
-  @include border-radius($umlautBorderRadiusExtraLarge);
+  border-radius: $umlautBorderRadiusExtraLarge;
 
   background-color: $umlautSidebarBackgroundColor;
 
   .help-text-icon {
     height: 100%;
 
-    font-size: $baseLineHeight * 1.85;
+    font-size: $line-height-computed * 1.85;
+    line-height: 20px;
     font-weight: bold;
     float: right;
     clear: right;
 
     margin-left: $umlautIndent;
-    padding: $baseLineHeight * 0.5;
+    padding: $line-height-computed * 0.5;
     
 
     background-color: $umlautHighlightedSectionBackgroundColor;
     border: 1px solid $umlautHighlightedSectionBorderColor;    
 
-    @include border-radius($baseLineHeight * 2);    
+    border-radius: ($line-height-computed * 2);    
   }
   .umlaut-section.help {
     @include clearfix();    
@@ -197,7 +207,7 @@
   .resource_info_sections, .umlaut-section.cover_image {
     display:        table-cell;
     vertical-align: top;
-    margin: $baseLineHeight;
+    margin: $line-height-computed;
     width: 100%;
   }
 
@@ -228,13 +238,13 @@
 
 
   .resource-type {    
-    @extend .muted;
+    @extend .text-muted;
     margin: 0;    
   }
   h2.title {  
     margin-top: 0;
     @extend h4;
-    line-height: $baseLineHeight * 1.1;
+    line-height: $line-height-computed * 1.1;
     font-weight: normal;    
   }
   
@@ -245,7 +255,7 @@
   dl.citation-info {
     /* based on dl-horizontal, but tweaked.  */
     @include clearfix();   
-    @extend .muted; // subsidiary stuff, mute it
+    @extend .text-muted; // subsidiary stuff, mute it
     margin-top: 10px;
     margin-bottom: 10px;     
     dt {      
@@ -273,12 +283,12 @@
 
 .umlaut-available {
   color: $umlautAvailableColor;
-  font-size: $baseFontSize;
+  font-size: $font-size-base;
 }
 
 .umlaut-unavailable {
   color: $umlautUnavailableColor;
-  font-size: $baseFontSize;
+  font-size: $font-size-base;
 }
 
 // Resolve Errors
@@ -291,7 +301,18 @@ a:not(:hover) .coverage_summary {
   color: black; 
 }
 
-@media (max-width: 767px) {
+@media (max-width: $screen-sm-min) {
+  /* hacky taking account of bootstrap3, without a major refactor
+    of our css for it */
+  .umlaut-main-container-fluid .row {
+    margin-left: 0;
+    margin-right: 0;
+  }
+  .umlaut-sidebar-container {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
   .umlaut-main {
     padding: 0;
   }