patternity - npm Package Compare versions

Comparing version 1.0.28 to 1.0.29

infl-components/cards/components/card_image.jsx

 var React = require('react');
+var $ = require('jquery');
+var Loading = require('../../loading.jsx');
 
 var CardImage = React.createClass({
+  PropTypes : {
+    image : React.PropTypes.string,
+    onImageClick : React.PropTypes.func
+  },
+
   getDefaultProps : function(){
@@ -10,18 +17,99 @@ return {
   },
-  PropTypes : {
-    image : React.PropTypes.string,
-    onImageClick : React.PropTypes.func
+
+  getInitialState : function () {
+    return {
+      image : this.props.image,
+      isLoading : true
+    };
   },
+
+  componentWillReceiveProps : function (nextProps) {
+    this.setState({
+      image : nextProps.image,
+      isLoading : true
+    });
+  },
+
+  componentDidMount : function () {
+    this._addImageLoadEvent();
+    this._addWindowResizeEvent();
+  },
+
+  componentDidUpdate : function(){
+    this._adjustImageContainerHeight();
+  },
+
+  componentWillUnmount: function(){
+    this._removeWindowResizeEvent();
+  },
+
   render : function(){
     return (
-      <div className={"pt-challenge-image " + this._doesChallengeHaveAnImage()}  >
-        <img src={this.props.image} alt="Challenge Image" onClick={this.props.onImageClick} />
+      <div className={"pt-challenge-image " + this._doesChallengeHaveAnImage()}  ref="imageContainer">
+        {this._showLoading()}
+        <img ref="image" src={this.state.image} alt="Challenge Image" onClick={this.props.onImageClick} />
       </div>
     );
   },
+
   _doesChallengeHaveAnImage : function(){
     return this.props.image ? "" : "no-image";
+  },
+
+  _showLoading : function(){
+    if(!this.state.isLoading) {
+      return null;
+    }
+
+    return <Loading />
+  },
+
+  _addImageLoadEvent : function(){
+    var image = React.findDOMNode(this.refs.image);
+    image.onload = this._optimizeImageVisibility;
+  },
+
+  _optimizeImageVisibility : function (event) {
+    this._hideLoading();
+    var image = event.target;
+
+    if(image.naturalWidth > image.naturalHeight){
+      this._updateImageStyling(image, '100%', 'initial');
+    } else {
+      this._updateImageStyling(image, 'initial', '100%');
+    }
+
+    this._adjustImageContainerHeight();
+  },
+
+  _hideLoading : function () {
+    this.setState({
+      isLoading :  false
+    });
+  },
+
+  _updateImageStyling : function (image, width, height) {
+    image.style.height = height;
+    image.style.width = width;
+    $(image).addClass('loaded');
+  },
+
+  _adjustImageContainerHeight : function () {
+    var widthAspectRatio = 9 / 16;
+    var imageContainer = React.findDOMNode(this.refs.imageContainer);
+
+    imageContainer.style.height =  widthAspectRatio * imageContainer.offsetWidth + "px";
+    imageContainer.style.lineHeight =  widthAspectRatio * imageContainer.offsetWidth + "px";
+  },
+
+  _addWindowResizeEvent : function(){
+    $(window).resize(this._adjustImageContainerHeight);
+  },
+
+  _removeWindowResizeEvent: function(){
+    $(window).off("resize", this._adjustImageContainerHeight);
   }
+
 });
 
 module.exports = CardImage;

infl-components/cards/components/challenge_tile.jsx

@@ -11,5 +11,12 @@ var React = require('react');
     type : React.PropTypes.oneOf(acceptedStatusType).isRequired,
-    description : React.PropTypes.string.isRequired
+    description : React.PropTypes.string.isRequired,
+    onShowDescription : React.PropTypes.func
   },
 
+  getDefaultProps : function(){
+    return {
+      onShowDescription : function(){}
+    };
+  },
+
   render : function(){
@@ -41,3 +48,3 @@ return this._addTile();
       'expiring' : 'expiring',
-      'limited' : 'limited', //not official
+      'limited' : 'cursor-click',
       'multi' : 'multi'
@@ -44,0 +51,0 @@ }

package.json

 {
   "name": "patternity",
-  "version": "1.0.28",
+  "version": "1.0.29",
   "description": "Patternity is the pattern library and style guide for all Influitive apps",
@@ -5,0 +5,0 @@ "main": "index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

3062453

increased by0.08%

Lines of code

31862

increased by0.23%

No dependency changes