Skip to content

Commit

Permalink
Improved app information, additional/revamped controls and accessibility
Browse files Browse the repository at this point in the history 
Layer order works properly now
  • Loading branch information
@fdebijl
fdebijl committed Oct 15, 2017
1 parent df353f6 commit d417eb8
Show file tree
Hide file tree
Showing 9 changed files with 146 additions and 54 deletions.
Binary file added img/clear.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/copy.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified img/delete.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/download.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/info.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
26 changes: 17 additions & 9 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,24 +32,32 @@
<body>
<div class="wrapper">

<div class="betanote">
<span>This site is currently in beta and only (properly) works with one emoji at the time.</span>
<span>For more info visit the <a href="https://github.com/fdebijl/emojibuilder">GitHub page</a>.</span>
</div>
<div class="info collapsed" role="contentinfo">EmojiBuilder by <a href="https://twitter.com/fdebijl" title="Author's Twitter account">@fdebijl</a>
This site is currently in <b>beta</b> and only (properly) works with one emoji at the time.
For more info, or to help me out finish this site, visit the <a href="https://github.com/fdebijl/emojibuilder" title="GitHub for EmojiBuilder">GitHub page</a>.

<b>Controls:</b>
Click any emoji on the right or drag them in to start editing.
You can select any path by clicking on it once. To deselect a path, click anywhere on the drawboard.
To delete a path, press 'Delete' on your keyboard or click the garbage bin icon in the lower left.</div>

<div class="controls">
<i aria-hidden="true" class="delete" ></i>
<i aria-hidden="true" class="forward" ></i>
<i aria-hidden="true" class="backward"></i>
<div class="group">
<i class="clear"> <span class="tooltip">Clear all emoji from the canvas.</span></i>
<i class="download"><span class="tooltip">Download the emoji as PNG</span></i>
</div>
<div class="group">
<i class="delete"> <span class="tooltip">Delete the currently selected path</span></i>
<i class="forward"> <span class="tooltip">Bring the currently selected layer forward</span></i>
<i class="backward"><span class="tooltip">Push the currently selected layer backward</span></i>
</div>
</div>

<div id="drawboard" ondrop="appendEmoji(event)" ondragover="allowDrop(event)">
<span class="hinter">Drop emoji from the right on here</span>
</div>

<aside class="sidebar">
<div class="clear button">Clear canvas</div>
<div class="render button">Save as PNG (broken atm)</div>

<nav class="tabs"><div class="tab tabheader">Categories:</div></nav>

Expand Down
133 changes: 103 additions & 30 deletions src/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
* {
box-sizing: border-box;
font-family: 'Source Sans Pro', sans-serif;
color: #FFF;
}

svg {
Expand All @@ -17,14 +16,39 @@ svg {

body {
margin: 0;
color: #FFF;
}

/* Main elements
===================================================== */

.betanote {
/* Info box */
.info {
top: 15px;
left: 15px;
padding: 10px;
margin: 0;
position: absolute;
width: 85vw;
width: auto;
color: #000;
white-space: pre-line;
overflow: visible;
border-radius: 3px;
box-shadow: 10px 10px 20px 5px rgba(0, 0, 0, 0.3);
z-index: 10;
cursor: pointer;
transition: 333ms all ease;
}

.info.collapsed {
width: 50px;
height: 50px;
box-shadow: none;
background: url(../../img/info.png);
background-size: contain;
overflow: hidden;
color: #FFF;
color: rgba(255,255,255,0);
}

.wrapper {
Expand All @@ -46,7 +70,7 @@ body {
position: absolute;
top: 0;
left: 0;
width: 85vw;
width: 80vw;
height: 100vh;
display: flex;
justify-content: center;
Expand All @@ -55,27 +79,95 @@ body {
touch-action: none;
}

/* Controls
===================================================== */
.controls {
position: absolute;
bottom: 5px;
left: 5px;
width: 100px;
height: 150px;
width: 50px;
z-index: 5;
}

/* Apply a border to the first controlgroup to distinguish between selected controls and global controls */
.controls > .group:nth-of-type(1) {
border-bottom: 1px solid #ababab;
padding-bottom: 3px;
}

.controls > .group:nth-of-type(2) {
padding-top: 3px;
}

.controls > i {
.controls > div > i {
width: 50px;
height: 50px;
display: block;
background-size: contain;
cursor: pointer;
margin: 0;
padding: 0;
transition: 333ms all ease;
}

.controls > div > i:hover {
box-shadow: inset 0px 0 16px 0px rgba(0, 0, 0, 0.3);
transform: scale(1.1);
}

.controls > div > i > span {
opacity: 0;
}

.controls > div > i:hover > span {
opacity: 1;
color: #FFF;
display: flex;
position: relative;
width: 200px;
height: 50px;
justify-content: center;
align-content: center;
text-align: center;
/* Text should not be so long as to overflow, but in the spirit of graceful degradation we will catch this fault here */
overflow: visible;
font-style: normal;
font-size: 16px;
padding: 5px;
left: 75px;
background: #2d2d2d;
border-radius: 3px;
/* Delay tooltip opening with 666ms */
transition: opacity 0s linear 666ms;
}

.controls > div > i:hover > span:after {
content: " ";
position: absolute;
top: 35%;
right: 100%;
margin-left: -5px;
border-width: 7px;
border-style: solid;
border-color: transparent #2d2d2d transparent transparent;
}

.clear {
background: url("../../img/clear.png");
background-size: 30px !important;
background-repeat: no-repeat;
background-position: center;
}

.download {
background: url("../../img/download.png");
}

.delete {
background: url("../../img/delete.png");
background-size: 80%;
background-size: 30px !important;
background-repeat: no-repeat;
background-position: center;
}

.forward {
Expand All @@ -100,7 +192,7 @@ body {

.tab {
height: 25px;
width: 50%;
width: 48%;
position: relative;
z-index: 100;
top: 0;
Expand All @@ -112,26 +204,12 @@ body {
padding: 5px;
cursor: pointer;
float: left;
}

.button {
height: 50px;
width: 100%;
position: relative;
z-index: 100;
top: 0;
right: 0;
display: flex;
background: #2d2d2d;
justify-content: center;
align-items: center;
padding: 5px;
cursor: pointer;
border-bottom: 1px solid #FFF;
margin: 3px;
}

.tabheader {
width: 100%;
margin: 0;
}

.svg-icon {
Expand Down Expand Up @@ -195,11 +273,6 @@ body {
width: 100vw;
}

.betanote {
width: 100vw;
padding: 5px;
}

.wrapper {
overflow: visible;
overflow-x: hidden;
Expand Down
39 changes: 25 additions & 14 deletions src/js/emojibuilder.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,29 +3,31 @@ $(document).ready(function() {
const svgdir = "svg/";
getSVG(svgdir);

// Remove the hint and betanote from DOM after 15 seconds by fading it out and removing it upon animation completion
// Remove the hint from DOM after 15 seconds by fading it out and removing it upon animation completion
setTimeout(function() {
$('.hinter').fadeOut("slow", function() {
$(this).remove();
});

$('.betanote').fadeOut("slow", function() {
$(this).remove();
});
}, 15 * 1000);

// Remove selection when clicking anywhere on the drawboard
$('#drawboard').click(function(e) {
$('#drawboard').click(function(evt) {
$('path').removeClass('selected');
});

// Clear the canvas when the reset button is clicked
$('.clear').click(function(e){
$('.clear').click(function(evt){
$('#drawboard').empty();
});

// Show more information about the app when clicking on the 'i'-icon
$('.info').on("vclick", function(evt) {
$('.info').toggleClass('collapsed');
});

// Render the canvas and save as png when the "Save as PNG" button is clicked
$('.render').click(function(e){
// TODO: Fix SVG rendering
$('.download').click(function(evt){
html2canvas(document.getElementById('drawboard'), {
onrendered: function(canvas) {
let base64blob = canvas.toDataURL("image/png");
Expand All @@ -37,6 +39,20 @@ $(document).ready(function() {
logging: true
});
});

// Enable functionality on the controls
$('.delete').click(function(e) {
$('.selected').remove();
});

$('.forward').click(function(e){
$('.selected').parent().insertAfter($('.selected').parent().next());

});

$('.backward').click(function(e){
$('.selected').parent().insertBefore($('.selected').parent().prev());
});
});

// allowDrop is used on the drawboard to allow emoji from the sidebar to be dropped on there. Called from index.html#drawboard.
Expand Down Expand Up @@ -178,7 +194,6 @@ function addSVG(elem) {

// Make each path selectable by click
$(this).on("vclick", function(evt) {
console.log(evt);
$('path').removeClass('selected');
$(evt.target).addClass('selected');
});
Expand All @@ -191,8 +206,4 @@ $('html').keyup(function(evt) {
if (evt.keyCode == 46) {
$('.selected').remove();
}
});

//$("p").click(function() {
// $(this).insertBefore($(this).prev());
//});
});
2 changes: 1 addition & 1 deletion svg.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,6 @@ function dir_to_json($dir)
return $data;
}

file_put_contents("svgs.json", dir_to_json("./svg"), LOCK_EX);
file_put_contents("svgs.json", dir_to_json("./svg"));

?>

0 comments on commit d417eb8

Please sign in to comment.