Skip to content
This repository was archived by the owner on May 29, 2019. It is now read-only.
This repository was archived by the owner on May 29, 2019. It is now read-only.

feat(modal / dialog): support dialog/modal sizing #472

@adanylov

Description

@adanylov

Add feature to modal and dialog directives to change size (width, height and max-height).

Sample implementation:

 Dialog.prototype.open = function (templateUrl, controller) {
      var self = this, options = this.options;

      if (templateUrl) {
          options.templateUrl = templateUrl;
      }
      if (controller) {
          options.controller = controller;
      }

      if (!(options.template || options.templateUrl)) {
          throw new Error('Dialog.open expected template or templateUrl, neither found. Use options or open method to specify them.');
      }

      this._loadResolves().then(function (locals) {
          var $scope = locals.$scope = self.$scope = locals.$scope ? locals.$scope : $rootScope.$new();

          self.modalEl.html(locals.$template);

          // Added by AD in order to assign dialog width
          // dynamically
          // start:

          // assign modal width
          if (self.options.width) {
              self.modalEl.css('width', self.options.width);

              self.modalEl.css('margin-left', function () {
                  if (/%/ig.test(self.options.width)) {
                      return -(parseInt(self.options.width) / 2) + '%';
                  } else {
                      return -($(self.modalEl).width() / 2) + 'px';
                  }
              });
          } else {
              self.modalEl.css('width', '');
              self.modalEl.css('margin-left', '');
          }

          // assign modal height
          var prop = self.options.height ? 'height' : 'max-height';
          var value = self.options.height || self.options.maxHeight;
          if (value) {
              self.modalEl.find('.modal-body').css('overflow', 'auto').css(prop, value);
          }
          // end

          if (self.options.controller) {
              var ctrl = $controller(self.options.controller, locals);
              self.modalEl.children().data('ngControllerController', ctrl);
          }

          $compile(self.modalEl)($scope);
          self._addElementsToDom();
          body.addClass(self.options.dialogOpenClass);

          // trigger tranisitions
          setTimeout(function () {
              if (self.options.dialogFade) { self.modalEl.addClass(self.options.triggerClass); }
              if (self.options.backdropFade) { self.backdropEl.addClass(self.options.triggerClass); }
          });

          self._bindEvents();
      });

      this.deferred = $q.defer();
      return this.deferred.promise;
  };

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions