Skip to content

Instantly share code, notes, and snippets.

@nazarbek7

nazarbek7/css-js-photo-editor.markdown

Created March 24, 2020 03:37
Show Gist options
  • Save nazarbek7/8f6f2244fed5896c191e13ed4d73b6f2 to your computer and use it in GitHub Desktop.
Save nazarbek7/8f6f2244fed5896c191e13ed4d73b6f2 to your computer and use it in GitHub Desktop.
Download ZIP
CSS & JS Photo Editor
Raw
css-js-photo-editor.markdown

CSS & JS Photo Editor

After learning about CSS Variables I spent the next few days seeing how many different ways I could affect an image and text with them, and so came this editor. Its no photoshop but I think it's pretty awesome!

A Pen by Nazarbek on CodePen.

License.

Raw
index.html
<div class="top-div">
<h1>Photo<span class='highlight'>JS</span></h1>
<div class="search-box">
<span>Enter image url : </span>
<input id="input-box" type="text">
<input id="submit" class="button" type="submit" onclick="source()">
<button id="show-original" class="button" onclick="showOriginal()">Toggle Original</button>
<button id="reset-all" class="button" onclick="resetAll()">Reset All</button>
<img id="originalImage" src="https://source.unsplash.com/sqL5xItVgpg">
<p class="intro-text">Try the Gradients and Blend Modes, they're Awesome !</p>
<button class="button btn-bar" onclick="toggleMirror()">Mirror Image</button>
<button class="button btn-bar" onclick="toggleFlip()">Flip Image</button>
<div class="dropdown">
<button class="button btn-bar" onclick="toggleShapes()">Clip Path Shapes</button>
<div class="dropdown-shapes">
<div class="shapes-div">
<div class="shapes" data-shape="none"><p>None</p><span></span></div>
<div class="shapes" data-shape="polygon(50% 0%, 0% 100%, 100% 100%)"><p>Triangle</p><span></span></div>
<div class="shapes" data-shape="circle(50% at 50% 50%)"><p>Circle</p><span></span></div>
<div class="shapes" data-shape="ellipse(25% 40% at 50% 50%)"><p>Eclipse</p><span></span></div>
<div class="shapes" data-shape="polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)"><p>Star</p><span></span></div>
<div class="shapes" data-shape="polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%)"><p>Left Arrow</p><span></span></div>
<div class="shapes" data-shape="polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%)"><p>Right Arrow</p><span></span></div>
<div class="shapes" data-shape="polygon(25% 0%, 100% 1%, 100% 100%, 25% 100%, 0% 50%)"><p>Left Point</p><span></span></div>
<div class="shapes" data-shape="polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%)"><p>Right Point</p><span></span></div>
<div class="shapes" data-shape="polygon(100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%)"><p>Left Cheveron</p><span></span></div>
<div class="shapes" data-shape="polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%)"><p>Right Cheveron</p><span></span></div>
<div class="shapes" data-shape="polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%)"><p>Trapezoid</p><span></span></div>
<div class="shapes" data-shape="polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%)"><p>Parallelogram</p><span></span></div>
<div class="shapes" data-shape="polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)"><p>Rhombus</p><span></span></div>
</div>
<div class="shapes-div">
<div class="shapes" data-shape="none" onclick="toggleShapes"><p id="close-menu">Close</p></div>
<div class="shapes" data-shape="polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%)"><p>Message</p><span></span></div>
<div class="shapes" data-shape="polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%)"><p>Close</p><span></span></div>
<div class="shapes" data-shape="polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%)"><p>Frame</p><span></span></div>
<div class="shapes" data-shape="inset(5% 20% 15% 10%)"><p>Inset</p><span></span></div>
<div class="shapes" data-shape="polygon(10% 25%, 35% 25%, 35% 0%, 65% 0%, 65% 25%, 90% 25%, 90% 50%, 65% 50%, 65% 100%, 35% 100%, 35% 50%, 10% 50%)"><p>Cross</p><span></span></div>
<div class="shapes" data-shape="polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%)"><p>Rabbet</p><span></span></div>
<div class="shapes" data-shape="polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%)"><p>Bevel</p><span></span></div>
<div class="shapes" data-shape="polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%)"><p>Pentagon</p><span></span></div>
<div class="shapes" data-shape="polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)"><p>Hexagon</p><span></span></div>
<div class="shapes" data-shape="polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%)"><p>Heptagon</p><span></span></div>
<div class="shapes" data-shape="polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%)"><p>Octogon</p><span></span></div>
<div class="shapes" data-shape="polygon(50% 0%, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%)"><p>Nonagon</p><span></span></div>
<div class="shapes" data-shape="polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%)"><p>Decagon</p><span></span></div>
</div>
</div>
</div>
</div> <!-- End Search Box -->
</div> <!-- End Top Div -->
<div class="right-div">
<div class="controls">
<label id="advice">* Confirm color by hovering over box after choice *</label>
<p>Basic Adjustments</p>
<div class="sliders"><label for="brightness">Brightness:</label>
<input id="brightness" type="range" name="brightness" min="0" max="200" value="100" data-sizing="%"><span class="slider-value">100%<span></div>
<div class="sliders"><label for="contrast">Contrast:</label>
<input id="contrast" type="range" name="contrast" min="50" max="200" value="100" data-sizing="%"><span class="slider-value">100%<span></div>
<div class="sliders"><label for="saturate">Saturation:</label>
<input id="saturate" type="range" name="saturate" min="0" max="300" value="100" data-sizing="%"><span class="slider-value">100%<span></div>
<div class="sliders"><label for="greyscale">Greyscale:</label>
<input id="greyscale" type="range" name="greyscale" min="0" max="100" value="0" data-sizing="%"><span class="slider-value">0%<span></div>
<div class="sliders"><label for="sepia">Sepia:</label>
<input id="sepia" type="range" name="sepia" min="0" max="100" value="0" data-sizing="%"><span class="slider-value">0%<span></div>
<div class="sliders"><label for="hue-rotate">Hue Rotate:</label>
<input id="hue-rotate" type="range" name="hue-rotate" min="0" max="360" value="0" data-sizing="deg"><span class="slider-value">0deg<span></div>
<div class="sliders"><label for="invert">Invert:</label>
<input id="invert" type="range" name="invert" min="0" max="100" value="0" data-sizing="%"><span class="slider-value">0%<span></div>
<div class="sliders"><label for="blur">Blur:</label>
<input id="blur" type="range" name="blur" min="0" max="20" value="0" data-sizing="px"></input><span class="slider-value">0px<span></div>
<div class="sliders"><label for="opacity">Opacity:</label>
<input id="opacity" type="range" name="opacity" min="0" max="100" value="100" data-sizing="%"><span class="slider-value">100%<span></div>
<div class="sliders"><label for="image-opacity">All Opacity:</label>
<input id="image-opacity" type="range" name="image-opacity" step="0.1" min="0" max="1" value="1" ><span class="slider-value">1<span></div>
<p>Transforms</p>
<div class="sliders"><label for="scaleXY">Scale X &amp; Y:</label>
<input id="scaleXY" type="range" name="scaleXY" step="0.10" min="0" max="5" value="1" data-sizing=""><span class="slider-value">1<span></div>
<div class="sliders"><label for="scaleX">Scale X:</label>
<input id="scaleX" type="range" name="scaleX" step="0.10" min="-1" max="3" value="1" data-sizing=""><span class="slider-value">1<span></div>
<div class="sliders"><label for="scaleY">Scale Y:</label>
<input id="scaleY" type="range" name="scaleY" step="0.10" min="-1" max="3" value="1" data-sizing=""><span class="slider-value">1<span></div>
<div class="sliders"><label for="translateX">Move X:</label>
<input id="translateX" type="range" name="translateX" min="-500" max="800" value="0" data-sizing="px"><span class="slider-value">0px<span></div>
<div class="sliders"><label for="translateY">Move Y:</label>
<input id="translateY" type="range" name="translateY" min="-500" max="500" value="0" data-sizing="px"><span class="slider-value">0px<span></div>
<div class="sliders"><label for="skewX">Skew X:</label>
<input id="skewX" type="range" name="skewX" min="-90" max="90" value="0" data-sizing="deg"><span class="slider-value">0deg<span></div>
<div class="sliders"><label for="skewY">Skew Y:</label>
<input id="skewY" type="range" name="skewY" min="-90" max="90" value="0" data-sizing="deg"><span class="slider-value">0deg<span></div>
<div class="sliders"><label for="rotate">Rotate:</label>
<input id="rotate" type="range" name="rotate" min="0" max="360" value="0" data-sizing="deg"><span class="slider-value">0deg<span></div>
<p>Gradients</p>
<div class="sliders "><label for="linear-gradient-overlay-1">Linear Gradient 1:</label>
<input id="linear-gradient-overlay-1" class="color" name="linear-gradient-overlay-1" type="text"><span class="noSuffix"></span></div>
<div class="sliders"><label for="linear-gradient-overlay-2">Linear Gradient 2:</label>
<input id="linear-gradient-overlay-2" class="color" name="linear-gradient-overlay-2" type="text"><span class="noSuffix"></span></div>
<div class="sliders"><label for="linear-gradient-overlay-opacity">Linear Opacity:</label>
<input id="linear-gradient-overlay-opacity" type="range" name="linear-gradient-overlay-opacity" step="0.1" min="0" max="1" value="0.5"><span class="slider-value">0.5<span></div>
<div class="sliders"><label for="linear-gradient-flow"> Linear Flow:</label>
<input id="linear-gradient-flow" type="range" name="linear-gradient-flow" min="-150" max="100" value="0" data-sizing="%"><span class="slider-value">0%<span></div>
<div class="sliders"><label for="linear-gradient-direction">Linear Direction:</label>
<input id="linear-gradient-direction" type="range" name="linear-gradient-direction" min="0" max="360" value="0" data-sizing="deg"><span class="slider-value">0deg<span></div>
<div class="sliders"><label for="radial-gradient-overlay-1">Radial Gradient 1:</label>
<input id="radial-gradient-overlay-1" class="color" name="radial-gradient-overlay-1" type="text"><span class="noSuffix"></span></div>
<div class="sliders"><label for="radial-gradient-overlay-2">Radial Gradient 2:</label>
<input id="radial-gradient-overlay-2" class="color" name="radial-gradient-overlay-2" type="text"><span class="noSuffix"></span></div>
<div class="sliders"><label for="radial-gradient-overlay-opacity">Radial Opacity:</label>
<input id="radial-gradient-overlay-opacity" type="range" name="radial-gradient-overlay-opacity" step="0.1" min="0" max="1" value="0.5"><span class="slider-value">0.5<span></div>
<div class="sliders"><label for="radial-gradient-size"> Radial Size:</label>
<input id="radial-gradient-size" type="range" name="radial-gradient-size" min="-100" max="100" value="20" data-sizing="%"><span class="slider-value">0%<span></div>
<div class="sliders"><label for="radial-gradient-position-x">Radial Position X:</label>
<input id="radial-gradient-position-x" type="range" name="radial-gradient-position-x" min="0" max="100" value="50" data-sizing="%"><span class="slider-value">50%<span></div>
<div class="sliders"><label for="radial-gradient-position-y">Radial Position Y:</label>
<input id="radial-gradient-position-y" type="range" name="radial-gradient-position-y" min="0" max="100" value="50" data-sizing="%"><span class="slider-value">50%<span></div>
<p>Mix Blend Mode:</p>
<div class="mix-blend-modes">
<form>
<div class="radio-div"><input class="mix-blend-mode" type="radio" name="mix-blend-mode" value="none" onclick="resetBlenMode()"><span>None</span></div>
<div class="radio-div"><input class="mix-blend-mode" type="radio" name="mix-blend-mode" value="screen"><span>Screen</span></div>
<div class="radio-div"><input class="mix-blend-mode" type="radio" name="mix-blend-mode" value="darken"><span>Darken</span></div>
<div class="radio-div"><input class="mix-blend-mode" type="radio" name="mix-blend-mode" value="overlay"><span>Overlay</span></div>
<div class="radio-div"><input class="mix-blend-mode" type="radio" name="mix-blend-mode" value="lighten"><span>Lighten</span></div>
<div class="radio-div"><input class="mix-blend-mode" type="radio" name="mix-blend-mode" value="color-dodge"><span>Dodge</span></div>
<div class="radio-div"><input class="mix-blend-mode" type="radio" name="mix-blend-mode" value="color-burn"><span>Burn</span></div>
<div class="radio-div"><input class="mix-blend-mode" type="radio" name="mix-blend-mode" value="hard-light"><span>Hard Light</span></div>
<div class="radio-div"><input class="mix-blend-mode" type="radio" name="mix-blend-mode" value="soft-light"><span>Soft Light</span></div>
<div class="radio-div"><input class="mix-blend-mode" type="radio" name="mix-blend-mode" value="difference"><span>Difference</span></div>
<div class="radio-div"><input class="mix-blend-mode" type="radio" name="mix-blend-mode" value="exclusion"><span>Exclusion</span></div>
<div class="radio-div"><input class="mix-blend-mode" type="radio" name="mix-blend-mode" value="hue"><span>Hue</span></div>
<div class="radio-div"><input class="mix-blend-mode" type="radio" name="mix-blend-mode" value="saturation"><span>Saturation</span></div>
<div class="radio-div"><input class="mix-blend-mode" type="radio" name="mix-blend-mode" value="color"><span>Color</span></div>
<div class="radio-div"><input class="mix-blend-mode" type="radio" name="mix-blend-mode" value="luminosity"><span>Luminosity</span></div>
<div class="radio-div"><input class="mix-blend-mode" type="radio" name="mix-blend-mode" value="multiply"><span>Multiply</span></div>
</form>
</div>
<p>Text Input</p>
<div class="text-1 controls">
<div class="sliders"><label id="text-label" for="text-content">Enter Text:</label>
<input id="text-content" type="text" name="text-content"><span class="noSuffix"><span></div>
<button id="text-on-off" class="button" onclick="addText()">Add Text</button>
<button id="text-on-off" class="button" onclick="removeText()">Remove Text</button>
<button id="text-on-off" class="button" onclick="toggleText()">Toggle Text</button>
<div class="sliders"><label for="text-color">Text Color:</label>
<input id="text-color" class="color" type="text" name="text-color"><span class="noSuffix"><span></div>
<div class="sliders"><label for="text-shadow-color">Shadow Color:</label>
<input id="text-shadow-color" class="color" type="text" name="text-shadow-color"><span class="noSuffix"><span></div>
<div class="sliders"><label for="text-size">Text Size:</label>
<input id="text-size" type="range" name="text-size" min="0" max="300" value="30" data-sizing="px"><span class="slider-value">30px<span></div>
<div class="sliders"><label for="text-translate-x">Text Move X:</label>
<input id="text-translate-x" type="range" name="text-translate-x" min="-250" max="600" value="0" data-sizing="px"><span class="slider-value">0px<span></div>
<div class="sliders"><label for="text-translate-y">Text Move Y:</label>
<input id="text-translate-y" type="range" name="text-translate-y" min="-150" max="500" value="0" data-sizing="px"><span class="slider-value">0px<span></div>
<div class="sliders"><label for="text-shadow">Shadow Size:</label>
<input id="text-shadow" type="range" name="text-shadow" min="-20" max="20" value="1" data-sizing="px"><span >1px<span></div>
<div class="sliders"><label for="letter-spacing">Letter Spacing:</label>
<input id="letter-spacing" type="range" name="letter-spacing" min="-50" max="100" value="0" data-sizing="px"><span class="slider-value">0px<span></div>
<div class="sliders"><label for="word-spacing">Word Spacing:</label>
<input id="word-spacing" type="range" name="word-spacing" min="-5" step="0.25" max="3" value="0.15" data-sizing="em"><span class="slider-value">0.25em<span></div>
<div class="sliders"><label for="text-skew">Text Skew:</label>
<input id="text-skew" type="range" name="text-skew" min="-90" max="90" value="0" data-sizing="deg"><span class="slider-value">0deg<span></div>
<div class="sliders"><label for="text-rotate">Text Rotate:</label>
<input id="text-rotate" type="range" name="text-rotate" min="0" max="360" value="0" data-sizing="deg"><span class="slider-value">0deg<span></div>
</div>
<div class="fonts">
<div class="radio-div"><input class="font-select" type="radio" name="font-select" value="Montserrat"><span >Montserrat</span></div>
<div class="radio-div"><input class="font-select" type="radio" name="font-select" value="Lobster"><span>Lobster</span></div>
<div class="radio-div"><input class="font-select" type="radio" name="font-select" value="Cinzel"><span>Cinzel</span></div>
<div class="radio-div"><input class="font-select" type="radio" name="font-select" value="Barrio"><span>Barrio</span></div>
<div class="radio-div"><input class="font-select" type="radio" name="font-select" value="Montserrat Subrayada"><span>Subrayada</span></div>
<div class="radio-div"><input class="font-select" type="radio" name="font-select" value="El Messiri"><span>El Messiri</span></div>
<div class="radio-div"><input class="font-select" type="radio" name="font-select" value="Dancing Script"><span>Dancing</span></div>
<div class="radio-div"><input class="font-select" type="radio" name="font-select" value="Keania One"><span>Keania</span></div>
<div class="radio-div"><input class="font-select" type="radio" name="font-select" value="Pacifico"><span>Pacifico</span></div>
<div class="radio-div"><input class="font-select" type="radio" name="font-select" value="Bubbler One"><span>Bubbler</span></div>
</div>
<p>Border and Background Color</p>
<div class="sliders"><label for="background-color">Background:</label>
<input id="background-color" class="color" type="text" name="background-color"><span class="noSuffix"><span></div>
<div class="sliders"><label for="border-color">Border Color:</label>
<input id="border-color" class="color" type="text" name="border-color" value="#5092c7"><span class="noSuffix"><span></div>
<p>Border Styles:</p>
<div class="sliders"><label for="outer-border-radius">Outer Border:</label>
<input id="outer-border-radius" type="range" name="outer-border-radius" min="0" max="200" value="0" data-sizing="%"><span class="slider-value">0%<span></div>
<div class="sliders"><label for="border-width">Border Width:</label>
<input id="border-width" type="range" name="border-width" min="0" max="50" value="0" data-sizing="px"><span class="slider-value">0px<span></div>
<div class="sliders"><label for="border-radius">Border Radius:</label>
<input id="border-radius" type="range" name="border-radius" min="0" max="250" value="0" data-sizing="px"><span class="slider-value">0px<span></div>
<div class="border-styles-div">
<form id="border-styles">
<div class="radio-div"><input class="border-styles" type="radio" name="border-styles" value="none"><span>None</span></div>
<div class="radio-div"><input class="border-styles" type="radio" name="border-styles" value="solid"><span>Solid</span></div>
<div class="radio-div"><input class="border-styles" type="radio" name="border-styles" value="double"><span>Double</span></div>
<div class="radio-div"><input class="border-styles" type="radio" name="border-styles" value="dashed"><span>Dashed</span></div>
<div class="radio-div"><input class="border-styles" type="radio" name="border-styles" value="groove"><span>Groove</span></div>
<div class="radio-div"><input class="border-styles" type="radio" name="border-styles" value="ridge"><span>Ridge</span></div>
<div class="radio-div"><input class="border-styles" type="radio" name="border-styles" value="outset"><span>Outset</span></div>
<div class="radio-div"><input class="border-styles" type="radio" name="border-styles" value="hidden"><span>Hidden</span></div>
</form>
</div>
</div>
</div> <!-- Fixed Position to Right Hand Side End-->
<!-- Start of Editor Image Area -->
<div class="bottom-div">
<div class="background">
<div class="image-area" id="image-area">
<figure class="clip-path">
<figure class="overlay-2">
<figure class="overlay-1">
<img id="image" src="https://source.unsplash.com/sqL5xItVgpg">
</figure>
</figure>
</figure>
<div id="text-area"><span id="text-1"></span></div>
</div>
</div>
<button id="full-size" class="button" onclick="fullSize()">Full-Size</button>
<span id="full-size-text">Open as a Full Size Image to take as a ScreenShot</span>
<p class="cite">Design and Code by <a class="highlight" href="http:www.seanmurphy.eu" target="_blank">Sean Murphy</a> - 2017</p>
<!-- Start of Full Size Image Area -->
<div id="image-full-size">
<div class="background">
<div class="image-area" id="image-area">
<figure class="clip-path">
<figure class="overlay-2">
<figure class="overlay-1">
<img id="image-2" src="https://source.unsplash.com/sqL5xItVgpg">
</figure>
</figure>
</figure>
<div id="text-area-2"><span id="text-2"></span></div>
</div>
<span id="close-full-screen" onclick="">&times;</span>
<div>
</div> <!-- Bottom Position Div End -->
Raw
script.js
// Declare Variables and Select Elements
const inputs = document.querySelectorAll('.sliders input');
const mixBlendModes = document.querySelectorAll('.mix-blend-mode');
const borderStyles = document.querySelectorAll('.border-styles');
const textStyles = document.querySelectorAll('.font-select');
const originalImage = document.getElementById('originalImage');
const hideImage = document.getElementById('hideImage');
const text = document.querySelector('#text-1');
let text2 = document.querySelector('#text-2');
const inputBox= document.getElementById('input-box');
const image = document.getElementById('image');
let image2 = document.getElementById('image-2');
const scaleX = document.getElementById('scaleX');
const scaleY = document.getElementById('scaleY');
const dropDownShapes = document.querySelector('.dropdown-shapes');
const shapes = document.querySelectorAll('.shapes');
let suffix;
let mirror = 1;
let flip = 1;
let count1 = -1;
let count2 = -1;
// Create Event Listeners for Groups
inputs.forEach(input => input.addEventListener('click', handleUpdate));
inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));
mixBlendModes.forEach(mixBlendMode=> mixBlendMode.addEventListener('click', changeMixBlendMode));
borderStyles.forEach(borderStyle => borderStyle.addEventListener('click', changeBorderStyles));
textStyles.forEach(textStyle => textStyle.addEventListener('click', changeTextStyle));
shapes.forEach(shape => shape.addEventListener('click', changeClipPathShape));
// Set Text & Original & Shapes - display to 'none'
text.style.display = 'none';
originalImage.style.display = 'none';
dropDownShapes.style.display = 'none';
// When Sliders Values Change, Update the CSS Variables
function handleUpdate() {
suffix = this.dataset.sizing || "";
document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
this.nextElementSibling.innerHTML = this.value + suffix;
if (this.nextElementSibling.classList == "noSuffix") {
this.nextElementSibling.innerHTML = "";
};
}
// Change the Font Style
function changeTextStyle() {
document.documentElement.style.setProperty('--font', this.value );
}
// Set the Border Style
function changeBorderStyles() {
document.documentElement.style.setProperty('--border-styles', this.value );
}
// Set Mix Blend Mode Styles to Overlay
function changeMixBlendMode() {
document.documentElement.style.setProperty('--mix-blend-mode', this.value );
}
// Set Clip Path Shape
function changeClipPathShape() {
const shape = this.dataset.shape || "";
document.documentElement.style.setProperty('--webkit-clip-path', shape);
document.documentElement.style.setProperty('--clip-path', shape);
dropDownShapes.style.display = 'none';
}
// Show Original image on toggle click for comparison
function showOriginal() {
const showOriginalBtn = document.querySelector('#show-original');
if (originalImage.style.display == 'none') {
originalImage.style.display = 'block';
showOriginalBtn.style.color = '#CD343A';
}
else {
originalImage.style.display = 'none';
showOriginalBtn.style.color = '#ededed';
}
}
function toggleMirror() {
if (mirror == 1) {
document.documentElement.style.setProperty('--scaleX', -1);
mirror = -1;
scaleX.value = -1;
}
else {
document.documentElement.style.setProperty('--scaleX', 1);
mirror = 1;
scaleX.value = 1;
}
}
function toggleFlip() {
if (flip == 1) {
document.documentElement.style.setProperty('--scaleY', -1);
scaleY.value = -1;
flip = -1;
}
else {
document.documentElement.style.setProperty('--scaleY', 1);
flip = 1;
scaleY.value = 1;
}
}
function toggleShapes() {
if (dropDownShapes.style.display == 'none') {
dropDownShapes.style.display = 'block';
}
else {
dropDownShapes.style.display = 'none';
}
}
// Add Text
function addText() {
let textContent = document.getElementById('text-content');
let temp1 = '<span class="text-block-1"> '+ textContent.value + '</span>';
let temp2 = '<span class="text-block-2"> '+ textContent.value + '</span>';
text.innerHTML += temp1;
text2.innerHTML += temp2;
text.style.display = 'block';
textContent.value = "";
count1 += 1;
count2 += 1;
}
// Remove Last Text
function removeText() {
let textBlocks1 = document.querySelectorAll('.text-block-1');
let textBlocks2 = document.querySelectorAll('.text-block-2');
for (let i = 0; i < textBlocks1.length; i++) {
if ( i == count1) {
textBlocks1[i].remove();
count1 -= 1;
}
}
for (let i = 0; i < textBlocks2.length; i++) {
if ( i == count2) {
textBlocks2[i].remove();
count2 -= 1;
}
}
}
// Toggle Text On and Off
function toggleText() {
if (text.style.display == 'none') {
text.style.display = 'block';
text2.style.display = 'block';
}
else {
text.style.display = 'none';
text2.style.display = 'none';
}
}
// Full Size Image On and Off
function fullSize() {
const imageFullSize = document.getElementById('image-full-size');
imageFullSize.style.display = "block";
imageFullSize.addEventListener("click", function() {
imageFullSize.style.display = "none";
});
}
function fullSizeClose() {
imageFullSize.style.display = "none";
}
// Set Image in URL/Source Box
function source() {
image.src = inputBox.value;
originalImage.src = inputBox.value;
image2.src = inputBox.value;
inputBox.value = " ";
}
// Reset the Overlay Gradients to none;
function resetOverlay() {
document.documentElement.style.setProperty('--radial-gradient-overlay-1', "none" );
document.documentElement.style.setProperty('--radial-gradient-overlay-2', "none" );
document.documentElement.style.setProperty('--linear-gradient-overlay-1', "none" );
document.documentElement.style.setProperty('--linear-gradient-overlay-2', "none" );
document.documentElement.style.setProperty('--border-styles', "none" );
}
function resetBlendMode() {
document.documentElement.style.setProperty('--mix-blend-mode', 'none');
}
// reset All Sliders
function resetAll() {
for (let i = 0; i < inputs.length; i++) {
suffix = inputs[i].dataset.sizing || "";
inputs[i].value = inputs[i].defaultValue;
document.documentElement.style.setProperty(`--${inputs[i].name}`, inputs[i].defaultValue + suffix );
inputs[i].nextElementSibling.innerHTML = inputs[i].defaultValue + suffix;
toggleText();
resetOverlay();
}
document.documentElement.style.setProperty('--clip-path', "none");
}
// JavaScript Color Picker
const colors = jsColorPicker('input.color', {
customBG: '#222',
readOnly: true,
// patch: false,
init: function(elm, colors) { // colors is a different instance (not connected to colorPicker)
elm.style.backgroundColor = elm.value;
elm.style.color = colors.rgbaMixCustom.luminance > 0.22 ? '#222' : '#ddd';
color = elm.value;
}
});
Raw
scripts
<script src="https://rawgit.com/nazarja/projects/master/photo-editor/colorPicker/colors.js"></script>
<script src="https://rawgit.com/nazarja/projects/master/photo-editor/colorPicker/colorPicker.data.js"></script>
<script src="https://rawgit.com/nazarja/projects/master/photo-editor/colorPicker/colorPicker.js"></script>
<script src="https://rawgit.com/nazarja/projects/master/photo-editor/colorPicker/jsColor.js"></script>
Raw
style.css
/********************
@Import Google-Fonts
********************/
@import url('https://fonts.googleapis.com/css?family=Ubuntu|Barrio|Bubbler+One|Cinzel|Dancing+Script|El+Messiri|Lobster|Montserrat+Subrayada|Montserrat:900|Pacifico');
/*url('https://www.toptal.com/designers/subtlepatterns/patterns/footer_lodyas.png');*/
/*https://source.unsplash.com/jl8x6XpE8Y4*/
/********************
Declare CSS Variables
********************/
:root {
/* Image Variables */
--background-color: #353535;
--image-opacity: 1;
--border-color: #5092c7;
--border-width: 0px;
--border-radius: 0px;
--inner-border-radius: 0%;
--border-styles: solid;
--rotate: 0deg;
--blur: 0px;
--greyscale: 0%;
--brightness: 100%;
--contrast: 100%;
--hue-rotate: 0deg;
--invert: 0%;
--opacity: 100%;
--saturate: 100%;
--sepia: 0%;
--scaleX: 1;
--scaleY: 1;
--scaleXY: 1;
--translateX: 0px;
--translateY: 0px;
--skewX: 0deg;
--skewY: 0deg;
--mix-blend-mode: none;
--background-blend-mode: none;
--radial-gradient-overlay-1: "rgba(0,0,0,0)" ;
--radial-gradient-overlay-2: "rgba(0,0,0,0)" ;
--radial-gradient-size: 20%;
--linear-gradient-overlay-1: "rgba(0,0,0,0)" ;
--linear-gradient-overlay-2: "rgba(0,0,0,0)" ;
--linear-gradient-flow: 0%;
--linear-gradient-direction: 0deg;
--linear-gradient-overlay-opacity: 0.5;
--radial-gradient-overlay-opacity: 0.5;
--radial-gradient-position-x: 50%;
--radial-gradient-position-y: 50%;
/* Shape Variables */
--clip-path: none;
/* Text Variables */
--text-size: 30px;
--letter-spacing: 0px;
--word-spacing: 0.25em;
--text-color: #ffffff;
--text-rotate: 0deg;
--text-skew: 0deg;
--text-translate-x: 0px;
--text-translate-y: 0px;
--font: "Montserrat";
--webkit-text-stroke-width: 10px;
--text-shadow: 1px;
--text-shadow-color: '#343434';
}
/********************
General Body
********************/
body {
text-align: center;
width: 1200px;
margin: auto;
background: url('https://www.toptal.com/designers/subtlepatterns/patterns/footer_lodyas.png');
background-repeat: repeat;
color: white;
font-family: 'Ubuntu', sans-serif;
font-size: 12px;
min-height: 1050px;
}
.top-div {
width: 950;
margin-top: 40px;
}
.right-div {
position: fixed;
overflow-y: scroll;
left: calc(100vw - 385px);
z-index: 20;
height: 919px;
padding-top: 40px;
padding-left: 20px;
top: 0px;
background-color: #333;
border-left: 1px solid #222;
}
.bottom-div {
margin: auto;
}
p {
font-size: 18px;
color: var(--border-color);
text-align: left;
}
.highlight {
color: var(--border-color);
}
/********************
Apply Variables
********************/
#image, #image-2 {
max-height: 600px;
max-width: 900px;
position: relative;
overflow: hidden;
margin: auto;
vertical-align: bottom;
clip-path: var(--clip-path);
border-color: var(--border-color);
border-radius: var(--border-radius);
transform: rotate(var(--rotate))
scaleX(var(--scaleX))
scaleY(var(--scaleY))
scale(var(--scaleXY))
translateX(var(--translateX))
translateY(var(--translateY))
skewX(var(--skewX))
skewY(var(--skewY));
filter: blur(var(--blur))
grayscale(var(--greyscale))
brightness(var(--brightness))
contrast(var(--contrast))
hue-rotate(var(--hue-rotate))
invert(var(--invert))
opacity(var(--opacity))
saturate(var(--saturate))
sepia(var(--sepia));
}
#image-full-size #image-2 {
max-height: 1080px;
max-width: 1920px;
}
#text-area, #text-area-2 {
position: absolute;
z-index: 10;
top: 25%;
left: 10%;
color: white;
font-family: var(--font), sans-serif;
font-size: var(--text-size);
letter-spacing: var(--letter-spacing);
word-spacing: var(--word-spacing);
color: var(--text-color);
text-shadow: var(--text-shadow) var(--text-shadow) var(--text-shadow-color);
transform: translateX(var(--text-translate-x))
translateY(var(--text-translate-y))
rotate(var(--text-rotate))
skew(var(--text-skew));
}
/********************
Image Area
********************/
.background {
background: var(--background-color);
background-color: var(--background-color);
max-width: 980px;
max-height: 720px;
margin: auto;
padding: 40px 20px;
margin-top: -10px;
overflow: hidden;
resize: both;
}
#image-full-size .background {
max-height: 1080px;
max-width: 1920px;
}
.image-area {
max-width: 900px;
max-height: 700px;
position: relative;
margin: auto;
overflow: hidden;
opacity: var(--image-opacity);
border: var(--border-width) solid var(--border-color);
border-style: var(--border-styles);
border-radius: var(--outer-border-radius);
}
#image-full-size .image-area {
max-height: 1080px;
max-width: 1920px;
}
.overlay-1:after, .image:before {
content: '';
display: block;
height: 100%;
width: 100%;
top: 0;
left: 0;
position: absolute;
pointer-events: none;
}
.overlay-1::after {
background: linear-gradient(var(--linear-gradient-direction), var(--linear-gradient-overlay-1) var(--linear-gradient-flow), var(--linear-gradient-overlay-2));
mix-blend-mode: var(--mix-blend-mode);
opacity: var(--linear-gradient-overlay-opacity);
}
.overlay-2:after, .overlay-2:before {
content: '';
display: block;
height: 100%;
width: 100%;
top: 0;
left: 0;
position: absolute;
pointer-events: none;
}
.overlay-2::after {
background: radial-gradient(circle at var(--radial-gradient-position-x) var(--radial-gradient-position-y),var(--radial-gradient-overlay-1) var(--radial-gradient-size),var(--radial-gradient-overlay-2));
mix-blend-mode: var(--mix-blend-mode);
opacity: var(--radial-gradient-overlay-opacity);
}
figure {
display: block;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
-webkit-margin-start: 0;
-webkit-margin-end: 0;
margin: 0;
padding: 0;
}
figure.image {
margin: 0;
padding: 0;
}
.figure {
padding: 0;
margin: 0;
}
#image-full-size {
display: none;
position: absolute;
overflow: scroll;
top: 0px;
left: 0px;
margin: auto;
z-index: 1000;
background-image: url('bg.png');
padding-right: 100px;
}
#full-size {
position: relative;
left: -255px;
margin-right: 20px;
}
#full-size-text {
position: relative;
left: -255px;
font-size: 13px;
}
/********************
Shapes
********************/
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-shapes {
position: absolute;
background-color: #363636;
width: 340px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
padding: 12px 0;
z-index: 40;
top: 30px;
left: 107px;
border: 1px solid #222;
}
.shapes-div {
display: inline-block;
width: 40%;
padding: 5px 0;
margin: 0;
}
.shapes {
display: inline-block;
padding: 5px;
}
.shapes p {
display: inline-block;
color: #ededed;
font-size: 16px;
text-align: left;
width: 120px;
padding-left: 7px;
margin: 5px;
}
.shapes:hover {
background-color: #444;
cursor: pointer;
}
#close-menu {
color: #CD343A;
}
.clip-path {
clip-path: var(--clip-path);
}
/********************
Text-areas
********************/
.cite {
color: #ededed;
font-size: 12px;
position: relative;
margin-left: 155px;
}
.cite a {
text-decoration: none;
transition: 0.3s;
}
.cite a:hover {
color: #ddd
}
.intro-text {
color: #ccc;
font-size: 14px;
position: relative;
margin-left: 155px;
margin-bottom: -15px;
}
/********************
Slider and Text Box Styling
********************/
.sliders {
display: block;
margin: 5px 0;
text-align: left;
}
.cp-app {
z-index:250;
}
#text-on-off {
position: relative;
/*left: -110px;*/
margin-bottom: 15px;
}
input {
text-align: center;
margin-right: 15px;
cursor: pointer;
}
label {
display: inline-block;
padding-left: 0;
width: 100px;
}
input[type=range] {
-webkit-appearance: none;
width: 150px;
border-radius: 8px;
height: 4px;
background-color: #777;
}
input[type=range]::-moz-range-track {
-webkit-appearance: none;
width: 150px;
border-radius: 8px;
height: 3px;
background-color: #777;
}
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none;
background-color: #444;
border: 1px solid #bdc3c7;;
width: 12px;
height: 12px;
border-radius: 10px;
cursor: pointer;
}
input[type='range']::-moz-range-thumb {
-webkit-appearance: none;
background-color: #444;
border: 1px solid #bdc3c7;
width: 12px;
height: 12px;
border-radius: 10px;
cursor: pointer;
}
input[type=text] {
width: 130px;
height: 12px;
font-family: 'Ubuntu', sans-serif;
margin: auto 10px;
}
input[type=radio] {
}
.radio-div {
display: inline-block;
width: 30%;
text-align: left;
cursor: pointer;
}
#input-box {
font-family: 'Ubuntu', sans-serif;
width: 200px;
border-radius: 3px;
border-width: 1px;
height: 23px;
}
#text-content {
font-family: 'Ubuntu', sans-serif;
width: 290px;
border-radius: 3px;
border-width: 1px;
height: 23px;
}
#text-label {
position: relative;
left: 10px;
}
.button:focus {
outline: none;
background-color: #333;
}
.button {
font-family: 'Ubuntu', sans-serif;
background-color: #444;
border: 1px solid #222;
border-radius: 5px;
padding: 5px 10px;
color: #ededed;
cursor: pointer;
margin: 10px auto;
transition: 0.3s;
}
.button:hover {
background-color: #555;
}
.btn-bar {
position: relative;
top: -20px;
left: 286px;
}
.controls {
margin-bottom: 50px;
}
.search-box {
font-size: 1.3em;
margin: 20px auto 0 auto;
}
#input-box {
width: 300px;
}
#submit {
margin-right: 65px;
}
.font-select {
border: 1px solid #444;
border-radius: 5px;
font-size: 13px;
margin: 5px 10px;
padding: 5px 10px;
cursor: pointer;
}
#originalImage {
max-height: 600px ;
max-width: 900px;
z-index: 100;
position: absolute;
top: 220px;
right: 500px;
border: 10px solid #444;
box-shadow: 5px 8px 16px 0px rgba(0,0,0,0.5);
}
#reset-all {
display: inline-block;
margin: auto;
margin-top: 30px;
}
#close-full-screen {
font-size: 4em;
color: #999;
position: relative;
bottom: -20px;
right: -20px;
cursor: pointer;
transition: 0.3s;
}
#close-full-screen:hover {
color: #555;
}
#advice {
width: 290px;
text-align: left;
/*margin-left: -25px;*/
}
.border-styles-div {
margin-top: 30px;
}
.fonts {
margin-top: -25px;
}
@media screen and (max-width: 1370px) {
body {
width: 920px;
margin: auto 0;
padding: auto 0;
}
.right-div {
height: 675px;
}
#originalImage {
right: 400px;
}
}
Raw
styles
<link href="https://rawgit.com/nazarja/projects/master/photo-editor/colorPicker/jsColor.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment