mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-07-12 01:26:23 +02: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
Download Patch File Download Diff File Expand all files Collapse all files

68
index.html
View File

@ -14,6 +14,8 @@
min-height: 100vh; min-height: 100vh;
font-family: Helvetica, arial; font-family: Helvetica, arial;
} }
a { text-decoration: none; color: crimson; }
/*a:hover { text-decoration: underline; }*/
.flex { .flex {
display: flex; display: flex;
} }
@ -115,6 +117,7 @@
padding: 5px 10px; padding: 5px 10px;
background-color: #111; background-color: #111;
color: rgba(255, 255, 255, 0.45); color: rgba(255, 255, 255, 0.45);
border-top: 1px solid rgba(255,255,255,0.14);
line-height: 20px; line-height: 20px;
} }
.footer__right { .footer__right {
@ -144,6 +147,55 @@
.gutter-vertical { .gutter-vertical {
cursor: ns-resize; 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> </style>
</head> </head>
@ -177,8 +229,8 @@
</svg> </svg>
</a> </a>
</div> </div>
&copy; Web-Maker &copy; Web-Maker &nbsp;&nbsp;
<a> <a id="js-help-btn">
<svg style="width:20px; height:20px; vertical-align:text-bottom" viewBox="0 0 24 24"> <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" /> <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> </svg>
@ -194,6 +246,18 @@
</div> </div>
</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)"> <svg width="30" height="30" viewBox="0 0 100 100" fill="rgba(255, 255, 255, 0.09)">
<defs> <defs>

55
script.js
View File

@ -5,17 +5,19 @@
var $ = document.querySelector.bind(document); var $ = document.querySelector.bind(document);
var $all = document.querySelectorAll.bind(document); var $all = document.querySelectorAll.bind(document);
var updateTimer, var updateTimer
updateDelay = 500, , updateDelay = 500
currentLayoutMode, , currentLayoutMode
frame = $('#demo-frame'), , frame = $('#demo-frame')
htmlCode = $('#js-html-code'), , htmlCode = $('#js-html-code')
cssCode = $('#js-css-code'), ,cssCode = $('#js-css-code')
jsCode = $('#js-js-code'); , jsCode = $('#js-js-code')
layoutBtn1 = $('#js-layout-btn-1'); , layoutBtn1 = $('#js-layout-btn-1')
layoutBtn2 = $('#js-layout-btn-2'); , layoutBtn2 = $('#js-layout-btn-2')
layoutBtn3 = $('#js-layout-btn-3'); , layoutBtn3 = $('#js-layout-btn-3')
, helpBtn = $('#js-help-btn')
, helpModal = $('#js-help-modal')
;
editur.cm = {}; editur.cm = {};
editur.demoFrameDocument = frame.contentDocument || frame.contentWindow.document; 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(); window.addEventListener('click', function(e) {
if (typeof e.target.className === 'string' && e.target.className.indexOf('modal-overlay') !== -1) {
// load demo content for new user e.target.previousElementSibling.classList.toggle('is-modal-visible');
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();
}
} }
init(); init();