anytime - npm Package Compare versions

Comparing version 0.2.0 to 0.3.0

anytime.js

@@ -7,9 +7,8 @@ module.exports = AnytimePicker
   , Emitter = require('events').EventEmitter
-  , elementClass = require('element-class')
   , extend = require('lodash.assign')
   , pad = require('pad-number')
-  , offset = require('document-offset')
   , getYearList = require('./lib/get-year-list')
   , createButton = require('./lib/create-button')
   , getMonthDetails = require('./lib/get-month-details')
+  , classList = require('classlist')
   , defaults =
@@ -42,3 +41,3 @@ { minYear: 1960
   this.el.addEventListener('click', function (e) {
-    if (elementClass(e.target).has('js-anytime-picker-day')) {
+    if (classList(e.target).contains('js-anytime-picker-day')) {
       this.value.date(parseInt(e.target.getAttribute('data-date'), 10))
@@ -51,2 +50,5 @@ this.value.month(parseInt(e.target.getAttribute('data-month'), 10))
 
+  // If the target element is within a form element this stops button clicks from submitting it
+  this.el.addEventListener('click', function (e) { e.preventDefault() })
+
   this.on('change', function (value) {
@@ -61,3 +63,3 @@ if (value) value = moment(value).format(this.options.format)
 
-  if (!this.options.anchor) this.options.anchor = this.options.input
+  this.root = this.options.anchor ? this.options.anchor : this.options.input
 
@@ -72,3 +74,3 @@ }
   var header = document.createElement('div')
-  elementClass(header).add('anytime-picker__header')
+  classList(header).add('anytime-picker__header')
   this.renderHeader(header)
@@ -78,9 +80,9 @@
   var dates = document.createElement('div')
-  elementClass(dates).add('anytime-picker__dates')
-  elementClass(dates).add('js-anytime-picker-dates')
+  classList(dates).add('anytime-picker__dates')
+  classList(dates).add('js-anytime-picker-dates')
 
   // Time
   var time = document.createElement('div')
-  elementClass(time).add('anytime-picker__time')
-  elementClass(time).add('js-anytime-picker-time')
+  classList(time).add('anytime-picker__time')
+  classList(time).add('js-anytime-picker-time')
   this.renderTimeInput(time)
@@ -90,3 +92,3 @@
   var footer = document.createElement('div')
-  elementClass(footer).add('anytime-picker__footer')
+  classList(footer).add('anytime-picker__footer')
   this.renderFooter(footer)
@@ -104,2 +106,3 @@
   return this
+
 }
@@ -116,4 +119,3 @@
   var monthSelect = document.createElement('select')
-  elementClass(monthSelect).add('js-anytime-picker-month')
-  elementClass(monthSelect).add('anytime-picker__dropdown')
+  classList(monthSelect).add('js-anytime-picker-month', 'anytime-picker__dropdown')
   months.forEach(function (month, i) {
@@ -135,4 +137,3 @@ var monthOption = document.createElement('option')
   var yearSelect = document.createElement('select')
-  elementClass(yearSelect).add('js-anytime-picker-year')
-  elementClass(yearSelect).add('anytime-picker__dropdown')
+  classList(yearSelect).add('js-anytime-picker-year', 'anytime-picker__dropdown')
   getYearList(this.options.minYear, this.options.maxYear).forEach(function (year) {
@@ -163,4 +164,3 @@ var yearOption = document.createElement('option')
   var doneBtn = document.createElement('button')
-  elementClass(doneBtn).add('anytime-picker__button')
-  elementClass(doneBtn).add('anytime-picker__button--done')
+  classList(doneBtn).add('anytime-picker__button', 'anytime-picker__button--done')
   doneBtn.textContent = 'Done'
@@ -172,4 +172,3 @@ footerEl.appendChild(doneBtn)
   var clearBtn = document.createElement('button')
-  elementClass(clearBtn).add('anytime-picker__button')
-  elementClass(clearBtn).add('anytime-picker__button--next')
+  classList(clearBtn).add('anytime-picker__button', 'anytime-picker__button--next')
   clearBtn.textContent = 'Clear'
@@ -206,4 +205,3 @@ footerEl.appendChild(clearBtn)
     date.textContent = y
-    elementClass(date).add('anytime-picker__date')
-    elementClass(date).add('js-anytime-picker-day')
+    classList(date).add('anytime-picker__date', 'js-anytime-picker-day')
     date.setAttribute('data-date', y)
@@ -224,7 +222,11 @@ date.setAttribute('data-month', this.currentView.month)
 
-  elementClass(this.el).add('anytime-picker--is-visible')
-  var position = offset(this.options.anchor)
-  this.el.style.top = (position.top + this.options.anchor.offsetHeight + this.options.offset) + 'px'
-  this.el.style.left = (position.left + this.options.anchor.offsetWidth - this.el.offsetWidth) + 'px'
+  this.root.offsetParent.appendChild(this.el)
 
+  classList(this.el).add('anytime-picker--is-visible')
+
+  var position = { top: this.root.offsetTop, left: this.root.offsetLeft }
+
+  this.el.style.top = (position.top + this.root.offsetHeight + this.options.offset) + 'px'
+  this.el.style.left = (position.left + this.root.offsetWidth - this.el.offsetWidth) + 'px'
+
   this.__events['doc escape keypress'] = function (e) {
@@ -249,3 +251,3 @@ // Hide if escape is pressed
 
-  elementClass(this.el).remove('anytime-picker--is-visible')
+  classList(this.el).remove('anytime-picker--is-visible')
 
@@ -258,2 +260,4 @@ document.removeEventListener('keyup', this.__events['keyup escToClose'])
 
+  if (this.el.parentNode) this.el.parentNode.removeChild(this.el)
+
 }
@@ -290,3 +294,3 @@
   var hourSelect = document.createElement('select')
-  elementClass(hourSelect).add('anytime-picker__dropdown')
+  classList(hourSelect).add('anytime-picker__dropdown')
   for (var i = 0; i < 24; i++) {
@@ -308,3 +312,3 @@ var hour = document.createElement('option')
   var colonEl = document.createElement('span')
-  elementClass(minuteSelect).add('anytime-picker__time-separator')
+  classList(colonEl).add('anytime-picker__time-separator')
   colonEl.textContent = ':'
@@ -314,3 +318,3 @@ timeEl.appendChild(colonEl)
   var minuteSelect = document.createElement('select')
-  elementClass(minuteSelect).add('anytime-picker__dropdown')
+  classList(minuteSelect).add('anytime-picker__dropdown')
   for (var j = 0; j < 59; j++) {
@@ -340,4 +344,3 @@ var minute = document.createElement('option')
   delete this.__events['misc show']
-  if (this.el.parentNode) this.el.parentNode.removeChild(this.el)
   this.el = null
 }

lib/create-button.js

 module.exports = createButton
 
-var elementClass = require('element-class')
+var classList = require('classlist')
 
 function createButton(text, classes) {
   var button = document.createElement('button')
-  classes.forEach(function (c) { elementClass(button).add(c) })
+  classes.forEach(function (c) { classList(button).add(c) })
   button.textContent = text
   return button
 }

package.json

 {
   "name": "anytime",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "publishConfig": {
@@ -24,4 +24,3 @@ "registry": "http://registry.npmjs.org"
   "dependencies": {
-    "document-offset": "^1.0.2",
-    "element-class": "^0.2.0",
+    "classlist": "^1.0.1",
     "lodash.assign": "*",
@@ -28,0 +27,0 @@ "moment": "^2.8.4",

No alert changes

Improved metrics

Dependency count

4

decreased by-20%

Worsened metrics

Total package byte prevSize

169973

decreased by-7.36%

Lines of code

4316

decreased by-6.58%

Dependency changes

• + Addedclasslist@^1.0.1

• + Addedclasslist@1.0.1(transitive)

• + Addedcomponent-indexof@0.0.3(transitive)

• + Addedtrim@0.0.1(transitive)

• - Removeddocument-offset@^1.0.2

• - Removedelement-class@^0.2.0

• - Removeddocument-offset@1.0.4(transitive)

• - Removeddom-support@0.0.2(transitive)

• - Removeddomready@1.0.8(transitive)

• - Removedelement-class@0.2.2(transitive)

• - Removedget-document@1.0.0(transitive)

• - Removedwithin-element@0.1.0(transitive)