Create My Books Dropper

bundlesize.config.json

@@ -70,19 +70,19 @@
     },
     {
       "path": "static/build/lists.*.js",
-      "maxSize": "5KB"
+      "maxSize": "5.5KB"
     },
     {
       "path": "static/build/all.js",
-      "maxSize": "129KB"
+      "maxSize": "130KB"
     },
     {
       "path": "static/build/page-admin.css",
-      "maxSize": "26KB"
+      "maxSize": "27KB"
     },
     {
       "path": "static/build/page-book.css",
-      "maxSize": "13KB"
+      "maxSize": "13.5KB"
     },
     {
       "path": "static/build/page-edit.css",
@@ -98,7 +98,7 @@
     },
     {
       "path": "static/build/page-plain.css",
-      "maxSize": "25KB"
+      "maxSize": "26KB"
     },
     {
       "path": "static/build/page-subject.css",

conf/openlibrary.yml

@@ -73,6 +73,8 @@ features:
     support: admin
     undo: enabled
     upstream: enabled
+    # Uncomment below line to enable the My Books Dropper
+    # my_books_dropper: enabled
 
 upstream_to_www_migration: true
 default_template_root: /upstream

openlibrary/macros/SearchResultsWork.html

@@ -1,4 +1,4 @@
-$def with (doc, decorations=None, cta=True, availability=None, extra=None, attrs=None, rating=None, reading_log=None, show_librarian_extras=False)
+$def with (doc, decorations=None, cta=True, availability=None, extra=None, attrs=None, rating=None, reading_log=None, show_librarian_extras=False, include_dropper=False)
 
 $code:
   max_rendered_authors = 9
@@ -129,6 +129,17 @@ <h3 itemprop="name" class="booktitle">
       $if reading_log:
         $:reading_log
 
+      $if include_dropper:
+        $ edition_key = None
+        $if doc_type == 'solr_edition':
+          $ edition_key = selected_ed.key
+        $elif doc_type == 'infogami_edition':
+          $ edition_key = doc.key
+        $elif doc_type == 'solr_work':
+          $ edition_key = doc.get('edition_key') and doc.get("edition_key")[0]
+          $ edition_key = '/books/%s' % edition_key
+        $:render_template('my_books/dropper', doc, edition_key=edition_key, async_load=True)
+
       $if rating:
         $:rating
   </div>

openlibrary/macros/databarWork.html

@@ -36,7 +36,7 @@ <h3 class="header">
         $ edition = page.works and page
 
         $ render_times['databarWork: List widget'] = time()
-        $ lists_widget = render_template('lists/widget', edition or work, include_rating=True, include_header=False, include_widget=True, include_showcase=False, async_load=True)
+        $ lists_widget = render_template('lists/widget', edition or work, include_rating=True, include_header=False, include_widget=True, include_showcase=False, async_load=True, show_active_lists=True)
         $ render_times['databarWork: List widget'] = time() - render_times['databarWork: List widget']
 
         $# For the Works & Editions page, only use ground_truth_availability API for selected Edition

openlibrary/plugins/openlibrary/js/dropper/Dropper.js

@@ -61,7 +61,7 @@ export class Dropper {
          *
          * @member {boolean}
          */
-        this.isDropperOpen = dropper.classList.contains('dropper-wrapper--active')
+        this.isDropperOpen = dropper.classList.contains('generic-dropper-wrapper--active')
 
         /**
          * Tracks whether this dropper is disabled.
@@ -70,38 +70,65 @@ export class Dropper {
          *
          * @member {boolean}
          */
-        this.isDropperDisabled = dropper.querySelector('.generic-dropper').classList.contains('generic-dropper--disabled')
+        this.isDropperDisabled = dropper.classList.contains('generic-dropper--disabled')
     }
 
     /**
      * Adds click listener to dropper's toggle arrow.
      */
     initialize() {
         this.dropClick.addEventListener('click', () => {
-            // REVIEWER: `debounce` call was removed here.
-            // Could not get it to work --- suspect that this has something to
-            // do with `debounce` being called from an arrow function?
-            //
-            // I wonder if it's still needed? I don't think that we're doing
-            // anything computationally heavy when this is opened or closed.
-            // No calls to the server, either.
             this.toggleDropper()
         })
     }
 
+    /**
+     * Function that is called after a dropper has opened.
+     *
+     * Subclasses of `Dropper` may override this to add
+     * functionality that should occur on dropper open.
+     */
+    onOpen() {}
+
+    /**
+     * Function that is called after a dropper has closed.
+     *
+     * Subclasses of `Dropper` may override this to add
+     * functionality that should occur on dropper close.
+     */
+    onClose() {}
+
+    /**
+     * Function that is called when the drop-click affordance of
+     * a disabled dropper is clicked.
+     *
+     * Subclasses of `Dropper` may override this as needed.
+     */
+    onDisabledClick() {}
+
     /**
      * Closes dropper if opened; opens dropper if closed.
      *
      * Toggles value of `isDropperOpen`.
      *
-     * Does nothing if this dropper is disabled.
+     * Calls `onDisabledClick()` if this dropper is disabled.
+     * Calls either `onOpen()` or `onClose()` after the dropper
+     * has been toggled.
      */
     toggleDropper() {
-        if (!this.isDropperDisabled) {
+        if (this.isDropperDisabled) {
+            this.onDisabledClick();
+        } else {
             this.$dropper.find('.generic-dropper__dropdown').slideToggle(25);
             this.$dropper.find('.arrow').toggleClass('up')
-            this.$dropper.toggleClass('dropper-wrapper--active')
+            this.$dropper.toggleClass('generic-dropper-wrapper--active')
             this.isDropperOpen = !this.isDropperOpen
+
+            if (this.isDropperOpen) {
+                this.onOpen()
+            } else {
+                this.onClose()
+            }
         }
     }
 
@@ -110,14 +137,19 @@ export class Dropper {
      *
      * Sets `isDropperOpen` to `false`.
      *
-     * Does nothing if this dropper is disabled.
+     * Calls `onDisabledClick()` if this dropper is disabled.
+     * Otherwise, closes dropper and calls `onClose()`.
      */
     closeDropper() {
-        if (!this.isDropperDisabled) {
+        if (this.isDropperDisabled) {
+            this.onDisabledClick();
+        } else {
             this.$dropper.find('.generic-dropper__dropdown').slideUp(25)
             this.$dropper.find('.arrow').removeClass('up');
-            this.$dropper.removeClass('dropper-wrapper--active')
+            this.$dropper.removeClass('generic-dropper-wrapper--active')
             this.isDropperOpen = false
+
+            this.onClose()
         }
     }
 }

openlibrary/plugins/openlibrary/js/dropper/index.js

@@ -41,10 +41,10 @@ export function initDroppers(dropperElements) {
  * @param {jQuery.Object} $container
  */
 function closeDropper($container) {
-    $container.find('.dropdown').slideUp(25);
-    $container.find('.generic-dropper__dropdown').slideUp(25)
+    $container.find('.dropdown').slideUp(25);  // Legacy droppers
+    $container.find('.generic-dropper__dropdown').slideUp(25)  // New generic droppers
     $container.find('.arrow').removeClass('up');
-    $container.removeClass('dropper-wrapper--active')
+    $container.removeClass('generic-dropper-wrapper--active')
 }
 
 /**

openlibrary/plugins/openlibrary/js/index.js

@@ -381,25 +381,31 @@ jQuery(function () {
     // "Want to Read" buttons:
     const readingLogDroppers = document.getElementsByClassName('widget-add');
 
-    // Async lists components:
-    const wtrLoadingIndicator = document.querySelector('.list-loading-indicator')
-    const overviewLoadingIndicator = document.querySelector('.list-overview-loading-indicator')
-
-    if (readingLogDroppers.length || wtrLoadingIndicator || overviewLoadingIndicator) {
+    if (readingLogDroppers.length) {
+        // Async lists components:
+        const wtrLoadingIndicator = document.querySelector('.list-loading-indicator')
+        const overviewLoadingIndicator = document.querySelector('.list-overview-loading-indicator')
         import(/* webpackChunkName: "lists" */ './lists')
             .then((module) => {
-                if (readingLogDroppers.length) {
-                    module.initReadingLogDroppers(readingLogDroppers);
-                    // Removable list items:
-                    // TODO: Is this the correct place to initalize these?
-                    const actionableListItems = document.querySelectorAll('.actionable-item')
-                    module.registerListItems(actionableListItems);
-                }
                 if (wtrLoadingIndicator || overviewLoadingIndicator) {
                     module.initListLoading(wtrLoadingIndicator, overviewLoadingIndicator)
                 }
-            }
-            );
+                module.initReadingLogDroppers(readingLogDroppers);
+                // Removable list items:
+                const actionableListItems = document.querySelectorAll('.actionable-item')
+                module.registerListItems(actionableListItems);
+            });
+    }
+
+    // New "My Books" dropper:
+    const myBooksDroppers = document.querySelectorAll('.my-books-dropper')
+    if (myBooksDroppers.length) {
+        const actionableListShowcases = document.querySelectorAll('.actionable-item')
+
+        import(/* webpackChunkName: "my-books" */ './my-books')
+            .then((module) => {
+                module.initMyBooksAffordances(myBooksDroppers, actionableListShowcases)
+            })
     }
 
     const nativeDialogs = document.querySelectorAll('.native-dialog')

openlibrary/plugins/openlibrary/js/lists/ListService.js

@@ -32,7 +32,7 @@ function post(data) {
  * @param {object} data Object containing the new list's name, description, and seeds.
  * @param {function} success Callback to be executed on successful POST.
  */
-export function createList(userKey, data, success) {
+export function createNewList(userKey, data, success) {
     post({
         url: `${userKey}/lists.json`,
         data: data,
@@ -42,6 +42,24 @@ export function createList(userKey, data, success) {
     });
 }
 
+/**
+ * Submits request to create new list.  Returns Promise.
+ *
+ * @param {string} userKey The patron's key, in the form "/people/{username}"
+ * @param {object} data Object containing the new list's name, description, and seeds.
+ * @returns {Promise<Response>} The results of the POST request
+ */
+export async function createList(userKey, data) {
+    return await fetch(`${userKey}/lists.json`, {
+        method: 'post',
+        headers: {
+            'Content-Type': 'application/json',
+            Accept: 'application/json'
+        },
+        body: JSON.stringify(data)
+    })
+}
+
 /**
  * Submits request to add given seed to list.
  *
@@ -58,6 +76,25 @@ export function addToList(listKey, seed, success) {
     });
 }
 
+/**
+ * Adds an item to a list.  Promise-based.
+ *
+ * @param {string} listKey The patron's key, in the form "/people/{username}"
+ * @param {object} seed Object containing the new list's name, description, and seeds.
+ * @returns {Promise<Response>} The result of the POST request
+ */
+export async function addItem(listKey, seed) {
+    const body = { add: [seed] }
+    return await fetch(`${listKey}/seeds.json`, {
+        method: 'post',
+        headers: {
+            'Content-Type': 'application/json',
+            Accept: 'application/json'
+        },
+        body: JSON.stringify(body)
+    })
+}
+
 /**
  * Submits request to remove given seed from list.
  *
@@ -74,6 +111,25 @@ export function removeFromList(listKey, seed, success) {
     });
 }
 
+/**
+ * Submits request to remove given seed from list. Promise-based.
+ *
+ * @param {string} listKey The list's key.
+ * @param {string|{ key: string }} seed The item being removed from the list.
+ * @returns {Promise<Response>} The POST response
+ */
+export async function removeItem(listKey, seed) {
+    const body = { remove: [seed] }
+    return await fetch(`${listKey}/seeds.json`, {
+        method: 'post',
+        headers: {
+            'Content-Type': 'application/json',
+            Accept: 'application/json'
+        },
+        body: JSON.stringify(body)
+    })
+}
+
 /**
  * Submits reading log update form data and executes the given callback on success.
  *
@@ -106,3 +162,14 @@ export function fetchPartials(key, success) {
         success: success
     })
 }
+
+// XXX : jsdoc
+export async function getListPartials() {
+    return await fetch('/lists/partials.json', {
+        method: 'GET',
+        headers: {
+            'Content-Type': 'application/json',
+            Accept: 'application/json'
+        }
+    })
+}