new version

B-3PO · Sep 19, 2016 · 79c4672 · 79c4672
1 parent 91e8bbb
commit 79c4672
Show file tree

Hide file tree

Showing 6 changed files with 115 additions and 16 deletions.
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "angular-material-event-calendar",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "Angular material event calander component",
   "main": [
     "dist/angular-material-event-calendar.js",

diff --git a/dist/angular-material-event-calendar.css b/dist/angular-material-event-calendar.css
@@ -262,6 +262,7 @@ md-event-calendar .md-event-calendar-show-more-content .md-event-calendar-cell-e
   margin-right: 0; }
 
 md-event-calendar .md-event-calendar-show-more-container {
+  opacity: 0;
   position: absolute;
   top: 0;
   left: 1px;
@@ -274,6 +275,11 @@ md-event-calendar .md-event-calendar-show-more-container {
   box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 13px 19px 2px rgba(0, 0, 0, 0.14), 0 5px 24px 4px rgba(0, 0, 0, 0.12); }
   md-event-calendar .md-event-calendar-show-more-container .md-event-calendar-show-more-content {
     position: relative; }
+  md-event-calendar .md-event-calendar-show-more-container.show {
+    opacity: 1; }
+    md-event-calendar .md-event-calendar-show-more-container.show:not(.no-transition) {
+      -webkit-transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
+      transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); }
   md-event-calendar .md-event-calendar-show-more-container .md-event-calendar-show-more-close {
     display: -webkit-box;
     display: -ms-flexbox;

diff --git a/dist/angular-material-event-calendar.js b/dist/angular-material-event-calendar.js
@@ -271,6 +271,13 @@ function mdEventCalendarBuilderService($$mdEventCalendarUtil, $templateCache) {
       content.appendChild(eventElement);
     });
 
+
+    var bounds = opts.cell.getBoundingClientRect();
+    var cellTop = opts.cell.offsetTop;
+    var cellLeft = opts.cell.offsetLeft;
+    container.style.top = cellTop+'px';
+    container.style.left = cellLeft+'px';
+
     return showMoreBody;
   }
 
@@ -684,7 +691,7 @@ function mdEventCalendarBuilderService($$mdEventCalendarUtil, $templateCache) {
 }
 }());
 (function(){"use strict";
-eventCalendarMonthDirective.$inject = ["$$mdEventCalendarBuilder", "$window", "$$rAF"];angular
+eventCalendarMonthDirective.$inject = ["$$mdEventCalendarBuilder", "$window", "$$rAF", "$timeout"];angular
   .module('material.components.eventCalendar')
   .directive('mdEventCalendarMonth', eventCalendarMonthDirective);
 
@@ -697,7 +704,7 @@ eventCalendarMonthDirective.$inject = ["$$mdEventCalendarBuilder", "$window", "$
  * @restrict E
  **/
  /*@ngInject*/
-function eventCalendarMonthDirective($$mdEventCalendarBuilder, $window, $$rAF) {
+function eventCalendarMonthDirective($$mdEventCalendarBuilder, $window, $$rAF, $timeout) {
   var directive = {
     restrict: 'E',
     require: '^mdEventCalendar',
@@ -707,6 +714,8 @@ function eventCalendarMonthDirective($$mdEventCalendarBuilder, $window, $$rAF) {
 
 
   function link(scope, element, attrs, ctrl) {
+    var showMoreData;
+
     var mdEventCalendarCtrl = ctrl;
     var rebuildThrottle = $$rAF.throttle(function () {
       scope.$evalAsync(function () {
@@ -743,14 +752,12 @@ function eventCalendarMonthDirective($$mdEventCalendarBuilder, $window, $$rAF) {
         scope.$apply(function () {
           mdEventCalendarCtrl.selectEvent(e, getIdFromHash(eventId));
         });
+        return;
       }
 
+      removeShowMore(true);
       if (showMore) {
-        buildShowMore(e.target, new Date(showMore));
-      }
-
-      if (showMoreClose) {
-        angular.element(e.target.parentNode).remove();
+        addShowMore(new Date(showMore));
       }
 
       if (createEvent) {
@@ -787,16 +794,102 @@ function eventCalendarMonthDirective($$mdEventCalendarBuilder, $window, $$rAF) {
       });
       element.empty();
       element.append(monthElement);
+
+      buildShowMore();
+    }
+
+
+    function addShowMore(date) {
+      showMoreData = {
+        date: date
+      };
+      buildShowMore(true);
     }
 
-    function buildShowMore(el, date) {
-      var showMoreElement = $$mdEventCalendarBuilder.showMore({
-        date: date,
+    function buildShowMore(animate) {
+      if (showMoreData === undefined) { return; }
+      if (showMoreData.element) {
+        angular.element(showMoreData.element).remove();
+        showMoreData.element = undefined;
+      }
+
+      var cell = getCellFromDate(showMoreData.date);
+      var showMoreFragment = $$mdEventCalendarBuilder.showMore({
+        date: showMoreData.date,
         selected: mdEventCalendarCtrl.selectedEvents,
         events: mdEventCalendarCtrl.events,
-        labelProperty: mdEventCalendarCtrl.labelProperty
+        labelProperty: mdEventCalendarCtrl.labelProperty,
+        cell: cell
       });
-      angular.element(el).parent().parent().append(showMoreElement);
+
+      element.append(showMoreFragment);
+      showMoreData.element = element[0].lastChild;
+      positonShowMore();
+
+      if (animate) {
+        // add class after element added so animation
+        $timeout(function () {
+          angular.element(showMoreData.element).addClass('show');
+        }, 0);
+      } else {
+        angular.element(showMoreData.element).addClass('no-transition');
+        angular.element(showMoreData.element).addClass('show');
+      }
+    }
+
+    function positonShowMore() {
+      var showMoreBounds = showMoreData.element.getBoundingClientRect();
+      var minTop = $window.innerHeight - showMoreBounds.height;
+      var minLeft = $window.innerWidth - showMoreBounds.width;
+      var leftDiff = showMoreBounds.left - minLeft;
+
+      if (showMoreBounds.top > minTop) {
+        showMoreData.element.style.top = minTop+'px';
+      }
+
+      if (leftDiff > 0) {
+        showMoreData.element.style.left = minLeft+'px';
+        // offset date
+
+        leftDiff -= 10;
+        if (leftDiff > 0) {
+          showMoreData.element.querySelector('.md-event-calendar-show-more-date-label').style.marginLeft = leftDiff+'px';
+        }
+      }
+    }
+
+    function getCellFromDate(date) {
+      return element[0].querySelector('[md-date="'+date+'"]');
+    }
+
+    function removeShowMore(animate) {
+      if (!showMoreData) { return; }
+
+      var el = showMoreData.element;
+      showMoreData = undefined;
+
+      if (animate) {
+        angular.element(el).removeClass('no-transition');
+        $timeout(function () {
+          angular.element(el).removeClass('show');
+        }, 0);
+        $timeout(function () {
+          el.remove();
+          el = undefined;
+        }, 400);
+      } else {
+        el.remove();
+        el = undefined;
+      }
+    }
+
+
+    function getClosestCell(el) {
+      var target = angular.element(el).parent();
+      while (target.hasClass('md-event-calendar-month-cell') === false) {
+        target = target.parent();
+      }
+      return target;
     }
 
     function getIdFromHash(id) {

diff --git a/dist/angular-material-event-calendar.min.css b/dist/angular-material-event-calendar.min.css