1
0
mirror of https://github.com/chinchang/web-maker.git synced 2025-03-14 23:59:43 +01:00

Merge branch '2.9.3' into inlets-fix

This commit is contained in:
Kushagra Gour 2017-10-24 00:53:42 +05:30 committed by GitHub
commit 53f3d7697a
8 changed files with 108 additions and 33 deletions

12
.gitignore vendored
View File

@ -1,5 +1,11 @@
.sass-cache
### OSX ###
.DS_Store
### PhPStorm / IntellJ IDEA ###
.idea/
*.iml
### Misc ###
node_modules/
*.map
.idea/
.DS_Store
.sass-cache

18
CONTRIBUTING.md Normal file
View File

@ -0,0 +1,18 @@
## How to contribute to Web Maker
Web Maker is written in vanilla JavaScript, CSS & HTML. It uses few open-source 3rd party JavaScript libraries for things like splitting panes, syntax highlighting etc. There is no build process involved in running Web Maker on your local system.
### Run Web Maker locally on your machine
- Clone the repo `git clone git@github.com:chinchang/web-maker.git`.
- Go to Chrome extension settings page [chrome://extensions/](chrome://extensions/).
- Click on **Load unpacked extension** button.
- Select the `src` folder in the repo you just cloned.
- Done! You'll now have a Web Maker icon added in your browser's right-top area. Click that and you'll run your local copy of Web Maker.
### Code changes
- Before starting any code work, run `npm install` in the repo folder. This is required to install some git hooks which do linting & formatting.
- Also, create a new branch out of master branch with the name as `fix-{ISSUE_ID}-anything-more-here`. For example, if you are working on issue #23 regarding implementing a mobile mode, your branch could be called `fix-23-mobile-mode`.
- Now you can simply make code changes inside `src/` folder and refresh in browser to see them.
- Once you are done, open a pull request here by selecting right branch: [https://github.com/chinchang/web-maker/compare](https://github.com/chinchang/web-maker/compare).

View File

@ -13,7 +13,7 @@ Web-Maker ![Build](https://travis-ci.org/chinchang/web-maker.svg?branch=master)
* Works offline
* Inbuilt Console
* Save and load your creations
* Auto-save feture
* Auto-save feature
* Code auto-completion
* Easy addition of popular JS & CSS libraries
* Import & Export all creations anytime, anywhere

View File

@ -1,3 +1,9 @@
<a d-click="onModalCloseBtnClick" href="" aria-label="Close notifications" title="Close" class="js-modal__close-btn modal__close-btn">
<svg>
<use xlink:href="#cross-icon"></use>
</svg>
</a>
<h1>Whats new?</h1>
<div class="notification">

View File

@ -49,7 +49,7 @@
</svg>Run
</a>
<a id="js-add-library-btn" class="flex-v-center hint--rounded hint--bottom-left" aria-label="Add a JS/CSS library">
<a d-open-modal="addLibraryModal" data-event-category="ui" data-event-action="addLibraryButtonClick" class="flex-v-center hint--rounded hint--bottom-left" aria-label="Add a JS/CSS library">
Add library <span id="js-external-lib-count" style="display:none;" class="count-label"></span>
</a>
@ -216,7 +216,7 @@
</svg>
<span class="notifications-btn__dot"></span>
</a>
<a id="settingsBtn" class="mode-btn hint--top-left hint--rounded" aria-label="Settings">
<a d-open-modal="settingsModal" data-event-category="ui" data-event-action="settingsBtnClick" class="mode-btn hint--top-left hint--rounded" aria-label="Settings">
<svg>
<use xlink:href="#settings-icon"></use>
</svg>
@ -226,7 +226,7 @@
<a href="https://webmakerapp.com/" target="_blank"><div class="logo"></div></a>
&copy; Web Maker &nbsp;&nbsp;
<a id="helpBtn" class="footer__link hint--rounded hint--top-right" data-hint="Help">
<a d-open-modal="helpModal" data-event-category="ui" data-event-action="helpButtonClick" class="footer__link hint--rounded hint--top-right" data-hint="Help">
<svg style="width:20px; height:20px; vertical-align:text-bottom" viewBox="0 0 24 24">
<path d="M15.07,11.25L14.17,12.17C13.45,12.89 13,13.5 13,15H11V14.5C11,13.39 11.45,12.39 12.17,11.67L13.41,10.41C13.78,10.05 14,9.55 14,9C14,7.89 13.1,7 12,7A2,2 0 0,0 10,9H8A4,4 0 0,1 12,5A4,4 0 0,1 16,9C16,9.88 15.64,10.67 15.07,11.25M13,19H11V17H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z" />
</svg>
@ -243,6 +243,11 @@
<div class="modal" id="addLibraryModal">
<div class="modal__content">
<a d-click="onModalCloseBtnClick" href="" aria-label="Close add library modal" title="Close" class="js-modal__close-btn modal__close-btn">
<svg>
<use xlink:href="#cross-icon"></use>
</svg>
</a>
<h1>Add Library</h1>
<h3>JavaScript</h3>
<p style="font-size: 0.8em;opacity: 0.7;">Note: You can load external scripts from following domains: localhost, https://ajax.googleapis.com, https://code.jquery.com, https://cdnjs.cloudflare.com, https://unpkg.com, https://maxcdn.com, https://cdn77.com, https://maxcdn.bootstrapcdn.com, https://cdn.jsdelivr.net/, https://rawgit.com, https://wzrd.in</p>
@ -268,6 +273,11 @@
<div class="modal" id="cssSettingsModal">
<div class="modal__content">
<a d-click="onModalCloseBtnClick" href="" aria-label="Close CSS settings modal" title="Close" class="js-modal__close-btn modal__close-btn">
<svg>
<use xlink:href="#cross-icon"></use>
</svg>
</a>
<h1>Atomic CSS Settings</h1>
<h3>Configure Atomizer settings. <a href="https://github.com/acss-io/atomizer#api" target="_blank">Read more</a> about available settings.</h3>
<div style="height: calc(100vh - 350px);">
@ -278,6 +288,11 @@
<div class="modal" id="helpModal">
<div class="modal__content">
<a d-click="onModalCloseBtnClick" href="" aria-label="Close help modal" title="Close" class="js-modal__close-btn modal__close-btn">
<svg>
<use xlink:href="#cross-icon"></use>
</svg>
</a>
<h1>Web Maker<small style="font-size:14px;"> v2.9.1</small></h1>
<div>
<p>Made with <span style="margin-right: 8px;">💖</span> & <span style="margin-right: 8px;">🙌</span> by <a href="https://twitter.com/chinchang457" target="_blank">Kushagra Gour</a></p>
@ -371,6 +386,11 @@
<div class="modal modal--settings" id="settingsModal">
<div class="modal__content">
<a d-click="onModalCloseBtnClick" href="" aria-label="Close Settings" title="Close" class="js-modal__close-btn modal__close-btn">
<svg>
<use xlink:href="#cross-icon"></use>
</svg>
</a>
<h1>Settings</h1>
<h3>Indentation</h3>
@ -583,6 +603,10 @@
</symbol>
<symbol id="gift-icon" viewBox="0 0 24 24">
<path d="M22,12V20A2,2 0 0,1 20,22H4A2,2 0 0,1 2,20V12A1,1 0 0,1 1,11V8A2,2 0 0,1 3,6H6.17C6.06,5.69 6,5.35 6,5A3,3 0 0,1 9,2C10,2 10.88,2.5 11.43,3.24V3.23L12,4L12.57,3.23V3.24C13.12,2.5 14,2 15,2A3,3 0 0,1 18,5C18,5.35 17.94,5.69 17.83,6H21A2,2 0 0,1 23,8V11A1,1 0 0,1 22,12M4,20H11V12H4V20M20,20V12H13V20H20M9,4A1,1 0 0,0 8,5A1,1 0 0,0 9,6A1,1 0 0,0 10,5A1,1 0 0,0 9,4M15,4A1,1 0 0,0 14,5A1,1 0 0,0 15,6A1,1 0 0,0 16,5A1,1 0 0,0 15,4M3,8V10H11V8H3M13,8V10H21V8H13Z" />
<symbol id="gift-icon" viewBox="0 0 24 24">
</symbol>
<symbol id="cross-icon" viewBox="0 0 24 24">
<path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
</symbol>
</svg>

View File

@ -6,7 +6,7 @@
"homepage_url": "https://webmakerapp.com",
"permissions": ["storage", "tabs", "<all_urls>"],
"optional_permissions": ["downloads"],
"content_security_policy": "script-src 'self' filesystem: http://localhost:* https://localhost:* https://ajax.googleapis.com https://code.jquery.com https://cdnjs.cloudflare.com https://unpkg.com https://maxcdn.com https://cdn77.com https://maxcdn.bootstrapcdn.com https://cdn.jsdelivr.net/ https://*.stripe.com/ https://builds.framerjs.com/ https://rawgit.com https://wzrd.in https://semantic-ui.com https://www.google-analytics.com 'unsafe-eval'; object-src 'self'",
"content_security_policy": "script-src 'self' filesystem: http://localhost:* https://localhost:* https://ajax.googleapis.com https://code.jquery.com https://cdnjs.cloudflare.com https://unpkg.com https://maxcdn.com https://cdn77.com https://maxcdn.bootstrapcdn.com https://cdn.jsdelivr.net/ https://*.stripe.com/ https://builds.framerjs.com/ https://rawgit.com https://wzrd.in https://www.gstatic.com https://semantic-ui.com https://www.google-analytics.com 'unsafe-eval'; object-src 'self'",
"options_ui": {
"page": "options.html",
"chrome_style": true

View File

@ -1,8 +1,8 @@
/* global trackEvent */
/* global layoutBtn1, layoutBtn2, layoutBtn3, helpModal, notificationsModal, addLibraryModal,
onboardModal, layoutBtn1, layoutBtn2, layoutBtn3, layoutBtn4, helpBtn, onboardModal, onboardModal,
onboardModal, layoutBtn1, layoutBtn2, layoutBtn3, layoutBtn4, onboardModal, onboardModal,
addLibraryModal, addLibraryModal, notificationsBtn, notificationsModal, notificationsModal,
notificationsModal, notificationsBtn, codepenBtn, saveHtmlBtn, saveBtn, settingsBtn,
notificationsModal, notificationsBtn, codepenBtn, saveHtmlBtn, saveBtn,
onboardModal, settingsModal, notificationsBtn, onboardShowInTabOptionBtn, editorThemeLinkTag,
onboardDontShowInTabOptionBtn, TextareaAutoComplete, savedItemCountEl, indentationSizeValueEl,
runBtn, searchInput, consoleEl, consoleLogEl, logCountEl, fontStyleTag, fontStyleTemplate,
@ -137,7 +137,6 @@ globalConsoleContainerEl
jsModelLabel = $('#js-js-mode-label'),
titleInput = $('#js-title-input'),
addLibrarySelect = $('#js-add-library-select'),
addLibraryBtn = $('#js-add-library-btn'),
externalJsTextarea = $('#js-external-js'),
externalCssTextarea = $('#js-external-css');
@ -259,6 +258,7 @@ globalConsoleContainerEl
utils.log('onExternalLibChange');
updateExternalLibUi();
scope.setPreviewContent(true);
alertsService.add('Libraries updated.');
}
function updateExternalLibUi() {
@ -954,6 +954,7 @@ globalConsoleContainerEl
);
}, '');
var contents =
'<!DOCTYPE html>\n' +
'<html>\n<head>\n' +
'<meta charset="UTF-8" />\n' +
externalCss +
@ -1294,6 +1295,7 @@ globalConsoleContainerEl
gutters: ['CodeMirror-foldgutter']
});
// DEPRECATED
function openSettings() {
scope.toggleModal(settingsModal);
@ -1567,12 +1569,14 @@ globalConsoleContainerEl
c.width = iframeBounds.width;
c.height = iframeBounds.height;
var ctx = c.getContext('2d');
var devicePixelRatio = window.devicePixelRatio || 1;
ctx.drawImage(
image,
iframeBounds.left,
iframeBounds.top,
iframeBounds.width,
iframeBounds.height,
iframeBounds.left * devicePixelRatio,
iframeBounds.top * devicePixelRatio,
iframeBounds.width * devicePixelRatio,
iframeBounds.height * devicePixelRatio,
0,
0,
iframeBounds.width,
@ -1843,6 +1847,18 @@ globalConsoleContainerEl
attachListenerForEvent('input');
attachListenerForEvent('keyup');
// Compile d-open-modal directive
const modalTriggers = $all(`[d-open-modal]`);
modalTriggers.forEach(function(el) {
utils.onButtonClick(el, function() {
scope.toggleModal(window[el.getAttribute('d-open-modal')]);
trackEvent(
el.getAttribute('data-event-category'),
el.getAttribute('data-event-action')
);
});
});
// Compile d-html directive
const dHtmlNodes = $all(`[d-html]`);
dHtmlNodes.forEach(function(el) {
@ -1900,6 +1916,11 @@ globalConsoleContainerEl
trackEvent('ui', 'cssSettingsBtnClick');
};
scope.onModalCloseBtnClick = function(e) {
closeAllOverlays();
e.preventDefault();
};
function init() {
var lastCode;
@ -1918,15 +1939,6 @@ globalConsoleContainerEl
layoutBtn3.addEventListener('click', getToggleLayoutButtonListener(3));
layoutBtn4.addEventListener('click', getToggleLayoutButtonListener(4));
utils.onButtonClick(helpBtn, function() {
scope.toggleModal(helpModal);
trackEvent('ui', 'helpButtonClick');
});
utils.onButtonClick(addLibraryBtn, function() {
scope.toggleModal(addLibraryModal);
trackEvent('ui', 'addLibraryButtonClick');
});
notificationsBtn.addEventListener('click', function() {
scope.toggleModal(notificationsModal);
@ -2136,10 +2148,10 @@ globalConsoleContainerEl
});
window.addEventListener('click', function(e) {
if (
typeof e.target.className === 'string' &&
e.target.className.indexOf('modal-overlay') !== -1
) {
if (typeof e.target.className !== 'string') {
return;
}
if (e.target.className.indexOf('modal-overlay') !== -1) {
closeAllOverlays();
}
});
@ -2156,11 +2168,6 @@ globalConsoleContainerEl
}
});
utils.onButtonClick(settingsBtn, function() {
openSettings();
trackEvent('ui', 'settingsBtnClick');
});
// Initialize add library select box
var libOptions = window.jsLibs.reduce(
(html, lib) =>

View File

@ -438,6 +438,20 @@ body > #demo-frame {
margin-left: -45vw;
}
}
.modal__close-btn {
position: absolute;
right: 10px;
top: 10px;
opacity: 0.3;
transition: 0.25s ease;
}
.modal__close-btn > svg {
fill: black;
width:30px; height:30px;
}
.modal__close-btn:hover {
opacity: 0.7;
}
.modal__content {
background: #fdfdfd;
color: #444;