responsive component

width sensitive components

by bodine30

HTML

<responsivecomponent 
    min-width="100" max-width="300" ng-class="{'exceeded-max-width': exceedsMaxWidth, 'exceeded-min-width': exceedsMinWidth}"
    width="{{ResponsiveComponentCtrl.width}}"        
    height="{{ResponsiveComponentCtrl.height}}"
>
    Content for responsive component number one
</responsivecomponent>
<br>
<responsivecomponent 
    min-width="300" max-width="500" ng-class="{'exceeded-max-width': exceedsMaxWidth, 'exceeded-min-width': exceedsMinWidth}"
    width="{{ResponsiveComponentCtrl.width}}"        
    height="{{ResponsiveComponentCtrl.height}}"
>
    Content for responsive component number two
</responsivecomponent>
<br>
<responsivecomponent 
    min-width="400" max-width="600" ng-class="{'exceeded-max-width': exceedsMaxWidth, 'exceeded-min-width': exceedsMinWidth}"
    width="{{ResponsiveComponentCtrl.width}}"        
    height="{{ResponsiveComponentCtrl.height}}"
>
    Content for responsive component number three Content for responsive component number three Content for responsive component number three Content for responsive component number three
</responsivecomponent>

CSS

.responsivecomponent {
    border:20px solid blue;
    position:relative;
    float:left; 
    display:inline-block;
    border-radius:1em;
    -webkit-transition:all 1000ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
}
.responsivecomponent::before {
    content:"Width: "attr(width);
    background:gray;
    position:absolute;
    top:0;
    left:0;
}
.responsivecomponent::after {
    content:"height: "attr(height);
    background:silver;
    position:absolute;
    top:0;
    right:0;
}
.exceeded-max-width {
    border:30px solid red;
    font-size:3em;
    -webkit-transition:all 1000ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
}
._exceeded-min-width {
    border:30px solid green;
    font-size:2em;
    -webkit-transition:all 1000ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
}
.exceeded-min-width {
    display:none;
}

JavaScript

var obeo = angular.module('obeo', ['ResponsiveComponent']);
angular.element(document).ready(function () {
    return angular.bootstrap(document, ['obeo']);
});
angular.module('ResponsiveComponent', []).directive('responsivecomponent', [
    '$window', function ($window) {
    return {
        restrict: 'E',
        replace: true,
        scope:{},
        transclude: true,
        template: "<span class='responsivecomponent' ng-transclude></span>",
        controller: ["$scope", function ($scope) {
            console.log("ResponsiveComponentCtrl", arguments);
            
            $scope.exceedsMaxWidth = false;
            $scope.exceedsMinWidth = false;
            $scope.tookStep = false;
            $scope.handleResize = function(e, iAttrs, currentWidth, currentHeight) {                
                var oldWidth = angular.isNumber($scope.width) ? $scope.width : 0;
                console.log("handleResize", arguments);
                $scope.exceedsMaxWidth = $scope.checkMaxWidth(parseInt(iAttrs.maxWidth), currentWidth) ? "exceeded-max-width" : "";
                $scope.exceedsMinWidth = $scope.checkMinWidth(parseInt(iAttrs.minWidth), currentWidth) ? "exceeded-min-width" : "";
                
                // NOTE: This is only for demonstration purposes, and can be removed
                $scope.width = currentWidth;
                $scope.height = currentHeight;
                iAttrs.$set("width", currentWidth);
                iAttrs.$set("height", currentHeight);
            };            
            $scope.checkMinWidth = function(min, current) {
                return current < min;
            };
            $scope.checkMaxWidth = function(max, current) {
                return current > max
            };
            $scope.checkStepDelta = function(step, val, oldVal) {
                return (step < Math.abs(val - oldVal));
            };
            
            $scope.handleExceededMaxWidthEvent = function(newValue, oldValue) {
       ...