Skip to content

Commit

Permalink
Changing modal tab support to an toggled by an optional enableTabs at…
Browse files Browse the repository at this point in the history 
…tribute on the modal trigger.

Merge remote-tracking branch 'upstream/master'

* upstream/master:
  Changing how the open variable works, now it is set to false when the modal closes. #128 (comment)
  add support for "weekdays-short"
  Adding some documentation for the new modal functionality (work in progress). #128

Conflicts:
	src/angular-materialize.js
  • Loading branch information
@charleshimmer
charleshimmer committed Mar 2, 2016
2 parents fb5cd59 + c32cd72 commit cf2eb5a
Show file tree
Hide file tree
Showing 3 changed files with 39 additions and 16 deletions.
7 changes: 5 additions & 2 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -463,19 +463,22 @@ <h2 class="header">Dropdown</h2>
</div>


<div class="row" id="modals" ng-init="dummyInputs.modalInput = 'Modal header'">
<div class="row" id="modals" ng-init="dummyInputs.modalInput = 'Modal header'" ng-controller="ModalController">
<h2 class="header">Modals</h2>
<p>You need a modal trigger, like the below. The trigger should have the modal directive, and the href attribute must point to the ID of the modal structure. <br />
The modal strcture should be structured <a href="http://materializecss.com/modals.html">just like in materialize</a>. <br>
In the below example, you can change the header of the modal through the input field. </p>
<!-- Modal Trigger -->
<div class="col">
<a class='btn' href='#demoModal' modal>Show Modal</a>
<a class='btn' href='#demoModal' modal ready="readyCallback" complete="completeCallback" open="openModal">Show Modal</a>
</div>
<div input-field class="col s4">
<input type="text" ng-model="dummyInputs.modalInput">
<label>Modal header</label>
</div>
<div class="col s4">
<a class='btn' ng-click="openModal = true">Open from controller</a>
</div>
<!-- Modal Structure -->
<div id="demoModal" class="modal">
<div class="modal-content">
Expand Down
9 changes: 9 additions & 0 deletions js/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,4 +64,13 @@ var app = angular.module('materializeApp', ['ui.materialize'])
$scope.onStop = function () {
console.log('onStop');
};
}]).controller("ModalController", ["$scope", function (scope) {
scope.readyCallback = function () {
Materialize.toast("Modal ready", 1000);
}
scope.completeCallback = function () {
Materialize.toast("Modal complete", 1000);
}

scope.openModal = false;
}]);
39 changes: 25 additions & 14 deletions src/angular-materialize.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -463,6 +463,7 @@
monthsFull: "@",
monthsShort: "@",
weekdaysFull: "@",
weekdaysShort: "@",
weekdaysLetter: "@",
firstDay: "=",
disable: "=",
Expand Down Expand Up @@ -493,6 +494,7 @@
var monthsFull = (angular.isDefined(scope.monthsFull)) ? scope.$eval(scope.monthsFull) : undefined,
monthsShort = (angular.isDefined(scope.monthsShort)) ? scope.$eval(scope.monthsShort) : undefined,
weekdaysFull = (angular.isDefined(scope.weekdaysFull)) ? scope.$eval(scope.weekdaysFull) : undefined,
weekdaysShort = (angular.isDefined(scope.weekdaysShort)) ? scope.$eval(scope.weekdaysShort) : undefined,
weekdaysLetter = (angular.isDefined(scope.weekdaysLetter)) ? scope.$eval(scope.weekdaysLetter) : undefined;


Expand All @@ -506,6 +508,7 @@
monthsFull: (angular.isDefined(monthsFull)) ? monthsFull : undefined,
monthsShort: (angular.isDefined(monthsShort)) ? monthsShort : undefined,
weekdaysFull: (angular.isDefined(weekdaysFull)) ? weekdaysFull : undefined,
weekdaysShort: (angular.isDefined(weekdaysShort)) ? weekdaysShort : undefined,
weekdaysLetter: (angular.isDefined(weekdaysLetter)) ? weekdaysLetter : undefined,
firstDay: (angular.isDefined(scope.firstDay)) ? scope.firstDay : 0,
disable: (angular.isDefined(scope.disable)) ? scope.disable : undefined,
Expand Down Expand Up @@ -841,37 +844,45 @@
outDuration: "@",
ready: '&?',
complete: '&?',
open: '='
open: '=',
enableTabs: '@?'
},
link: function (scope, element, attrs) {
$timeout(function () {
var modalEl = $(attrs.href ? attrs.href : '#' + attrs.target);
var readyFn = function() {
if (angular.isFunction(scope.ready)) {
scope.$eval(scope.ready());
}
// If we are using tabs in a modal we need to re-init the tabs
$compile(element.contents())(scope);

var complete = function () {
angular.isFunction(scope.complete) && scope.$eval(scope.complete());

scope.open = false;
scope.$apply();
};
var ready = function() {
angular.isFunction(scope.ready) && scope.$eval(scope.ready());
// If tab support is enabled we need to re-init the tabs
// See https://github.com/Dogfalo/materialize/issues/1634
modalEl.find('ul.tabs').tabs();
if (scope.enableTabs) {
modalEl.find('ul.tabs').tabs();
}
};
$compile(element.contents())(scope);
element.leanModal({
var options = {
dismissible: (angular.isDefined(scope.dismissible)) ? scope.dismissible : undefined,
opacity: (angular.isDefined(scope.opacity)) ? scope.opacity : undefined,
in_duration: (angular.isDefined(scope.inDuration)) ? scope.inDuration : undefined,
out_duration: (angular.isDefined(scope.outDuration)) ? scope.outDuration : undefined,
ready: readyFn,
complete: (angular.isDefined(scope.complete)) ? function() {scope.$eval(scope.complete())} : undefined,
});
ready: ready,
complete: complete,
};
element.leanModal(options);

// Setup watch for opening / closing modal programatically.
if (angular.isDefined(attrs.open) && modalEl.length > 0) {
scope.$watch('open', function(value, lastValue) {
if (!angular.isDefined(value)) { return; }
(value === true) ? modalEl.openModal() : modalEl.closeModal();
(value === true) ? modalEl.openModal(options) : modalEl.closeModal();
});
}

});
}
};
Expand Down

0 comments on commit cf2eb5a

Please sign in to comment.