Skip to content

Commit

Permalink
Added spacing functionality ↕️
Browse files Browse the repository at this point in the history
  • Loading branch information
@actuallyakash
actuallyakash committed Mar 29, 2021
1 parent e2c7098 commit 2c27ead
Show file tree
Hide file tree
Showing 3 changed files with 256 additions and 8 deletions.
12 changes: 7 additions & 5 deletions readme.md
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,20 @@
## TODO: options needed

* element (selector on which the spacer is implemented) | type: string
* containedArea (use if you're not able to find the element (ex- iframe)) | type: object
* spacerClass (for adding classes in the spacers) | type: string
* padding (to enable padding, which'll be default behaviour) | type: boolean
* margin (to enable margin) | type: boolean
* defaultSpacing (default margin/padding values) | type: string
* onDragEnd (a function for using the values when drag is ended) | type: function | ref: interactjs
* 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
* appendHtml (to append spacer divs ) | type: string | values: (begin, end) | ref: https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML#visualization_of_position_names | default: afterbegin
* 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)
*

## Done

* element (selector on which the spacer is implemented) | type: string
* appendHtml (to append spacer divs ) | type: string | values: (begin, end) | ref: https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML#visualization_of_position_names | default: afterbegin
* padding (to enable padding, which'll be default behaviour) | type: boolean
* margin (to enable margin) | type: boolean
80 changes: 80 additions & 0 deletions spacers/spacers.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
:root {
--spacer-size: 8px;
--padding-bg: plum;
--margin-bg: #463626;
}
/* Spacers Styling */
.spacer {
position: absolute;
z-index: 2;
}

.spacer-bottom {
bottom: 0;
}

.spacer-right {
right: 0;
}

/* colors */
.spacer[data-type=padding] {
background: var(--padding-bg);
}

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

/* Padding */
.spacer[data-position=top],
.spacer[data-position=bottom] {
cursor: ns-resize;
height: var(--spacer-size);
width: 100%;
left: 0;
right: 0;
}

.spacer[data-position=right],
.spacer[data-position=left] {
cursor: ew-resize;
width: var(--spacer-size);
height: 100%;
top: 0;
bottom: 0;
}

/* Padding Drag Position */
.spacer[data-type=padding].spacer[data-position=top] {
top: 0;
}

.spacer[data-type=padding].spacer[data-position=bottom] {
bottom: 0;
}

.spacer[data-type=padding].spacer[data-position=left] {
left: 0;
}

.spacer[data-type=padding].spacer[data-position=left] {
right: 0;
}

/* Margin Drag Position */
.spacer[data-type=margin].spacer[data-position=top] {
bottom: 100%;
}

.spacer[data-type=margin].spacer[data-position=bottom] {
top: 100%;
}

.spacer[data-type=margin].spacer[data-position=left] {
right: 100%;
}

.spacer[data-type=margin].spacer[data-position=right] {
left: 100%;
}
172 changes: 169 additions & 3 deletions spacers/spacers.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,26 @@
function spacers( options ) {

let elements = document.querySelectorAll(options.element);
let elements = document.querySelectorAll( options.element );
let defaultSpacing = options.defaultSpacing ? options.defaultSpacing : '8px';
let spacingUnit = options.spacingUnit ? options.spacingUnit : "px";
let enablePadding = options.padding == undefined || options.padding == true ? true : false;
let enableMargin = options.margin ? true : false;
let html, appendHtml;
let margin, padding;

margin = {
top: options.defaultMargin ? options.defaultMargin.top : '',
left: options.defaultMargin ? options.defaultMargin.left : '',
bottom: options.defaultMargin ? options.defaultMargin.bottom : '',
right: options.defaultMargin ? options.defaultMargin.right : ''
}

padding = {
top: options.defaultPadding ? options.defaultPadding.top : '',
left: options.defaultPadding ? options.defaultPadding.left : '',
bottom: options.defaultPadding ? options.defaultPadding.bottom : '',
right: options.defaultPadding ? options.defaultPadding.right : ''
}

// Location to append spacers
switch( options.appendHtml ) {
Expand All @@ -21,14 +40,161 @@ function spacers( options ) {
html = '<div class="spacers-wrapper">';

// Padding
html += '<div data-type="padding" class="spacer spacer-' + spacerId + ' spacer-top"></div><div data-type="padding" class="spacer spacer-' + spacerId + ' spacer-bottom"></div><div data-type="padding" class="spacer spacer-' + spacerId + ' spacer-left"></div><div data-type="padding" class="spacer spacer-' + spacerId + ' spacer-right"></div>';
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>';

// Margin
html += '<div data-type="margin" class="spacer spacer-' + spacerId + ' spacer-top"></div><div data-type="margin" class="spacer spacer-' + spacerId + ' spacer-bottom"></div><div data-type="margin" class="spacer spacer-' + spacerId + ' spacer-left"></div><div data-type="margin" class="spacer spacer-' + spacerId + ' spacer-right"></div>';
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>';

html += '</div>';

element.insertAdjacentHTML( appendHtml, html );

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

// Adding spacer functionality
let startX, startY, startWidth, startHeight, position, dragSide;

spacers.forEach(spacer => {

document.documentElement.style.setProperty( '--spacer-size', defaultSpacing );

// Adding default spacing
spacerValue = spacer.getAttribute('data-size') ? spacer.getAttribute('data-size') + "px" : defaultSpacing + spacingUnit;
spacerPosition = spacer.getAttribute('data-position');

if( spacerPosition == "top" || spacerPosition == "bottom" ) {
spacer.style.height = spacerValue;
}
if( spacerPosition == "left" || spacerPosition == "right" ) {
spacer.style.width = spacerValue;
}

spacer.addEventListener('mousedown', ( event ) => {
// Starting height and width
startHeight = spacer.offsetHeight;
startWidth = spacer.offsetWidth;

initDrag( event, spacer );
});
});

function initDrag(event, spacer) {

position = spacer.getAttribute( 'data-position' );
dragSide = spacer.getAttribute( 'data-dragging' );

startX = event.clientX;
startY = event.clientY;

currentSpacer = spacer;
spacerType = currentSpacer.getAttribute("data-type");

document.documentElement.addEventListener( 'mousemove', doDrag, false );
document.documentElement.addEventListener( 'mouseup', stopDrag, false );
}

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;
}
}

// 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;
}
}

// 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;
}
}
}

// 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;
}
}
}
}

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

}

});

}

0 comments on commit 2c27ead

Please sign in to comment.