iiif viewer selectwoo integration

arches/app/media/css/arches.scss

@@ -11727,6 +11727,11 @@ a.filter-tools:hover {
     width: 100%;
     padding-left: 20px;
     margin: 20px;
+
+    .install-buttons {
+        display: flex;
+        flex-wrap: wrap;
+    }
 }
 
 .gallery-expanded .manifest-editor {

arches/app/media/js/views/components/iiif-viewer.js

@@ -7,12 +7,14 @@ define([
     'views/components/workbench',
     'templates/views/components/iiif-popup.htm',
     'templates/views/components/iiif-viewer.htm',
+    'select-woo-src/utils',
+    'select-woo-src/data/array',
     'leaflet-iiif',
     'leaflet-fullscreen',
     'leaflet-side-by-side',
     'bindings/select2-query',
     'bindings/leaflet'
-], function($, ko, koMapping, L, arches, WorkbenchViewmodel, iiifPopup, iiifViewerTemplate) {
+], function($, ko, koMapping, L, arches, WorkbenchViewmodel, iiifPopup, iiifViewerTemplate, selectWooUtils, selectWooArrayAdapter) {
     var IIIFViewerViewmodel = function(params) {
         var self = this;
         var abortFetchManifest;
@@ -289,6 +291,8 @@ define([
                             canvas.thumbnail = canvas.thumbnail["@id"];
                         else if (canvas.images && canvas.images[0] && canvas.images[0].resource)
                             canvas.thumbnail = canvas.images[0].resource["@id"];
+                        canvas.id = self.getCanvasService(canvas);
+                        canvas.text = canvas.label;
                         canvases.push(canvas);
                     });
                 }
@@ -312,7 +316,9 @@ define([
                 url: arches.urls.iiifmanifest,
                 dataType: 'json',
                 quietMillis: 250,
-                data: function(term, page) {
+                data: function(requestParams) {
+                    let term = requestParams.term || '';
+                    let page = requestParams.page || 1;
                     var data = {
                         start: (page-1)*limit,
                         limit: limit
@@ -321,68 +327,62 @@ define([
                     if (term) data.query = term;
                     return data;
                 },
-                results: function(data, page) {
+                processResults: function(data) {
                     var results = data.results;
                     if (validateUrl(queryTerm)) results.unshift({
                         url: queryTerm,
                         label: queryTerm
                     });
+                    results.forEach((item) => {
+                        item.id = item.url;
+                    });
                     return {
-                        results: results,
-                        more: data.count >= (page*limit)
+                        "results": results,
+                        "pagination": {
+                            "more": data.more
+                        }
                     };
                 }
             },
-            id: function(item) {
-                return item.url;
-            },
-            formatResult: function(item) {
+            templateResult: function(item) {
                 return item.label;
             },
-            formatSelection: function(item) {
+            templateSelection: function(item) {
                 return item.label;
-            },
-            clear: function() {
-                self.manifest('');
-            },
-            isEmpty: ko.computed(function() {
-                return self.manifest() === '' || !self.manifest();
-            }, this),
-            initSelection: function() {
-                return;
             }
         };
 
+        var CustomDataAdapterClass = function(){
+            return {};
+        };
+
+        var CustomDataAdapter = selectWooUtils.Decorate(selectWooArrayAdapter, CustomDataAdapterClass);
+        CustomDataAdapter.prototype.current = function(callback){
+            const canvasObj = self.canvases().find(canvas => self.getCanvasService(canvas) == this.options.options.value());
+            callback([canvasObj]);
+        };
+        CustomDataAdapter.prototype.query = function(params, callback){
+            // self.canvases.subscribe(function(canvases){
+            //     callback({"results": canvases});
+            // });
+            callback({"results": self.canvases()});
+        };
+
         const splitSelectConfig = {
             clickBubble: true,
             multiple: false,
             closeOnSelect: true,
-            allowClear: true,
-            data: () => {
-                const results = this.canvases();
-                return { results };
-            },
-            id: function(item) {
-                return self.getCanvasService(item);
-            },
-            containerCssClass: "split-controls-drop",
+            allowClear: false,
+            dataAdapter: CustomDataAdapter,
             dropdownCssClass: "split-controls-drop",
-            dropdownAutoWidth: true,
-            formatResult: function(item) {
-                return `<div class="image"><img src="${item.thumbnail}"/></div><div class="title">${item.label}</div>`; 
+            templateResult: function(item) {
+                if(item.loading){
+                    return "";
+                }
+                return $(`<div class="image"><img src="${item.thumbnail}" height="50"/></div><div class="title">${item.label}</div>`); 
             },
-            formatSelection: function(item) {
+            templateSelection: function(item) {
                 return item?.label;
-            },
-            clear: function(abc) {
-                self.canvases('');
-            },
-            isEmpty: ko.computed(function() {
-                return self.canvases() === '' || !self.canvases();
-            }, this),
-            initSelection: function(element, callback) {
-                const canvasObj = self.canvases().find(canvas => self.getCanvasService(canvas) == element.val());
-                callback(canvasObj);
             }
         };
 
@@ -395,7 +395,7 @@ define([
             ...splitSelectConfig,
             value: this.canvas
         };
-
+        
         this.imageToolConfig = {
             ...splitSelectConfig,
             value: this.imageToolSelector
@@ -504,9 +504,6 @@ define([
             return { brightness, contrast, saturation, greyscale };
         });
 
-        this.canvasFilter.subscribe((value) => {
-            console.log(value);
-        });
         var updateCanvasLayerFilter = function() {
             var filter = self.canvasFilter();
             var map = self.map();

arches/app/templates/views/components/iiif-viewer.htm

@@ -77,11 +77,12 @@
     </div>
 
     <div data-bind="if: showModeSelector" style="width: 96%; margin: 20px 0px;">
-        <input class="form-control input-lg widget-input"
-            data-bind="value: imageToolSelector,
+        <select class="form-control input-lg widget-input"
+            data-bind="
             select2Query: {
                 select2Config: imageToolConfig
             }">
+        </select>
     </div>
 
     <div class="iiif-image-tool-slider">
@@ -192,23 +193,25 @@ <h4 class="workbench-card-sidepanel-header" data-bind="click: hideSidePanel">
     <div class="iiif-leaflet" data-bind="leaflet: leafletConfig">
         <div class="split-controls left" data-bind="if: secondaryCanvas">
             <div style="width: 200px">
-                <input class="form-control input-lg widget-input"
-                    data-bind="value: canvas(),
+                <select class="form-control input-lg widget-input"
+                    data-bind="
                     select2Query: {
                         select2Config: leftSideSelectConfig
                     }">
+                </select>
             </div>
             <div class="button" data-bind="click: imagePropertyUpdate.bind($data,'left')">
                 <i class="fa fa-picture-o"></i>
             </div>
         </div>
         <div class="split-controls right" data-bind="if: secondaryCanvas">
             <div style="width: 200px;">
-                <input class="form-control input-lg widget-input"
-                    data-bind="value: secondaryCanvas(),
+                <select class="form-control input-lg widget-input"
+                    data-bind="
                     select2Query: {
                         select2Config: rightSideSelectConfig
                     }">
+                </select>
             </div>
             <div class="button" data-bind="click: imagePropertyUpdate.bind($data,'right')">
                 <i class="fa fa-picture-o"></i>
@@ -341,11 +344,11 @@ <h4 class="manifest-attribution-key" data-bind="text: manifestAttribution"></h4>
                 <span data-bind="text: $root.translations.selectAManifest + ':'"></span>
             </div>
             <div class="manifest-editor-input">
-                <input class="form-control input-lg widget-input"
-                    data-bind="value: manifest,
-                    select2Query: {
+                <select class="form-control input-lg widget-input"
+                    data-bind="select2Query: {
                         select2Config: manifestSelectConfig
                     }">
+                </select>
             </div>
 
             <div class="install-buttons">

arches/app/templates/views/components/plugins/manifest-manager.htm

@@ -292,11 +292,11 @@ <h2>
         <div style="display: flex; padding: 15px 25px; flex-direction: column; justify-content: center; align-items: center;">
         <div style="display:flex; flex-direction: column; width: 300px">
             <div class="manifest-editor-input">
-                <input class="form-control input-lg widget-input"
-                    data-bind="value: manifest,
-                    select2Query: {
+                <select class="form-control input-lg widget-input"
+                    data-bind="select2Query: {
                         select2Config: manifestSelectConfig
                     }">
+                </select>
             </div>
         </div>
         <h5 class="rr-splash-description">

arches/app/views/api.py

@@ -947,15 +947,17 @@ def get(self, request):
         query = request.GET.get("query", None)
         start = int(request.GET.get("start", 0))
         limit = request.GET.get("limit", None)
+        more = False
 
         manifests = models.IIIFManifest.objects.all()
         if query is not None:
             manifests = manifests.filter(Q(label__icontains=query) | Q(description__icontains=query))
         count = manifests.count()
         if limit is not None:
             manifests = manifests[start : start + int(limit)]
+            more = start + int(limit) < count
 
-        response = JSONResponse({"results": manifests, "count": count})
+        response = JSONResponse({"results": manifests, "count": count, "more": more})
         return response
 
 

package.json

@@ -91,6 +91,7 @@
         "js-cookie": "node_modules/js-cookie/src/js.cookie",
         "select2": "node_modules/select2/select2",
         "select-woo": "node_modules/select-woo/dist/js/selectWoo.full",
+        "select-woo-src": "node_modules/select-woo/src/js/select2",
         "bootstrap": "node_modules/bootstrap/dist/js/bootstrap.min",
         "jquery-ui": "node_modules/jqueryui/jquery-ui.min",
         "backbone": "node_modules/backbone/backbone-min",