Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add a Lightbox Pop-Up Modal #10

Merged
merged 3 commits into from Oct 6, 2019
Merged

Add a Lightbox Pop-Up Modal #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e1cf7aa
Merge pull request #5 from Qoyyuum/gh-pages
Qoyyuum Sep 9, 2019
7fb09f3
Merge remote-tracking branch 'upstream/master' into gh-pages
NitinNair89 Oct 3, 2019
dca5e2d
Added lightbox modal to show the generated source code, applied CSS, …
NitinNair89 Oct 3, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
24 changes: 22 additions & 2 deletions index.html
View file
Open in desktop
Expand Up @@ -4,6 +4,7 @@
<head>
<title>Table Generator</title>
<link rel='stylesheet' href='bulma.min.css'/>
<meta charset="utf-8">

<style>
.Site {
Expand All @@ -16,6 +17,9 @@
flex: 1;
margin-bottom: 2em;
}
#generatedSourceCode {padding: 5px 10px;background: #f5f5f5;margin: 0;border: 1px solid antiquewhite;border-radius: 5px;}
#generatedSourceCode code{padding-left:0;}
#copyStatus{padding:5px 10px;border-radius:7px;font-size:12px}
</style>
</head>

Expand All @@ -34,7 +38,7 @@ <h2 class="subtitle">
</div>
</div>
</section>

<section class="section">
<div class="columns">
<div class="column is-12">
Expand Down Expand Up @@ -75,9 +79,25 @@ <h3 class="is-size-3">How many columns and rows?</h3>
<h4 class="is-size-4 has-text-centered">Preview Table</h4>
<div v-html="tableString"></div>
<br>
<button class="button is-primary" @click="openInNewTab">Open in new tab for source code</button>
<button class="button is-primary" @click="openModal">Show source code</button>
</div>
</section>

<!-- Modal to show source code -->
<div class="modal" v-bind:class="{ 'is-active': showTableSourceCode }">
<div class="modal-background" @click="closeModal"></div>
<div class="modal-content">
<div class="box is-clearfix">
<p style="margin-bottom:10px">Below is the source code of the generated table:</p>
<div id="generatedSourceCode" v-html="tableSourceCode"></div>
<br/>
<button title="Click to copy this code" class="button is-primary is-pulled-right" @click="copyCode">COPY</button>
<span id="copyStatus" class="has-text-white is-pulled-left" v-bind:class="[copyStatusClass]" v-html="copyStatusText"></span>
</div>
</div>
<button class="modal-close is-large" aria-label="close" @click="closeModal"></button>
</div> <!-- Modal end -->

</div>
<footer class="footer fix-footer">
<div class="content has-text-centered">
Expand Down
44 changes: 38 additions & 6 deletions tableGen.js
View file
Open in desktop
Expand Up @@ -6,7 +6,12 @@ let app = new Vue({
columns: '',
rows: '',
tableString: '',
header: false
header: false,
tableSourceCode: '',
showTableSourceCode: false,
copyStatus: false,
copyStatusText: '',
copyStatusClass: ''
}
},
methods: {
Expand Down Expand Up @@ -45,11 +50,38 @@ let app = new Vue({
changeValue() {
this.preHTML()
},
openInNewTab() {
let newWindow = window.open("about:blank");
let string = '<pre>' + this.tableString.replace(/&/g, '&amp;').replace(/</g, '&lt;') + '</pre>';
newWindow.document.write(string)
newWindow.document.close()
openModal() {
// Opens the modal and set flag
this.showTableSourceCode = true;
let string = '<code>' + this.tableString.replace(/&/g, '&amp;').replace(/</g, '&lt;') + '</code>';
this.tableSourceCode = string;
},
closeModal() {
// Closes the modal and reset flags as well as status content
this.showTableSourceCode = false;
this.copyStatus = false;
this.copyStatusClass = '';
this.copyStatusText = '';
},
copyCode() {
// Copies the content of 'generatedSourceCode' <div> to user's clipboard
let generatedSourceCodeStr = document.querySelector('#generatedSourceCode');
let range = document.createRange();
range.selectNode(generatedSourceCodeStr);
window.getSelection().addRange(range);

try {
// Execute copy command and set status content
this.copyStatus = document.execCommand('copy');
this.copyStatusClass = this.copyStatus ? 'has-background-success' : 'has-background-danger';
this.copyStatusText = 'Copied!'
} catch(err) {
// Copy didn't work, reset status content
this.copyStatus = false;
this.copyStatusClass = '';
this.copyStatusText = 'Something went wrong!'
}
window.getSelection().removeAllRanges();
}
}
})