String Unifier

A common use would be on a booking forms.

How to use?

hs.strings-unifier.js resource is suitable for website with lots of page content. Customize the look and functionality of the plugin as much as you want with unlimited possibilities.

Copy-paste the following <script> near the end of your pages under JS Space to enable it.

<script src="../../assets/js/components/hs.strings-unifier.js"></script>

The script requires Quantity Counter (hs.quantity-counter.js).

<script src="../../assets/js/components/hs.quantity-counter.js"></script>

Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.

<script>
  $(document).on('ready', function () {
    // initialization of quantity counter
    var counter = 0;

    $.HSCore.components.HSQantityCounter.init('.js-quantity', {
      stopIncrease: function() {
        if (counter >= 19) return true;
      },
      afterIncrease: function() {
        counter += 1;
      },
      afterDecrease: function() {
        counter -= 1;
      },
      afterChange: function() {
        if(counter < 20) {
          // initialization of strings splitter
          $.HSCore.components.HSStringsUnifier.init('.js-string-unifier');
        }
      }
    });
  });
</script>

Basic example

Basic example that highlights today's day.

<div class="form-group mb-3">
  <div class="dropdown">
    <div class="u-guests input-group position-relative" data-toggle="dropdown" aria-expanded="false">
      <div class="input-group-prepend z-index-2">
        <div class="input-group-text">
          <i class="svg-icon svg-icon-2xs text-muted">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="18" viewBox="0 0 16 18">
              <path d="M14.286,18H1.715A1.7,1.7,0,0,1,0,16.313V14.85a4.768,4.768,0,0,1,4.8-4.725h.6a6.307,6.307,0,0,0,5.207,0h.6A4.769,4.769,0,0,1,16,14.85v1.462A1.7,1.7,0,0,1,14.286,18ZM8,9A4.541,4.541,0,0,1,3.429,4.5a4.572,4.572,0,0,1,9.142,0A4.541,4.541,0,0,1,8,9Z" fill="#000000" />
            </svg>
          </i>
        </div>
      </div>

      <input class="js-string-unifier u-guests__input form-control bg-white text-muted" type="text" value="1 Guest" readonly
             data-su-options='{
               "data": [
                 {
                   "title": "Guest",
                   "titleMultiplier": "s",
                   "target": ["#adultsQty", "#childrenQty"]
                 },
                 {
                   "title": "Infant",
                   "titleMultiplier": "s",
                   "target": ["#infantsQty"]
                 }
               ]
             }'>

      <svg class="u-guests__input-i" xmlns="http://www.w3.org/2000/svg" width="11.964" height="6.974" viewBox="0 0 11.964 6.974">
        <g data-name="chevron down" transform="translate(-0.018 -0.013)">
          <path d="M5.517,6.789.193,1.675a.614.614,0,0,1,0-.893l.621-.6a.677.677,0,0,1,.929,0l4.24,4.053L10.222.184a.677.677,0,0,1,.929,0l.621.6a.614.614,0,0,1,0,.893L6.447,6.789A.677.677,0,0,1,5.517,6.789Z" transform="translate(0.018 0.013)" />
        </g>
      </svg>
    </div>

    <div class="dropdown-menu dropdown-menu-right font-size-base u-guests-options p-4 shadow">
      <div class="d-flex justify-content-between mb-3">
        <div class="u-guests-options__label font-weight-medium">
          Adults
          <em class="small u-guests-options__label-info">Above 12</em>
        </div>

        <div class="js-quantity u-guests-options__data d-flex align-items-center"
             data-min-val="1">
          <span class="js-minus u-guests-options__ctrl u-guests-options__ctrl--minus">
            <i class="svg-icon svg-icon-xs text-primary">
              <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                  <rect fill="#000000" x="4" y="11" width="16" height="2" rx="1"></rect>
                </g>
              </svg>
            </i>
          </span>

          <span id="adultsQty" class="js-result u-guests-options__value">1</span>

          <span class="js-plus u-guests-options__ctrl u-guests-options__ctrl--plus">
            <i class="svg-icon svg-icon-xs text-primary">
              <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                  <rect fill="#000000" x="4" y="11" width="16" height="2" rx="1"></rect>
                  <rect fill="#000000" opacity="0.3" transform="translate(12.000000, 12.000000) rotate(-270.000000) translate(-12.000000, -12.000000) " x="4" y="11" width="16" height="2" rx="1"></rect>
                </g>
              </svg>
            </i>
          </span>
        </div>
      </div>

      <div class="d-flex justify-content-between mb-3">
        <div class="u-guests-options__label font-weight-medium">
          Children
          <em class="small u-guests-options__label-info">Ages 2–12</em>
        </div>

        <div class="js-quantity u-guests-options__data d-flex align-items-center">
          <span class="js-minus u-guests-options__ctrl u-guests-options__ctrl--minus">
            <i class="svg-icon svg-icon-xs text-primary">
              <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                  <rect fill="#000000" x="4" y="11" width="16" height="2" rx="1"></rect>
                </g>
              </svg>
            </i>
          </span>

          <span id="childrenQty" class="js-result u-guests-options__value">0</span>

          <span class="js-plus u-guests-options__ctrl u-guests-options__ctrl--plus">
            <i class="svg-icon svg-icon-xs text-primary">
              <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                  <rect fill="#000000" x="4" y="11" width="16" height="2" rx="1"></rect>
                  <rect fill="#000000" opacity="0.3" transform="translate(12.000000, 12.000000) rotate(-270.000000) translate(-12.000000, -12.000000) " x="4" y="11" width="16" height="2" rx="1"></rect>
                </g>
              </svg>
            </i>
          </span>
        </div>
      </div>

      <div class="d-flex justify-content-between mb-3">
        <div class="u-guests-options__label font-weight-medium">
          Infants
          <em class="small u-guests-options__label-info">Under 2</em>
        </div>

        <div class="js-quantity u-guests-options__data d-flex align-items-center">
          <span class="js-minus u-guests-options__ctrl u-guests-options__ctrl--minus">
            <i class="svg-icon svg-icon-xs text-primary">
              <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                  <rect fill="#000000" x="4" y="11" width="16" height="2" rx="1"></rect>
                </g>
              </svg>
            </i>
          </span>

          <span id="infantsQty" class="js-result u-guests-options__value">0</span>

          <span class="js-plus u-guests-options__ctrl u-guests-options__ctrl--plus">
            <i class="svg-icon svg-icon-xs text-primary">
              <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                  <rect fill="#000000" x="4" y="11" width="16" height="2" rx="1"></rect>
                  <rect fill="#000000" opacity="0.3" transform="translate(12.000000, 12.000000) rotate(-270.000000) translate(-12.000000, -12.000000) " x="4" y="11" width="16" height="2" rx="1"></rect>
                </g>
              </svg>
            </i>
          </span>
        </div>
      </div>

      <div class="text-right">
        <a class="u-guests-options__apply" href="javascript:;">Apply</a>
      </div>
    </div>
  </div>
</div>

JavaScript behavior

Methods

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-su-options="".

Attribute	Description
`data-su-options`	`data-su-options` contains the following data: `title`, `titleMultiplier`, `target`. In the `title` field we specify the name (for example, "Guest"); in the `titleMultiplier` - the rule of writing the name in the plural; in the `target` - id fields, the values of which will be used in the final field.