Merge pull request #6087 from avalonmediasystem/ramp-enable-collapse

Ramp enable collapse button
avalonmediasystem · Oct 28, 2024 · 65b3147 · 65b3147
2 parents 837de9f + b4d55eb
commit 65b3147
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 86 deletions.
diff --git a/app/javascript/components/MediaObjectRamp.jsx b/app/javascript/components/MediaObjectRamp.jsx
@@ -28,20 +28,9 @@ import "@samvera/ramp/dist/ramp.css";
 import { Col, Row, Tab, Tabs } from 'react-bootstrap';
 import './Ramp.scss';
 
-const ExpandCollapseArrow = () => {
-  return (
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" className="expand-collapse-svg" fill="currentColor" viewBox="0 0 16 16">
-      <path
-        fillRule="evenodd"
-        d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z">
-      </path>
-    </svg>);
-};
-
 const Ramp = ({
   urls,
   sections_count,
-  has_structure,
   title,
   share,
   timeline,
@@ -53,10 +42,6 @@ const Ramp = ({
   const [manifestUrl, setManifestUrl] = React.useState('');
   const [startCanvasId, setStartCanvasId] = React.useState();
   const [startCanvasTime, setStartCanvasTime] = React.useState();
-  const [isClosed, setIsClosed] = React.useState(false);
-
-  let expandCollapseBtnRef = React.useRef();
-  let interval;
 
   React.useEffect(() => {
     const { base_url, fullpath_url } = urls;
@@ -79,64 +64,8 @@ const Ramp = ({
         : undefined
     );
     setManifestUrl(url);
-
-    // Attach player event listeners when there's structure
-    if (has_structure) {
-      interval = setInterval(addPlayerEventListeners, 500);
-    }
-
-    // Clear interval upon component unmounting
-    return () => clearInterval(interval);
   }, []);
 
-  /**
-   * Listen to player's events to update the structure navigation
-   * UI
-   */
-  const addPlayerEventListeners = () => {
-    let player = document.getElementById('iiif-media-player');
-    if (player && player.player != undefined && !player.player.isDisposed()) {
-      let playerInst = player.player;
-      playerInst.on('loadedmetadata', () => {
-        playerInst.on('timeupdate', () => {
-          setIsClosed(false);
-        });
-      });
-      // Expand sections when a new Canvas is loaded into the player
-      playerInst.on('ready', () => {
-        setIsClosed(false);
-      });
-    }
-  };
-
-  React.useEffect(() => {
-    expandCollapseSections(isClosed);
-  }, [isClosed]);
-
-  const handleCollapseExpand = () => {
-    setIsClosed(isClosed => !isClosed);
-  };
-
-  const expandCollapseSections = (isClosing) => {
-    const allSections = $('div[class*="ramp--structured-nav__section"]');
-    allSections.each(function (index, section) {
-      let sectionUl = section.nextSibling;
-      if (sectionUl) {
-        if (isClosing) {
-          sectionUl.classList.remove('expanded');
-          sectionUl.classList.add('closed');
-          expandCollapseBtnRef.current.classList.remove('expanded');
-          expandCollapseBtnRef.current.classList.add('closed');
-        } else {
-          sectionUl.classList.remove('closed');
-          sectionUl.classList.add('expanded');
-          expandCollapseBtnRef.current.classList.remove('closed');
-          expandCollapseBtnRef.current.classList.add('expanded');
-        }
-      }
-    });
-  };
-
   return (
     <IIIFPlayer manifestUrl={manifestUrl}
       customErrorMessage='This page encountered an error. Please refresh or contact an administrator.'
@@ -208,19 +137,6 @@ const Ramp = ({
                         </button>
                       }
                     </Col>
-                    {has_structure &&
-                      <Col className="ramp-button-group-2">
-                        <button
-                          className="btn btn-outline expand-collapse-toggle-button expanded"
-                          id="expand_all_btn"
-                          onClick={handleCollapseExpand}
-                          ref={expandCollapseBtnRef}
-                        >
-                          <ExpandCollapseArrow />
-                          {isClosed ? ' Expand' : ' Close'} {sections_count > 1 ? `${sections_count} Sections` : 'Section'}
-                        </button>
-                      </Col>
-                    }
                   </div>
                   <Row className="mx-0">
                     <Col>
@@ -237,7 +153,7 @@ const Ramp = ({
                       </div>
                     </Col>
                   </Row>
-                  <StructuredNavigation />
+                  <StructuredNavigation showAllSectionsButton={true} />
                 </React.Fragment>
               }
             </React.Fragment>

diff --git a/app/javascript/components/Ramp.scss b/app/javascript/components/Ramp.scss
@@ -42,6 +42,15 @@
 
   .ramp--structured-nav {
     max-width: initial;
+    .ramp--structured-nav__collapse-all-btn {
+      background-color: white;
+      color: #0e1825;
+      border: 1px solid #999;
+      height: fit-content;
+      i {
+        border-color: #0e1825 !important;
+      }
+    }
   }
 
   .ramp--rails-title {

diff --git a/app/views/media_objects/_item_view.html.erb b/app/views/media_objects/_item_view.html.erb
@@ -43,7 +43,6 @@ Unless required by applicable law or agreed to in writing, software distributed
       {
         urls: { base_url: request.protocol + request.host_with_port, fullpath_url: request.fullpath },
         sections_count: @media_object.sections.size,
-        has_structure: @media_object.sections.any?{ |mf| mf.has_structuralMetadata? },
         title: { content: render('title') },
         share: { canShare: (will_partial_list_render? :share), content: lending_enabled?(@media_object) ? (render('share') if can_stream) : render('share') },
         timeline: { canCreate: (current_ability.can? :create, Timeline), content: lending_enabled?(@media_object) ? (render('timeline') if can_stream) : render('timeline') },