mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-02-20 13:16:43 +01:00
Code Issues Releases Wiki Activity

add help modal.

Browse Source
This commit is contained in:
Kushagra Gour 2016-05-04 03:19:08 +05:30
parent 7e4b21c1e6
commit 89d0b15bc2
2 changed files with 87 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
index.html
View File

@ -14,6 +14,8 @@
min-height: 100vh;
font-family: Helvetica, arial;
}
a { text-decoration: none; color: crimson; }
/*a:hover { text-decoration: underline; }*/
.flex {
display: flex;
}
@ -115,6 +117,7 @@
padding: 5px 10px;
background-color: #111;
color: rgba(255, 255, 255, 0.45);
border-top: 1px solid rgba(255,255,255,0.14);
line-height: 20px;
}
.footer__right {
@ -144,6 +147,55 @@
.gutter-vertical {
cursor: ns-resize;
}
.modal {
position: fixed;
top: 50%;
left: 50%;
width: 50%;
max-width: 630px;
min-width: 320px;
height: auto;
z-index: 2000;
visibility: hidden;
backface-visibility: hidden;
transform: translateX(-50%) translateY(-50%);
}
.modal__content {
/*color: #fff;*/
background: #fdfdfd;
position: relative;
border-radius: 3px;
margin: 0 auto;
opacity: 0;
padding: 2em;
font-size: 1.5em;
transition: all 0.3s;
transform: scale(0.7);
}
.is-modal-visible {
visibility: visible;
}
.is-modal-visible .modal__content {
transform: scale(1);
opacity: 1;
}
.modal-overlay {
position: fixed;
width: 100%;
height: 100%;
visibility: hidden;
top: 0;
left: 0;
z-index: 1000;
opacity: 0;
background: rgba(0,0,0,0.6);
transition: all 0.3s;
}
.is-modal-visible ~ .modal-overlay {
opacity: 1;
visibility: visible;
}
</style>
</head>
@ -177,8 +229,8 @@
</svg>
</a>
</div>
&copy; Web-Maker
<a>
&copy; Web-Maker &nbsp;&nbsp;
<a id="js-help-btn">
<svg style="width:20px; height:20px; vertical-align:text-bottom" viewBox="0 0 24 24">
<path d="M11,18H13V16H11V18M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,6A4,4 0 0,0 8,10H10A2,2 0 0,1 12,8A2,2 0 0,1 14,10C14,12 11,11.75 11,15H13C13,12.75 16,12.5 16,10A4,4 0 0,0 12,6Z" />
</svg>
@ -194,6 +246,18 @@
</div>
</div>
<div class="modal" id="js-help-modal">
<div class="modal__content">
<h3>Web-Maker</h3>
<div>
<p>Made by <a href="https://twitter.com/chinchang457" target="_blank">Kushagra Gour</a></p>
<p>If you like this extension, support it by <a href="">writing a review</a>.</p>
</div>
</div>
</div>
<div class="modal-overlay"></div>
<svg width="30" height="30" viewBox="0 0 100 100" fill="rgba(255, 255, 255, 0.09)">
<defs>

55
script.js
View File

@ -5,17 +5,19 @@
var $ = document.querySelector.bind(document);
var $all = document.querySelectorAll.bind(document);
var updateTimer,
updateDelay = 500,
currentLayoutMode,
frame = $('#demo-frame'),
htmlCode = $('#js-html-code'),
cssCode = $('#js-css-code'),
jsCode = $('#js-js-code');
layoutBtn1 = $('#js-layout-btn-1');
layoutBtn2 = $('#js-layout-btn-2');
layoutBtn3 = $('#js-layout-btn-3');
var updateTimer
, updateDelay = 500
, currentLayoutMode
, frame = $('#demo-frame')
, htmlCode = $('#js-html-code')
,cssCode = $('#js-css-code')
, jsCode = $('#js-js-code')
, layoutBtn1 = $('#js-layout-btn-1')
, layoutBtn2 = $('#js-layout-btn-2')
, layoutBtn3 = $('#js-layout-btn-3')
, helpBtn = $('#js-help-btn')
, helpModal = $('#js-help-modal')
;
editur.cm = {};
editur.demoFrameDocument = frame.contentDocument || frame.contentWindow.document;
@ -146,30 +148,15 @@
}
});
return;
helpBtn.addEventListener('click', function () {
helpModal.classList.toggle('is-modal-visible');
});
var content = editur.getLastSavedContent();
// load demo content for new user
if (!content) {
var reqListener = function () {
content = this.responseText;
editur.cm.setValue(content);
editur.cm.refresh();
editur.setPreviewContent(content);
};
var oReq = new XMLHttpRequest();
oReq.onload = reqListener;
oReq.open("get", "demo.html", true);
oReq.send();
}
// load saved content for returning user
else {
editur.setPreviewContent(content);
editur.cm.setValue(content);
editur.cm.refresh();
}
window.addEventListener('click', function(e) {
if (typeof e.target.className === 'string' && e.target.className.indexOf('modal-overlay') !== -1) {
e.target.previousElementSibling.classList.toggle('is-modal-visible');
}
})
}
init();