Merge pull request #1615 from Sefaria/feature/sc-19829/tag-1-to-the-p…

…roper-image

feat(Scroll Links): inline links can now be scrollLink or refLink

sefaria/constants/model.py

@@ -8,5 +8,5 @@
     # structure placement (e.g. page transitions): uses 'data-overlay', 'data-value'
     'i': ['data-overlay', 'data-value', 'data-commentator', 'data-order', 'class', 'data-label', 'dir'],
     'img': ['src', 'alt'],
-    'a': ['dir', 'class', 'href', 'data-ref', "data-ven", "data-vhe"],
+    'a': ['dir', 'class', 'href', 'data-ref', "data-ven", "data-vhe", 'data-scroll-link'],
 }

static/css/s2.css

@@ -5351,14 +5351,14 @@ But not to use a display block directive that might break continuous mode for ot
 .readerPanel.hebrew .segment.enOnly .segmentNumber .he {
   display: block;
 }
-.segment .refLink {
+.segment .refLink, .scrollLink {
   font-size: .8em;
   font-weight: bold;
   letter-spacing: 1px;
   cursor: pointer;
   color: #333;
 }
-.refLink:hover {
+.scrollLink:hover, .refLink:hover {
   text-decoration: underline;
 }
 .segment .namedEntityLink {

static/js/ReaderApp.jsx

@@ -1355,9 +1355,11 @@ toggleSignUpModal(modalContentKind = SignUpModalKind.Default) {
       currentlyVisibleRef = ref;
       highlightedRefs = (panel.mode === "TextAndConnections") ? [ref] : [];
     }
-    let updatePanelObj = {refs: refs, currentlyVisibleRef: currentlyVisibleRef, highlightedRefs: highlightedRefs}
+    let updatePanelObj = {refs, currentlyVisibleRef, highlightedRefs};
     const { dependentPanel } = this._getDependentPanel(n);
-    Object.assign(dependentPanel, {refs, currentlyVisibleRef, highlightedRefs});
+    if (dependentPanel) {
+      Object.assign(dependentPanel, updatePanelObj);
+    }
     Object.assign(panel, updatePanelObj);
     this.setState({panels: this.state.panels});
   }

static/js/ReaderPanel.jsx

@@ -674,6 +674,7 @@ class ReaderPanel extends Component {
           unsetTextHighlight={this.props.unsetTextHighlight}
           translationLanguagePreference={this.props.translationLanguagePreference}
           updateCurrVersionsToMatchAPIResult={this.updateCurrVersionsToMatchAPIResult}
+          navigatePanel={this.props.navigatePanel}
           key={`${textColumnBookTitle ? textColumnBookTitle : "empty"}-TextColumn`} />
       );
     }

static/js/TextColumn.jsx

@@ -393,6 +393,7 @@ class TextColumn extends Component {
         panelsOpen={this.props.panelsOpen}
         layoutWidth={this.props.layoutWidth}
         unsetTextHighlight={this.props.unsetTextHighlight}
+        navigatePanel={this.props.navigatePanel}
         translationLanguagePreference={this.props.translationLanguagePreference}
         updateCurrVersionsToMatchAPIResult={this.props.updateCurrVersionsToMatchAPIResult}
         key={sref} />);
@@ -458,6 +459,7 @@ TextColumn.propTypes = {
   textHighlights:         PropTypes.array,
   unsetTextHighlight:     PropTypes.func,
   translationLanguagePreference: PropTypes.string,
+  navigatePanel:          PropTypes.func,
 };
 
 

static/js/TextRange.jsx

@@ -375,6 +375,7 @@ class TextRange extends Component {
             formatEnAsPoetry={formatEnAsPoetry}
             formatHeAsPoetry={formatHeAsPoetry}
             placeSegmentNumbers={this.placeSegmentNumbers}
+            navigatePanel={this.props.navigatePanel}
           />
         </span>
       );
@@ -468,6 +469,7 @@ TextRange.propTypes = {
   inlineReference:        PropTypes.object,
   textHighlights:         PropTypes.array,
   translationLanguagePreference: PropTypes.string,
+  navigatePanel:          PropTypes.func
 };
 TextRange.defaultProps = {
   currVersions: {en:null,he:null},
@@ -492,21 +494,40 @@ class TextSegment extends Component {
       this.props.unsetTextHighlight();
     }
   }
+  handleRefLinkClick(refLink, event) {
+    event.preventDefault();
+    let newRef = Sefaria.humanRef(refLink.attr("data-ref"));
+    const newBook = Sefaria.parseRef(newRef)?.book;
+    const currBook = Sefaria.parseRef(this.props.sref)?.book;
+    const isScrollLink = refLink.attr('data-scroll-link');
+
+    // two options: in most cases, we open a new panel, but if isScrollLink is 'true', we should navigate in the same panel to the new location
+    const canNavigatePanel = newBook === currBook && !!this.props.navigatePanel; // navigatePanel only works if we're scrolling to a location in the same book
+    if (isScrollLink === 'true' && canNavigatePanel) {
+      this.props.navigatePanel(newRef);
+    }
+    else {
+      const ven = refLink.attr("data-ven") ? refLink.attr("data-ven") : null;
+      const vhe = refLink.attr("data-vhe") ? refLink.attr("data-vhe") : null;
+      let currVersions = {"en": ven, "he": vhe};
+      this.props.onCitationClick(newRef, this.props.sref, true, currVersions);
+    }
+
+    event.stopPropagation();
+    Sefaria.track.event("Reader", "Citation Link Click", ref);
+  }
+  isRefLink (x) {
+    // 'x' is a jquery element
+    return x?.attr('data-ref') && x?.prop('tagName') === 'A';
+  }
   handleClick(event) {
     // grab refLink from target or parent (sometimes there is an <i> within refLink forcing us to look for the parent)
-    const refLink = $(event.target).hasClass("refLink") ? $(event.target) : ($(event.target.parentElement).hasClass("refLink") ? $(event.target.parentElement) : null);
+    const refLink = this.isRefLink($(event.target)) ? $(event.target) : this.isRefLink($(event.target.parentElement)) ? $(event.target.parentElement) : null;
     const namedEntityLink = $(event.target).closest("a.namedEntityLink");
     const footnoteLink = $(event.target).is("sup") || $(event.target).parents("sup").size();
     if (refLink) {
       //Click of citation
-      event.preventDefault();
-      let ref = Sefaria.humanRef(refLink.attr("data-ref"));
-      const ven = refLink.attr("data-ven") ? refLink.attr("data-ven") : null;
-      const vhe = refLink.attr("data-vhe") ? refLink.attr("data-vhe") : null;
-      let currVersions = {"en": ven, "he": vhe};
-      this.props.onCitationClick(ref, this.props.sref, true, currVersions);
-      event.stopPropagation();
-      Sefaria.track.event("Reader", "Citation Link Click", ref);
+      this.handleRefLinkClick(refLink, event);
     } else if (footnoteLink) {
       this.props.onFootnoteClick(event);
       event.stopPropagation();
@@ -663,6 +684,7 @@ TextSegment.propTypes = {
   onFootnoteClick: PropTypes.func,
   onNamedEntityClick: PropTypes.func,
   unsetTextHighlight: PropTypes.func,
+  navigatePanel: PropTypes.func
 };
 
 export default TextRange;