Feb 2022: wsurvey.resizer.js: a set for javascript function for resizing adjacent containers on an html page 

 A function (and helper functions) to make it easy to create "coordinated & adjacent" resizable containers - that when one element shrinks, the other grows.

 With such a set of containers, the user can mouseDown on a "mover bar", move the  mouse, and then release the mouse-- and the set of
 containers will automaticaly resize.

 For a more complex version of resizable containers (though one that does not offer coordinated resizing), see wsurvey.floatingContent.js

 Features:
 
    * Pairs of "blocks" can be jointly resized: as one expands, the other shrinks.
      This resizing can be in the horizontal, or in the vertical, directon.
      
    * Nested pairs are supported: resizing can occur within each pair, or between each of the two pairs

    * A specified "mover" element  is used to perform  resizing (via a mousedown & move)
      Or right-mouse-button click (RMB)  to auto-resize!

    *  A block can contain multiple sub-blocks, that will be auto resized

  Usage:

   a)    Include this library along with jQuery; for example:
        
        For example:
             <script type="text/javascript" src="jquery-3.6.0.min"></script>
             <script type="text/javascript" src="wsurvey.resizer.js"></script>
             
   b) Specify a pair of "blocks".  Often this means creating "floating" elements within an outer container.
      You can create many such pairs. And, if you are a bit careful, you can nest them (to create a grid of resizable blocks).

   c) After the document is loaded (i.e.; with document.ready());
      call wsurvey.resizer.init as: 

          wsurvey.resizer.init(blocka,blockb,mover,dire,minsize,doRmb)

          You can call wsurvey.resizer.init several times, for different "pairs of blocks".
          
 Specification of wsurvey.resizer.init
 
     wsurvey.resizer.init(blocka,blockb,mover,dire,minsize,rmbSpecs)

  where the first three are required:

     blocka : string containing ids of one (or more, in a space delimited list) sub-blocks
              blocka is the "left" (or "top")  set of container(s)

     blockb : string containing ids of one (or more, in a space delimited list)  sub-blocks.
              blockb is the "right" (or "bottom") container(s)

      mover : string containing id of one (just one!) element (such as a a <div> or <span>) that when clicked and moved
	      will resize blocka and blockb.

      dire  : H for "horizontal resizing" (left and right adjacency), V for "vertical resizing" (top and bottom adjacency). Default is V
    minsize : minimum size after resizing. Default is 50.
     rmbSpecs: optional. How to treat right-mouse-button clicks on a mover.  See below for details.

Layout of html

  Each sub-block is typically a <div>. Typically each has  a float:left CSS attribute.
     Note that it cleanest to have just one sub-block per block, but you can have more.
     If you have more, the sub-blocks should have the same height and width -- since they are resized together.
     See below for further details.

  The mover should be between blocka and blockb.
      H:  for "horizontal resizing" mover should be to the right of blocka and to the left of blockb. i.e.; column resizing
      V:  for "vertical resizing" mover should be below blocka and above blockb.       i.e.; row resizing

  If float:left is used, it is recommended that blockb be followed by a    <div style='clear:both'></div>, or similar "stop floating" element.

  All blocks should be children of the same parent.
     This means: if you use multiple calls (to implement a grid of resizable blocks) -- all of these blocks should be children of the same parent.


Sizes of sub-blocks

 If you specify more than one sub-block in either blocka or blockb, all of them will be resized together.
 It is recommended that all sub-blocks in a container  start with the  same SIZE. More specifically,

     for H resizing:  all sub-blocks (in both blocka and blockb) should have the same width. They do NOT have to be the same height.
     for V resizing:  all blocks (in both blocka and blockb) should have the same height. They do NOT have to be the same width.

  This "should have the same ..." is not required.
     However, resizing uses the max height (or width) of the sub-blocks within a block  .
     So if the sizes start out different, they will be forced to be the same after the first "resizing".

Nesting to create a grid of resizable blocks

  You can call wsurvey.resizer.init several times for different "pairs" of blocks.
  If you do, it is strongly recommened that each "block" contains all the blocks within a nest.
  Thus:
      wsurvey.resizer.init('blockA1','blockA2','hSepA',H',50);
      wsurvey.resizer.init('blockA1 hSepA blockA2','blockB','vsep','V',50)

  The first init() defines a "top row" : with two blocks that can be horizontally resized.
  The second init defines two rows, that can be resized. The first row has several "sub-blocks", which will be resized together.
  In particular, after a resize all the tow row sub-blocks(blockA1, blockA2, and hSepA) will have the same height
      Note the includion of hSepA in block or of the 2nd call -- that insures that it will stay in sync with blockA1 and blockA2
      when vertically resized

Using the RMB

  A right-mouse-button click (rmb) on a mover bar is used to auto-resize: to toggle through a list of pre-set sizes.
  If doRmb is not specified, or is 1: 
       the first rmb toggles the blockA to 95% (blockB to 5%), the next click to 60%, the 3rd to 95%, etc)
     doRmb=0 : disable
     
     custom: you can specify a javascript array of 2 more more percents values
             RMB will toggle through these values, cycling back to the beginning.
             These sizes do NOT have to be ascending or descending
             
             Note: doRmb=1 is a shortcut for doRmb=[95,60]


Other notes:

   * The total width of two blocks that will be "horizontally" resized should be less than 97%.
     Otherwise, repositioning of blocks seems to happen when they are resized.
  
   * Reiterating: all blocks (in blocka, in blockb, and in mover) MUST have the same parent! IF not, an error occurs.
     This is done to avoid unpredictable results when sub-blocks are not children of the same parent.

   *  min is used to prevent excessive undersizing or oversizing of any block. Once a size (of the smallest block) is less than min, resizing is ignored
     (the resizing doesn't happen).

   *  If the total size of both blocks is within min of its container (the browser window, or some parent div), resizing is ignored
   
   * wsurvey.resizer.init may act odd if pushed too much -- with wrapping of elements when not as resizing occurs.
     This is most likely blocks contains several sub-blocks, especially if they are  of different sizes.



Demo:
   See wsurvey.testResizser_demo.htm for an example.

Contact:
 Daniel Hellerstein, danielh@crosslink.net


Contact and legal

  Feb 2022
  Daniel Hellerstein
  danielh@crosslink.net
  http://www.wsurvey.org/distrib, or  https://github.com/dHellerstein 

    wsurvey.resizer  is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    wsurvey.resizer  is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    If you did not receive a copy of the GNU General Public License,
    see <http://www.gnu.org/licenses/>.