diff --git a/README.md b/README.md index 0562c9e..0c7f773 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,5 @@ # iiif-gallery-component -https://iiif-gallery-component.netlify.com - npm i npm run build npm start diff --git a/dist/GalleryComponent.min.js b/dist/GalleryComponent.min.js new file mode 100644 index 0000000..c5f33e5 --- /dev/null +++ b/dist/GalleryComponent.min.js @@ -0,0 +1 @@ +var __extends=this&&this.__extends||function(){var extendStatics=function(d,b){extendStatics=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(d,b){d.__proto__=b}||function(d,b){for(var p in b)if(b.hasOwnProperty(p))d[p]=b[p]};return extendStatics(d,b)};return function(d,b){extendStatics(d,b);function __(){this.constructor=d}d.prototype=b===null?Object.create(b):(__.prototype=b.prototype,new __)}}();var IIIFComponents;(function(IIIFComponents){var GalleryComponent=function(_super){__extends(GalleryComponent,_super);function GalleryComponent(options){var _this=_super.call(this,options)||this;_this._init();_this._resize();return _this}GalleryComponent.prototype._init=function(){var _this=this;var success=_super.prototype._init.call(this);if(!success){console.error("Component failed to initialise")}this._$header=$('
');this._$element.append(this._$header);this._$leftOptions=$('
');this._$header.append(this._$leftOptions);this._$rightOptions=$('
');this._$header.append(this._$rightOptions);this._$sizeDownButton=$('');this._$leftOptions.append(this._$sizeDownButton);this._$sizeRange=$('');this._$leftOptions.append(this._$sizeRange);this._$sizeUpButton=$('');this._$leftOptions.append(this._$sizeUpButton);this._$multiSelectOptions=$('
');this._$rightOptions.append(this._$multiSelectOptions);this._$selectAllButton=$('
");this._$multiSelectOptions.append(this._$selectAllButton);this._$selectAllButtonCheckbox=$(this._$selectAllButton.find("input:checkbox"));this._$selectButton=$(''+this.options.data.content.select+"");this._$multiSelectOptions.append(this._$selectButton);this._$main=$('
');this._$element.append(this._$main);this._$thumbs=$('
');this._$main.append(this._$thumbs);var viewingDirection=this.options.data.helper.getViewingDirection()||manifesto.ViewingDirection.leftToRight();this._$thumbs.addClass(viewingDirection.toString());this._$sizeDownButton.on("click",function(){var val=Number(_this._$sizeRange.val())-1;if(val>=Number(_this._$sizeRange.attr("min"))){_this._$sizeRange.val(val.toString());_this._$sizeRange.trigger("change");_this.fire(GalleryComponent.Events.DECREASE_SIZE)}});this._$sizeUpButton.on("click",function(){var val=Number(_this._$sizeRange.val())+1;if(val<=Number(_this._$sizeRange.attr("max"))){_this._$sizeRange.val(val.toString());_this._$sizeRange.trigger("change");_this.fire(GalleryComponent.Events.INCREASE_SIZE)}});this._$sizeRange.on("change",function(){_this._updateThumbs();_this._scrollToThumb(_this._getSelectedThumbIndex())});this._$selectAllButton.checkboxButton(function(checked){if(checked){_this._getMultiSelectState().selectAll(true)}else{_this._getMultiSelectState().selectAll(false)}_this.set()});this._$selectButton.on("click",function(){var ids=_this._getMultiSelectState().getAllSelectedCanvases().map(function(canvas){return canvas.id});_this.fire(GalleryComponent.Events.MULTISELECTION_MADE,ids)});this._setRange();$.templates({galleryThumbsTemplate:'
{^{if multiSelectEnabled}} {{/if}}
{{:#index + 1}} {{>label}}  {{>data.searchResults}}
'});var that=this;$.views.helpers({galleryThumbClassName:function(){var className="thumb preLoad";if(this.data.index===0){className+=" first"}if(!this.data.uri){className+=" placeholder"}return className},galleryThumbSearchResultsTitle:function(){var searchResults=Number(this.data.data.searchResults);if(searchResults){if(searchResults>1){return Utils.Strings.format(that.options.data.content.searchResults,searchResults.toString())}return Utils.Strings.format(that.options.data.content.searchResult,searchResults.toString())}return null}});this._$main.on("scroll",function(){_this._updateThumbs()},this.options.data.scrollStopDuration);if(!this.options.data.sizingEnabled){this._$sizeRange.hide()}return success};GalleryComponent.prototype.data=function(){return{chunkedResizingThreshold:400,content:{searchResult:"{0} search result",searchResults:"{0} search results",select:"Select",selectAll:"Select All"},debug:false,helper:null,imageFadeInDuration:300,initialZoom:6,minLabelWidth:20,pageModeEnabled:false,scrollStopDuration:100,searchResults:[],sizingEnabled:true,thumbHeight:320,thumbLoadPadding:3,thumbWidth:200,viewingDirection:manifesto.ViewingDirection.leftToRight()}};GalleryComponent.prototype.set=function(){this._thumbs=this.options.data.helper.getThumbs(this.options.data.thumbWidth,this.options.data.thumbHeight);if(this.options.data.viewingDirection&&this.options.data.viewingDirection.toString()===manifesto.ViewingDirection.bottomToTop().toString()){this._thumbs.reverse()}if(this.options.data.searchResults&&this.options.data.searchResults.length){for(var i=0;i0;if(!anySelected){this._$selectButton.hide()}else{this._$selectButton.show()}}};GalleryComponent.prototype._getMultiSelectState=function(){return this.options.data.helper.getMultiSelectState()};GalleryComponent.prototype._createThumbs=function(){var that=this;if(!this._thumbs)return;this._$thumbs.undelegate(".thumb","click");this._$thumbs.empty();var multiSelectState=this._getMultiSelectState();var heights=[];for(var i_2=0;i_2');$img.hide();$img.on("load",function(){$(this).fadeIn(fadeDuration,function(){$(this).parent().switchClass("loading","loaded")})});$wrap.prepend($img);if(cb)cb($img)}else{$wrap.addClass("hidden")}};GalleryComponent.prototype._getThumbsByRange=function(range){var thumbs=[];for(var i=0;i=scrollTop-padding){numToUpdate+=1;this._sizeThumb($thumb);$thumb.addClass("insideScrollArea");this._loadThumb($thumb)}else{$thumb.removeClass("insideScrollArea")}}if(debug){console.log("number of thumbs to update: "+numToUpdate)}};GalleryComponent.prototype._getSelectedThumbIndex=function(){return Number(this._$selectedThumb.data("index"))};GalleryComponent.prototype._getAllThumbs=function(){if(!this._thumbsCache){this._thumbsCache=this._$thumbs.find(".thumb")}return this._thumbsCache};GalleryComponent.prototype._getThumbByIndex=function(canvasIndex){return this._$thumbs.find('[data-index="'+canvasIndex+'"]')};GalleryComponent.prototype._scrollToThumb=function(canvasIndex){var $thumb=this._getThumbByIndex(canvasIndex);this._$main.scrollTop($thumb.position().top)};GalleryComponent.prototype.selectIndex=function(index){if(!this._thumbs||!this._thumbs.length)return;this._getAllThumbs().removeClass("selected");this._$selectedThumb=this._getThumbByIndex(index);this._$selectedThumb.addClass("selected");this._scrollToThumb(index);this._updateThumbs()};GalleryComponent.prototype._setRange=function(){var norm=Utils.Maths.normalise(Number(this._$sizeRange.val()),0,10);this._range=Utils.Maths.clamp(norm,.05,1)};GalleryComponent.prototype._setThumbMultiSelected=function(thumb,selected){$.observable(thumb).setProperty("multiSelected",selected)};GalleryComponent.prototype._resize=function(){};return GalleryComponent}(_Components.BaseComponent);IIIFComponents.GalleryComponent=GalleryComponent})(IIIFComponents||(IIIFComponents={}));(function(IIIFComponents){var GalleryComponent;(function(GalleryComponent){var Events=function(){function Events(){}Events.DECREASE_SIZE="decreaseSize";Events.INCREASE_SIZE="increaseSize";Events.MULTISELECTION_MADE="multiSelectionMade";Events.THUMB_SELECTED="thumbSelected";Events.THUMB_MULTISELECTED="thumbMultiSelected";return Events}();GalleryComponent.Events=Events})(GalleryComponent=IIIFComponents.GalleryComponent||(IIIFComponents.GalleryComponent={}))})(IIIFComponents||(IIIFComponents={}));(function(g){if(!g.IIIFComponents){g.IIIFComponents=IIIFComponents}else{g.IIIFComponents.GalleryComponent=IIIFComponents.GalleryComponent}})(window); diff --git a/dist/styles.css b/dist/styles.css index 3e070cc..54b98f0 100644 --- a/dist/styles.css +++ b/dist/styles.css @@ -156,7 +156,7 @@ padding-left: 14px; } .iiif-gallery-component .main .thumbs .thumb.placeholder .wrap { - background-image: url('../img/unavailable.png'); + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAD4AAAAeCAMAAABDs11AAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NzYxNjM5MUQ2RjUwMTFFNDkzQkZEMUEzMEIzRkQ3NTkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NzYxNjM5MUU2RjUwMTFFNDkzQkZEMUEzMEIzRkQ3NTkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NjE2MzkxQjZGNTAxMUU0OTNCRkQxQTMwQjNGRDc1OSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NjE2MzkxQzZGNTAxMUU0OTNCRkQxQTMwQjNGRDc1OSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PsMAmo0AAAAwUExURerq6tTU1KKiopSUlLy8vPX19Ts7O2RkZMjIyFFRUd/f36+vr4WFhXV1df///x8fHwiwmiEAAAAQdFJOU////////////////////wDgI10ZAAABLklEQVR42uSU224DIQxEbXMzLIz//29rIBtVUSttmoc2Kg8WMj5isDyQvbToT+EBv4wzA13R8kiAmEeGDUIK13DKgl7Rk5ik7FFhzg7kS3j0Sj8JJSowtwUFc41ncEkq4Y7ny28/cRRjTPHRY/Sj58RHIKJ469rl1n25jvbjqcsNoPIeM//v8DXMFL4pCVRPF7MsZjyDm13DuRGiVZ8Tzj7vbhN3fqvr9pV1nHFMXGfNI051oKhOh+lhokLZkix8Z72iYNCQlo2PRzzObY5uldHJqJtEwsZ3diIsNHS6n0889RluOLfoN7hPUxaKhTa+s3f8+Px2dS2CuvH5Rbmc6G1wxeN2+84yZCzxqeR2F1+9Re7mjQdAvbijW3GrN134zvLR/PN8bN27Du2HAAMAjt1gFogew24AAAAASUVORK5CYII="); background-repeat: no-repeat; background-position-x: 50%; background-position-y: 50%; diff --git a/examples/index.html b/examples/index.html index eae0530..6e47123 100644 --- a/examples/index.html +++ b/examples/index.html @@ -3,7 +3,7 @@ iiif-gallery-component: test - +