Add Expand (fullscreen) / Compress box-widget

Hi,

I added this widget to my website and it works great, I think this could be a nice small addition to the project 😉

I’m not doing a pull request since my way of doing it may not be the best.

boxWidgetOptions: {
      boxWidgetIcons: {
        //The icon that triggers the collapse event
        collapse: 'fa fa-minus',
        //The icon that trigger the opening event
        open: 'fa fa-plus',
        //The icon that triggers the removing event
        remove: 'fa fa-times',
        //The icon that triggers the maximize event
        maximize: 'fa fa-expand'
      },
      boxWidgetSelectors: {
        //Remove button selector
        remove: '[data-widget="remove"]',
        //Collapse button selector
        collapse: '[data-widget="collapse"]',
        //Expand button selector
        maximize: '[data-widget="maximize"]'
      }
    },

//Listen for maximize event triggers
        $(o.boxWidgetOptions.boxWidgetSelectors.maximize).click(function (e) {
          e.preventDefault();
          _this.maximize($(this));
        });

maximize: function (element) {
        function maximizer(n) {
          if (n) {
            var t = $(window).height(),
                i = n.find(".box-header").height();
                n.find(".box-body").height(t - i)
          }
        }
        var t = element.parents(".box").first(),
            i = element.find("i").first(),
            r = "fa-compress",
            u = "fa-expand";
        t.hasClass("maximized") ? (i && i.addClass(u).removeClass(r), t.removeClass("maximized"), t.find(".box-body").css("height", "auto")) : (i && i.addClass(r).removeClass(u), t.addClass("maximized"), maximizer(t))
      }

.maximized {
    z-index: 9999;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
}

[adaniello]

👍

Thanks for sharing

[REJack]

I‘ll create soon the v3.0.0-beta.1 release and publish it on npmjs and packagist.