LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

    

Works with flexbox.

2

Completely seperates layout logic from resize logic. All layout logic must be done by you in the CSS (as it should be).

4
CSS
body {
  color: #343e3d;
  font-family: 'Varela Round', 'Helvetica', sans-serif;
}

p {
  line-height: 24px;
  margin-top: 0;
}

h1 {
  margin: 6px 0 24px;
}

ul {
  margin: 0;
  padding: 0 0 0 1em;
}

li {
  line-height: 24px;
}

.icon {
  font-size: 16px;
  margin: 0 5px;
}

.icon-big {
  font-size: 32px;
  border: 2px dashed #7bd389;
  color: #7bd389;
  padding: 10px 11px 10px 10px;
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  overflow: hidden;
}

nav {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 2.5em 1.75em;
  background: #fff;
  width: 260px;
  max-width: 300px;
  min-width: 165px;
}

main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  padding-bottom: 70px;
  background: #fff;
}

.content {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: column nowrap;
      flex-flow: column nowrap;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -ms-flex-line-pack: distribute;
      align-content: space-around;
  padding: 7px;
}

.row {
  min-height: 50px;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: row nowrap;
      flex-flow: row nowrap;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -ms-flex-line-pack: distribute;
      align-content: space-around;
}
.row.resizable {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 300px;
          flex: 0 0 300px;
}

section {
  box-sizing: border-box;
  border-radius: 10px;
  padding: 1.25em 1.75em;
  background: #ddd;
  border: 7px solid #fff;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 30px;
}
section.resizable {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 300px;
          flex: 0 0 300px;
}

#one {
  background: #7bd389;
  color: #2d883c;
}

#two {
  background: #aedcc0;
  color: #49a86e;
}

#three {
  background: #38e4ae;
  color: #107354;
}

#four {
  background: url(http://publicdomainarchive.com/wp-content/uploads/2014/12/public-domain-images-free-stock-photos-high-quality-resolution-downloads-public-domain-archive-7-1000x665.jpg);
}

footer {
  background: white;
  position: relative;
  z-index: 1;
  font-size: 14px;
  text-transform: uppercase;
  padding: 0 1.75em;
  width: 100%;
  margin-top: -70px;
  height: 70px;
  line-height: 70px;
  border-top: 1px solid #aedcc0;
}
footer a {
  position: relative;
  text-decoration: none;
  color: #7bd389;
}
footer a:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 0;
  height: 1px;
  background-color: #7bd389;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
footer a:hover:after {
  width: 100%;
}

.resizable {
  position: relative;
}
.resizable.no-transition {
  -webkit-transition: none !important;
  transition: none !important;
}

.rg-right, .rg-left, .rg-top, .rg-bottom {
  display: block;
  width: 14px;
  height: 14px;
  line-height: 14px;
  position: absolute;
  z-index: 1;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}
.rg-right span, .rg-left span, .rg-top span, .rg-bottom span {
  position: absolute;
  box-sizing: border-box;
  display: block;
  border: 1px solid #ccc;
}

.rg-right span, .rg-left span {
  border-width: 0 1px;
  top: 50%;
  margin-top: -10px;
  margin: -10px 0 0 3.5px;
  height: 20px;
  width: 7px;
}

.rg-top span, .rg-bottom span {
  border-width: 1px 0;
  left: 50%;
  margin: 3.5px 0 0 -10px;
  width: 20px;
  height: 7px;
}

.rg-top {
  cursor: row-resize;
  width: 100%;
  top: 0;
  left: 0;
  margin-top: -7px;
}

.rg-right {
  cursor: col-resize;
  height: 100%;
  right: 0;
  top: 0;
  margin-right: -14px;
}

.rg-bottom {
  cursor: row-resize;
  width: 100%;
  bottom: 0;
  left: 0;
  margin-bottom: -7px;
}

.rg-left {
  cursor: col-resize;
  height: 100%;
  left: 0;
  top: 0;
  margin-left: -14px;
}
JS
angular.module('angularResizable', [])
    .directive('resizable', function() {
        var toCall;
        function throttle(fun) {
            if (toCall === undefined) {
                toCall = fun;
                setTimeout(function() {
                    toCall();
                    toCall = undefined;
                }, 100);
            } else {
                toCall = fun;
            }
        }
        return {
            restrict: 'AE',
            scope: {
                rDirections: '=',
                rCenteredX: '=',
                rCenteredY: '=',
                rWidth: '=',
                rHeight: '=',
                rFlex: '=',
                rGrabber: '@',
                rDisabled: '@'
            },
            link: function(scope, element, attr) {
                var flexBasis = 'flexBasis' in document.documentElement.style ? 'flexBasis' :
                    'webkitFlexBasis' in document.documentElement.style ? 'webkitFlexBasis' :
                    'msFlexPreferredSize' in document.documentElement.style ? 'msFlexPreferredSize' : 'flexBasis';

                // register watchers on width and height attributes if they are set
                scope.$watch('rWidth', function(value){
                    element[0].style.width = scope.rWidth + 'px';
                });
                scope.$watch('rHeight', function(value){
                    element[0].style.height = scope.rHeight + 'px';
                });

                element.addClass('resizable');

                var style = window.getComputedStyle(element[0], null),
                    w,
                    h,
                    dir = scope.rDirections,
                    vx = scope.rCenteredX ? 2 : 1, // if centered double velocity
                    vy = scope.rCenteredY ? 2 : 1, // if centered double velocity
                    inner = scope.rGrabber ? scope.rGrabber : '',
                    start,
                    dragDir,
                    axis,
                    info = {};

                var updateInfo = function(e) {
                    info.width = false; info.height = false;
                    if(axis === 'x')
                        info.width = parseInt(element[0].style[scope.rFlex ? flexBasis : 'width']);
                    else
                        info.height = parseInt(element[0].style[scope.rFlex ? flexBasis : 'height']);
                    info.id = element[0].id;
                    info.evt = e;
                };

                var dragging = function(e) {
                    var prop, offset = axis === 'x' ? start - e.clientX : start - e.clientY;
                    switch(dragDir) {
                        case 'top':
                            prop = scope.rFlex ? flexBasis : 'height';
                            element[0].style[prop] = h + (offset * vy) + 'px';
                            break;
                        case 'bottom':
                            prop = scope.rFlex ? flexBasis : 'height';
                            element[0].style[prop] = h - (offset * vy) + 'px';
                            break;
                        case 'right':
                            prop = scope.rFlex ? flexBasis : 'width';
                            element[0].style[prop] = w - (offset * vx) + 'px';
                            break;
                        case 'left':
                            prop = scope.rFlex ? flexBasis : 'width';
                            element[0].style[prop] = w + (offset * vx) + 'px';
                            break;
                    }
                    updateInfo(e);
                    throttle(function() { scope.$emit('angular-resizable.resizing', info);});
                };
                var dragEnd = function(e) {
                    updateInfo();
                    scope.$emit('angular-resizable.resizeEnd', info);
                    scope.$apply();
                    document.removeEventListener('mouseup', dragEnd, false);
                    document.removeEventListener('mousemove', dragging, false);
                    element.removeClass('no-transition');
                };
                var dragStart = function(e, direction) {
                    dragDir = direction;
                    axis = dragDir === 'left' || dragDir === 'right' ? 'x' : 'y';
                    start = axis === 'x' ? e.clientX : e.clientY;
                    w = parseInt(style.getPropertyValue('width'));
                    h = parseInt(style.getPropertyValue('height'));

                    //prevent transition while dragging
                    element.addClass('no-transition');

                    document.addEventListener('mouseup', dragEnd, false);
                    document.addEventListener('mousemove', dragging, false);

                    // Disable highlighting while dragging
                    if(e.stopPropagation) e.stopPropagation();
                    if(e.preventDefault) e.preventDefault();
                    e.cancelBubble = true;
                    e.returnValue = false;

                    updateInfo(e);
                    scope.$emit('angular-resizable.resizeStart', info);
                    scope.$apply();
                };

                dir.forEach(function (direction) {
                    var grabber = document.createElement('div');

                    // add class for styling purposes
                    grabber.setAttribute('class', 'rg-' + direction);
                    grabber.innerHTML = inner;
                    element[0].appendChild(grabber);
                    grabber.ondragstart = function() { return false; };
                    grabber.addEventListener('mousedown', function(e) {
                        var disabled = (scope.rDisabled === 'true');
                        if (!disabled && e.which === 1) {
                            // left mouse click
                            dragStart(e, direction);
                        }
                    }, false);
                });
            }
        };
    });

Description

A lightweight directive for creating resizable containers. The idea behind it was to completely separate the 'layout logic' from the 'resize logic'. Every other directive/plugin I came across tied these together. I wanted to make the CSS do the hard work. This demo uses flex-box for layout.
Term
Mon, 11/27/2017 - 21:27

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv