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

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

Closed
adanylov opened this issue May 24, 2013 · 1 comment
Closed

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

adanylov opened this issue May 24, 2013 · 1 comment

Comments

@adanylov
Copy link

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;
  };
@pkozlowski-opensource
Copy link
Member

@adanylov Going to look into this one in the scope of #441

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants