Skip to content

Commit

Permalink
Code optimized 🧹
Browse files Browse the repository at this point in the history
  • Loading branch information
@actuallyakash
actuallyakash committed Apr 12, 2021
1 parent fb494a8 commit ee4489d
Show file tree
Hide file tree
Showing 4 changed files with 103 additions and 97 deletions.
2 changes: 2 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,8 @@
appendHtml: 'begin',
defaultSpacing: '10px',
showOnHover: true,
margin: true,
padding: true,
onDragEnd: function( data) {
console.log(data);
}
Expand Down
2 changes: 1 addition & 1 deletion readme.md
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
## TODO: options needed

* showOnHover (to show spacers only on hover) | type: boolean
* showSpacingValue (to show the margin/padding number in the center of spacer) | type: boolean
* showLabel: (to show the label beside spacing value) | type: string
* showLocks: (to link opposite spacers)
Expand All @@ -18,3 +17,4 @@
* defaultPadding (an object with top, bottom, left, right values) | type: object
* defaultMargin (an object with top, bottom, left, right values) | type: object
* spacingUnit (to change default spacing unit of spacers like em, rem, in, cm ..etc) | type: string
* showOnHover (to show spacers only on hover) | type: boolean
29 changes: 28 additions & 1 deletion spacers/spacers.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,9 @@
z-index: 2;
user-select: none;
touch-action: none;
display: flex;
justify-content: center;
align-items: center;
}

.spacer-bottom {
Expand Down Expand Up @@ -92,4 +95,28 @@

.spacer-wrapper.on-hover .spacer[data-type=margin]:hover {
background: var(--margin-bg);
}
}

/* Spacer Indicator */
.spacer .spacer-indicator .spacer-size {
color: white;
background: #8080ff;
padding: 0 4px;
border-radius: 3px;
margin-right: 6px;
}

.spacer .spacer-indicator {
font-size: 12px;
user-select: none;
color: white;
}

.spacer .spacer-indicator {
display: none;
}

.spacer:hover .spacer-indicator,
.spacer.spacer-active .spacer-indicator {
display: block;
}
167 changes: 72 additions & 95 deletions spacers/spacers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,10 @@ function spacers( options ) {
let enableMargin = options.margin ? true : false;
let html, appendHtml;
let margin, padding;
let spacingProperties = [];
enableMargin ? spacingProperties.push( 'margin' ) : '';
enablePadding ? spacingProperties.push( 'padding' ) : '';
let spacingDimensions = [ 'top', 'right', 'bottom', 'left' ];

margin = {
top: options.defaultMargin ? options.defaultMargin.top : '',
Expand Down Expand Up @@ -42,19 +46,36 @@ function spacers( options ) {
// settings element's position relative
element.style.position = "relative";

html = '<div class="spacer-wrapper' + showOnHover + '">';
let spacerDivs = '';
let spacerSize;

// Padding
html += '<div data-type="padding" data-position="top" data-dragging="bottom" data-size="'+ padding.top +'" class="spacer spacer-' + spacerId + ' spacer-top"></div><div data-type="padding" data-position="bottom" data-dragging="top" data-size="'+ padding.bottom +'" class="spacer spacer-' + spacerId + ' spacer-bottom"></div><div data-type="padding" data-position="left" data-dragging="right" data-size="'+ padding.left +'" class="spacer spacer-' + spacerId + ' spacer-left"></div><div data-type="padding" data-position="right" data-dragging="left" data-size="'+ padding.right +'" class="spacer spacer-' + spacerId + ' spacer-right"></div>';
spacingProperties.forEach( property => {
switch( property ) {
case 'padding':
spacingDimensions.forEach( dim => {

// Margin
html += '<div data-type="margin" data-position="top" data-dragging="bottom" data-size="'+ margin.top +'" class="spacer spacer-' + spacerId + ' spacer-top"></div><div data-type="margin" data-position="bottom" data-dragging="top" data-size="'+ margin.bottom +'" class="spacer spacer-' + spacerId + ' spacer-bottom"></div><div data-type="margin" data-position="left" data-dragging="right" data-size="'+ margin.left +'" class="spacer spacer-' + spacerId + ' spacer-left"></div><div data-type="margin" data-position="right" data-dragging="left" data-size="'+ margin.right +'" class="spacer spacer-' + spacerId + ' spacer-right"></div>';
spacerSize = ( padding[dim] == "0" ? defaultSpacing : padding[dim] );

html += '</div>';
spacerDivs += '<div data-size="'+ spacerSize +'" data-type="'+ property +'" data-id="'+ spacerId +'" class="spacer spacer-' + spacerId + ' spacer-'+ dim +'" data-dragging="'+ getOppositeDimension(dim) +'" data-position="'+ dim +'"> <span class="spacer-indicator"> <span class="spacer-size">'+ (spacerSize == '' ? '0' : spacerSize) +'</span></span> </div>';
});
break;

case 'margin':
spacingDimensions.forEach( dim => {

spacerSize = ( margin[dim] == "0" ? defaultSpacing : margin[dim] );

spacerDivs += '<div data-size="'+ spacerSize +'" data-type="'+ property +'" data-id="'+ spacerId +'" class="spacer spacer-' + spacerId + ' spacer-'+ dim +'" data-dragging="'+ getOppositeDimension(dim) +'" data-position="'+ dim +'"> <span class="spacer-indicator"> <span class="spacer-size">'+ (spacerSize == '' ? '0' : spacerSize) +'</span></span> </div>';
});
break;
}
});

html = '<div class="spacer-wrapper' + showOnHover + '">' + spacerDivs + '</div>';

element.insertAdjacentHTML( appendHtml, html );

let spacers = Object.values(document.getElementsByClassName( 'spacer-' + spacerId ));
let spacers = Object.values( document.getElementsByClassName( 'spacer-' + spacerId ) );

// Adding spacer functionality
let startX, startY, startWidth, startHeight, position, dragSide;
Expand Down Expand Up @@ -108,103 +129,38 @@ function spacers( options ) {

function doDrag( e ) {

let yIndex = (startHeight + e.clientY - startY);
let xIndex = dragSide == "left" ? (startWidth - e.clientX + startX) : (startWidth + e.clientX - startX);

// setting padding
if ( spacerType == "padding" ) {
switch( position ) {
case 'top' : padding.top = yIndex;
break;
case 'bottom': padding.bottom = yIndex;
break;
case 'left': padding.left = xIndex;
break;
case 'right': padding.right = xIndex;
break;
}
let spacingValue;
if( position == 'top' || position == 'bottom' ) {
spacingValue = (startHeight + e.clientY - startY);
}

// setting margin
if ( spacerType == "margin" ) {
switch( position ) {
case 'top' : margin.top = yIndex;
break;
case 'bottom': margin.bottom = yIndex;
break;
case 'left': margin.left = xIndex;
break;
case 'right': margin.right = xIndex;
break;
}
if( position == 'left' || position == 'right' ) {
spacingValue = ( dragSide == 'left' ? (startWidth - e.clientX + startX) : (startWidth + e.clientX - startX) );
}

// top/bottom (y)
if( position == "top" || position == "bottom" ) {

// Threshold
if( yIndex < 5 || yIndex >= 300 ) {
return;
}

// setting data-size attribute
currentSpacer.setAttribute( "data-size", yIndex );

yIndex += spacingUnit;

// Increasing spacer height
currentSpacer.style.height = yIndex;

if ( position == "top" ) {
if ( spacerType == "padding" ) {
element.style.paddingTop = yIndex;
} else {
element.style.marginTop = yIndex;
}
} else if ( position == "bottom" ) {
if ( spacerType == "padding" ) {
element.style.paddingBottom = yIndex;
} else {
element.style.marginBottom = yIndex;
}
}
}
// Setting Margin/Padding value
setPropertyValue( spacerType, position, spacingValue );

// updating data-size attribute and size value
currentSpacer.setAttribute( 'data-size', spacingValue );
currentSpacer.querySelector('.spacer-indicator .spacer-size').innerText = spacingValue;

// left/right (x)
if( position == "left" || position == "right" ) {

// Threshold
if ( xIndex < 5 || xIndex >= 300 ) {
return;
}

// setting data-size attribute
currentSpacer.setAttribute( "data-size", xIndex );

xIndex += spacingUnit;

// Increasing spacer width
currentSpacer.style.width = xIndex;

if ( position == "left" ) {
if ( spacerType == "padding" ) {
element.style.paddingLeft = xIndex;
} else {
element.style.marginLeft = xIndex;
}
} else if ( position == "right" ) {
if ( spacerType == "padding" ) {
element.style.paddingRight = xIndex;
} else {
element.style.marginRight = xIndex;
}
}
spacingValue += 'px';

// Applying padding/margin
oppositeProperty = spacerType + position.charAt(0).toUpperCase() + position.substring(1);
if ( position == 'top' || position == 'bottom' ) {
currentSpacer.style.height = spacingValue;
element.style[oppositeProperty] = spacingValue;
} else {
currentSpacer.style.width = spacingValue;
element.style[oppositeProperty] = spacingValue;
}
}

function stopDrag(e) {
document.documentElement.removeEventListener('mousemove', doDrag, false);
document.documentElement.removeEventListener('mouseup', stopDrag, false);
document.documentElement.removeEventListener( 'mousemove', doDrag, false );
document.documentElement.removeEventListener( 'mouseup', stopDrag, false );

let data = {};

Expand All @@ -222,6 +178,27 @@ function spacers( options ) {

}

function getOppositeDimension( dimension ) {
switch( dimension ) {
case 'top': return 'bottom';
case 'bottom': return 'top';
case 'left': return 'right';
case 'right': return 'left';
}
}

function setPropertyValue( spacerType, position, spacingValue ) {
// setting padding
if ( spacerType == "padding" ) {
padding[position] = spacingValue;
}

// setting margin
if ( spacerType == "margin" ) {
margin[position] = spacingValue;
}
}

});

}

0 comments on commit ee4489d

Please sign in to comment.