<commit_before>var $ = require('jquery');
require('sticky');
require('jquery-easing');
require('jquery.scrollto');
require('cf-expandables');

var $wrapper =          $('.explain'),
    $imageMap =         $('.image-map'),
    $imageMapImage =    $('.image-map_image'),
    $imageMapWrapper =  $('.image-map_wrapper'),
    $terms =            $('.terms'),
    $window =           $( window );

/**
 * Limit .image-map_image to the height of the window and then adjust the two
 * columns to match.
 * @return {null}
 */
function fitToWindow() {
  // In order to make the image map sticky we must first make sure it will fit
  // completely within the window.
  if ( $imageMapImage.height() > $window.height() ) {
    // Since the image map is too tall we need to proportionally shrink it to
    // match the height of the window. It's new width will be represented as
    // imageMapWidthNewPercent.
    var imageMapImageRatio = $imageMapImage.outerWidth() / $imageMapImage.outerHeight(),
        imageMapWidthNewPx,
        imageMapWidthNewPercent;
    imageMapWidthNewPx = $window.height() * imageMapImageRatio + 30;
    imageMapWidthNewPercent = imageMapWidthNewPx / $wrapper.width() * 100;
    $imageMap.css( 'width', imageMapWidthNewPercent + '%' );
    // Then we need to adjust the second column to match the image map's new width.
    $terms.css( 'width', (100 - imageMapWidthNewPercent) + '%' );
  }
}

/**
 * Override .sticky() if the viewport has been scrolled past $wrapper so that
 * the sticky element does not overlap content that comes after $wrapper.
 * @return {null}
 */
function updateStickiness() {
  var max = $wrapper.offset().top + $wrapper.height() - $imageMapWrapper.height(),
      stickBottom = 'js-sticky-bottom';
  if ( $window.scrollTop() >= max && !$imageMapWrapper.hasClass( stickBottom ) ) {
    $imageMapWrapper.addClass( stickBottom );
  } else if ( $window.scrollTop() < max && $imageMapWrapper.hasClass( stickBottom ) ) {
    $imageMapWrapper.removeClass( stickBottom );
  }
}

// Scroll to the proper item when the corresponding form dot is selected
$wrapper.on( 'click', '.image-map_point', function( event ) {
  event.preventDefault();
  var itemID = $( this ).attr('href');
  $.scrollTo( $(itemID), {
    duration: 200,
    offset: 0
  });
});

// Scroll to the proper item when the corresponding form dot is selected
$wrapper.on( 'mouseenter mouseleave', '.image-map_point, .expandable__form-explainer', function( event ) {
  event.preventDefault();
  var $target;
  if ( typeof $( this ).attr('href') !== 'undefined' ) {
    $target = $( $(this).attr('href') );
  } else  if ( typeof $( this ).attr('id') !== 'undefined' ) {
    $target = $('[href=#'+$( this ).attr('id')+']');
  }
  if ( $target.hasClass('has-attention') ) {
    $target.removeClass('has-attention');
  } else {
    $target.addClass('has-attention');
  }
});

/**
 * Initialize the form explainer app.
 * @return {null}
 */
function init() {
  $(document).ready(function(){
    fitToWindow();
    // Initiate a sticky image map only if the terms are taller than the window.
    if ( $terms.height() > $window.height() ) {
      // When the sticky plugin is applied to the image, it adds position fixed,
      // and the image's width is no longer constrained to its parent.
      // To fix this we will give it its own width that is equal to the parent.
      $imageMapImage.css( 'width', $imageMap.width() );
      $imageMapWrapper.sticky();
      $window.on( 'scroll', updateStickiness );
    }
  });
}

// Do it!
init();
<commit_msg>Clicking a dot opens the matching expandable.<commit_after>var $ = require('jquery');
require('sticky');
require('jquery-easing');
require('jquery.scrollto');
require('cf-expandables');

var $wrapper =          $('.explain'),
    $imageMap =         $('.image-map'),
    $imageMapImage =    $('.image-map_image'),
    $imageMapWrapper =  $('.image-map_wrapper'),
    $terms =            $('.terms'),
    $window =           $( window );

/**
 * Limit .image-map_image to the height of the window and then adjust the two
 * columns to match.
 * @return {null}
 */
function fitToWindow() {
  // In order to make the image map sticky we must first make sure it will fit
  // completely within the window.
  if ( $imageMapImage.height() > $window.height() ) {
    // Since the image map is too tall we need to proportionally shrink it to
    // match the height of the window. It's new width will be represented as
    // imageMapWidthNewPercent.
    var imageMapImageRatio = $imageMapImage.outerWidth() / $imageMapImage.outerHeight(),
        imageMapWidthNewPx,
        imageMapWidthNewPercent;
    imageMapWidthNewPx = $window.height() * imageMapImageRatio + 30;
    imageMapWidthNewPercent = imageMapWidthNewPx / $wrapper.width() * 100;
    $imageMap.css( 'width', imageMapWidthNewPercent + '%' );
    // Then we need to adjust the second column to match the image map's new width.
    $terms.css( 'width', (100 - imageMapWidthNewPercent) + '%' );
  }
}

/**
 * Override .sticky() if the viewport has been scrolled past $wrapper so that
 * the sticky element does not overlap content that comes after $wrapper.
 * @return {null}
 */
function updateStickiness() {
  var max = $wrapper.offset().top + $wrapper.height() - $imageMapWrapper.height(),
      stickBottom = 'js-sticky-bottom';
  if ( $window.scrollTop() >= max && !$imageMapWrapper.hasClass( stickBottom ) ) {
    $imageMapWrapper.addClass( stickBottom );
  } else if ( $window.scrollTop() < max && $imageMapWrapper.hasClass( stickBottom ) ) {
    $imageMapWrapper.removeClass( stickBottom );
  }
}

// Scroll to the proper item when the corresponding form dot is selected
$wrapper.on( 'click', '.image-map_point', function( event ) {
  event.preventDefault();
  var itemID = $( this ).attr('href');
  $.scrollTo( $(itemID), {
    duration: 200,
    offset: 0
  });
  $( itemID ).get(0).expand();
});

// Scroll to the proper item when the corresponding form dot is selected
$wrapper.on( 'mouseenter mouseleave', '.image-map_point, .expandable__form-explainer', function( event ) {
  event.preventDefault();
  var $target;
  if ( typeof $( this ).attr('href') !== 'undefined' ) {
    $target = $( $(this).attr('href') );
  } else  if ( typeof $( this ).attr('id') !== 'undefined' ) {
    $target = $('[href=#'+$( this ).attr('id')+']');
  }
  if ( $target.hasClass('has-attention') ) {
    $target.removeClass('has-attention');
  } else {
    $target.addClass('has-attention');
  }
});

/**
 * Initialize the form explainer app.
 * @return {null}
 */
function init() {
  $(document).ready(function(){
    fitToWindow();
    // Initiate a sticky image map only if the terms are taller than the window.
    if ( $terms.height() > $window.height() ) {
      // When the sticky plugin is applied to the image, it adds position fixed,
      // and the image's width is no longer constrained to its parent.
      // To fix this we will give it its own width that is equal to the parent.
      $imageMapImage.css( 'width', $imageMap.width() );
      $imageMapWrapper.sticky();
      $window.on( 'scroll', updateStickiness );
    }
  });
}

// Do it!
init();

{'fraction_non_alphanumeric': 0.15271761911415396, 'fraction_numerical': 0.003493083694285315, 'mean_word_length': 3.3042693926638607, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 9, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5987651', 'n_tokens_mistral': 2185, 'n_tokens_neox': 2127, 'n_words': 658}