Thursday, 28 May 2020

Creating an AngularJs directive for a horizontal scroller at top and bottom of HTML container element

I made an AngularJs directive today that adds a horizontal scroller at top and bottom of an HTML container element, such as text area, table or div. The AngularJs directive uses the link function of AngularJs to prepend and wrap the necessary scrolling mechanism and add some Javascript scroll event handlers using jQuery. 

import angular from 'angular';

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, $compile) {
  $scope.name = 'Dual wielded horizontal scroller';
});

app.directive('doubleHscroll', function($compile) {
  return {
    restrict: 'C',
    link: function(scope, elem, attr){

      var elemWidth = parseInt(elem[0].clientWidth);

      elem.wrap(`<div id='wrapscroll' style='width:${elemWidth}px;overflow:scroll'></div>`); 
      //note the top scroll contains an empty space as a 'trick' 
      $('#wrapscroll').before(`<div id='topscroll' style='height:20px; overflow:scroll;width:${elemWidth}px'><div style='min-width:${elemWidth}px'> </div></div>`);

      $(function(){
        $('#topscroll').scroll(function(){
          $("#wrapscroll").scrollLeft($("#topscroll").scrollLeft());
        });
        $('#wrapscroll').scroll(function() {
          $("#topscroll").scrollLeft($("#wrapscroll").scrollLeft());
        });

      });  

    }

  };


});
The HTML that uses this directive, restricted to 'C' (class) is then simply using the class 'double-Hscroll' following AngularJs 'snake escaping' naming convention of capitalization and dashes. 

<!DOCTYPE html>

<html>
  <head>
    <link rel="stylesheet" href="lib/style.css" />
    <script src="lib/script.js"></script>
    <script
  src="https://code.jquery.com/jquery-3.5.1.js"
  integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
  crossorigin="anonymous"></script>
  </head>

  <body ng-app="plunker" ng-cloak>
    <div ng-controller="MainCtrl">
      <h1>Hello {{name}}</h1>
      <p>Dual horizontal scroll top and below a text area.</p>
      <textarea noresize class="double-hscroll" rows="10" cols="30">
        lorem ipsum dolores  lorem ipsum dolores
      lorem ipsum dolores
      lorem ipsum dolores sit amen
      lorem ipsum dolores
      lorem ipsum dolores sit amen
      lorem ipsum dolores
      lorem ipsum dolores amen sit
     
      </textarea>
    </div>
  </body>
</html>
kl.

2 comments: