Patch - v5.0.5

Patch release

Bug fixed:

• dead code eliminations on NODE_ENV=production

Code cleanup

Previously i was doing this with the element list:

const arrayOfElements = [...element]

Now I´m using the new ES6 Array.from() to actually transform a nodelist (array-ish) to a true array.

const arrayOfElements = Array.from(element)

Better error messages

Some handlers got more concise error messages about what they expect

Other things

• Some code cleanup
• couple more helper functions
• couple more tests

Bug fixes

Had to rush through some minor bugfixes, because heightify broke when imported. So this latest release is 5.0.4!

fixes

• removed babili, because it caused error on import

Everything else is as normal.

Please report issues if you find any.

Major release - v5.0.0

I've made the decision of removing heightify core from the DOM, and make the element option more library friendly and more flexible from a users point of view.

So this is an example of how you would use heightify:

import heightify from 'heightify'

heightify({
  element: document.getElementsByClassName('className')
})

Rest of the options is the same as always.

Improvements made to the code base

• removed allHeights(). This was actually doing the same as saveHeights().
• Renamed saveHeights() to getClientHeight() for better function logic
• Removed console.warn in production build with NODE_ENV=production #29.
• heightify option element is moved to the users endpoint #28.
• Deconstructed heightify options #31

Other improvements and docs

• Added ESLint #35
• Added Babili as production minifyer #32
• Docs got example image of how heightify works with cards #27

Hotfixes and updated docs

This patch is only small fixes to docs and dependencies.

• Removed "pre-commit" from dependencies and moved to devDependencies. #24
• Updated README.md with more concise information.
• Added a few new tags to package.json

New feature - DestroyOnSize

This is a new feature-release for a new option called: destroyOnSize.

Usage

import heightify from 'heightify'

heightify({
  element: '.testClass',
  destroyOnSize: 500 // This will flush heightify settings below the specified height. in this case 500px
)}

• This feature is especially good for mobile devices, as cards almost never needs the same height when are just rendered in a list below each other.

fixed #15

Release-v4.0.1

This release is pretty much a total rewrite of heightify. It was previously written with the ES6 class syntax. I've decided to change that to regular functions for more modularity and simplicity with both composition and testing.

Major version upgrade

Heightify still works as usual, with a slight change to the import. eg:

• Previously: import { heightify } from 'heightify
• Now: import heightify from 'heightify'

This is mostly because heightify only got one function to call on, and therefore makes no sense in
importing the whole thing as a separate block.

Other than that, the syntax for using heightify is still exactly the same.

heightify({
  element: '.yourCardsClassHere',
  hasImages: true // default false
)}

Improvements

Error handling now is pretty comprehensive, and is much more understandable for users. Especially the error handling for when using images is much more covered. This is the list with the new Error handling:

• Throws if your argument to heightify is something else than a plain object.
• Throws if you run heightify without element as a property on the object argument
• Throws if you specify a DOM-node on the element key that doesn't exists in the DOM.
• Throws if you specify hasImages-key with other than true or false.
• Warn if using hasImages: true when no images were found in your specified element.
• Warn if using hasImages: true and one or several images are broken.

File structure

I've separated files into more understandable folder and file structure. main functionality of heightify is placed under src/heightify.js, and all functionality that handles images under src/containsImages.
All helper functions is moved to the folder src/helpers/.

Tests

Currently testing:

• Heightify is running and are OK when specified with an existing DOM-element
• Throwing error in the correct situations

Possible future implementations

• Destroy heightify on optional screen size
• Add a optional callback to heightify for convenience.
• Some way of tracking progressCount when using hasImages (convenient for loaders/spinners)

Contributions

Thanks to @Tathroth, for fixing #18. Solution was initiating the variable that fetched the heights of the specified elements inside the callback of containsImage-function.

Image of how it works

NB:

Please file an issue if something broke or isn't working properly! :)

Improved error messages and cleaner code

Error messages

• Improved error messages when you don't specify an element key inside options.

Helpers

New helper

• InitialError - for checking if there is no argument provided for heightify

Old helper

• the plain object check is now returning boolean for more logical output.

New feature, new usage + refactoring code

New feature

You can now specify if the DOM-element you set with heightify, has images as childs. If you specify hasImages: true it uses imagesLoaded.

New Usage

import { heightify } from 'heightify' 

and the argument is an object

heightify({
  element: 'div',
})

and with with the new option: hasImages

heightify({
  element: 'div',
  hasImages: true // default false
})

Refactoring

The package is now a E6 Class

First official release

Changed the second "for loop" into mapping the storedHeights instead.
You can now use "import heightify" instead of "import { heightify } because of the changed export