Automatic "More..." item + sub menu

HTML

<link rel="stylesheet" href="https://vadikom.github.io/smartmenus/src/css/sm-core-css.css">
<link rel="stylesheet" href="https://vadikom.github.io/smartmenus/src/css/sm-blue/sm-blue.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://vadikom.github.io/smartmenus/src/jquery.smartmenus.js"></script>
<nav role="navigation">
  <!-- Sample menu definition -->
  <ul id="main-menu" class="sm sm-blue">
    <li><a href="http://www.smartmenus.org/">Home</a></li>
    <li><a href="http://www.smartmenus.org/about/">About</a></li>
    <li><a href="http://www.smartmenus.org/download/">Download</a></li>
    <li><a href="http://www.smartmenus.org/support/">Support</a></li>
    <li><a href="http://www.smartmenus.org/docs/">Docs</a></li>
    <li><a href="#">Test 1</a></li>
    <li><a href="#">Test 2</a></li>
    <li><a href="#">Test 3</a></li>
    <li><a href="#">Test 4</a></li>
    <li><a href="#">Test 5</a></li>
    <li><a href="#">Test 6</a></li>
    <li><a href="#">Test 7</a></li>
    <li><a href="#">Test 8</a></li>
    <li><a href="#">Test 9</a></li>
    <li><a href="#">Test 10</a>
      <ul>
        <li><a href="#">Dummy item</a></li>
        <li><a href="#">Dummy item</a></li>
        <li><a href="#">Dummy item</a></li>
        <li><a href="#">Dummy item</a></li>
        <li><a href="#">Dummy item</a></li>
      </ul>
    </li>
  </ul>
</nav>

<div class="demo-text">
  <p>Demonstrates a mod (unofficial addon) that enables an automatic dynamic "More..." item + sub menu to be created for horizontal main menus when the width is not enough for all the items to appear without wrapping.</p>
  <p>Try resizing the browser window to see how it updates dynamically in desktop view.</p>
</div>

CSS

/* IGNORE: Unrelated generic demo styles */

body {
  margin: 8px;
  background: #000;
  color: #000;
  font: 16px/1.5em 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.demo-text {
  margin: 3em 22px;
}

.demo-text p {
  margin-bottom: 1em;
}

.demo-text a {
  color: #999;
}

JavaScript

/*!
 * SmartMenus more option - November 9, 2016
 * http://www.smartmenus.org/
 */

(function($) {

  $.SmartMenus.prototype.old_init = $.SmartMenus.prototype.init;
  $.SmartMenus.prototype.init = function(refresh) {
    if (!refresh && !this.$root.hasClass('sm-vertical')) {
      var $originalItems = this.$root.children('li'),
        $moreSub = this.$root.clone().removeAttr('id').removeAttr('class').addClass('dropdown-menu'),
        $moreSubItems = $moreSub.children('li'),
        $moreItem = $('<li><a href="#">More <span class="caret"></span></a></li>').append($moreSub).appendTo(this.$root),
        self = this,
        vieportW,
        hiddenItems = [],
        hiddenMoreItems = [];
    }

    this.old_init(refresh);

    if (!refresh && !this.$root.hasClass('sm-vertical')) {
      function handleResize(force) {
        var curWidth = $(window).width();
        if (vieportW !== curWidth || force) {
          // hide More item
          $moreItem.detach();

          // show all main menu items
          $.each(hiddenItems, function() {
            $(this).appendTo(self.$root);
          });
          hiddenItems = [];

          // show all More sub items
          $.each(hiddenMoreItems, function() {
            $(this).prependTo($moreSub);
          });
          hiddenMoreItems = [];

          // if in desktop view and the last item is wrapped
          if (!self.$root.hasClass('sm-vertical') && (/^(left|right)$/.test(self.$firstLink.parent().css('float')) || self.$firstLink.parent().css('display') == 'table-cell') && $originalItems.eq(-1)[0].offsetTop != $originalItems.eq(0)[0].offsetTop) {
            // show More item
            $moreItem.appendTo(self.$root);

            // while the More item is wrapped
            while ($moreItem[0].offsetTop != $originalItems.eq(0)[0].offsetTop) {
              hiddenItems.unshift($moreItem.prev('li').detach());
            };

            // hide proper More sub items
            $moreSubItems.slice(0,...