Skip to content

Commit

Permalink
feat(index.html): added first draft of show/hide code and copy.
Browse files Browse the repository at this point in the history
  • Loading branch information
@guastallaigor
guastallaigor committed Feb 6, 2019
1 parent f1f73f9 commit 1f6d222
Show file tree
Hide file tree
Showing 2 changed files with 35 additions and 87 deletions.
107 changes: 25 additions & 82 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,14 +44,14 @@ <h1><i class="snes-jp-logo brand"></i>NES.css</h1>

<section class="nes-container with-title">
<h2 class="title">Buttons</h2>
<div>
<div id="buttons">
<button type="button" class="nes-btn">Normal</button>
<button type="button" class="nes-btn is-primary">Primary</button>
<button type="button" class="nes-btn is-success">Success</button>
<button type="button" class="nes-btn is-warning">Warning</button>
<button type="button" class="nes-btn is-error">Error</button>
<button type="button" class="nes-btn is-disabled">Disabled</button>
<button type="button" class="nes-btn is-primary show-code" id="show-buttons-code">Show Code</button>
<button type="button" class="nes-btn is-error show-code" id="show-buttons-code"><></button>
</div>
</section>
<section class="nes-container code" id="code-buttons">
Expand All @@ -62,6 +62,7 @@ <h2 class="title">Buttons</h2>
<p><span><</span>button type="button" class="nes-btn is-warning">Warning<span><</span>/button></p>
<p><span><</span>button type="button" class="nes-btn is-error">Error<span><</span>/button></p>
<p><span><</span>button type="button" class="nes-btn is-disabled">Disabled<span><</span>/button></p>
<button type="button" class="nes-btn show-code copy" id="copy-buttons" onClick="copyToClipboard('buttons')">Copy</button>
</code>
</section>

Expand Down Expand Up @@ -465,92 +466,34 @@ <h3 class="title">Controllers</h3>
</footer>
</body>
<script>
var link = document.querySelector("a.github-link");
var octocat = document.querySelector("a.github-link > i.nes-octocat");
link.addEventListener("mouseover", function() {
octocat.classList.add("animate");
});
link.addEventListener("mouseout", function() {
octocat.classList.remove("animate");
});
function copyToClipboard(element) {
var divToClipboard = document.querySelector('#' + element);
const el = document.createElement('textarea');
el.value = divToClipboard.innerHTML;
el.setAttribute('readonly', '');
el.style.position = 'absolute';
el.style.left = '-9999px';
document.body.appendChild(el);
el.select();
document.execCommand('copy');
document.body.removeChild(el);
}

window.onload = function() {
var link = document.querySelector("a.github-link");
var octocat = document.querySelector("a.github-link > i.nes-octocat");
link.addEventListener("mouseover", function() {
octocat.classList.add("animate");
});
link.addEventListener("mouseout", function() {
octocat.classList.remove("animate");
});

var buttons = document.querySelector("#show-buttons-code");
var codeButtons = document.querySelector("#code-buttons");

buttons.addEventListener("click", function() {
console.log('test')
codeButtons.style.display = codeButtons.style.display === 'block' ? 'none' : 'block';
});

// var containers = document.querySelector("#show-containers-code");
// container.addEventListener("click", function() {
// console.log('oi2')
// });

// var radios = document.querySelector("#show-radios-code");
// radios.addEventListener("click", function() {
// console.log('oi3')
// });

// var checkboxes = document.querySelector("#show-checkboxes-code");
// checkboxes.addEventListener("click", function() {
// console.log('oi4')
// });

// var avatars = document.querySelector("#show-avatars-code");
// avatars.addEventListener("click", function() {
// console.log('oi5')
// });

// var forms = document.querySelector("#show-forms-code");
// forms.addEventListener("click", function() {
// console.log('oi6')
// });

// var ballons = document.querySelector("#show-ballons-code");
// ballons.addEventListener("click", function() {
// console.log('oi7')
// });

// var lists = document.querySelector("#show-lists-code");
// lists.addEventListener("click", function() {
// console.log('oi7')
// });

// var table = document.querySelector("#show-table-code");
// table.addEventListener("click", function() {
// console.log('oi7')
// });

// var progress = document.querySelector("#show-progress-code");
// progress.addEventListener("click", function() {
// console.log('oi7')
// });

// var badges = document.querySelector("#show-badges-code");
// badges.addEventListener("click", function() {
// console.log('oi7')
// });

// var reactions = document.querySelector("#show-icons-reactions-code");
// reactions.addEventListener("click", function() {
// console.log('oi7')
// });

// var sns = document.querySelector("#show-icons-sns-code");
// sns.addEventListener("click", function() {
// console.log('oi7')
// });

// var others = document.querySelector("#show-icons-others-code");
// others.addEventListener("click", function() {
// console.log('oi7')
// });

// var controllers = document.querySelector("#show-icons-controllers-code");
// controllers.addEventListener("click", function() {
// console.log('oi7')
// });
}
</script>
</html>
15 changes: 10 additions & 5 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,17 +104,22 @@ div.containers > .nes-container {
.show-code {
font-size: .7em;
height: 34px;
width: 128px;
width: 43px;
position: absolute;
right: 5px;
top: 5px;
right: -5px;
top: -5px;
}

.copy {
height: 34px;
width: 58px;
}

.code {
display: none;
font-size: .8em;
color: white;
background-color: #ce372b;
color: #e76e55;
background-color: rgba(45, 45, 45, .9);
padding: 15px 0 0px 10px;
margin-top: -20px;
}

0 comments on commit 1f6d222

Please sign in to comment.