Skip to content

Instantly share code, notes, and snippets.

@nicholasnadel

nicholasnadel/index.html

Created April 27, 2019 01:01
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save nicholasnadel/093c7b3dedc640c35ebbe3a958b4691b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save nicholasnadel/093c7b3dedc640c35ebbe3a958b4691b to your computer and use it in GitHub Desktop.
Download ZIP
KYJQxJ
Raw
index.html
<body>
<div class="wrapper">
<div class="item zoom">
<div class="item-parent">
<p>Parent</p>
</div>
<div class="pair">
<div class="item-childrens">
<div class="item-child">
<div class="item">
<div class="item-parent">
<p>Parent</p>
</div>
<div class="item-childrens">
<div class="item-child">
<div class="item">
<div class="item-parent">
<p>Parent</p>
</div>
<div class="item-childrens">
<div class="item-child">
<p>child 1</p>
</div>
<div class="item-child">
<p>child 2</p>
</div>
</div>
</div>
</div>
<div class="item-child">
<p>child 2</p>
</div>
</div>
</div>
</div>
<div class="item-child">
<div class="item">
<div class="item-parent">
<p>Parent</p>
</div>
<div class="item-childrens">
<div class="item-child">
<div class="item">
<div class="item-parent">
<p>Parent</p>
</div>
<div class="item-childrens">
<div class="item-child">
<p>child 1</p>
</div>
<div class="item-child">
<p>child 2</p>
</div>
</div>
</div>
</div>
<div class="item-child">
<p>child 2</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
Raw
script.js
// jQuery.editable.js v1.1.2
// http://shokai.github.io/jQuery.editable
// (c) 2012-2015 Sho Hashimoto <hashimoto@shokai.org>
// The MIT License
(function($){
var escape_html = function(str){
return str.replace(/</gm, '&lt;').replace(/>/gm, '&gt;');
};
var unescape_html = function(str){
return str.replace(/&lt;/gm, '<').replace(/&gt;/gm, '>');
};
$.fn.editable = function(event, callback){
if(typeof callback !== 'function') callback = function(){};
if(typeof event === 'string'){
var trigger = this;
var action = event;
var type = 'input';
}
else if(typeof event === 'object'){
var trigger = event.trigger || this;
if(typeof trigger === 'string') trigger = $(trigger);
var action = event.action || 'click';
var type = event.type || 'input';
}
else{
throw('Argument Error - jQuery.editable("click", function(){ ~~ })');
}
var target = this;
var edit = {};
edit.start = function(e){
trigger.unbind(action === 'clickhold' ? 'mousedown' : action);
if(trigger !== target) trigger.hide();
var old_value = (
type === 'textarea' ?
target.text().replace(/<br( \/)?>/gm, '\n').replace(/&gt;/gm, '>').replace(/&lt;/gm, '<') :
target.text()
).replace(/^\s+/,'').replace(/\s+$/,'');
var input = type === 'textarea' ? $('<textarea>') : $('<input>');
input.val(old_value).
css('width', type === 'textarea' ? '100%' : target.width()+target.height() ).
css('font-size','100%').
css('margin',0).attr('id','editable_'+(new Date()*1)).
addClass('editable');
if(type === 'textarea') input.css('height', target.height());
var finish = function(){
var result = input.val().replace(/^\s+/,'').replace(/\s+$/,'');
var html = escape_html(result);
if(type === 'textarea') html = html.replace(/[\r\n]/gm, '<br />');
target.html(html);
callback({value : result, target : target, old_value : old_value});
edit.register();
if(trigger !== target) trigger.show();
};
input.blur(finish);
if(type === 'input'){
input.keydown(function(e){
if(e.keyCode === 13) finish();
});
}
target.html(input);
input.focus();
};
edit.register = function(){
if(action === 'clickhold'){
var tid = null;
trigger.bind('mousedown', function(e){
tid = setTimeout(function(){
edit.start(e);
}, 500);
});
trigger.bind('mouseup mouseout', function(e){
clearTimeout(tid);
});
}
else{
trigger.bind(action, edit.start);
}
};
edit.register();
return this;
};
$(function() {
$(".item-child p, .item-parent p").each(function () {
$(this).editable("click", function (e) {
console.log(e.value);
});
});
});
})(jQuery);
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
Raw
style.css
body {
color: #fff;
background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
background-size: 400% 400%;
-webkit-animation: Gradient 15s ease infinite;
animation: Gradient 15s ease infinite;
}
@-webkit-keyframes Gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@keyframes Gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
h1,
h6 {
font-family: 'Open Sans';
font-weight: 300;
text-align: center;
position: absolute;
top: 45%;
right: 0;
left: 0;
}
html {
height: 100vh;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
* {
font-family: "Comic Sans MS", cursive, sans-serif;
}
*:focus {
outline: 0;
}
h1 {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
body {
background-color: #FAFAFA;
}
.wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 600px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
input {
background-color: none;
border: none;
outline: none;
}
.editable {
background-color: transparent;
}
.item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.item p {
padding: 20px;
margin: 0;
background-color: transparent;
border: 0.125rem solid #302F2D;
}
.item-parent {
position: relative;
margin-left: 50px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.item-parent:after {
position: absolute;
content: '';
width: 25px;
height: 2px;
left: 0;
top: 50%;
background-color: #302F2D;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
.item-childrens {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.item-child {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
margin-top: 10px;
margin-bottom: 10px;
position: relative;
}
.item-child:before {
content: '';
position: absolute;
background-color: #302F2D;
right: 0;
top: 50%;
-webkit-transform: translateX(100%);
transform: translateX(100%);
width: 25px;
height: 2px;
}
.item-child:after {
content: '';
position: absolute;
background-color: #302F2D;
right: -25px;
height: calc(50% + 22px);
width: 2px;
top: 50%;
}
.item-child:last-child:after {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
.item-child:only-child:after {
display: none;
}
@media (max-width: 36rem) {
.wrapper {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
.item-parent {
margin-left: .5rem;
}
.item p {
border: none;
padding: 1rem;
}
}
.item p {
background-color: transparent;
}
/*# sourceMappingURL=style.css.map */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment