wired in scroll to link functionality in the edit listing modal

.eslintrc

@@ -21,6 +21,7 @@
       { 
         "props": false
       }
-    ]    
+    ],
+    "react/jsx-no-bind": 0,
   }  
 }

js/templates/modals/editListing.html

@@ -5,12 +5,20 @@
       <a class="js-scrollLink tab clrT active">General</a>
       <a class="js-scrollLink tab">Photos</a>
       <a class="js-scrollLink tab">Attachments</a>
+      <a class="js-scrollLink tab">Shipping</a>
+      <a class="js-scrollLink tab">Tags</a>
+      <a class="js-scrollLink tab">Inventory</a>
+      <a class="js-scrollLink tab">Variants</a>
+      <a class="js-scrollLink tab">Return Policy</a>
+      <a class="js-scrollLink tab">Terms and Conditions</a>
+      <a class="js-scrollLink tab">Expiration</a>
     </div>
 
   </div>
   <div class="flexExpand posR" style="width: 685px">
-    <div class="js-tabContent tabContent">
-      <section>
+    <div class="tabContent">
+      <div class="scrollBox tabFormWrapper clrS js-scrollContainer">
+        <section class="js-scrollToSection" style="background-color: orange">
           <p>
             Contrary to popular belief, America is not a democracy, it is a Chucktatorship Chuck Norris is the bravest human in the galaxy, he listened to a complete Justin Bieber album, The quickest way to a man's heart is with Chuck Norris' fist, Chuck Norris can lead a horse to water AND make it drink. The quickest way to a man's heart is with Chuck Norris' fist. 
           </p>
@@ -18,7 +26,7 @@
             Chuck Norris can lead a horse to water AND make it drink. Chuck Norris quite likes Chris Contrary to popular belief, Chuck Norris, not the box jellyfish of northern Australia, is the most venomous creature on earth. Chuck Norris originally appeared in the "Street Fighter II" video game, but was removed by Beta Testers because every button caused him to do a roundhouse kick. When asked bout this "glitch," Norris replied, "That's no glitch.". Chuck Norris originally appeared in the "Street Fighter II" video game, but was removed by Beta Testers because every button caused him to do a roundhouse kick. When asked bout this "glitch," Norris replied, "That's no glitch.", Chuck Norris once opened the wrong door with a hairpin.He unlocked the secrets of the universe scientists concluded that the energy used up during the "Big Bang" is equal to 2.1754 CNRHK or 2.1754 Chuck Norris Roundhouse Kicks Someone once videotaped Chuck Norris getting pissed off. It was called Walker: Texas Chain Saw Massacre, The leading causes of death in the United States are: 1. Heart Disease 2. Chuck Norris 3. Cancer.
           </p>
         </section>
-      <section>
+        <section class="js-scrollToSection" style="background-color: green">
           <p>
             Crop circles are Chuck Norris' way of telling the world that sometimes corn needs to lie down. When Chuck Norris does a pushup, he isn't lifting himself up, he's pushing the Earth down, Someone once videotaped Chuck Norris getting pissed off. It was called Walker: Texas Chain Saw Massacre.
           </p> 
@@ -35,12 +43,12 @@
             What was going through the minds of all of Chuck Norris' victims before they died? His shoe, NASA scientists concur prolonged visual exposure to Chuck Norris can result in blindness, nausea and partial paralysis. Chuck Norris has two speeds. Walk, and Kill, Facebook, not only a social networking site but also the shape your face takes when roundhouse kicked by Chuck Norris, Chuck Norris does not get frostbite. Chuck Norris bites frost There is no chin behind Chuck Norris' beard. There is only another fist, Chuck Norris doesn't go hunting... CHUCK NORRIS GOES KILLING, When Chuck Norris does a pushup, he isn't lifting himself up, he's pushing the Earth down. Chuck Norris can slam a revolving door. Most people have 23 pairs of chromosomes. Chuck Norris has 72... and they're all poisonous. When Chuck Norris went to Vegas, Sinatra sang "Your Way.".
           </p>
         </section>
-      <section>
+        <section class="js-scrollToSection" style="background-color: blue">
           <p>
             When Chuck Norris does a pushup, he isn't lifting himself up, he's pushing the Earth down, Chuck Norris will attain statehood in 2009. His state flower will be the Magnolia Chuck Norris counted to infinity - twice Crop circles are Chuck Norris' way of telling the world that sometimes corn needs to lie down. Chuck Norris can do a backflip under his bed...from a ladder. 
           </p>
         </section>
-      <section>
+        <section class="js-scrollToSection" style="background-color: pink">
           <p>
             Contrary to popular belief, America is not a democracy, it is a Chucktatorship Chuck Norris is the bravest human in the galaxy, he listened to a complete Justin Bieber album, The quickest way to a man's heart is with Chuck Norris' fist, Chuck Norris can lead a horse to water AND make it drink. The quickest way to a man's heart is with Chuck Norris' fist. 
           </p>
@@ -48,7 +56,7 @@
             Chuck Norris can lead a horse to water AND make it drink. Chuck Norris quite likes Chris Contrary to popular belief, Chuck Norris, not the box jellyfish of northern Australia, is the most venomous creature on earth. Chuck Norris originally appeared in the "Street Fighter II" video game, but was removed by Beta Testers because every button caused him to do a roundhouse kick. When asked bout this "glitch," Norris replied, "That's no glitch.". Chuck Norris originally appeared in the "Street Fighter II" video game, but was removed by Beta Testers because every button caused him to do a roundhouse kick. When asked bout this "glitch," Norris replied, "That's no glitch.", Chuck Norris once opened the wrong door with a hairpin.He unlocked the secrets of the universe scientists concluded that the energy used up during the "Big Bang" is equal to 2.1754 CNRHK or 2.1754 Chuck Norris Roundhouse Kicks Someone once videotaped Chuck Norris getting pissed off. It was called Walker: Texas Chain Saw Massacre, The leading causes of death in the United States are: 1. Heart Disease 2. Chuck Norris 3. Cancer.
           </p>
         </section>
-      <section>
+        <section class="js-scrollToSection" style="background-color: purple">
           <p>
             Crop circles are Chuck Norris' way of telling the world that sometimes corn needs to lie down. When Chuck Norris does a pushup, he isn't lifting himself up, he's pushing the Earth down, Someone once videotaped Chuck Norris getting pissed off. It was called Walker: Texas Chain Saw Massacre.
           </p> 
@@ -65,12 +73,12 @@
             What was going through the minds of all of Chuck Norris' victims before they died? His shoe, NASA scientists concur prolonged visual exposure to Chuck Norris can result in blindness, nausea and partial paralysis. Chuck Norris has two speeds. Walk, and Kill, Facebook, not only a social networking site but also the shape your face takes when roundhouse kicked by Chuck Norris, Chuck Norris does not get frostbite. Chuck Norris bites frost There is no chin behind Chuck Norris' beard. There is only another fist, Chuck Norris doesn't go hunting... CHUCK NORRIS GOES KILLING, When Chuck Norris does a pushup, he isn't lifting himself up, he's pushing the Earth down. Chuck Norris can slam a revolving door. Most people have 23 pairs of chromosomes. Chuck Norris has 72... and they're all poisonous. When Chuck Norris went to Vegas, Sinatra sang "Your Way.".
           </p>
         </section>
-      <section>
+        <section class="js-scrollToSection" style="background-color: violet">
           <p>
             When Chuck Norris does a pushup, he isn't lifting himself up, he's pushing the Earth down, Chuck Norris will attain statehood in 2009. His state flower will be the Magnolia Chuck Norris counted to infinity - twice Crop circles are Chuck Norris' way of telling the world that sometimes corn needs to lie down. Chuck Norris can do a backflip under his bed...from a ladder. 
           </p>
         </section>
-      <section>
+        <section class="js-scrollToSection" style="background-color: magenta">
           <p>
             Contrary to popular belief, America is not a democracy, it is a Chucktatorship Chuck Norris is the bravest human in the galaxy, he listened to a complete Justin Bieber album, The quickest way to a man's heart is with Chuck Norris' fist, Chuck Norris can lead a horse to water AND make it drink. The quickest way to a man's heart is with Chuck Norris' fist. 
           </p>
@@ -78,7 +86,7 @@
             Chuck Norris can lead a horse to water AND make it drink. Chuck Norris quite likes Chris Contrary to popular belief, Chuck Norris, not the box jellyfish of northern Australia, is the most venomous creature on earth. Chuck Norris originally appeared in the "Street Fighter II" video game, but was removed by Beta Testers because every button caused him to do a roundhouse kick. When asked bout this "glitch," Norris replied, "That's no glitch.". Chuck Norris originally appeared in the "Street Fighter II" video game, but was removed by Beta Testers because every button caused him to do a roundhouse kick. When asked bout this "glitch," Norris replied, "That's no glitch.", Chuck Norris once opened the wrong door with a hairpin.He unlocked the secrets of the universe scientists concluded that the energy used up during the "Big Bang" is equal to 2.1754 CNRHK or 2.1754 Chuck Norris Roundhouse Kicks Someone once videotaped Chuck Norris getting pissed off. It was called Walker: Texas Chain Saw Massacre, The leading causes of death in the United States are: 1. Heart Disease 2. Chuck Norris 3. Cancer.
           </p>
         </section>
-      <section>
+        <section class="js-scrollToSection" style="background-color: yellow">
           <p>
             Crop circles are Chuck Norris' way of telling the world that sometimes corn needs to lie down. When Chuck Norris does a pushup, he isn't lifting himself up, he's pushing the Earth down, Someone once videotaped Chuck Norris getting pissed off. It was called Walker: Texas Chain Saw Massacre.
           </p> 
@@ -95,12 +103,13 @@
             What was going through the minds of all of Chuck Norris' victims before they died? His shoe, NASA scientists concur prolonged visual exposure to Chuck Norris can result in blindness, nausea and partial paralysis. Chuck Norris has two speeds. Walk, and Kill, Facebook, not only a social networking site but also the shape your face takes when roundhouse kicked by Chuck Norris, Chuck Norris does not get frostbite. Chuck Norris bites frost There is no chin behind Chuck Norris' beard. There is only another fist, Chuck Norris doesn't go hunting... CHUCK NORRIS GOES KILLING, When Chuck Norris does a pushup, he isn't lifting himself up, he's pushing the Earth down. Chuck Norris can slam a revolving door. Most people have 23 pairs of chromosomes. Chuck Norris has 72... and they're all poisonous. When Chuck Norris went to Vegas, Sinatra sang "Your Way.".
           </p>
         </section>
-      <section>
+        <section class="js-scrollToSection" style="background-color: red">
           <p>
             When Chuck Norris does a pushup, he isn't lifting himself up, he's pushing the Earth down, Chuck Norris will attain statehood in 2009. His state flower will be the Magnolia Chuck Norris counted to infinity - twice Crop circles are Chuck Norris' way of telling the world that sometimes corn needs to lie down. Chuck Norris can do a backflip under his bed...from a ladder. 
           </p>
         </section>
       </div>
+    </div>
     <div class="tabControls flex clrBr">
       <div class="saveStatus"></div>
       <!-- TODO - make a btnSave for listing in translations -->

js/templates/modals/settings/addresses.html

@@ -1,7 +1,7 @@
 <div class="bar padMd clrBr borderBottom">
   <h2 class="h3 txUnb"><%= ob.polyT('settings.addressesTab') %></h2>
 </div>
-<div class="scrollBox settingsTabFormWrapper js-addressesWrap clrS">
+<div class="scrollBox tabFormWrapper js-addressesWrap clrS">
   <div class="padMd settingsTabFormWrapperInner">
     <div class="js-listContainer"></div>
     <div class="js-formContainer"></div>

js/templates/modals/settings/general.html

@@ -1,7 +1,7 @@
 <div class="bar padMd clrBr borderBottom">
   <h2 class="h3 txUnb"><%= ob.polyT('settings.generalTab') %></h2>
 </div>
-<div class="padMd scrollBox settingsTabFormWrapper clrS">
+<div class="padMd scrollBox tabFormWrapper clrS">
   <form class="box border clrP clrBr padKids padStack settingsGeneralForm">
     <div class="flexRow">
       <div class="col3">

js/templates/modals/settings/page.html

@@ -1,7 +1,7 @@
 <div class="bar padMd clrBr borderBottom">
   <h2 class="h3 txUnb"><%= ob.polyT('settings.pageTab') %></h2>
 </div>
-<div class="padMd scrollBox settingsTabFormWrapper clrS">
+<div class="padMd scrollBox tabFormWrapper clrS">
   <form class="box border clrP clrBr padKids padStack settingsGeneralForm">
     <div class="flexRow">
       <div class="col3">

js/utils/dom.js

@@ -0,0 +1,21 @@
+// todo: check args and write unit test
+// http://stackoverflow.com/a/21627295/632806
+export function isScrolledIntoView(element) {
+  let rect = element.getBoundingClientRect();
+  const top = rect.top;
+  const height = rect.height;
+  let el = element.parentNode;
+
+  do {
+    rect = el.getBoundingClientRect();
+
+    if (top <= rect.bottom === false) return false;
+
+    // Check if the element is out of view due to a container scrolling
+    if ((top + height) <= rect.top) return false;
+
+    el = el.parentNode;
+  } while (el !== document.body);
+  // Check its within the document viewport
+  return top <= document.documentElement.clientHeight;
+}

js/utils/velocity.js

@@ -0,0 +1,2 @@
+window.jQuery = window.$ = require('jquery');
+require('velocity-animate');

js/views/ScrollLinks.js

@@ -1,7 +1,7 @@
 import $ from 'jquery';
-import BaseVw from './BaseVw';
+import baseVw from './baseVw';
 
-export default class extends BaseVw {
+export default class extends baseVw {
   constructor(options = {}) {
     if (!options.scrollLinksSelector || !(typeof options.scrollLinksSelector === 'string')) {
       throw new Error('Please provide a css selector targetting the scroll anchors.');

js/views/StatusBar.js

@@ -1,9 +1,9 @@
-import BaseVw from './BaseVw';
+import baseVw from './baseVw';
 import StatusMessageMd from '../models/StatusMessage';
 import StatusMessages from '../collections/StatusMessages';
 import StatusMessageVw from './StatusMessage';
 
-export default class extends BaseVw {
+export default class extends baseVw {
   constructor() {
     super();
     this.collection = new StatusMessages();

js/views/StatusMessage.js

@@ -1,7 +1,7 @@
 import loadTemplate from '../utils/loadTemplate';
-import BaseVw from './BaseVw';
+import baseVw from './baseVw';
 
-export default class extends BaseVw {
+export default class extends baseVw {
   className() {
     return 'statusMessageWrap';
   }

js/views/TemplateOnly.js

@@ -3,10 +3,10 @@
 // any context passed into render as context for the template.
 //
 // If you need something beyond that, this view is probably not for you.
-import BaseVw from './BaseVw';
+import baseVw from './baseVw';
 import loadTemplate from '../utils/loadTemplate';
 
-export default class extends BaseVw {
+export default class extends baseVw {
   constructor(options = {}) {
     super(options);
 

js/views/TestModalsPage.js

@@ -1,10 +1,10 @@
-import BaseVw from './BaseVw';
+import baseVw from './baseVw';
 import loadTemplate from '../utils/loadTemplate';
 import TestModal from './modals/Test';
 import Dialog from './modals/Dialog';
 import SimpleMessageModal from './modals/SimpleMessage';
 
-export default class extends BaseVw {
+export default class extends baseVw {
   constructor(options = {}) {
     super(options);
     this.options = options;

js/views/TestProfilePage.js

@@ -1,11 +1,11 @@
 import $ from 'jquery';
-import BaseVw from './BaseVw';
+import baseVw from './baseVw';
 import loadTemplate from '../utils/loadTemplate';
 import app from '../app';
 import SimpleMessageModal from './modals/SimpleMessage';
 import SocialAccount from '../models/SocialAccount';
 
-export default class extends BaseVw {
+export default class extends baseVw {
   constructor(options = {}) {
     super(options);
     this.options = options;

js/views/TransactionsPage.js

@@ -1,7 +1,7 @@
-import BaseVw from './BaseVw';
+import baseVw from './baseVw';
 import loadTemplate from '../utils/loadTemplate';
 
-export default class extends BaseVw {
+export default class extends baseVw {
   constructor(options = {}) {
     super(options);
     this.options = options;

js/views/baseVw.js

@@ -1,7 +1,7 @@
 import $ from 'jquery';
 import { View } from 'backbone';
 
-export default class BaseVw extends View {
+export default class baseVw extends View {
   constructor(options) {
     super(options);
     this._childViews = [];

js/views/modals/BaseModal.js

@@ -1,11 +1,11 @@
 import _ from 'underscore';
 import $ from 'jquery';
 import loadTemplate from '../../utils/loadTemplate';
-import BaseVw from '../BaseVw';
+import baseVw from '../baseVw';
 import { getHtml, getAppFrame } from '../../utils/selectors';
 import app from '../../app';
 
-export default class BaseModal extends BaseVw {
+export default class BaseModal extends baseVw {
   constructor(options = {}) {
     const opts = {
       dismissOnOverlayClick: true,

js/views/modals/EditListing.js

@@ -1,5 +1,8 @@
-// import $ from 'jquery';
+import $ from 'jquery';
+import '../../utils/velocity';
+import _ from 'underscore';
 // import app from '../../../app';
+import { isScrolledIntoView } from '../../utils/dom';
 import loadTemplate from '../../utils/loadTemplate';
 // import SimpleMessage from '../SimpleMessage';
 // import Dialog from '../Dialog';
@@ -52,22 +55,63 @@ export default class extends BaseModal {
   }
 
   onScrollLinkClick(e) {
-    console.log('sugar in the hen, what what.');
+    this.$scrollLinks.removeClass('active');
+    $(e.target).addClass('active');
+    this.$scrollContainer.off('scroll', this.throttledOnScrollContainer);
+
+    this.$scrollToSections.eq($(e.target).index())
+      .velocity('scroll', {
+        container: this.$scrollContainer,
+        complete: () => this.$scrollContainer.on('scroll', this.throttledOnScrollContainer),
+      });
   }
 
   saveClick() {
     console.log('save request yo');
   }
 
-  get $saveStatus() {
-    return this._$saveStatus || this.$('.saveStatus');
+  // get $saveStatus() {
+  //   return this._$saveStatus || this.$('.saveStatus');
+  // }
+
+  get $scrollToSections() {
+    return this._$scrollToSections || this.$('.js-scrollToSection');
+  }
+
+  get $scrollLinks() {
+    return this._$scrollLinks || this.$('.js-scrollLink');
+  }
+
+  // get $scrollContainer() {
+  //   return this._$scrollContainer || this.$('.js-scrollContainer');
+  // }
+
+  onScrollContainer() {
+    let index = 0;
+    let keepLooping = true;
+
+    while (keepLooping) {
+      if (isScrolledIntoView(this.$scrollToSections[index])) {
+        this.$scrollLinks.removeClass('active');
+        this.$scrollLinks.eq(index).addClass('active');
+        keepLooping = false;
+      } else {
+        index += 1;
+      }
+    }
   }
 
   render() {
     loadTemplate('modals/editListing.html', (t) => {
       this.$el.html(t(this.options));
-
       super.render();
+
+      this._$scrollLinks = null;
+      this._$scrollToSections = null;
+
+      this.$scrollContainer = this.$('.js-scrollContainer');
+      this.throttledOnScrollContainer = _.bind(_.throttle(this.onScrollContainer, 100), this);
+      this.$scrollContainer.on('scroll', this.throttledOnScrollContainer);
     });
 
     return this;

js/views/modals/Settings/Addresses.js

@@ -1,11 +1,11 @@
 import app from '../../../app';
 import loadTemplate from '../../../utils/loadTemplate';
-import BaseVw from '../../BaseVw';
+import baseVw from '../../baseVw';
 import AddressesForm from './AddressesForm';
 import AddressesList from './AddressesList';
 import ShippingAddress from '../../../models/ShippingAddress';
 
-export default class extends BaseVw {
+export default class extends baseVw {
   constructor(options = {}) {
     super({
       className: 'settingsAddresses',

js/views/modals/Settings/AddressesList.js

@@ -1,9 +1,9 @@
 import $ from 'jquery';
 import loadTemplate from '../../../utils/loadTemplate';
 import { splitIntoRows } from '../../../utils';
-import BaseVw from '../../BaseVw';
+import baseVw from '../../baseVw';
 
-export default class extends BaseVw {
+export default class extends baseVw {
   constructor(options = {}) {
     super({
       className: 'settingsAddressesList',

js/views/modals/Settings/General.js

@@ -3,10 +3,10 @@ import languages from '../../../data/languages';
 import { getTranslatedCountries } from '../../../data/countries';
 import { getTranslatedCurrencies } from '../../../data/currencies';
 import loadTemplate from '../../../utils/loadTemplate';
-import BaseVw from '../../BaseVw';
+import baseVw from '../../baseVw';
 import 'select2';
 
-export default class extends BaseVw {
+export default class extends baseVw {
   constructor(options = {}) {
     super({
       className: 'settingsGeneral',

js/views/modals/Settings/Page.js

@@ -1,8 +1,8 @@
 import app from '../../../app';
 import loadTemplate from '../../../utils/loadTemplate';
-import BaseVw from '../../BaseVw';
+import baseVw from '../../baseVw';
 
-export default class extends BaseVw {
+export default class extends baseVw {
   constructor(options = {}) {
     super({
       className: 'settingsGeneral',
@@ -62,7 +62,7 @@ export default class extends BaseVw {
 
   render(restoreScrollPos = true) {
     let prevScrollPos = 0;
-    const $scrollContainer = this.$('.settingsTabFormWrapper');
+    const $scrollContainer = this.$('.tabFormWrapper');
 
     if (restoreScrollPos && $scrollContainer.length) {
       prevScrollPos = $scrollContainer[0].scrollTop;
@@ -77,7 +77,7 @@ export default class extends BaseVw {
       this.$formFields = this.$('select[name], input[name], textarea[name]');
 
       if (restoreScrollPos) {
-        this.$('.settingsTabFormWrapper')[0].scrollTop = prevScrollPos;
+        this.$('.tabFormWrapper')[0].scrollTop = prevScrollPos;
       }
     });
 

js/views/userPage/UserPage.js

@@ -1,12 +1,12 @@
 import $ from 'jquery';
-import BaseVw from '../BaseVw';
+import baseVw from '../baseVw';
 import loadTemplate from '../../utils/loadTemplate';
 import app from '../../app';
 import Home from './UserPageHome';
 import Store from './UserPageStore';
 import Follow from './UserPageFollow';
 
-export default class extends BaseVw {
+export default class extends baseVw {
   constructor(options = {}) {
     super(options);
     this.options = options;

package.json

@@ -61,6 +61,7 @@
     "multihashes": "^0.2.2",
     "node-polyglot": "^2.0.0",
     "select2": "^4.0.3",
-    "underscore": "^1.8.3"
+    "underscore": "^1.8.3",
+    "velocity-animate": "^1.2.3"
   }
 }

styles/components/_tabbedModal.scss

@@ -22,7 +22,10 @@
     }
 
     .tabContent {
+      .tabFormWrapper {
         height: 560px;
+        overflow-y: scroll;
+      }      
     }
 
     .tabControls {

styles/modules/modals/_settings.scss

@@ -1,13 +1,8 @@
 .settings {
 
   .modalContent {
-    .settingsTabContent {
-      height: 560px;
-    }
-
-    .settingsTabFormWrapper {
+    .tabFormWrapper {
       height: 510px;
-      overflow-y: scroll;
       
       .settingsTabFormWrapperInner {
         position: absolute;