blacklight 3.8.2 → 4.0.0.pre6

data/app/assets/javascripts/improved-modal/bootstrap-modalmanager.js

@@ -0,0 +1,353 @@
+ /* ===========================================================
+ * bootstrap-modalmanager.js 
+ * ===========================================================
+ * Copyright 2012 Jordan Schroter.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ========================================================== */
+
+!function($){
+
+	"use strict"; // jshint ;_;
+
+	var baseModalzIndex, baseModalAbszIndex, baseBackdropzIndex, baseBackdropAbszIndex,	zIndexFactor;
+
+	$(function(){
+		var $baseModal = $('<div class="modal hide" />').appendTo('body'),
+			$baseBackdrop = $('<div class="modal-backdrop hide" />').appendTo('body'),
+			$baseModalAbs = $('<div class="modal modal-absolute hide" />').appendTo('body'),
+			$baseBackdropAbs = $('<div class="modal-backdrop modal-absolute hide" />').appendTo('body');
+
+		baseModalzIndex = +$baseModal.css('z-index'),
+		baseModalAbszIndex = +$baseModalAbs.css('z-index'),
+		baseBackdropzIndex = +$baseBackdrop.css('z-index'),
+		baseBackdropAbszIndex = +$baseBackdropAbs.css('z-index'),
+		zIndexFactor = baseModalzIndex - baseBackdropzIndex;
+
+		$baseModal.remove();
+		$baseBackdrop.remove();
+		$baseModalAbs.remove();
+		$baseBackdropAbs.remove();
+		$baseBackdrop = $baseModal = $baseModalAbs = $baseBackdrop = null;
+	});
+
+	/* MODAL MANAGER CLASS DEFINITION
+	* ====================== */
+
+	var ModalManager = function (element, options) {
+		this.init(element, options);
+	}
+
+	window.ModalManager = ModalManager;
+
+	ModalManager.prototype = {
+
+		constructor: ModalManager,
+
+		init: function(element, options){
+			this.$element = $(element);
+			this.options = $.extend({}, $.fn.modalmanager.defaults, this.$element.data(), typeof options == 'object' && options);
+			this.stack = [];
+			this.isBody = this.$element[0] === $('body')[0];
+			
+			this.$container = this.$element.find('.modal-container');
+			this.$parent = this.$container.length ? this.$container : this.$element;
+	
+			this.$element.toggleClass('has-modal-container', !!this.$container.length);
+		},
+
+		createModal: function(element, options){
+			$(element).modal($.extend({ manager: this }, options));
+		},
+
+		appendModal: function(modal){
+			this.stack.push(modal);
+
+			var that = this;
+
+			modal.$element.on('show.modalmanager', targetIsModal(function(e){
+				modal.isShown = true;
+
+				that.$element
+					.toggleClass('modal-open', that.hasOpenModal())		
+					.toggleClass('page-overflow', $(window).height() < that.$element.height());
+				
+
+				var $scrollElement = (that.$container.length ? that.$container : 
+					(that.isBody ? $(window) : that.$element));
+				
+				var modalOverflow = $(window).height() < modal.$element.height() || modal.options.modalOverflow;
+
+				modal.$element
+					.toggleClass('modal-overflow', modalOverflow)
+					.css('margin-top', $scrollElement.scrollTop() - (modalOverflow ? 0 : modal.$element.height()/2))
+					.css('z-index', (!that.isBody ? baseModalAbszIndex : baseModalzIndex) 
+						+ (zIndexFactor * that.getIndexOfModal(modal)));
+					
+				that.backdrop(modal, function () {
+					var transition = $.support.transition && modal.$element.hasClass('fade')
+
+					
+					modal.$parent =  modal.$element.parent();
+					if (!modal.$parent.length || modal.$parent[0] !== that.$parent[0]) {
+						modal.$element.detach().appendTo(that.$parent);
+					}
+
+
+					modal.$element.show();
+
+					if (transition) {
+						modal.$element[0].style.display = 'run-in'; 
+						modal.$element[0].offsetWidth;
+						modal.$element.one($.support.transition.end, function () { modal.$element[0].style.display = 'block' });
+					}
+
+					modal.$element
+						.addClass('in')
+						.attr('aria-hidden', false)
+						.toggleClass('modal-absolute', !that.isBody);
+					
+					var complete = function(){
+						that.setFocus();
+						modal.$element.triggerHandler('shown');
+					}
+
+					transition ?
+						modal.$element.one($.support.transition.end, complete) :
+						complete();
+				});
+			}));
+
+			modal.$element.on('hidden.modalmanager', targetIsModal(function(e){
+				that.backdrop(modal);
+
+				if (modal.$backdrop){
+					$.support.transition && modal.$element.hasClass('fade')?
+						modal.$backdrop.one($.support.transition.end, function(){ that.destroyModal(modal) }) :
+						that.destroyModal(modal);
+				} else {
+					that.destroyModal(modal);
+				}
+
+			}));
+
+			modal.$element.on('destroy.modalmanager', targetIsModal(function(e){
+				that.removeModal(modal);
+			}));
+		},
+
+		destroyModal: function(modal){
+			modal.destroy();
+			var hasOpenModal = this.hasOpenModal();
+			this.$element.toggleClass('modal-open', hasOpenModal);
+			if (!hasOpenModal){
+				this.$element.removeClass('page-overflow');
+			}
+			this.setFocus();
+		},
+
+		hasOpenModal: function(){
+			for (var i = 0; i < this.stack.length; i++){
+				if (this.stack[i].isShown) return true;
+			}
+			return false;
+		},
+
+		setFocus: function () {
+			var topModal;
+
+			for (var i = 0; i < this.stack.length; i++){
+				if (this.stack[i].isShown) topModal = this.stack[i];
+			}
+
+			topModal && topModal.$element.focus();
+		},
+
+		removeModal: function(modal){
+			modal.$element.off('.modalmanager');
+			if (modal.$backdrop) this.removeBackdrop.call(modal);
+			this.stack.splice(this.getIndexOfModal(modal), 1);
+		},
+
+		getModalAt: function(index){
+			return this.stack[index];
+		},
+
+		getIndexOfModal: function(modal){
+			for (var i = 0; i < this.stack.length; i++){
+				if (modal === this.stack[i]) return i;
+			}
+		},
+
+		removeBackdrop: function (modal) {
+			modal.$backdrop.remove();
+			modal.$backdrop = null;
+		}, 
+
+		createBackdrop: function(animate){
+			var $backdrop;
+
+			if (!this.isLoading) {
+				$backdrop =  $('<div class="modal-backdrop ' + animate + '" />')
+					.appendTo(this.$parent)
+					.toggleClass('modal-absolute', !this.isBody);
+			} else {
+				$backdrop = this.$loading;
+				$backdrop.off('.modalmanager');
+				this.$spinner.remove();
+				this.isLoading = false;
+				this.$loading = this.$spinner = null;
+			}
+
+			return $backdrop
+		},
+
+		backdrop: function (modal, callback) {
+			var animate = modal.$element.hasClass('fade') ? 'fade' : '',
+				showBackdrop = $.extend({}, this.options, modal.options).backdrop;
+
+			if (modal.isShown && showBackdrop) {
+				var doAnimate = $.support.transition && animate && !this.isLoading;
+
+
+				modal.$backdrop = this.createBackdrop(animate);
+
+				modal.$backdrop.css('z-index', 
+						(!this.isBody ? baseBackdropAbszIndex : baseBackdropzIndex) 
+						+ (zIndexFactor * this.getIndexOfModal(modal)));
+
+
+				if (modal.options.backdrop != 'static') {
+					modal.$backdrop.on('click.modal', $.proxy(modal.hide, modal));
+				}
+
+				if (doAnimate) modal.$backdrop[0].offsetWidth // force reflow
+
+				modal.$backdrop.addClass('in')
+
+				doAnimate ?
+				modal.$backdrop.one($.support.transition.end, callback) :
+				callback();
+
+			} else if (!modal.isShown && modal.$backdrop) {
+				modal.$backdrop.removeClass('in');
+
+				var that = this;
+				$.support.transition && modal.$element.hasClass('fade')?
+					modal.$backdrop.one($.support.transition.end, function(){ that.removeBackdrop(modal) }) :
+					that.removeBackdrop(modal);
+
+			} else if (callback) {
+				callback();
+			}
+		},
+
+		removeLoading: function(){
+			this.$loading && this.$loading.remove();
+			this.$loading = null;
+			this.isLoading = false;
+		},
+
+		loading: function(callback){
+			callback = callback || function(){ };
+			
+			this.$element.toggleClass('modal-open', !this.isLoading || this.hasOpenModal());
+			
+			if (!this.isLoading) {
+
+				this.$loading = this.createBackdrop('fade');
+
+				this.$loading[0].offsetWidth // force reflow	
+
+				this.$loading
+					.css('z-index', 
+						(!this.isBody ? baseBackdropAbszIndex : baseBackdropzIndex) 
+						+ (zIndexFactor * this.stack.length))
+					.on('click.modalmanager', $.proxy(this.loading, this))
+					.addClass('in');
+
+				var $scrollElement = (this.$container.length ? this.$container : 
+						(this.isBody ? $(window) : this.$element));
+
+				this.$spinner = $('<div class="modal-spinner fade">')
+					.append(this.options.spinner)
+					.css('z-index', this.$loading.css('z-index'))
+					.css('margin-top', $scrollElement.scrollTop())
+					.appendTo(this.$parent)
+					.addClass('in');
+
+				this.isLoading = true;
+
+				$.support.transition ?
+				this.$loading.one($.support.transition.end, callback) :
+				callback();
+
+			} else if (this.isLoading && this.$loading) {
+				this.$loading.removeClass('in');
+
+				if (this.$spinner) this.$spinner.remove();
+
+				var that = this;
+				$.support.transition ?
+					this.$loading.one($.support.transition.end, function(){ that.removeLoading() }) :
+					that.removeLoading();
+
+			} else if (callback) {
+				callback(this.isLoading);
+			}
+		},
+
+		toggleLoading: function(callback){ this.loading(callback); }
+	}
+
+	/* PRIVATE METHODS
+	* ======================= */
+
+	// make sure the event target is the modal itself in order to prevent 
+	// other components such as tabsfrom triggering the modal manager. 
+	// if Boostsrap namespaced events, this would not be needed.
+	function targetIsModal(callback){
+		return function(e){
+			if (this === e.target){
+				callback.apply(this, arguments);
+			}
+		}
+	}
+
+
+	/* MODAL MANAGER PLUGIN DEFINITION
+	* ======================= */
+
+	$.fn.modalmanager = function (option) {
+		return this.each(function () {
+			var $this = $(this)
+			, data = $this.data('modalmanager');
+
+			if (!data) $this.data('modalmanager', (data = new ModalManager(this, options)))
+			if (typeof option == 'string') data[option]()
+		})
+	}
+
+	$.fn.modalmanager.defaults = {
+		backdrop: true,
+		spinner: '<div class="loading-spinner" style="width: 200px; margin-left: -100px;"><div class="progress progress-striped active"><div class="bar" style="width: 100%;"></div></div></div>'
+	}
+
+	$.fn.modalmanager.Constructor = ModalManager
+
+	// Create a default global modal manager 
+	$(function(){
+		window.GlobalModalManager = new ModalManager('body');
+	})
+
+}(jQuery);

data/app/assets/stylesheets/blacklight/_blacklight_base.css.scss

@@ -6,21 +6,32 @@
    not to use the Blacklight CSS file at all in your local app. */
 
 
-@import "compass";
-@import "compass/reset";
+
+$btnInfoBackground: #9ad0fe;
 
 @import 'blacklight/blacklight_defaults';
 
 /* Import this to maintain the old YUI font styles */
 @import "blacklight/layout";
-@import "blacklight/formatting";
 @import "blacklight/header";
+@import "blacklight/footer";
 @import "blacklight/catalog";
 @import "blacklight/bookmark";
 @import "blacklight/facets";
 @import "blacklight/search_history";
 @import "blacklight/print";
+@import "blacklight/responsive";
+
+@import "blacklight/dropdown";
+@import "blacklight/modal";
 
+@import "improved-modal/bootstrap-modal";
 
-/* IE 6 Adjustments */
-* html #search {left: -1.8em;}
+.hide-text {
+  width: 1px;
+  position: absolute;
+  display: inline-block;
+  text-indent: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+}

data/app/assets/stylesheets/blacklight/_bookmark.css.scss

@@ -1,3 +1,27 @@
+ul.bookmarkTools
+{
+  @include border-radius(0 0 4px 4px);
+	background-color: $well_bg_color;
+	border-color: $well_bg_color;
+	margin:0;
+
+  li
+  {
+    display:inline-block;
+  }
+
+  li form
+  {
+    display:inline;
+  }
+
+  li.refworks form input.submit
+  {
+    display:none;
+  }
+}
+
+
 ul.tools
 {
   margin:0;
@@ -12,9 +36,3 @@ ul.tools
     margin-right: 10px;
   }
 }
-
-#sidebar .tools {
-  li {
-  	display: block;
-  }
-}

data/app/assets/stylesheets/blacklight/_catalog.css.scss

@@ -1,3 +1,4 @@
+@import "bootstrap";
 #appliedParams
 {
 	background-color:$search_ui_bg_color;
@@ -5,7 +6,7 @@
 	border-left:1px solid $search_ui_border_color;
 	border-right:1px solid $search_ui_border_color;
 	margin-bottom:1.5em;
-	padding:1em 0.66em 0 1em;
+	padding:1em 0 0 0em;
 
   .label
   {
@@ -17,6 +18,15 @@
   }
 }
 
+.catalog_startOverLink {
+  padding-top: 0.5em;
+  float: right;
+}
+
+#sort-dropdown {
+  padding-left: 1em;
+}
+
 #document
 {
 	margin-top:1em;
@@ -31,20 +41,23 @@
 
 #documents
 {
-	margin-bottom:1.5em;
-	margin-top:1.5em;
-
+	margin-bottom:1em;
+	margin-top:1em;
 
   .documentHeader
   {
-    padding:0;
+     padding: 5px 0 0;
   }
 
-  .per_page
+  .per_page-form
   {
     padding-right:5px;
   }
 }
+.ajax_form
+{
+  margin-bottom: 0;
+}
 
 #librarian_view
 {
@@ -82,81 +95,41 @@
   }
 }
 
-#previousNextDocument
-{
-	background-color:$search_ui_bg_color;
-	border:1px solid $search_ui_border_color;
-	margin-bottom:1.5em;
-	overflow:auto;
-	padding:0.66em;
-
-  .next
-  {
-    float:right;
-  }
+.constraints-container {
+  @extend .well;
+  padding-bottom: 9px;
 }
 
-#search
-{
-  @include border-radius(4px 4px 0 0);
-	border:1px solid $search_ui_border_color;
-	font-size:120%;
-	padding:0.66em;
-	text-align:left;
-
-  #q
-  {
-    width:200px;
-  }
+.constraints-row {
+  margin-top:1em;
+  margin-bottom:1em;
+}
+span.constraints-label {
+  font-weight:bold;
+}
 
-  .submit
-  {
-    margin:0 0.5em;
-    padding:0 0.25em;
-    text-transform:capitalize;
-  }
+li.pill-with-label {
+  padding-top: 3px;
+  padding-right: 6px;
+  padding-left: 6px;
+  padding-bottom: 3px;
+  a.dropdown-toggle {
+    padding-left: 3px;
+    padding-right: 3px;
+    display: inline;
 
-  hr
-  {
-    display: none;
-    margin: 2em 0 1em;
   }
 }
 
-#search h2,.pagination h2,#results_text,.page_links .next_page,.page_links .prev_page
-{
-	display:none;
-}
-
-
-#sortAndPerPage
+.show-document-title 
 {
-	background-color:$search_ui_bg_color;
-	border-color:$search_ui_border_color;
-	border-style:solid;
-	border-width:0 1px 1px 1px;
-	padding:0.66em;
-
+  padding-top: 0.5em;
 
-  label
-  {
-    font-weight:400;
-  }
 }
 
-#startOverLink
+.show-document > #document
 {
-	background:asset_url('blacklight/start_over.gif', image) no-repeat center center;
-	border-bottom:none;
-	color:#fff;
-	display:block;
-	line-height:22px;
-	margin-top:-12px;
-	padding:0 7px 3px 12px;
-	position:absolute;
-	right:0.66em;
-	text-decoration:none;
-	top:50%;
+  margin-top: 0;
 }
 
 .appliedFilter
@@ -208,14 +181,17 @@
 {
 	border-bottom:1px dotted $dotted_border_color; 
 	clear:both;
-	padding:0.5em 0 0;
+  padding-bottom: 1em;
+
+  dd {
+    padding-bottom:0.5em;
+  }
 }
 
-.documentFunctions
+#documents .documentFunctions
 {
 	float:right;
-	margin-bottom:0.5em;
-	margin-left:1em;
+  margin: 10px 0;
 
   .bookmark_toggle
   {
@@ -223,23 +199,27 @@
   }
 }
 
+#sidebar form {
+  margin: 0;
+}
 
 .filterValue
 {
 	padding-right:37px;
 }
 
+
 .pageEntriesInfo
 {
-	background-color:$search_ui_bg_color;
+  background-color:$search_ui_bg_color;
 	border-color:$search_ui_border_color;
-	border-style:solid;
+  border-style:solid;
 	border-width:1px 1px 0;
-	padding:0.66em;
+	padding:0 0.66em 0.66em 0;
 	position:relative;
-	text-align:center;
 }
 
+
 .page_links
 {
 	margin-left:8em;
@@ -254,49 +234,12 @@
     font-weight:700;
   }
 }
-.pagination
-{
-	background-color:$search_ui_bg_color;
-	border-color:$search_ui_border_color;
-	border-style:solid;
-	border-width:0 1px 1px;
-	line-height:2em;
-	padding:0.66em;
-	position:relative;
-
-  .next_page
-  {
-    border-bottom:none;
-    margin-right:0.66em;
-    position:absolute;
-    right:0;
-  }
 
-  .prev_page
-  {
-    border-bottom:none;
-    left:0;
-    margin-left:0.66em;
-    position:absolute;
-  }
-
-  a
-  {
-    border:1px solid transparent;
-  }
-
-  a:hover,a:focus
-  {
-    border:1px solid #003;
-    text-decoration:none;
-  }
+.pagination {
+  text-align: center ;
+}
 
-  span.disabled
-  {
-    color:#999;
-  }
 
-}
 .show #appliedParams
 {
 	border-top:1px solid $search_ui_border_color;
@@ -317,30 +260,10 @@
 	padding:.5em;
 }
 
-dl.defList
-{
-	clear:both;
-	overflow:auto;
-	padding:0.5em 0;
-
-  dd
-  {
-    float:left;
-    margin:0;
-    padding:2px 0;
-    text-align:left;
-    width:450px;
-  }
-
-  dt
-  {
-    clear:both;
-    color: $field_name_color;
-    float:left;
-    margin:0;
-    padding:2px 1em 2px 0;
-    text-align:right;
-    width:20%;
+.dl-invert {
+  dt {
+    font-weight: normal;
+    color: #888;
   }
 }
 
@@ -366,3 +289,54 @@ span.page a,span.page.current
 	padding:0.2em 0.5em;
 	text-decoration:none;
 }
+
+
+#sidebar .well
+{
+  padding: 8px 0;
+}
+
+#sidebar-mlt li {
+  padding-bottom: 0.5em;
+}
+
+.show-document
+{
+  .document {
+    border: none;
+  }
+}
+
+#sortAndPerPage {
+  @extend .well;
+}
+
+#sortAndPerPage .dropdown-toggle {
+  cursor: pointer;
+}
+
+.no-js #sortAndPerPage {
+  & {
+    @extend .clearfix;
+  }
+  .dropdown-menu {
+    background: none;
+    box-shadow: none;
+    border: none;
+    position: relative;
+    display: block;
+    float: none;
+  }
+
+}
+
+.index_title {
+  float: left;
+  max-width: 414px; //span7; figure out how to calculate this correctly?
+}
+
+#email_form {
+  @extend .span6;
+}
+
+