A tiny piece of JS to handle dialogs

small-dialog-example.js

(function($){
  var C = typeof console == 'object' ? console : {info: function(){}, log: function(){}, error: function(){}};

    var searchSettings = {
      id: 'search-dialog',
      el: $('#top-menu .search')[0],
      keepClosed: true,
      type: 'search',
      content: $('#js-page-search-form').html(),
      outerWidth: $tm.outerWidth(),
      position: {
        left: $tm,
        top: $tm,
        tiltTop: 10 + $tm.outerHeight()
      },
      size: {
        width: $tm
      }
    };

    var searchDialog = new Dialog(searchSettings).render();

    $('#top-menu .search:not(.js-processed)')
      .addClass('js-processed')
      .click(function(){
        searchDialog.toggle();
        return false;
      })
    ;
})(window.jQuery);

small-dialog.js

(function($){
  var C = typeof console == 'object' ? console : {info: function(){}, log: function(){}, error: function(){}};

  var Dialog = window.Dialog = function(options) {
    var defaults = {
      content: '',
      title: false,
      type: 'info',
      templateHTML: false,
      templateId: 'dialog-template',
      keepClosed: false,
      hideIcon: false,
      position: {},
      size: {}
    };

    this.options = {};
    _.extend(this.options, defaults, options);
    this.content = options.content;

    if (!$('#dialogs-holder').length) { $('body').append('<div id="dialogs-holder" />'); }
    this.$holder = $('#dialogs-holder');
    this.id = options.id || _.uniqueId('dialog');
    this.$el = $('<div style="position:absolute;overflow:visible;">');
    this.$holder.append(this.$el);

     var templateHTML = options.templateHTML ? options.templateHTML :
           $('#'+ (options.templateId ?
             options.templateId : 'dialog-template')).html();
    if (!templateHTML) throw new Error('No HTML for the dialog template.');//return this;

    this.template = _.template(templateHTML);
    this.initialize();
    if (!options.noRender) this.render();
    return this;
  };

  _.extend(Dialog.prototype, {
    initialize: function() {
      return this;
    },
    render: function() {
      if (this.options.keepClosed) {
        this.$el.hide();
        this.options.keepClosed;
      }
      this.$el.html(this.template(this.options));

      this.setPosition();
      return this;
    },


    setPosition: function() {
      var D = this,
          P = D.options.position
      ;

      function resetPosition() {
        if (_.isUndefined(P.top) || _.isUndefined(P.left)) {

          var $t = $(D.options.el);
          var pos = $t.offset();
          var $s = $(window);
          var $d = D.$el.children('.modal-dialog');

          // TODO: something to set the position
          // relative to every corners (tl, tr, br, bl, wtl, wtr, wbr, wbl)
          // TODO: something to add a distance from the picked corner
          var top = pos.top + $t.outerHeight();
          var left = pos.left + $t.outerWidth();

          var right = left + $d.outerWidth();
          var bottom = top + $d.outerHeight();
          // check if the box is partially outside of screen
          var diffRight = $s.width() - right;
          var diffBottom = $s.height() - bottom;
          // "tilt" if needed
          var tiltLeft = diffRight < 0 ? diffRight : 0;
          var tiltTop = diffBottom < 0 ? diffBottom : 0;

          // set the ideal position
          D.$el.css({
            left: left + tiltLeft,
            top: top + tiltTop
          });

        }

        // both positions (top/left) are given in the options
        else {
          var top = _.isNumber(P.top) ? P.top : (_.isFunction(P.top.offset) ? P.top.offset().top : 0);
          var left = _.isNumber(P.left) ? P.left : (_.isFunction(P.left.offset) ? P.left.offset().left : 0);


          D.$el.css({
            left: left + (_.isNumber(P.tiltLeft) ? P.tiltLeft : 0),
            top: top + (_.isNumber(P.tiltTop) ? P.tiltTop : 0)
          });
        }

        if (D.options.size.width) {
          var width = D.options.size.width;
          if (_.isFunction(width.outerWidth)) width = width.outerWidth();
          D.$el.width(width);
        }
      }

      $(window).resize(resetPosition);
      resetPosition();
      C.info('Dialog positionning');
      return this;
    },


    close: function() {
      C.info('Closing dialog');
      $(this.options.el).removeClass('dialog-active');
      this.$el.hide();
      return this;
    },


    open: function() {
      C.info('Openning dialog');
      var D = this;
      setTimeout(function(){
        D.setPosition();
      }, 10);
      $(this.options.el).addClass('dialog-active');
      D.$el.show();
      return D;
    },


    toggle: function() {
      var D = this;
      setTimeout(function(){
        D.setPosition();
      }, 3);
      var visible = D.$el.css('display') != 'none';
      C.info('Toggling dialog, visible?', visible, this.$el[0]);
      $(this.options.el)[visible ? 'removeClass' : 'addClass']('dialog-active');
      this.$el[visible ? 'hide' : 'show']();
      return this;
    }
  });
})(window.jQuery);