mirror of
https://github.com/chinchang/web-maker.git
synced 2025-10-09 10:36:24 +02:00
Merge branch 'master' into gh-pages
This commit is contained in:
Kushagra Gour
100
.eslintrc.json
100
.eslintrc.json
@@ -6,42 +6,27 @@
|
||||
"extends": "eslint:recommended",
|
||||
"rules": {
|
||||
"accessor-pairs": "error",
|
||||
"array-bracket-spacing": "off",
|
||||
|
||||
"array-callback-return": "error",
|
||||
"arrow-body-style": "off",
|
||||
"arrow-parens": "error",
|
||||
"arrow-spacing": "error",
|
||||
|
||||
"block-scoped-var": "error",
|
||||
"block-spacing": [
|
||||
"error",
|
||||
"always"
|
||||
],
|
||||
"brace-style": "off",
|
||||
|
||||
"callback-return": "error",
|
||||
"camelcase": "error",
|
||||
"comma-spacing": "off",
|
||||
"comma-style": "off",
|
||||
"complexity": "error",
|
||||
"computed-property-spacing": [
|
||||
"error",
|
||||
"never"
|
||||
],
|
||||
"computed-property-spacing": ["error", "never"],
|
||||
"consistent-return": "error",
|
||||
"consistent-this": "off",
|
||||
"curly": "error",
|
||||
"default-case": "error",
|
||||
"dot-location": [
|
||||
"error",
|
||||
"property"
|
||||
],
|
||||
"dot-location": ["error", "property"],
|
||||
"dot-notation": "error",
|
||||
"eol-last": "off",
|
||||
"eqeqeq": "error",
|
||||
"func-names": "off",
|
||||
"func-style": [
|
||||
"error",
|
||||
"declaration"
|
||||
],
|
||||
"func-style": ["error", "declaration", { "allowArrowFunctions": true }],
|
||||
"generator-star-spacing": "error",
|
||||
"global-require": "error",
|
||||
"guard-for-in": "error",
|
||||
@@ -49,25 +34,9 @@
|
||||
"id-blacklist": "error",
|
||||
"id-length": "off",
|
||||
"id-match": "error",
|
||||
"indent": [ "error", "tab" ],
|
||||
"init-declarations": "off",
|
||||
"jsx-quotes": "error",
|
||||
"key-spacing": [
|
||||
"error",
|
||||
{ "afterColon": true }
|
||||
],
|
||||
"keyword-spacing": [
|
||||
"error",
|
||||
{
|
||||
"after": true,
|
||||
"before": true
|
||||
}
|
||||
],
|
||||
"linebreak-style": [
|
||||
"error",
|
||||
"unix"
|
||||
],
|
||||
"lines-around-comment": "error",
|
||||
|
||||
"max-depth": "error",
|
||||
"max-len": "off",
|
||||
"max-nested-callbacks": "error",
|
||||
@@ -101,10 +70,7 @@
|
||||
"no-implicit-globals": "off",
|
||||
"no-implied-eval": "error",
|
||||
"no-inline-comments": "off",
|
||||
"no-inner-declarations": [
|
||||
"error",
|
||||
"functions"
|
||||
],
|
||||
"no-inner-declarations": ["error", "functions"],
|
||||
"no-invalid-this": "error",
|
||||
"no-iterator": "error",
|
||||
"no-label-var": "error",
|
||||
@@ -133,12 +99,7 @@
|
||||
}
|
||||
],
|
||||
"no-path-concat": "error",
|
||||
"no-plusplus": [
|
||||
"error",
|
||||
{
|
||||
"allowForLoopAfterthoughts": true
|
||||
}
|
||||
],
|
||||
"no-plusplus": "off",
|
||||
"no-process-env": "error",
|
||||
"no-process-exit": "error",
|
||||
"no-proto": "error",
|
||||
@@ -177,22 +138,13 @@
|
||||
"no-warning-comments": "off",
|
||||
"no-whitespace-before-property": "error",
|
||||
"no-with": "error",
|
||||
"object-curly-spacing": [
|
||||
"error",
|
||||
"always"
|
||||
],
|
||||
"object-curly-spacing": ["error", "always"],
|
||||
"object-property-newline": "off",
|
||||
"object-shorthand": "off",
|
||||
"one-var": "off",
|
||||
"one-var-declaration-per-line": "error",
|
||||
"operator-assignment": [
|
||||
"error",
|
||||
"always"
|
||||
],
|
||||
"operator-linebreak": [
|
||||
"error",
|
||||
"before"
|
||||
],
|
||||
"operator-assignment": ["error", "always"],
|
||||
|
||||
"padded-blocks": "off",
|
||||
"prefer-arrow-callback": "off",
|
||||
"prefer-const": "error",
|
||||
@@ -215,35 +167,14 @@
|
||||
],
|
||||
"sort-imports": "error",
|
||||
"sort-vars": "off",
|
||||
"space-before-blocks": "off",
|
||||
"space-before-function-paren": "off",
|
||||
"space-in-parens": [
|
||||
"error",
|
||||
"never"
|
||||
],
|
||||
"space-infix-ops": "error",
|
||||
"space-unary-ops": "error",
|
||||
"spaced-comment": [
|
||||
"error",
|
||||
"always"
|
||||
],
|
||||
"strict": [
|
||||
"error",
|
||||
"never"
|
||||
],
|
||||
"strict": ["error", "never"],
|
||||
"template-curly-spacing": "error",
|
||||
"unicode-bom": [
|
||||
"error",
|
||||
"never"
|
||||
],
|
||||
"unicode-bom": ["error", "never"],
|
||||
"valid-jsdoc": "off",
|
||||
"vars-on-top": "off",
|
||||
"wrap-regex": "error",
|
||||
"yield-star-spacing": "error",
|
||||
"yoda": [
|
||||
"error",
|
||||
"never"
|
||||
]
|
||||
"yoda": ["error", "never"]
|
||||
},
|
||||
"globals": {
|
||||
"ArrayBuffer": true,
|
||||
@@ -261,6 +192,7 @@
|
||||
"Sass": true,
|
||||
"less": true,
|
||||
"stylus": true,
|
||||
"atomizer": true,
|
||||
"marked": true,
|
||||
"jade": true,
|
||||
"loadJS": true,
|
||||
|
||||
10
.gitignore
vendored
10
.gitignore
vendored
@@ -1,3 +1,11 @@
|
||||
.sass-cache
|
||||
### OSX ###
|
||||
.DS_Store
|
||||
|
||||
### PhPStorm / IntellJ IDEA ###
|
||||
.idea/
|
||||
*.iml
|
||||
|
||||
### Misc ###
|
||||
node_modules/
|
||||
*.map
|
||||
.sass-cache
|
||||
@@ -1,6 +1,6 @@
|
||||
language: node_js
|
||||
node_js:
|
||||
- '6.0'
|
||||
- '8.1.2'
|
||||
install:
|
||||
- npm install -g eslint
|
||||
- npm install -g babel-eslint
|
||||
|
||||
18
CONTRIBUTING.md
Normal file
18
CONTRIBUTING.md
Normal 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).
|
||||
17
README.md
17
README.md
@@ -1,7 +1,7 @@
|
||||
Web-Maker 
|
||||
Web-Maker  [](https://gitter.im/web-maker-app/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
|
||||
======
|
||||
|
||||
**Web-Maker** is a chrome extension that converts your Chrome tabs into an offline playground for your web experiments. Something like CodePen or JSFiddle, but much more faster and works offline being local on your system.
|
||||
**Web-Maker** is a chrome extension that converts your Chrome tab into an offline playground for your web experiments. Something like CodePen or JSFiddle, but much more faster and works offline being local on your system.
|
||||
|
||||
### [INSTALL EXTENSION](https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh)
|
||||
|
||||
@@ -9,11 +9,16 @@ Web-Maker 
|
||||
|
||||
### Features
|
||||
|
||||
* Supports Preprocessors: HTML (Jade & Markdown), CSS (SCSS, LESS & Stylus) & JavaScript (ES6, TypeScript & CoffeeScript)
|
||||
* Supports Preprocessors: HTML (Pug & Markdown), CSS (SCSS, LESS & Stylus, Atomic CSS) & JavaScript (ES6, TypeScript & CoffeeScript)
|
||||
* Works offline
|
||||
* Inbuilt Console
|
||||
* Save and load your creations
|
||||
* Auto-save feature
|
||||
* Code auto-completion
|
||||
* Easy addition of popular JS & CSS libraries
|
||||
* Import & Export all creations anytime, anywhere
|
||||
* Multiple editor themes & other configurable settings
|
||||
* Font options + use any system font!
|
||||
* Very easily accessible. Simply open a new tab in Chrome!
|
||||
* Multiple layouts to choose from
|
||||
* Capture preview screenshot
|
||||
@@ -22,8 +27,12 @@ Web-Maker 
|
||||
|
||||
Follow [@webmakerApp](https://twitter.com/intent/follow?screen_name=webmakerApp) for updates or tweet out feature requests and suggestions.
|
||||
|
||||
### Support Web Maker
|
||||
|
||||
Web Maker is completely free and open-source. If you find it useful, you can show your support by sharing it in your social network or by [donating](https://www.paypal.me/kushagragour) or by simply letting me know how much you 💖 it by tweeting to [@webmakerapp](https://twitter.com/webmakerApp).
|
||||
|
||||
### License
|
||||
|
||||
MIT Licensed
|
||||
|
||||
Copyright (c) 2017 Kushagra Gour, [kushagragour.in](https://kushagragour.in)
|
||||
Copyright (c) 2017 Kushagra Gour, [webmakerapp.com](https://webmakerapp.com)
|
||||
|
||||
0
docs/.nojekyll
Normal file
0
docs/.nojekyll
Normal file
132
docs/README.md
Normal file
132
docs/README.md
Normal file
@@ -0,0 +1,132 @@
|
||||
|
||||
# Getting started
|
||||
|
||||
## What is Web Maker
|
||||
**Web-Maker** is a chrome extension that converts your Chrome tab into a blazing fast & offline frontend playground for your web experiments.
|
||||
|
||||
|
||||
|
||||
## Features
|
||||
|
||||
* Supports Preprocessors: HTML (Pug & Markdown), CSS (SCSS, LESS & Stylus, Atomic CSS) & JavaScript (ES6, TypeScript & CoffeeScript)
|
||||
* Works offline
|
||||
* Inbuilt Console
|
||||
* Save and load your creations
|
||||
* Auto-save feature
|
||||
* Code auto-completion
|
||||
* Easy addition of popular JS & CSS libraries
|
||||
* Import & Export all creations anytime, anywhere
|
||||
* Multiple editor themes & other configurable settings
|
||||
* Font options + use any system font!
|
||||
* Very easily accessible. Simply open a new tab in Chrome!
|
||||
* Multiple layouts to choose from
|
||||
* Capture preview screenshot
|
||||
* Save as HTML file
|
||||
* Edit in CodePen
|
||||
|
||||
## Installation
|
||||
|
||||
If you haven't already installed Web Maker, you can do so from the [Chrome Web Store](https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh)
|
||||
|
||||
## Starting Web Maker
|
||||
|
||||
Once installed, you'll see a Web Maker icon in the right-top of your Chrome browser. Click it and Web Maker will open in a new tab.
|
||||
|
||||
By default, Web Maker shows up whatever was last open in it. But this behavior can be changed from [settings].
|
||||
|
||||
## Your first code
|
||||
|
||||
Okay, so now you might be wondering what do I do with Web Maker open in front of me? Wait no more! Simply put, Web Maker lets you write HTML, CSS & JavaScript code and see instant preview. So lets write some code.
|
||||
|
||||
You should be seeing 3 code panes with the headings: **HTML**, **CSS** and *JS*. Each code pane is dedicated place to write code in the respective languages. Go ahead and click inside the **HTML** code pane to focus it and then paste the following HTML code:
|
||||
|
||||
```html
|
||||
<h1>My first HTML</h1>
|
||||
```
|
||||
|
||||
As soon as you paste the code, you should see the preview of your HTML in the white preview area.
|
||||
|
||||
|
||||
|
||||
This is a very simple web page we just made. Going forward, you might need to put CSS and JavaScript too. You can write them in their respective code panes and see instant preview.
|
||||
|
||||
## A look at the user interface
|
||||
|
||||
Web Maker's user interface is made to feel simple and accessible so that you have all the required things at your tips and still doesn't look cluttered for someone using it for first time.
|
||||
|
||||
### Code Panes
|
||||
|
||||
Code panes are the actually sections where you write your code. You get 3 panes, one for HTML, CSS & JavaScript each.
|
||||
|
||||
### Preview
|
||||
|
||||
Alongside the code panes, is a white (by default) area where you see the preview of your code. Its an iframe that is feeded your HTML, CSS & JavaScript as you type to generate realtime preview.
|
||||
|
||||
### Title
|
||||
|
||||
On the top-left side you can see the title of your creation. Click on it to edit it anytime.
|
||||
|
||||
### Create New, Save or Open a creation
|
||||
|
||||
On the top-right side, you have the 3 buttons to create a new creation or save an open one. Also you can access all your saved creations from the *Saved Creations Pane* by clicking the *Open* button.
|
||||
|
||||
From the *Saved Creations Pane* you can also export or import all your creations at once. Exporting generates a JSON file which you can backup in your Google Drive, Dropbox etc.
|
||||
|
||||
### Settings
|
||||
|
||||
On the bottom right-most end you can access the app settings. Lots and lots of useful settings in there. To know in details about settings, [jump right here]().
|
||||
|
||||
### Changelog
|
||||
|
||||
Besides the Settings button, is the Changelog button where you can read all the changes in the app for each release version.
|
||||
|
||||
### Layouts
|
||||
|
||||
Next you have some layout options to choose from. Select whats suits you best. This setting is saved per creation basis, so each of your creation can show in a different layout that you see best for it.
|
||||
|
||||
### Export Item
|
||||
|
||||
Web Maker gives you quite some options to export your current creation to share with the world. You can save it as a single HTML file to upload it on a server, or open it in CodePen or take a screenshot of your preview.
|
||||
|
||||
### Help and Share
|
||||
|
||||
On the bottom-left side are few help options, one of which shows you all th keyboard shortcuts available inside the app. Also there is a tweet button you can use to share Web Maker with everyone :)
|
||||
|
||||
## Code panes
|
||||
|
||||
Coming soon...
|
||||
|
||||
## Pre-processors
|
||||
Coming soon...
|
||||
|
||||
## Adding external libraries
|
||||
Coming soon...
|
||||
|
||||
## Layouts
|
||||
Coming soon...
|
||||
|
||||
## Keyboard shortcuts
|
||||
Coming soon...
|
||||
|
||||
## Settings
|
||||
Coming soon...
|
||||
|
||||
## Frequently Asked Questions
|
||||
Coming soon...
|
||||
|
||||
## From the Developer
|
||||
|
||||
Hi! I am [Kushagra Gour](https://twitter.com/chinchang457), a frontend developer from India. I created Web Maker as a side project from myself because I wanted a frontend playground that was fast and didn't have to rely on network latency to generate realtime preview. Also something which I could use whenever and wherever I wanted, even wihtout Internet! I have written articles about why and how I created Web Maker and how you can benefit from it as a developer.
|
||||
|
||||
- FreeCodeCamp: https://medium.freecodecamp.org/web-maker-how-i-built-a-fast-offline-front-end-playground-9fe3629bc86f
|
||||
- Sitepoint: https://www.sitepoint.com/web-maker-an-offline-browser-based-codepen-alternative/
|
||||
|
||||
Make sure to read them if you like to get more behind the scenes of my journey with Web Maker.
|
||||
|
||||
## Let's Talk
|
||||
|
||||
Want to send in some suggestions, comments, feature requests or just have a question? Here are your options:
|
||||
|
||||
- Twitter — [ @webmakerApp](https://twitter.com/webmakerapp)
|
||||
- [Gitter chat]( http://gitter.im/web-maker-app/Lobby)
|
||||
- [Github repository]( https://github.com/chinchang/web-maker/issues)
|
||||
23
docs/_sidebar.md
Normal file
23
docs/_sidebar.md
Normal file
@@ -0,0 +1,23 @@
|
||||
- Getting started
|
||||
- [Quick start](quickstart.md)
|
||||
- [Writing more pages](more-pages.md)
|
||||
- [Custom navbar](custom-navbar.md)
|
||||
- [Cover page](cover.md)
|
||||
|
||||
- Customization
|
||||
- [Configuration](configuration.md)
|
||||
- [Themes](themes.md)
|
||||
- [List of Plugins](plugins.md)
|
||||
- [Write a Plugin](write-a-plugin.md)
|
||||
- [Markdown configuration](markdown.md)
|
||||
- [Language highlighting](language-highlight.md)
|
||||
|
||||
- Guide
|
||||
- [Deploy](deploy.md)
|
||||
- [Helpers](helpers.md)
|
||||
- [Vue compatibility](vue.md)
|
||||
- [CDN](cdn.md)
|
||||
- [Offline Mode(PWA)](pwa.md)
|
||||
- [Server-client renderer(SSR)](ssr.md)
|
||||
|
||||
- [Changelog](changelog.md)
|
||||
2
docs/docsify.min.js
vendored
Normal file
2
docs/docsify.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
382
docs/guide.md
Normal file
382
docs/guide.md
Normal file
@@ -0,0 +1,382 @@
|
||||
# Configuration
|
||||
|
||||
**docsify** supports two different ways of configuration. You can configure the `window.$docsify` or write configuration on the script tag via `data-*` attributes.
|
||||
|
||||
```html
|
||||
<!-- by $docsify -->
|
||||
<script>
|
||||
window.$docsify = {
|
||||
repo: 'QingWei-Li/docsify',
|
||||
maxLevel: 3,
|
||||
coverpage: true
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- or data-* -->
|
||||
<script
|
||||
src="//unpkg.com/docsify"
|
||||
data-repo="QingWei-Li/docsify"
|
||||
data-max-level="3"
|
||||
data-coverpage>
|
||||
</script>
|
||||
```
|
||||
|
||||
Both ways are compatible. However, the first way is recommended. It is clear and can be configured in a separate file.
|
||||
|
||||
!> In `window.$docsfiy`, the options should be written by camelCase.
|
||||
|
||||
## el
|
||||
|
||||
- Type: `String`
|
||||
- Default: `#app`
|
||||
|
||||
The DOM element to be mounted on initialization. It can be a CSS selector string or an actual HTMLElement.
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
el: '#app'
|
||||
}
|
||||
```
|
||||
|
||||
## repo
|
||||
|
||||
- Type: `String`
|
||||
- Default: `null`
|
||||
|
||||
Configure the repository url or a string of `username/repo` can add the [GitHub Corner](http://tholman.com/github-corners/) widget in the top right corner of the site.
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
repo: 'QingWei-Li/docsify',
|
||||
// or
|
||||
repo: 'https://github.com/QingWei-Li/docsify/'
|
||||
}
|
||||
```
|
||||
|
||||
## max-level
|
||||
|
||||
- Type: `Number`
|
||||
- Default: `6`
|
||||
|
||||
Maximum Table of content level.
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
maxLevel: 4
|
||||
}
|
||||
```
|
||||
|
||||
## load-navbar
|
||||
|
||||
- Type: `Boolean|String`
|
||||
- Default: `false`
|
||||
|
||||
Loads navbar from the Markdown file `_navbar.md` if **true**, or else from the path specified.
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
// load from _navbar.md
|
||||
loadNavbar: true,
|
||||
|
||||
// load from nav.md
|
||||
loadNavbar: 'nav.md'
|
||||
}
|
||||
```
|
||||
|
||||
## load-sidebar
|
||||
|
||||
- Type: `Boolean|String`
|
||||
- Default: `false`
|
||||
|
||||
Loads sidebar from the Markdown file `_sidebar.md` if **true**, or else from the path specified.
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
// load from _sidebar.md
|
||||
loadSidebar: true,
|
||||
|
||||
// load from summary.md
|
||||
loadSidebar: 'summary.md'
|
||||
}
|
||||
```
|
||||
|
||||
## sub-max-level
|
||||
|
||||
- Type: `Number`
|
||||
- Default: `0`
|
||||
|
||||
Add table of contents (TOC) in custom sidebar.
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
subMaxLevel: 2
|
||||
}
|
||||
```
|
||||
|
||||
## auto2top
|
||||
|
||||
- Type: `Boolean`
|
||||
- Default: `false`
|
||||
|
||||
Scrolls to the top of the screen when the route is changed.
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
auto2top: true
|
||||
}
|
||||
```
|
||||
|
||||
## homepage
|
||||
|
||||
- Type: `String`
|
||||
- Default: `README.md`
|
||||
|
||||
`README.md` in your docs folder will be treated as homepage for your website, but sometimes you may need to serve another file as your homepage.
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
// Change to /home.md
|
||||
homepage: 'home.md',
|
||||
|
||||
// Or use the readme in your repo
|
||||
homepage: 'https://raw.githubusercontent.com/QingWei-Li/docsify/master/README.md'
|
||||
}
|
||||
```
|
||||
|
||||
## base-path
|
||||
|
||||
- Type: `String`
|
||||
|
||||
Base path of the website. You can set it to another directory or another domain name.
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
basePath: '/path/',
|
||||
|
||||
// Load the files from another site
|
||||
basePath: 'https://docsify.js.org/',
|
||||
|
||||
// Even can load files from other repo
|
||||
basePath: 'https://raw.githubusercontent.com/ryanmcdermott/clean-code-javascript/master/'
|
||||
}
|
||||
```
|
||||
|
||||
## coverpage
|
||||
|
||||
- Type: `Boolean|String`
|
||||
- Default: `false`
|
||||
|
||||
Activate the [cover feature](cover.md). If true, it will load from `_coverpage.md`.
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
coverpage: true,
|
||||
|
||||
// Custom file name
|
||||
coverpage: 'cover.md'
|
||||
}
|
||||
```
|
||||
|
||||
## name
|
||||
|
||||
- Type: `String`
|
||||
|
||||
Website name as it appears in the sidebar.
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
name: 'docsify'
|
||||
}
|
||||
```
|
||||
|
||||
## name-link
|
||||
|
||||
- Type: `String`
|
||||
- Default: `window.location.pathname`
|
||||
|
||||
The name of the link.
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
nameLink: '/',
|
||||
|
||||
// For each route
|
||||
nameLink: {
|
||||
'/zh-cn/': '/zh-cn/',
|
||||
'/': '/'
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## markdown
|
||||
|
||||
- Type: `Function`
|
||||
|
||||
See [Markdown configuration](markdown.md).
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
// object
|
||||
markdown: {
|
||||
smartypants: true,
|
||||
renderer: {
|
||||
link: function() {
|
||||
// ...
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// function
|
||||
markdown: function (marked, renderer) {
|
||||
// ...
|
||||
return marked
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## theme-color
|
||||
|
||||
- Type: `String`
|
||||
|
||||
Customize the theme color. Use [CSS3 variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables) feature and polyfill in old browser.
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
themeColor: '#3F51B5'
|
||||
}
|
||||
```
|
||||
|
||||
## alias
|
||||
|
||||
- Type: `Object`
|
||||
|
||||
Set the route alias. You can freely manage routing rules. Supports RegExp.
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
alias: {
|
||||
'/foo/(+*)': '/bar/$1', // supports regexp
|
||||
'/zh-cn/changelog': '/changelog',
|
||||
'/changelog': 'https://raw.githubusercontent.com/QingWei-Li/docsify/master/CHANGELOG'
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## auto-header
|
||||
|
||||
- type: `Boolean`
|
||||
|
||||
If `loadSidebar` and `autoHeader` are both enabled, for each link in `_sidebar.md`, prepend a header to the page before converting it to html. Compare [#78](https://github.com/QingWei-Li/docsify/issues/78).
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
loadSidebar: true,
|
||||
autoHeader: true
|
||||
}
|
||||
```
|
||||
|
||||
## execute-script
|
||||
|
||||
- type: `Boolean`
|
||||
|
||||
Execute the script on the page. Only parse the first script tag([demo](themes)). If Vue is present, it is turned on by default.
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
executeScript: true
|
||||
}
|
||||
```
|
||||
|
||||
```markdown
|
||||
## This is test
|
||||
|
||||
<script>
|
||||
console.log(2333)
|
||||
</script>
|
||||
```
|
||||
|
||||
Note that if you are running an external script, e.g. an embedded jsfiddle demo, make sure to include the [external-script](plugins.md?id=external-script) plugin.
|
||||
|
||||
## no-emoji
|
||||
|
||||
- type: `Boolean`
|
||||
|
||||
Disabled emoji parse.
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
noEmoji: true
|
||||
}
|
||||
```
|
||||
|
||||
## merge-navbar
|
||||
|
||||
- type: `Boolean`
|
||||
|
||||
Navbar will be merged with the sidebar on smaller screens.
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
mergeNavbar: true
|
||||
}
|
||||
```
|
||||
|
||||
## format-updated
|
||||
|
||||
- type: `String|Function`
|
||||
|
||||
We can display the file update date through **{docsify-updated<span>}</span>** variable. And format it by `formatUpdated`.
|
||||
See https://github.com/lukeed/tinydate#patterns
|
||||
```js
|
||||
window.$docsify = {
|
||||
formatUpdated: '{MM}/{DD} {HH}:{mm}',
|
||||
|
||||
formatUpdated: function (time) {
|
||||
// ...
|
||||
|
||||
return time
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## external-link-target
|
||||
|
||||
- type: `String`
|
||||
- default: `_self`
|
||||
|
||||
Target to open external links. Default `'_blank'` (new window/tab)
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
externalLinkTarget: '_self' // default: '_blank'
|
||||
}
|
||||
```
|
||||
|
||||
## router-mode
|
||||
|
||||
- type: `String`
|
||||
- default: `history`
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
routerMode: 'history' // default: 'hash'
|
||||
}
|
||||
```
|
||||
|
||||
## noCompileLinks
|
||||
|
||||
- type: `Array`
|
||||
|
||||
|
||||
Sometimes we do not want docsify to handle our links. See [#203](https://github.com/QingWei-Li/docsify/issues/203)
|
||||
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
noCompileLinks: [
|
||||
'/foo',
|
||||
'/bar/.*'
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
BIN
docs/images/first-code.png
Normal file
BIN
docs/images/first-code.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
23
docs/index.html
Normal file
23
docs/index.html
Normal file
@@ -0,0 +1,23 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>web-maker - A blazing fast & offline web playground</title>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
<meta name="description" content="A blazing fast & offline web playground">
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<link rel="stylesheet" href="vue.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script>
|
||||
window.$docsify = {
|
||||
name: 'Web Maker',
|
||||
nameLink: '/',
|
||||
repo: 'https://github.com/chinchang/web-maker',
|
||||
// loadSidebar: true
|
||||
}
|
||||
</script>
|
||||
<script src="docsify.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
1
docs/vue.css
Normal file
1
docs/vue.css
Normal file
File diff suppressed because one or more lines are too long
23
git-hooks/pre-commit
Executable file
23
git-hooks/pre-commit
Executable file
@@ -0,0 +1,23 @@
|
||||
#!/bin/sh
|
||||
|
||||
# RUN PRETTIER
|
||||
jsjsonfiles=$(git diff --staged --name-only | grep ".*\.\(js\|json\)")
|
||||
echo "$jsjsonfiles" | xargs ./node_modules/.bin/prettier --single-quote --use-tabs --write
|
||||
echo "$jsjsonfiles" | xargs git add
|
||||
|
||||
# Fetch .js or .json filed from staged files
|
||||
jsfiles=$(git diff --staged --name-only --diff-filter=ACM | grep '\.js$')
|
||||
|
||||
[ -z "$jsfiles" ] && exit 0
|
||||
|
||||
# ESLINT CHECK
|
||||
eslintresult=$(./node_modules/.bin/eslint --ignore-pattern '/src/lib/*' --color $jsfiles --quiet)
|
||||
|
||||
if [[ $eslintresult != "" ]]; then
|
||||
echo "$eslintresult"
|
||||
exit 1 # reject
|
||||
fi
|
||||
|
||||
echo "\033[32m✔ ESlint passed\033[0m"
|
||||
|
||||
exit 0
|
||||
30
package.json
Normal file
30
package.json
Normal file
@@ -0,0 +1,30 @@
|
||||
{
|
||||
"name": "web-maker",
|
||||
"version": "2.9.6",
|
||||
"description": "A blazing fast & offline web playground",
|
||||
"main": "index.html",
|
||||
"devDependencies": {
|
||||
"babel-eslint": "^7.2.3",
|
||||
"eslint": "^4.1.1",
|
||||
"eslint-config-prettier": "^2.3.0",
|
||||
"prettier": "^1.5.2"
|
||||
},
|
||||
"scripts": {
|
||||
"install": "ln -sf ../../git-hooks/pre-commit .git/hooks/pre-commit"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/chinchang/web-maker.git"
|
||||
},
|
||||
"keywords": ["frontend", "playground", "web", "editor"],
|
||||
"author": "Kushagra Gour",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/chinchang/web-maker/issues"
|
||||
},
|
||||
"homepage": "https://webmakerapp.com",
|
||||
"dependencies": {
|
||||
"babel-polyfill": "^6.23.0",
|
||||
"babel-standalone": "^6.25.0"
|
||||
}
|
||||
}
|
||||
8
scripts/generate-atomizer-web.sh
Executable file
8
scripts/generate-atomizer-web.sh
Executable file
@@ -0,0 +1,8 @@
|
||||
npm install atomizer
|
||||
touch atomizer.js
|
||||
echo "require('atomizer');" > atomizer.js
|
||||
webpack --output-library Atomizer --output-library-target umd atomizer atomizer-web.js
|
||||
uglifyjs atomizer-web.js --compress > atomizer-web.min.js
|
||||
echo 'window.atomizer = new Atomizer();' >> atomizer-web.min.js
|
||||
mv atomizer-web.min.js src/lib/atomizer.browser.js
|
||||
rm atomizer-web.js atomizer.js
|
||||
BIN
src/FiraCode.ttf
Normal file
BIN
src/FiraCode.ttf
Normal file
Binary file not shown.
BIN
src/Fixedsys.ttf
Normal file
BIN
src/Fixedsys.ttf
Normal file
Binary file not shown.
BIN
src/Monoid.ttf
Normal file
BIN
src/Monoid.ttf
Normal file
Binary file not shown.
@@ -2,18 +2,19 @@
|
||||
// eslint-disable-next-line max-params
|
||||
window.trackEvent = function(category, action, label, value) {
|
||||
if (window.DEBUG) {
|
||||
utils.log('trackevent', category, action, label, value)
|
||||
utils.log('trackevent', category, action, label, value);
|
||||
return;
|
||||
}
|
||||
if (window.ga) {
|
||||
ga('send', 'event', category, action, label, value);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// if online, load after sometime
|
||||
if (navigator.onLine && !window.DEBUG) {
|
||||
/* eslint-disable */
|
||||
|
||||
// prettier-ignore
|
||||
setTimeout(function() {
|
||||
(function(i,s,o,g,r,a,m){
|
||||
i['GoogleAnalyticsObject']=r;
|
||||
|
||||
@@ -6,7 +6,9 @@
|
||||
d.reject = reject;
|
||||
});
|
||||
|
||||
// Add the native promise as a key on deferred object.
|
||||
d.promise = promise;
|
||||
// Also move all props/methods of native promise on the deferred obj.
|
||||
return Object.assign(d, promise);
|
||||
};
|
||||
})();
|
||||
3
src/detached-window.js
Normal file
3
src/detached-window.js
Normal file
@@ -0,0 +1,3 @@
|
||||
window.addEventListener('message', e => {
|
||||
document.querySelector('iframe').src = e.data;
|
||||
});
|
||||
@@ -11,7 +11,7 @@
|
||||
}
|
||||
}
|
||||
function init() {
|
||||
var dropdowns = [].slice.call($all('[dropdown]'));
|
||||
var dropdowns = $all('[dropdown]');
|
||||
dropdowns.forEach(function(dropdown) {
|
||||
dropdown.addEventListener('click', function(e) {
|
||||
closeOpenDropdown(e.currentTarget);
|
||||
|
||||
@@ -14,17 +14,24 @@ chrome.tabs.onCreated.addListener(function (tab) {
|
||||
// If a new tab is opened (without any URL), check user's
|
||||
// replace Tab setting and act accordingly. Default is false.
|
||||
if (tab.url === 'chrome://newtab/') {
|
||||
chrome.storage.sync.get({
|
||||
chrome.storage.sync.get(
|
||||
{
|
||||
replaceNewTab: false
|
||||
}, function(items) {
|
||||
},
|
||||
function(items) {
|
||||
if (items.replaceNewTab) {
|
||||
chrome.tabs.update(tab.id, {
|
||||
chrome.tabs.update(
|
||||
tab.id,
|
||||
{
|
||||
url: chrome.extension.getURL('index.html')
|
||||
}, function callback() {
|
||||
},
|
||||
function callback() {
|
||||
console.log('ho gaya');
|
||||
});
|
||||
}
|
||||
});
|
||||
);
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -39,4 +46,4 @@ chrome.runtime.onInstalled.addListener(function callback (details) {
|
||||
}
|
||||
});
|
||||
|
||||
chrome.runtime.setUninstallURL('https://kushagragour.in/lab/web-maker/uninstall/');
|
||||
chrome.runtime.setUninstallURL('https://webmakerapp.com/uninstall/');
|
||||
|
||||
503
src/index.html
503
src/index.html
@@ -8,48 +8,79 @@
|
||||
|
||||
<link rel="stylesheet" href="lib/codemirror/addon/hint/show-hint.css">
|
||||
<link rel="stylesheet" href="lib/codemirror/addon/fold/foldgutter.css">
|
||||
<link rel="stylesheet" href="lib/codemirror/addon/dialog/dialog.css">
|
||||
<link rel="stylesheet" href="lib/hint.min.css">
|
||||
<link rel="stylesheet" href="lib/inlet.css">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<style id="fontStyleTemplate" type="template">
|
||||
@font-face {
|
||||
font-family: 'fontname';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url(../fontname.ttf) format('truetype');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
|
||||
}
|
||||
.Codemirror pre {
|
||||
font-family: 'fontname', monospace;
|
||||
}
|
||||
</style>
|
||||
<style type="text/css" id="fontStyleTag">
|
||||
@font-face {
|
||||
font-family: 'FiraCode';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url(../FiraCode.ttf) format('truetype');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
|
||||
}
|
||||
.Codemirror pre {
|
||||
font-family: 'FiraCode', monospace;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="main-container">
|
||||
<div class="main-header">
|
||||
<div class="main-header__btn-wrap fr flex flex-v-center">
|
||||
<a id="js-add-library-btn" class="fleex-v-center hint--bottom-left" aria-label="Add a JS/CSS library">
|
||||
<input type="text" id="js-title-input" title="Click to edit" class="item-title-input" value="Untitled Work">
|
||||
<div class="main-header__btn-wrap flex flex-v-center">
|
||||
<a id="runBtn" class="hide flex flex-v-center hint--rounded hint--bottom-left" aria-label="Run preview (Ctrl/⌘ + Shift + 5)" d-click="setPreviewContent">
|
||||
<svg style="width: 14px; height: 14px;">
|
||||
<use xlink:href="#play-icon"></use>
|
||||
</svg>Run
|
||||
</a>
|
||||
|
||||
<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>
|
||||
|
||||
<a class="flex flex-v-center hint--bottom-left" aria-label="Start a new creation" d-click="onNewBtnClick">
|
||||
<a class="flex flex-v-center hint--rounded hint--bottom-left" aria-label="Start a new creation" d-click="onNewBtnClick">
|
||||
<svg style="vertical-align:middle;width:14px;height:14px" viewBox="0 0 24 24">
|
||||
<path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" />
|
||||
</svg>New
|
||||
</a>
|
||||
<a id="saveBtn" class="flex flex-v-center hint--bottom-left" aria-label="Save current creation (Ctrl/⌘ + S)" d-click="onSaveBtnClick">
|
||||
<a id="saveBtn" class="flex flex-v-center hint--rounded hint--bottom-left" aria-label="Save current creation (Ctrl/⌘ + S)" d-click="onSaveBtnClick">
|
||||
<svg style="vertical-align:middle;width:14px;height:14px" viewBox="0 0 24 24">
|
||||
<path d="M15,9H5V5H15M12,19A3,3 0 0,1 9,16A3,3 0 0,1 12,13A3,3 0 0,1 15,16A3,3 0 0,1 12,19M17,3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V7L17,3Z" />
|
||||
</svg>Save</a>
|
||||
<a class="flex flex-v-center hint--bottom-left" aria-label="Open a saved creation (Ctrl/⌘ + O)" d-click="onOpenBtnClick">
|
||||
<a class="flex flex-v-center hint--rounded hint--bottom-left" aria-label="Open a saved creation (Ctrl/⌘ + O)" d-click="onOpenBtnClick">
|
||||
<svg style="width:14px;height:14px;vertical-align:middle;" viewBox="0 0 24 24">
|
||||
<path d="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z" />
|
||||
</svg>Open
|
||||
</a>
|
||||
</div>
|
||||
<input type="text" id="js-title-input" title="Click to edit" class="item-title-input" value="Untitled Work">
|
||||
</div>
|
||||
<div class="content-wrap flex flex-grow">
|
||||
<div class="code-side" id="js-code-side">
|
||||
<div data-code-wrap-id="0" id="js-html-code" data-type="html" class="code-wrap">
|
||||
<div class="js-code-wrap__header code-wrap__header" title="Double click to toggle code pane">
|
||||
<div class="btn-group" dropdown title="Click to change">
|
||||
<label class="btn-group" dropdow title="Click to change">
|
||||
<span id="js-html-mode-label" class="code-wrap__header-label">HTML</span><span class="caret"></span>
|
||||
<ul class="js-modes-menu dropdown__menu">
|
||||
<li><a data-type="html" data-mode="html">HTML</a></li>
|
||||
<li><a data-type="html" data-mode="markdown">Markdown</a></li>
|
||||
<li><a data-type="html" data-mode="jade">Pug</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<select data-type="html" class="js-mode-select hidden-select" name="">
|
||||
<option value="html">HTML</option>
|
||||
<option value="markdown">Markdown</option>
|
||||
<option value="jade">Pug</option>
|
||||
</select>
|
||||
</label>
|
||||
<div class="code-wrap__header-right-options">
|
||||
<a class="js-code-collapse-btn code-wrap__header-btn code-wrap__collapse-btn" title="Toggle code pane">
|
||||
</a>
|
||||
@@ -58,17 +89,23 @@
|
||||
</div>
|
||||
<div data-code-wrap-id="1" id="js-css-code" data-type="css" class="code-wrap">
|
||||
<div class="js-code-wrap__header code-wrap__header" title="Double click to toggle code pane">
|
||||
<div class="btn-group" dropdown title="Click to change">
|
||||
<label class="btn-group" title="Click to change">
|
||||
<span id="js-css-mode-label" class="code-wrap__header-label">CSS</span><span class="caret"></span>
|
||||
<ul class="js-modes-menu dropdown__menu">
|
||||
<li><a data-type="css" data-mode="css">CSS</a></li>
|
||||
<li><a data-type="css" data-mode="scss">SCSS</a></li>
|
||||
<li><a data-type="css" data-mode="sass">SASS</a></li>
|
||||
<li><a data-type="css" data-mode="less">LESS</a></li>
|
||||
<li><a data-type="css" data-mode="stylus">Stylus</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<select data-type="css" class="js-mode-select hidden-select" name="">
|
||||
<option value="css">CSS</option>
|
||||
<option value="scss">SCSS</option>
|
||||
<option value="sass">SASS</option>
|
||||
<option value="less">LESS</option>
|
||||
<option value="stylus">Stylus</option>
|
||||
<option value="acss">Atomic CSS</option>
|
||||
</select>
|
||||
</label>
|
||||
<div class="code-wrap__header-right-options">
|
||||
<a href="#" id="cssSettingsBtn" title="Atomic CSS configuration" d-click="openCssSettingsModal" class="code-wrap__header-btn hide">
|
||||
<svg>
|
||||
<use xlink:href="#settings-icon"></use>
|
||||
</svg>
|
||||
</a>
|
||||
<a class="js-code-collapse-btn code-wrap__header-btn code-wrap__collapse-btn" title="Toggle code pane">
|
||||
</a>
|
||||
</div>
|
||||
@@ -76,15 +113,15 @@
|
||||
</div>
|
||||
<div data-code-wrap-id="2" id="js-js-code" data-type="js" class="code-wrap">
|
||||
<div class="js-code-wrap__header code-wrap__header" title="Double click to toggle code pane">
|
||||
<div class="btn-group" dropdown title="Click to change">
|
||||
<label class="btn-group" title="Click to change">
|
||||
<span id="js-js-mode-label" class="code-wrap__header-label">JS</span><span class="caret"></span>
|
||||
<ul class="js-modes-menu dropdown__menu">
|
||||
<li><a data-type="js" data-mode="js">JS</a></li>
|
||||
<li><a data-type="js" data-mode="coffee">CoffeeScript</a></li>
|
||||
<li><a data-type="js" data-mode="es6">ES6 (Babel)</a></li>
|
||||
<li><a data-type="js" data-mode="typescript">TypeScript</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<select data-type="js" class="js-mode-select hidden-select">
|
||||
<option value="js">JS</option>
|
||||
<option value="coffee">CoffeeScript</option>
|
||||
<option value="es6">ES6 (Babel)</option>
|
||||
<option value="typescript">TypeScript</option>
|
||||
</select>
|
||||
</label>
|
||||
<div class="code-wrap__header-right-options">
|
||||
<a class="js-code-collapse-btn code-wrap__header-btn code-wrap__collapse-btn" title="Toggle code pane">
|
||||
</a>
|
||||
@@ -93,10 +130,33 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="demo-side" id="js-demo-side">
|
||||
<iframe src="about://blank" frameborder="0" id="demo-frame"></iframe>
|
||||
<iframe src="about://blank" frameborder="0" id="demo-frame" allowfullscreen></iframe>
|
||||
<div id="consoleEl" class="console is-minimized">
|
||||
<div id="consoleLogEl" class="console__log" class="code">
|
||||
<div class="js-console__header code-wrap__header" title="Double click to toggle console">
|
||||
<span class="code-wrap__header-label">Console (<span id="logCountEl">0</span>)</span>
|
||||
<div class="code-wrap__header-right-options">
|
||||
<a class="code-wrap__header-btn" title="Clear console (CTRL + L)" d-click="onClearConsoleBtnClick">
|
||||
<svg>
|
||||
<use xlink:href="#cancel-icon"></use>
|
||||
</svg>
|
||||
</a>
|
||||
<a class="code-wrap__header-btn code-wrap__collapse-btn" title="Toggle console" d-click="toggleConsole">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
</div>
|
||||
<div id="consolePromptEl" class="console__prompt flex flex-v-center">
|
||||
<svg width="18" height="18" fill="#346fd2">
|
||||
<use xlink:href="#chevron-icon"></use>
|
||||
</svg>
|
||||
<input d-keyup="evalConsoleExpr" class="console-exec-input">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="global-console-container" id="globalConsoleContainerEl"></div>
|
||||
<div id="footer" class="footer">
|
||||
<div class="footer__right fr">
|
||||
<a id="saveHtmlBtn" class="mode-btn hint--rounded hint--top-left" data-hint="Save as HTML file">
|
||||
<svg viewBox="0 0 24 24">
|
||||
@@ -141,6 +201,12 @@
|
||||
<rect x="0" y="0" width="100" height="100" />
|
||||
</svg>
|
||||
</a>
|
||||
<a class="mode-btn hint--top-left hint--rounded" aria-label="Detach Preview" d-click="openDetachedPreview">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path d="M22,17V7H6V17H22M22,5A2,2 0 0,1 24,7V17C24,18.11 23.1,19 22,19H16V21H18V23H10V21H12V19H6C4.89,19 4,18.11 4,17V7A2,2 0 0,1 6,5H22M2,3V15H0V3A2,2 0 0,1 2,1H20V3H2Z" />
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
|
||||
<div class="footer__separator"></div>
|
||||
|
||||
@@ -150,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>
|
||||
@@ -158,18 +224,22 @@
|
||||
|
||||
</div>
|
||||
|
||||
<a href="http://kushagragour.in/lab/web-maker/" target="_blank"><div class="logo"></div></a>
|
||||
<a href="https://webmakerapp.com/" target="_blank"><div class="logo"></div></a>
|
||||
© Web Maker
|
||||
<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" aria-label="Help">
|
||||
<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="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>
|
||||
</a>
|
||||
<a d-open-modal="keyboardShortcutsModal" data-event-category="ui" data-event-action="keyboardShortcutButtonClick" class="footer__link hint--rounded hint--top-right" aria-label="Keyboard shortcuts">
|
||||
<svg style="width:20px; height:20px; vertical-align:text-bottom">
|
||||
<use xlink:href="#keyboard-icon"></use>
|
||||
</svg>
|
||||
</a>
|
||||
<!-- #00ACED -->
|
||||
<a class="footer__link hint--rounded hint--top-right" data-hint="Tweet about 'Web Maker'" href="http://twitter.com/share?url=https://kushagragour.in/lab/web-maker/&text=Web Maker - A blazing fast %26 offline web playground! via @webmakerApp&related=webmakerApp&hashtags=web,playground,chrome,extension" target="_blank">
|
||||
<svg viewBox="0 0 16 16" style="width:20px; height:20px; vertical-align:text-bottom">
|
||||
<path id="twitter-icon" d="M15.969,3.058c-0.586,0.26-1.217,0.436-1.878,0.515c0.675-0.405,1.194-1.045,1.438-1.809
|
||||
c-0.632,0.375-1.332,0.647-2.076,0.793c-0.596-0.636-1.446-1.033-2.387-1.033c-1.806,0-3.27,1.464-3.27,3.27 c0,0.256,0.029,0.506,0.085,0.745C5.163,5.404,2.753,4.102,1.14,2.124C0.859,2.607,0.698,3.168,0.698,3.767 c0,1.134,0.577,2.135,1.455,2.722C1.616,6.472,1.112,6.325,0.671,6.08c0,0.014,0,0.027,0,0.041c0,1.584,1.127,2.906,2.623,3.206 C3.02,9.402,2.731,9.442,2.433,9.442c-0.211,0-0.416-0.021-0.615-0.059c0.416,1.299,1.624,2.245,3.055,2.271 c-1.119,0.877-2.529,1.4-4.061,1.4c-0.264,0-0.524-0.015-0.78-0.046c1.447,0.928,3.166,1.469,5.013,1.469 c6.015,0,9.304-4.983,9.304-9.304c0-0.142-0.003-0.283-0.009-0.423C14.976,4.29,15.531,3.714,15.969,3.058z"/>
|
||||
<a class="footer__link hint--rounded hint--top-right" aria-label="Tweet about 'Web Maker'" href="http://twitter.com/share?url=https://webmakerapp.com/&text=Web Maker - A blazing fast %26 offline web playground! via @webmakerApp&related=webmakerApp&hashtags=web,playground,chrome,extension" target="_blank">
|
||||
<svg style="width:20px; height:20px; vertical-align:text-bottom">
|
||||
<use xlink:href="#twitter-icon"></use>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
@@ -178,15 +248,18 @@
|
||||
|
||||
<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/</p>
|
||||
<textarea id="js-external-js" class="full-width" id="" cols="30" rows="5" placeholder="Start typing name of a library. Put each library in new line"></textarea>
|
||||
|
||||
<h3>CSS</h3>
|
||||
<textarea id="js-external-css" class="full-width" id="" cols="30" rows="5" placeholder="Start typing name of a library. Put each library in new line"></textarea>
|
||||
|
||||
<div style="margin-top:20px;">
|
||||
<input type="text" id="externalLibrarySearchInput" class="full-width" placeholder="Type here to search libraries">
|
||||
<div class="tar opacity--70">
|
||||
<small>Powered by cdnjs</small>
|
||||
</div>
|
||||
<div style="margin:20px 0;">
|
||||
Choose from popular libraries:
|
||||
<select name="" id="js-add-library-select">
|
||||
<option value="">-------</option>
|
||||
@@ -198,110 +271,55 @@
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<h3>JavaScript</h3>
|
||||
<p style="font-size: 0.8em;" class="opacity--70">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>
|
||||
<textarea id="js-external-js" class="full-width" id="" cols="30" rows="5" placeholder="Start typing name of a library. Put each library in new line"></textarea>
|
||||
|
||||
<h3>CSS</h3>
|
||||
<textarea id="js-external-css" class="full-width" id="" cols="30" rows="5" placeholder="Start typing name of a library. Put each library in new line"></textarea>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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);">
|
||||
<textarea id="acssSettingsTextarea" cols="30" rows="10"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal" id="helpModal">
|
||||
<div class="modal__content">
|
||||
<h1>Web Maker<small style="font-size:14px;"> v2.4.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>
|
||||
<p>Tweet out your feature requests, comments & suggestions to <a target="_blank" href="https://twitter.com/webmakerApp">@webmakerApp</a>.</p>
|
||||
<p>Like this extension? Please <a href="https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh/reviews" target="_blank">rate it here</a>.</p>
|
||||
<p>
|
||||
<a aria-label="Rate Web Maker" href="https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh/reviews" target="_blank" class="btn btn-icon"><svg><use xlink:href="#heart-icon"></use></svg>Show some love</a>
|
||||
<a aria-label="Report a Bug" href="https://github.com/chinchang/web-maker/issues" target="_blank" class="btn btn-icon"><svg><use xlink:href="#bug-icon"></use></svg>Report a Bug</a>
|
||||
<a aria-label="Contribute on Github" href="https://github.com/chinchang/web-maker" target="_blank" class="btn btn-icon"><svg><use xlink:href="#github-icon"></use></svg>Contribute on Github</a>.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<h3>Awesome libraries used</h3>
|
||||
<ul>
|
||||
<li><a target="_blank" href="http://kushagragour.in/lab/hint/">Hint.css</a> - By me :)</li>
|
||||
<li><a target="_blank" href="https://nathancahill.github.io/Split.js/">Split.js</a> - Nathan Cahill</li>
|
||||
<li><a target="_blank" href="https://codemirror.net/">Codemirror</a> - Marijn Haverbeke</li>
|
||||
<li><a target="_blank" href="https://emmet.io/">Emmet</a> - Sergey Chikuyonok</li>
|
||||
<li><a target="_blank" href="http://esprima.org/">Esprima</a> - Ariya Hidayat</li>
|
||||
<li><a target="_blank" href="https://github.com/estools/escodegen">Escodegen</a> - Yusuke Suzuki</li>
|
||||
<li><a target="_blank" href="https://github.com/enjalot/Inlet">Inlet</a> - Ian Johnson</li>
|
||||
<li><a target="_blank" href="https://kushagragour.in/lab/web-maker">Web Maker!</a> - whhat!</li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<h3>License</h3>
|
||||
"Web Maker" is open-source under the <a href="https://opensource.org/licenses/MIT" target="_blank">MIT License</a>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="modal__content" d-html="partials/help-modal.html"></div>
|
||||
</div>
|
||||
|
||||
<div class="modal" id="keyboardShortcutsModal">
|
||||
<div class="modal__content" d-html="partials/keyboard-shortcuts.html"></div>
|
||||
</div>
|
||||
|
||||
<div class="modal" id="onboardModal">
|
||||
<div class="modal__content" d-html="partials/onboard-modal.html"></div>
|
||||
</div>
|
||||
|
||||
<div class="modal modal--settings" id="settingsModal">
|
||||
<div class="modal__content">
|
||||
|
||||
<div class="tac">
|
||||
<svg width="130px" height="50px">
|
||||
<use xlink:href="#logo" />
|
||||
<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>
|
||||
<h1 style="margin-top:20px">Welcome to Web Maker</h1>
|
||||
</div>
|
||||
<div class="tac">
|
||||
<!-- <p>Web Maker lets you do web experiments quickly and even when you are offline.</p> -->
|
||||
|
||||
<p>
|
||||
By default, Web Maker can be started by clicking the <svg class="relative" style="top:5px;" width="40" height="30"><use xlink:href="#logo" /></svg> button in top-right side of your browser. But you can choose to make Web Maker show in every new tab that you open:
|
||||
</p>
|
||||
|
||||
<h2 style="text-decoration: underline;">Choose one:</h2>
|
||||
<div class="onboard-selection-wrap flex">
|
||||
<div class="onboard-selection" id="onboardShowInTabOptionBtn" d-click="onShowInTabClicked">
|
||||
<!-- Awesome free vector from freepik.com -->
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200" viewBox="180 200 340 320" xml:space="preserve">
|
||||
<path style="fill:#A5A5A5;stroke: #555;stroke-width: 11px;" d="M503.916,256v43.116H191.326V256c0-11.906,9.651-21.558,21.558-21.558h269.474
|
||||
C494.264,234.442,503.916,244.094,503.916,256z"></path>
|
||||
<path style="fill:#FED766;stroke-width: 11px;stroke: #555;" d="M503.916,288.337v194.021c0,11.906-9.651,21.558-21.558,21.558H212.884
|
||||
c-11.906,0-21.558-9.651-21.558-21.558V288.337h43.116v-64.674c0-5.953,4.826-10.779,10.779-10.779h64.674
|
||||
c5.953,0,10.779,4.826,10.779,10.779v64.674H503.916z"></path>
|
||||
<rect width="120px" height="50px" rx="5" ry="5" x="210" y="315px" style="fill:rgba(0,0,0,0.25);"></rect>
|
||||
<rect width="120px" height="50px" rx="5" ry="5" x="210" y="372px" style="fill:rgba(0,0,0,0.25);"></rect>
|
||||
<rect width="120px" height="50px" rx="5" ry="5" x="210" y="430px" style="fill:rgba(0,0,0,0.25);"></rect>
|
||||
<rect width="140px" height="165px" rx="5" ry="5" x="345" y="315px" style="fill:#f3f3f3;"></rect>
|
||||
</svg>
|
||||
<div class="onboard-selection-text">Show in new tab</div>
|
||||
</div>
|
||||
<div style="opacity:0.7;">OR</div>
|
||||
|
||||
<div class="onboard-selection selected" id="onboardDontShowInTabOptionBtn" d-click="onDontShowInTabClicked">
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200" viewBox="180 200 340 320" xml:space="preserve">
|
||||
<path style="fill:#A5A5A5;stroke: #555;stroke-width: 11px;" d="M503.916,256v43.116H191.326V256c0-11.906,9.651-21.558,21.558-21.558h269.474
|
||||
C494.264,234.442,503.916,244.094,503.916,256z"></path>
|
||||
<path style="fill:#FED766;stroke-width: 11px;stroke: #555;" d="M503.916,288.337v194.021c0,11.906-9.651,21.558-21.558,21.558H212.884
|
||||
c-11.906,0-21.558-9.651-21.558-21.558V288.337h43.116v-64.674c0-5.953,4.826-10.779,10.779-10.779h64.674
|
||||
c5.953,0,10.779,4.826,10.779,10.779v64.674H503.916z"></path>
|
||||
<rect width="200px" height="20px" rx="5" ry="5" x="250" y="365px" style="fill:#f3f3f3;"></rect>
|
||||
</svg>
|
||||
<div class="onboard-selection-text">Don't show in new tab</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
You can change this later from Settings (<svg style="width:18px;height:18px;position:relative;top:3px;fill:#888" viewBox="0 0 24 24"><use xlink:href="#settings-icon"></use></svg>) in bottom right of the app.
|
||||
</p>
|
||||
|
||||
<p class="tac">
|
||||
<button class="btn" d-click="closeAllOverlays">Lets start!</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal" id="settingsModal">
|
||||
<div class="modal__content">
|
||||
</a>
|
||||
<h1>Settings</h1>
|
||||
|
||||
<h3>Indentation</h3>
|
||||
<p>
|
||||
<div class="line">
|
||||
<div class="line" title="I know this is tough, but you have to decide one!">
|
||||
<label>
|
||||
<input type="radio" checked="true" name="indentation" value="spaces" d-change="updateSetting" data-setting="indentWith"> Spaces
|
||||
</label>
|
||||
@@ -309,7 +327,7 @@
|
||||
<input type="radio" name="indentation" value="tabs" d-change="updateSetting" data-setting="indentWith"> Tabs
|
||||
</label>
|
||||
</div>
|
||||
<label class="line">
|
||||
<label class="line" title="">
|
||||
Indentation Size <input type="range" class="va-m ml-1" value="2" min="1" max="7" list="indentationSizeList" data-setting="indentSize" d-change="updateSetting">
|
||||
<span id="indentationSizeValueEl"></span>
|
||||
<datalist id="indentationSizeList">
|
||||
@@ -322,11 +340,12 @@
|
||||
<option>7</option>
|
||||
</datalist>
|
||||
</label>
|
||||
</p>
|
||||
<hr>
|
||||
|
||||
<h3>Editor</h3>
|
||||
<p>
|
||||
<div class="flex">
|
||||
|
||||
<div>
|
||||
<label class="line">
|
||||
Default Preprocessors
|
||||
</label>
|
||||
@@ -342,6 +361,7 @@
|
||||
<option value="sass">SASS</option>
|
||||
<option value="less">LESS</option>
|
||||
<option value="stylus">Stylus</option>
|
||||
<option value="acss">Atomic CSS</option>
|
||||
</select>
|
||||
<select style="flex:1;margin:0 20px" data-setting="jsMode" d-change="updateSetting">
|
||||
<option value="js">JS</option>
|
||||
@@ -354,6 +374,18 @@
|
||||
Theme
|
||||
<select style="flex:1;margin:0 20px" data-setting="editorTheme" d-change="updateSetting"></select>
|
||||
</label>
|
||||
<label class="line">
|
||||
Font
|
||||
<select style="flex:1;margin:0 20px" data-setting="editorFont" d-change="updateSetting">
|
||||
<option value="FiraCode">Fira Code</option>
|
||||
<option value="Inconsolata">Inconsolata</option>
|
||||
<option value="Monoid">Monoid</option>
|
||||
<option value="FixedSys">FixedSys</option>
|
||||
<option disabled="disabled">----</option>
|
||||
<option value="other">Other font from system</option>
|
||||
</select>
|
||||
<input id="customEditorFontInput" type="text" value="" placeholder="Custom font name here" data-setting="editorCustomFont" d-change="updateSetting">
|
||||
</label>
|
||||
<label class="line">
|
||||
Font Size <input type="number" value="16" data-setting="fontSize" d-change="updateSetting"> px
|
||||
|
||||
@@ -367,18 +399,43 @@
|
||||
<input type="radio" name="keymap" value="vim" d-change="updateSetting" data-setting="keymap"> Vim
|
||||
</label>
|
||||
</div>
|
||||
<label class="line">
|
||||
</div>
|
||||
<div class="ml-2">
|
||||
<label class="line" title="Toggle wrapping of long sentences onto new line">
|
||||
<input type="checkbox" d-change="updateSetting" data-setting="lineWrap"> Line wrap
|
||||
</label>
|
||||
<label class="line" title="Your Preview will refresh when you resize the preview split">
|
||||
<input type="checkbox" d-change="updateSetting" data-setting="refreshOnResize"> Refresh preview on resize
|
||||
</label>
|
||||
<label class="line" title="Turns on the auto-completion suggestions as you type">
|
||||
<input type="checkbox" d-change="updateSetting" data-setting="autoComplete"> Auto-complete suggestions
|
||||
</label>
|
||||
<label class="line" title="Refreshes the preview as you code. Otherwise use the Run button">
|
||||
<input type="checkbox" d-change="updateSetting" data-setting="autoPreview"> Auto-preview
|
||||
</label>
|
||||
<label class="line" title="Auto-save keeps saving your code at regular intervals after you hit the first save manually">
|
||||
<input type="checkbox" d-change="updateSetting" data-setting="autoSave"> Auto-save
|
||||
</label>
|
||||
<label class="line" title="Loads the last open creation when app starts">
|
||||
<input type="checkbox" d-change="updateSetting" data-setting="preserveLastCode"> Preserve last written code
|
||||
</label>
|
||||
<label class="line">
|
||||
<label class="line" title="Turning this on will start showing Web Maker in every new tab you open">
|
||||
<input type="checkbox" d-change="updateSetting" data-setting="replaceNewTab"> Replace new tab page
|
||||
</label>
|
||||
</p>
|
||||
<label class="line" title="Preserves the console logs across your preview refreshes">
|
||||
<input type="checkbox" d-change="updateSetting" data-setting="preserveConsoleLogs"> Preserve console logs
|
||||
</label>
|
||||
<label class="line" title="Switch to lighter version for better performance. Removes things like blur etc.">
|
||||
<input type="checkbox" d-change="updateSetting" data-setting="lightVersion"> Fast/light version
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<h3>Fun</h3>
|
||||
<p>
|
||||
<label class="line">
|
||||
<label class="line" title="Enjoy wonderful particle blasts while you type">
|
||||
<input type="checkbox" d-change="updateSetting" data-setting="isCodeBlastOn"> Code blast!
|
||||
</label>
|
||||
</p>
|
||||
@@ -386,118 +443,24 @@
|
||||
</div>
|
||||
|
||||
<div class="modal" id="notificationsModal">
|
||||
<div class="modal__content">
|
||||
<h1>Whats new?</h1>
|
||||
<div class="notification">
|
||||
<span class="notification__version">2.4.0</span>
|
||||
<ul>
|
||||
<li><strong>Import/Export</strong>: Your creations are most important. Now export all your creations into a single file as a backup that can be imported anytime & anywhere.</li>
|
||||
<li><strong>Editor themes</strong>: You have been heard. Now you can choose from a huge list of wonderful editor themes!</li>
|
||||
<li><strong>Identation settings</strong>: Not a spaces fan? Switch to tabs and set your indentation size.</li>
|
||||
<li><strong>Vim key bindings</strong>: Rejoice Vim lovers!</li>
|
||||
<li><strong>Code blast</strong>: Why don't you try coding with this switched on from the settings? Go on...</li>
|
||||
<li><strong>Important</strong>: Due to security policy changes from Chrome 57 onwards, Web Maker now allows loading external JavaScript libraries only from certain whitelisted 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/)</li>
|
||||
<li>Save button now highlights when you have unsaved changes.</li>
|
||||
<li>Jade is now called Pug. Just a name change.</li>
|
||||
|
||||
<li><a href="https://github.com/chinchang/web-maker/issues" target="_blank">Suggest features or report bugs.</a></li>
|
||||
<li>Thank you for being a part of this community of thousands of awesome developers. If you find Web Maker helpful, <a href="https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh/reviews" target="_blank" class="btn">Please rate Web Maker <span class="star"></span></a> & <a href="http://twitter.com/share?url=https://kushagragour.in/lab/web-maker/&text=Web Maker - A blazing fast %26 offline web playground! via @webmakerApp&related=webmakerApp&hashtags=web,editor,chrome,extension" target="_blank" target="_blank" class="btn">share it</a>.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="notification">
|
||||
<span class="notification__version">2.3.2</span>
|
||||
<ul>
|
||||
<li>Update Babel to support latest and coolest ES6 features.</li>
|
||||
<li>Improve onboarding experience at first install.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="notification">
|
||||
<span class="notification__version">2.3.1</span>
|
||||
<ul>
|
||||
<li><strong>Bugfix</strong> - Splitting of code and preview panes is remembered by the editor.</li>
|
||||
<li>Title of the creation is used for the file name when saving as HTML.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="notification">
|
||||
<span class="notification__version">2.3.0</span>
|
||||
<ul>
|
||||
<li><strong>Add Library Autocompletion</strong> - Just start typing the name of library and you'll be shown matching libraries from cdnjs.</li>
|
||||
<li><strong>Preview Screenshot Capture</strong> - Want to grab a nice screenshot of your creation. You have it! Click and capture.</li>
|
||||
<li><strong>Auto Indent Code</strong> - Select your code and hit Shift-Tab to auto-indent it!</li>
|
||||
<li><strong>Keyboard Navigation in Saved List</strong> - Now select your creation using arrow keys and hit ENTER to open it.</li>
|
||||
<li>Highlight active line in code panes.</li>
|
||||
<li><strong>Bugfix</strong> - Fix in generated title of new creation.</li>
|
||||
<li><strong>Bugfix</strong> - HTML autocompletion is manual triggered now with Ctrl+Space.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="notification">
|
||||
<span class="notification__version">2.2.0</span>
|
||||
<ul>
|
||||
<li><strong>Code Autocompletion</strong> - See code suggestions while you type!</li>
|
||||
<li><strong>Full Screen Preview</strong> - Checkout your creation in a full-screen layout.</li>
|
||||
<li><strong>SASS</strong> - SASS support added for CSS.</li>
|
||||
<li><strong>Faster CSS update</strong> - Preview updates instantly without refresh when just CSS is changed.</li>
|
||||
<li><strong>Bugfix</strong> - Indentation fixed while going on new line.</li>
|
||||
<li><strong>Bugfix</strong> - Works even in Chrome Canary now. Though libraries can be added only through CDNs.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="notification">
|
||||
<span class="notification__version">2.1.0</span>
|
||||
<ul>
|
||||
<li><strong>TypeScript</strong> - Now you can code in TypeScript too!</li>
|
||||
<li><strong>Stylus Preprocessor</strong> - Stylus supported adding for CSS.</li>
|
||||
<li><strong>Code Folding</strong> - Collapse large code blocks for easy editing.</li>
|
||||
<li><strong>Bugfix</strong> - Support JSX in JavaScript.</li>
|
||||
<li>Better onboarding for first time users.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="notification">
|
||||
<span class="notification__version">2.0.0</span>
|
||||
<ul>
|
||||
<li><strong>Save and Load</strong> - Long pending and super-useful, now you can save your creations and resume them anytime later.</li>
|
||||
<li><strong>Insert JS & CSS</strong> - Load popular JavaScript & CSS libraries in your work without writing any code.</li>
|
||||
<li><strong>Collapsed Panes</strong> - Collapse/uncollapse code panes with a single click. Your pane configuration is even saved with every creation!</li>
|
||||
<li><strong>Quick color & number change</strong> - Click on any color or number and experiment with quick values using a slider.</li>
|
||||
<li><strong>Linting</strong> - See your code errors right where you are coding.</li>
|
||||
<li>No more browser hang due to infinite loops!</li>
|
||||
<!-- <li><a href="https://kushagragour.in/blog/web-maker-2">Read more about this big release</a></li> -->
|
||||
</ul>
|
||||
</div>
|
||||
<div class="notification">
|
||||
<span class="notification__version">1.7.0</span>
|
||||
<ul>
|
||||
<li><strong>Preprocessors!</strong> - Enjoy a whole list of preprocessors for HTML(Jade & markdown), CSS(SCSS & LESS) and JavaScript(CoffeeScript & Babel).</li>
|
||||
<li>More awesome font for code.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="notification">
|
||||
<span class="notification__version">1.6.0</span>
|
||||
<ul>
|
||||
<li>You can now configure Web-Maker to not replace new tab page from the settings. It is always accessible from the icon in the top-right.</li>
|
||||
<li>Download current code as HTML file with Ctrl/⌘ + S keyboard shortcut.</li>
|
||||
<li>New notifications panel added so you are always aware of the new changes in Web-Maker.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal__content" d-html="partials/changelog.html"></div>
|
||||
</div>
|
||||
|
||||
<div id="js-saved-items-pane" class="saved-items-pane">
|
||||
<button class="btn saved-items-pane__close-btn" id="js-saved-items-pane-close-btn">X</button>
|
||||
<div class="flex flex-v-center" style="justify-content: space-between;">
|
||||
|
||||
<h3>My Library <span id="savedItemCountEl"></span></h3>
|
||||
<div class="main-header__btn-wrap">
|
||||
<a d-click="exportItems" href="" class="btn btn-icon">Export
|
||||
</a>
|
||||
<a d-click="onImportBtnClicked" href="" class="btn btn-icon">Import
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div id="js-saved-items-wrap" class="saved-items-pane__container">
|
||||
|
||||
<div class="main-header__btn-wrap">
|
||||
<a d-click="exportItems" href="" class="btn btn-icon hint--bottom-left hint--rounded hint--medium" aria-label="Export all your creations into a single importable file.">Export
|
||||
</a>
|
||||
<a d-click="onImportBtnClicked" href="" class="btn btn-icon hint--bottom-left hint--rounded hint--medium" aria-label="Only the file that you export through the 'Export' button can be imported.">Import
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<input type="" id="searchInput" class="search-input" d-input="onSearchInputChange" placeholder="Search your creations here...">
|
||||
|
||||
<div id="js-saved-items-wrap" class="saved-items-pane__container">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -515,7 +478,7 @@
|
||||
</svg>
|
||||
|
||||
<div class="alerts-container" id="js-alerts-container"></div>
|
||||
<form style="display:none;" action="http://codepen.io/pen/define" method="POST" target="_blank" id="js-codepen-form">
|
||||
<form style="display:none;" action="https://codepen.io/pen/define" method="POST" target="_blank" id="js-codepen-form">
|
||||
<input type="hidden" name="data" value='{"title": "New Pen!", "html": "<div>Hello, World!</div>"}'>
|
||||
</form>
|
||||
|
||||
@@ -537,13 +500,46 @@
|
||||
<symbol id="settings-icon" viewBox="0 0 24 24">
|
||||
<path d="M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z"></path>
|
||||
</symbol>
|
||||
<symbol id="twitter-icon" viewBox="0 0 16 16">
|
||||
<path d="M15.969,3.058c-0.586,0.26-1.217,0.436-1.878,0.515c0.675-0.405,1.194-1.045,1.438-1.809
|
||||
c-0.632,0.375-1.332,0.647-2.076,0.793c-0.596-0.636-1.446-1.033-2.387-1.033c-1.806,0-3.27,1.464-3.27,3.27 c0,0.256,0.029,0.506,0.085,0.745C5.163,5.404,2.753,4.102,1.14,2.124C0.859,2.607,0.698,3.168,0.698,3.767 c0,1.134,0.577,2.135,1.455,2.722C1.616,6.472,1.112,6.325,0.671,6.08c0,0.014,0,0.027,0,0.041c0,1.584,1.127,2.906,2.623,3.206 C3.02,9.402,2.731,9.442,2.433,9.442c-0.211,0-0.416-0.021-0.615-0.059c0.416,1.299,1.624,2.245,3.055,2.271 c-1.119,0.877-2.529,1.4-4.061,1.4c-0.264,0-0.524-0.015-0.78-0.046c1.447,0.928,3.166,1.469,5.013,1.469 c6.015,0,9.304-4.983,9.304-9.304c0-0.142-0.003-0.283-0.009-0.423C14.976,4.29,15.531,3.714,15.969,3.058z"/>
|
||||
</symbol>
|
||||
<symbol id="heart-icon" viewBox="0 0 24 24">
|
||||
<path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z" />
|
||||
</symbol>
|
||||
<symbol id="play-icon" viewBox="0 0 24 24">
|
||||
<svg>
|
||||
<path d="M8,5.14V19.14L19,12.14L8,5.14Z" />
|
||||
</svg>
|
||||
</symbol>
|
||||
<symbol id="cancel-icon" viewBox="0 0 24 24">
|
||||
<svg>
|
||||
<path d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12C4,13.85 4.63,15.55 5.68,16.91L16.91,5.68C15.55,4.63 13.85,4 12,4M12,20A8,8 0 0,0 20,12C20,10.15 19.37,8.45 18.32,7.09L7.09,18.32C8.45,19.37 10.15,20 12,20Z" />
|
||||
</svg>
|
||||
</symbol>
|
||||
<symbol id="chevron-icon" viewBox="0 0 24 24">
|
||||
<svg>
|
||||
<path d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z" />
|
||||
</svg>
|
||||
</symbol>
|
||||
<symbol id="chat-icon" viewBox="0 0 24 24">
|
||||
<path d="M20,2H4A2,2 0 0,0 2,4V22L6,18H20A2,2 0 0,0 22,16V4A2,2 0 0,0 20,2M8,14H6V12H8V14M8,11H6V9H8V11M8,8H6V6H8V8M15,14H10V12H15V14M18,11H10V9H18V11M18,8H10V6H18V8Z" />
|
||||
</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>
|
||||
<symbol id="keyboard-icon" viewBox="0 0 24 24">
|
||||
<path d="M19,10H17V8H19M19,13H17V11H19M16,10H14V8H16M16,13H14V11H16M16,17H8V15H16M7,10H5V8H7M7,13H5V11H7M8,11H10V13H8M8,8H10V10H8M11,11H13V13H11M11,8H13V10H11M20,5H4C2.89,5 2,5.89 2,7V17A2,2 0 0,0 4,19H20A2,2 0 0,0 22,17V7C22,5.89 21.1,5 20,5Z" />
|
||||
</symbol>
|
||||
</svg>
|
||||
|
||||
<script src="lib/codemirror/lib/codemirror.js"></script>
|
||||
<script src="lib/codemirror/addon/edit/matchbrackets.js"></script>
|
||||
<script src="lib/codemirror/addon/edit/matchtags.js"></script>
|
||||
<script src="lib/codemirror/addon/edit/closebrackets.js"></script>
|
||||
<script src="lib/codemirror/addon/edit/closetag.js"></script>
|
||||
<script src="lib/codemirror/addon/comment/comment.js"></script>
|
||||
@@ -560,6 +556,10 @@
|
||||
<script src="lib/codemirror/addon/hint/html-hint.js"></script>
|
||||
<script src="lib/codemirror/addon/hint/css-hint.js"></script>
|
||||
<script src="lib/codemirror/addon/selection/active-line.js"></script>
|
||||
<script src="lib/codemirror/addon/search/searchcursor.js"></script>
|
||||
<script src="lib/codemirror/addon/search/search.js"></script>
|
||||
<script src="lib/codemirror/addon/dialog/dialog.js"></script>
|
||||
<script src="lib/codemirror/addon/search/jump-to-line.js"></script>
|
||||
|
||||
<script src="lib/codemirror/mode/xml/xml.js"></script>
|
||||
<script src="lib/codemirror/mode/javascript/javascript.js"></script>
|
||||
@@ -573,7 +573,6 @@
|
||||
<script src="lib/split.js"></script>
|
||||
<script src="lib/inlet.min.js"></script>
|
||||
<script src="lib/esprima.js"></script>
|
||||
<script src="lib/escodegen.browser.min.js"></script>
|
||||
|
||||
<script src="utils.js"></script>
|
||||
<script src="analytics.js"></script>
|
||||
|
||||
2
src/lib/atomizer.browser.js
Normal file
2
src/lib/atomizer.browser.js
Normal file
File diff suppressed because one or more lines are too long
4
src/lib/babel-polyfill.min.js
vendored
Normal file
4
src/lib/babel-polyfill.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
34
src/lib/codemirror/theme/base2tone-meadow-dark.css
vendored
Normal file
34
src/lib/codemirror/theme/base2tone-meadow-dark.css
vendored
Normal file
@@ -0,0 +1,34 @@
|
||||
/*
|
||||
Name: Base2Tone-Meadow
|
||||
Author: by Bram de Haan, adapted from DuoTone themes by Simurai (http://simurai.com/projects/2016/01/01/duotone-themes)
|
||||
CodeMirror template by Jan T. Sott (https://github.com/idleberg), adapted by Bram de Haan (https://github.com/atelierbram/)
|
||||
*/
|
||||
|
||||
.cm-s-Base2Tone-Meadow-dark.CodeMirror { background: #192834; color: #47adf5; }
|
||||
.cm-s-Base2Tone-Meadow-dark div.CodeMirror-selected { background: #335166!important; }
|
||||
.cm-s-Base2Tone-Meadow-dark .CodeMirror-gutters { background: #192834; border-right: 0px; }
|
||||
.cm-s-Base2Tone-Meadow-dark .CodeMirror-linenumber { color: #335166; }
|
||||
|
||||
/* begin cursor */
|
||||
.cm-s-Base2Tone-Meadow-dark .CodeMirror-cursor { border-left: 1px solid #80bf40; /* border-left: 1px solid #80bf4080; */ border-right: .5em solid #80bf40; /* border-right: .5em solid #80bf4080; */ opacity: .5; }
|
||||
.cm-s-Base2Tone-Meadow-dark .CodeMirror-activeline-background { background: #223644; /* background: #22364480; */ opacity: .5;}
|
||||
.cm-s-Base2Tone-Meadow-dark .cm-fat-cursor .CodeMirror-cursor { background: #80bf40; /* background: #80bf4080; */ opacity: .5;}
|
||||
/* end cursor */
|
||||
|
||||
.cm-s-Base2Tone-Meadow-dark span.cm-atom, .cm-s-Base2Tone-Meadow-dark span.cm-number, .cm-s-Base2Tone-Meadow-dark span.cm-keyword, .cm-s-Base2Tone-Meadow-dark span.cm-variable, .cm-s-Base2Tone-Meadow-dark span.cm-attribute, .cm-s-Base2Tone-Meadow-dark span.cm-quote, .cm-s-Base2Tone-Meadow-dark span.cm-hr, .cm-s-Base2Tone-Meadow-dark span.cm-link { color: #a6f655; }
|
||||
|
||||
.cm-s-Base2Tone-Meadow-dark span.cm-property { color: #4299d7; }
|
||||
.cm-s-Base2Tone-Meadow-dark span.cm-punctuation, .cm-s-Base2Tone-Meadow-dark span.cm-unit, .cm-s-Base2Tone-Meadow-dark span.cm-negative { color: #66a329; }
|
||||
.cm-s-Base2Tone-Meadow-dark span.cm-string { color: #8cdd3c; }
|
||||
.cm-s-Base2Tone-Meadow-dark span.cm-operator { color: #80bf40; }
|
||||
.cm-s-Base2Tone-Meadow-dark span.cm-positive { color: #1b6498; }
|
||||
|
||||
.cm-s-Base2Tone-Meadow-dark span.cm-variable-2, .cm-s-Base2Tone-Meadow-dark span.cm-variable-3, .cm-s-Base2Tone-Meadow-dark span.cm-string-2, .cm-s-Base2Tone-Meadow-dark span.cm-url { color: #2172ab; }
|
||||
.cm-s-Base2Tone-Meadow-dark span.cm-def, .cm-s-Base2Tone-Meadow-dark span.cm-tag, .cm-s-Base2Tone-Meadow-dark span.cm-builtin, .cm-s-Base2Tone-Meadow-dark span.cm-qualifier, .cm-s-Base2Tone-Meadow-dark span.cm-header, .cm-s-Base2Tone-Meadow-dark span.cm-em { color: #d1ecff; }
|
||||
.cm-s-Base2Tone-Meadow-dark span.cm-bracket, .cm-s-Base2Tone-Meadow-dark span.cm-comment { color: #3d5e76; }
|
||||
|
||||
/* using #f00 red for errors, don't think any of the colorscheme variables will stand out enough, ... maybe by giving it a background-color ... */
|
||||
.cm-s-Base2Tone-Meadow-dark span.cm-error, .cm-s-Base2Tone-Meadow-dark span.cm-invalidchar { color: #f00; }
|
||||
|
||||
.cm-s-Base2Tone-Meadow-dark span.cm-header { font-weight: normal; }
|
||||
.cm-s-Base2Tone-Meadow-dark .CodeMirror-matchingbracket { text-decoration: underline; color: #d1ecff!important; }
|
||||
1
src/lib/escodegen.browser.min.js
vendored
1
src/lib/escodegen.browser.min.js
vendored
File diff suppressed because one or more lines are too long
4
src/lib/inlet.min.js
vendored
4
src/lib/inlet.min.js
vendored
File diff suppressed because one or more lines are too long
206
src/lib/screenlog.js
Normal file
206
src/lib/screenlog.js
Normal file
@@ -0,0 +1,206 @@
|
||||
var mainWindow = window.parent.onMessageFromConsole
|
||||
? window.parent
|
||||
: window.parent.opener;
|
||||
(function() {
|
||||
var logEl,
|
||||
isInitialized = false,
|
||||
_console = {}; // backup console obj to contain references of overridden fns.
|
||||
_options = {
|
||||
bgColor: 'black',
|
||||
logColor: 'lightgreen',
|
||||
infoColor: 'blue',
|
||||
warnColor: 'orange',
|
||||
errorColor: 'red',
|
||||
freeConsole: false,
|
||||
css: '',
|
||||
autoScroll: true,
|
||||
proxyCallback: null,
|
||||
noUi: false
|
||||
};
|
||||
|
||||
function createElement(tag, css) {
|
||||
var element = document.createElement(tag);
|
||||
element.style.cssText = css;
|
||||
return element;
|
||||
}
|
||||
|
||||
function createPanel() {
|
||||
var div = createElement(
|
||||
'div',
|
||||
'z-index:2147483647;font-family:Helvetica,Arial,sans-serif;font-size:10px;font-weight:bold;padding:5px;text-align:left;opacity:0.8;position:fixed;right:0;top:0;min-width:200px;max-height:50vh;overflow:auto;background:' +
|
||||
_options.bgColor +
|
||||
';' +
|
||||
_options.css
|
||||
);
|
||||
return div;
|
||||
}
|
||||
|
||||
function genericLogger(color) {
|
||||
return function() {
|
||||
if (_options.proxyCallback) {
|
||||
_options.proxyCallback.apply(null, arguments);
|
||||
}
|
||||
if (_options.noUi) {
|
||||
return;
|
||||
}
|
||||
var el = createElement(
|
||||
'div',
|
||||
'line-height:18px;min-height:18px;background:' +
|
||||
(logEl.children.length % 2 ? 'rgba(255,255,255,0.1)' : '') +
|
||||
';color:' +
|
||||
color
|
||||
); // zebra lines
|
||||
var val = [].slice.call(arguments).reduce(function(prev, arg) {
|
||||
return (
|
||||
prev + ' ' + (typeof arg === 'object' ? JSON.stringify(arg) : arg)
|
||||
);
|
||||
}, '');
|
||||
el.textContent = val;
|
||||
|
||||
logEl.appendChild(el);
|
||||
|
||||
// Scroll to last element, if autoScroll option is set.
|
||||
if (_options.autoScroll) {
|
||||
logEl.scrollTop = logEl.scrollHeight - logEl.clientHeight;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function clear() {
|
||||
if (_options.noUi) {
|
||||
mainWindow.clearConsole();
|
||||
return;
|
||||
}
|
||||
logEl.innerHTML = '';
|
||||
}
|
||||
|
||||
function log() {
|
||||
return genericLogger(_options.logColor).apply(null, arguments);
|
||||
}
|
||||
|
||||
function info() {
|
||||
return genericLogger(_options.infoColor).apply(null, arguments);
|
||||
}
|
||||
|
||||
function warn() {
|
||||
return genericLogger(_options.warnColor).apply(null, arguments);
|
||||
}
|
||||
|
||||
function error() {
|
||||
return genericLogger(_options.errorColor).apply(null, arguments);
|
||||
}
|
||||
|
||||
function setOptions(options) {
|
||||
for (var i in options)
|
||||
if (options.hasOwnProperty(i) && _options.hasOwnProperty(i)) {
|
||||
_options[i] = options[i];
|
||||
}
|
||||
}
|
||||
|
||||
function init(options) {
|
||||
if (isInitialized) {
|
||||
return;
|
||||
}
|
||||
|
||||
isInitialized = true;
|
||||
|
||||
if (options) {
|
||||
setOptions(options);
|
||||
}
|
||||
|
||||
if (!_options.noUi) {
|
||||
logEl = createPanel();
|
||||
document.body.appendChild(logEl);
|
||||
}
|
||||
|
||||
if (!_options.freeConsole) {
|
||||
// Backup actual fns to keep it working together
|
||||
_console.log = console.log;
|
||||
_console.clear = console.clear;
|
||||
_console.info = console.info;
|
||||
_console.warn = console.warn;
|
||||
_console.error = console.error;
|
||||
console.log = originalFnCallDecorator(log, 'log');
|
||||
console.clear = originalFnCallDecorator(clear, 'clear');
|
||||
console.info = originalFnCallDecorator(info, 'info');
|
||||
console.warn = originalFnCallDecorator(warn, 'warn');
|
||||
console.error = originalFnCallDecorator(error, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
function destroy() {
|
||||
isInitialized = false;
|
||||
console.log = _console.log;
|
||||
console.clear = _console.clear;
|
||||
console.info = _console.info;
|
||||
console.warn = _console.warn;
|
||||
console.error = _console.error;
|
||||
logEl.remove();
|
||||
}
|
||||
|
||||
/**
|
||||
* Checking if isInitialized is set
|
||||
*/
|
||||
function checkInitialized() {
|
||||
if (!isInitialized) {
|
||||
throw 'You need to call `screenLog.init()` first.';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Decorator for checking if isInitialized is set
|
||||
* @param {Function} fn Fn to decorate
|
||||
* @return {Function} Decorated fn.
|
||||
*/
|
||||
function checkInitDecorator(fn) {
|
||||
return function() {
|
||||
checkInitialized();
|
||||
return fn.apply(this, arguments);
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Decorator for calling the original console's fn at the end of
|
||||
* our overridden fn definitions.
|
||||
* @param {Function} fn Fn to decorate
|
||||
* @param {string} fn Name of original function
|
||||
* @return {Function} Decorated fn.
|
||||
*/
|
||||
function originalFnCallDecorator(fn, fnName) {
|
||||
return function() {
|
||||
fn.apply(this, arguments);
|
||||
if (typeof _console[fnName] === 'function') {
|
||||
_console[fnName].apply(console, arguments);
|
||||
}
|
||||
};
|
||||
}
|
||||
window.addEventListener('error', function() {
|
||||
genericLogger(_options.errorColor).call(null, arguments[0].error.stack);
|
||||
});
|
||||
|
||||
// Public API
|
||||
window.screenLog = {
|
||||
init: init,
|
||||
log: originalFnCallDecorator(checkInitDecorator(log), 'log'),
|
||||
clear: originalFnCallDecorator(checkInitDecorator(clear), 'clear'),
|
||||
info: originalFnCallDecorator(checkInitDecorator(clear), 'info'),
|
||||
warn: originalFnCallDecorator(checkInitDecorator(warn), 'warn'),
|
||||
error: originalFnCallDecorator(checkInitDecorator(error), 'error'),
|
||||
destroy: checkInitDecorator(destroy)
|
||||
};
|
||||
})();
|
||||
screenLog.init({
|
||||
noUi: true,
|
||||
proxyCallback: function() {
|
||||
mainWindow.onMessageFromConsole.apply(null, arguments);
|
||||
}
|
||||
});
|
||||
window._wmEvaluate = function _wmEvaluate(expr) {
|
||||
try {
|
||||
var result = eval(expr);
|
||||
} catch (e) {
|
||||
mainWindow.onMessageFromConsole.call(null, e);
|
||||
return;
|
||||
}
|
||||
mainWindow.onMessageFromConsole.call(null, result);
|
||||
};
|
||||
@@ -1,16 +1,142 @@
|
||||
window.jsLibs = [
|
||||
{ url: 'https://code.jquery.com/jquery-3.1.1.min.js', label: 'jQuery', type: 'js' },
|
||||
{ url: 'https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js', label: 'Angular', type: 'js' },
|
||||
{ url: 'https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js', label: 'React', type: 'js' },
|
||||
{ url: 'https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js', label: 'React DOM', type: 'js' },
|
||||
{ url: 'https://unpkg.com/vue@2.1.3/dist/vue.min.js', label: 'Vue.js', type: 'js' },
|
||||
{ url: 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.min.js', label: 'Three.js', type: 'js' },
|
||||
{ url: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js', label: 'D3', type: 'js' },
|
||||
{ url: 'https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js', label: 'Underscore', type: 'js' },
|
||||
]
|
||||
{
|
||||
url: 'https://code.jquery.com/jquery-3.2.1.min.js',
|
||||
label: 'jQuery',
|
||||
type: 'js'
|
||||
},
|
||||
{
|
||||
url: 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js',
|
||||
label: 'Bootstrap 3',
|
||||
type: 'js'
|
||||
},
|
||||
{
|
||||
url:
|
||||
'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js',
|
||||
label: 'Bootstrap 4β',
|
||||
type: 'js'
|
||||
},
|
||||
{
|
||||
url:
|
||||
'https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.min.js',
|
||||
label: 'Foundation',
|
||||
type: 'js'
|
||||
},
|
||||
{
|
||||
url: 'https://semantic-ui.com/dist/semantic.min.js',
|
||||
label: 'Semantic UI',
|
||||
type: 'js'
|
||||
},
|
||||
{
|
||||
url: 'https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js',
|
||||
label: 'Angular',
|
||||
type: 'js'
|
||||
},
|
||||
{
|
||||
url:
|
||||
'https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/cjs/react.production.min.js',
|
||||
label: 'React',
|
||||
type: 'js'
|
||||
},
|
||||
{
|
||||
url: 'https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js',
|
||||
label: 'React DOM',
|
||||
type: 'js'
|
||||
},
|
||||
{
|
||||
url: 'https://unpkg.com/vue@2.5.0/dist/vue.min.js',
|
||||
label: 'Vue.js',
|
||||
type: 'js'
|
||||
},
|
||||
{
|
||||
url: 'https://cdnjs.cloudflare.com/ajax/libs/three.js/85/three.min.js',
|
||||
label: 'Three.js',
|
||||
type: 'js'
|
||||
},
|
||||
{
|
||||
url: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.2/d3.min.js',
|
||||
label: 'D3',
|
||||
type: 'js'
|
||||
},
|
||||
{
|
||||
url:
|
||||
'https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js',
|
||||
label: 'Underscore',
|
||||
type: 'js'
|
||||
},
|
||||
{
|
||||
url: 'https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js',
|
||||
label: 'Greensock TweenMax',
|
||||
type: 'js'
|
||||
},
|
||||
{
|
||||
url: 'https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.4/js/uikit.min.js',
|
||||
label: 'UIkit 2',
|
||||
type: 'js'
|
||||
},
|
||||
{
|
||||
url:
|
||||
'https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.31/js/uikit.min.js',
|
||||
label: 'UIkit 3',
|
||||
type: 'js'
|
||||
}
|
||||
];
|
||||
window.cssLibs = [
|
||||
{ url: 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css', label: 'Bootstrap', type: 'css' },
|
||||
{ url: 'https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.min.css', label: 'Foundation', type: 'css' },
|
||||
{ url: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css', label: 'Animate.css', type: 'css' },
|
||||
{ url: 'https://cdnjs.cloudflare.com/ajax/libs/hint.css/2.4.1/hint.min.css', label: 'Hint.css', type: 'css' }
|
||||
]
|
||||
{
|
||||
url:
|
||||
'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css',
|
||||
label: 'Bootstrap 3',
|
||||
type: 'css'
|
||||
},
|
||||
{
|
||||
url:
|
||||
'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css',
|
||||
label: 'Bootstrap 4β',
|
||||
type: 'css'
|
||||
},
|
||||
{
|
||||
url:
|
||||
'https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.min.css',
|
||||
label: 'Foundation',
|
||||
type: 'css'
|
||||
},
|
||||
{
|
||||
url: 'https://semantic-ui.com/dist/semantic.min.css',
|
||||
label: 'Semantic UI',
|
||||
type: 'css'
|
||||
},
|
||||
{
|
||||
url: 'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.0/css/bulma.min.css',
|
||||
label: 'Bulma',
|
||||
type: 'css'
|
||||
},
|
||||
|
||||
{
|
||||
url: 'https://cdnjs.cloudflare.com/ajax/libs/hint.css/2.5.0/hint.min.css',
|
||||
label: 'Hint.css',
|
||||
type: 'css'
|
||||
},
|
||||
{
|
||||
url:
|
||||
'https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.4/css/uikit.min.css',
|
||||
label: 'UIkit 2',
|
||||
type: 'css'
|
||||
},
|
||||
{
|
||||
url:
|
||||
'https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.31/css/uikit.min.css',
|
||||
label: 'UIkit 3',
|
||||
type: 'css'
|
||||
},
|
||||
{
|
||||
url:
|
||||
'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css',
|
||||
label: 'Animate.css',
|
||||
type: 'css'
|
||||
},
|
||||
{
|
||||
url:
|
||||
'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css',
|
||||
label: 'FontAwesome',
|
||||
type: 'css'
|
||||
}
|
||||
];
|
||||
|
||||
@@ -1,9 +1,8 @@
|
||||
(function(w) {
|
||||
|
||||
window.loadJS = function(src) {
|
||||
var d = deferred();
|
||||
var ref = w.document.getElementsByTagName("script")[0];
|
||||
var script = w.document.createElement("script");
|
||||
var ref = w.document.getElementsByTagName('script')[0];
|
||||
var script = w.document.createElement('script');
|
||||
script.src = src;
|
||||
script.async = true;
|
||||
ref.parentNode.insertBefore(script, ref);
|
||||
@@ -12,5 +11,4 @@
|
||||
};
|
||||
return d.promise;
|
||||
};
|
||||
|
||||
})(window);
|
||||
@@ -1,16 +1,12 @@
|
||||
{
|
||||
"name": "Web Maker",
|
||||
"version": "2.4.1",
|
||||
"version": "2.9.6",
|
||||
"manifest_version": 2,
|
||||
"description": "Blazing fast & offline playground for your web experiments",
|
||||
"homepage_url": "https://kushagragour.in/lab/web-maker",
|
||||
"permissions": [
|
||||
"storage",
|
||||
"tabs",
|
||||
"<all_urls>",
|
||||
"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://www.google-analytics.com 'unsafe-eval'; object-src 'self'",
|
||||
"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://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
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
(function() {
|
||||
|
||||
var noticationContainerEL = $('#js-alerts-container');
|
||||
const noticationContainerEL = $('#js-alerts-container');
|
||||
var hideTimeout;
|
||||
|
||||
function addNotification(msg) {
|
||||
// var n = document.createElement('div');
|
||||
@@ -9,12 +9,13 @@
|
||||
noticationContainerEL.textContent = msg;
|
||||
noticationContainerEL.classList.add('is-active');
|
||||
|
||||
setTimeout(function () {
|
||||
clearTimeout(hideTimeout);
|
||||
hideTimeout = setTimeout(function() {
|
||||
noticationContainerEL.classList.remove('is-active');
|
||||
}, 2000)
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
window.alertsService = {
|
||||
add: addNotification
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
@@ -29,7 +29,7 @@
|
||||
</head>
|
||||
<body>
|
||||
<h3>Settings <span style="opacity: 0.6;font-size:0.7em;">
|
||||
v2.3.2</span></h3>
|
||||
v2.9.6</span></h3>
|
||||
<form name="optionsForm">
|
||||
<label>
|
||||
<input type="checkbox" name="preserveLastCode">
|
||||
|
||||
@@ -1,32 +1,38 @@
|
||||
// Restores preferences from chrome.storage.
|
||||
function restoreOptions() {
|
||||
chrome.storage.sync.get({
|
||||
chrome.storage.sync.get(
|
||||
{
|
||||
preserveLastCode: true,
|
||||
replaceNewTab: false
|
||||
}, function(items) {
|
||||
document.forms.optionsForm.preserveLastCode.checked = items.preserveLastCode;
|
||||
},
|
||||
function(items) {
|
||||
document.forms.optionsForm.preserveLastCode.checked =
|
||||
items.preserveLastCode;
|
||||
document.forms.optionsForm.replaceNewTab.checked = items.replaceNewTab;
|
||||
});
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
function saveOptions(e) {
|
||||
var preserveLastCode = document.forms.optionsForm.preserveLastCode.checked;
|
||||
var replaceNewTab = document.forms.optionsForm.replaceNewTab.checked;
|
||||
|
||||
chrome.storage.sync.set({
|
||||
chrome.storage.sync.set(
|
||||
{
|
||||
preserveLastCode: preserveLastCode,
|
||||
replaceNewTab: replaceNewTab
|
||||
}, function() {
|
||||
},
|
||||
function() {
|
||||
var status = document.getElementById('js-status');
|
||||
status.textContent = 'Settings saved.';
|
||||
setTimeout(function() {
|
||||
status.innerHTML = ' ';
|
||||
}, 750);
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', restoreOptions);
|
||||
document.forms.optionsForm.addEventListener('submit',
|
||||
saveOptions);
|
||||
document.forms.optionsForm.addEventListener('submit', saveOptions);
|
||||
|
||||
290
src/partials/changelog.html
Normal file
290
src/partials/changelog.html
Normal file
@@ -0,0 +1,290 @@
|
||||
<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">
|
||||
<span class="notification__version">2.9.6</span>
|
||||
<ul>
|
||||
<li><strong>Bugfix</strong>: Fix close buttons not working in notifications and keyboard shortcuts modal.</li>
|
||||
<li><strong>Bugfix</strong>: Fix keyboard shortcut to see keyboard shortcuts :) Thanks <a href="https://github.com/ClassicOldSong" target="_blank">ClassicOldSong</a>.</li>
|
||||
|
||||
<br>
|
||||
<li><strong>🚀 Announcement</strong>: Web Maker has a <a href="https://gitter.im/web-maker-app/Lobby" target="_blank">chat lobby on Gitter</a> now - incase you need any help or just want to say Hi!</li>
|
||||
<li><a href="https://github.com/chinchang/web-maker/issues" target="_blank">Suggest features or report bugs.</a></li>
|
||||
<li>Web Maker now has more than 50K weekly active users! Thank you for being a part of this community of awesome developers. If you find Web Maker helpful, <a href="https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh/reviews" target="_blank" class="btn">Please rate Web Maker <span class="star"></span></a> <a href="http://twitter.com/share?url=https://webmakerapp.com/&text=Web Maker - A blazing fast %26 offline web playground! via @webmakerApp&related=webmakerApp&hashtags=web,editor,chrome,extension" target="_blank" target="_blank" class="btn">Share it</a> <a aria-label="Support the developer" href="https://www.paypal.me/kushagragour" target="_blank" class="btn btn-icon">Support the developer</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="notification">
|
||||
<span class="notification__version">2.9.5</span>
|
||||
<ul>
|
||||
<li><a href="https://medium.com/web-maker/release-2-9-5-add-library-search-pane-collapsing-ux-improvements-more-1085216c1301" target="_blank">Read blog post about this release.</a></li>
|
||||
<li><strong>Keyboard shortcuts panel</strong>: Add a list of all keyboard shotcuts. Access with <code> Ctrl/⌘ + Shift + ?</code> or click keyboard button in footer.</li>
|
||||
<li><strong>Add external library</strong>: Better UX for searching third party libraries.</li>
|
||||
<li><strong>Improvement</strong>: Code panes now go fullscreen when double-clicked on their headers - which is much more intuitive behavior based on feedback from lot of developers.</li>
|
||||
<li><strong>Improvement</strong>: Add <code>allowfullscreen</code> attribute on iframes. Thanks <a href="https://github.com/ClassicOldSong" target="_blank">ClassicOldSong</a>.</li>
|
||||
<li><strong>Bugfix</strong> - Stop screenlog.js from showing up in the exported HTML.</li>
|
||||
<li>Popular external libraries list updated. Thanks <a href="https://github.com/jlapitan" target="_blank">jlapitan</a>.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="notification">
|
||||
<span class="notification__version">2.9.4</span>
|
||||
<ul>
|
||||
<li><strong>Improvement</strong>: Atomic CSS (Atomizer) has been updated to latest version. Now you can do things like psuedo elements. Learn More.</li>
|
||||
<li><strong>Bugfix</strong> - Logging circular objects is now possible. It won't show in the Web Maker console, but will show fine in browser's console.</li>
|
||||
<li><strong>Bugfix</strong> - Console's z-index issue has been fixed.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="notification">
|
||||
<span class="notification__version">2.9.3</span>
|
||||
<ul>
|
||||
<li>Choose the save location while exporting your saved creations. Now easily sync them to your Dropbox or any cloud storage.</li>
|
||||
<li>All modals inside the app now have a close button.</li>
|
||||
<li>Checkbox that showed on clicking a boolean value is now removed. Thanks <a href="https://github.com/gauravmuk" target="_blank">Gaurav Nanda</a>.</li>
|
||||
<li><strong>Bugfix</strong> - Screenshots on retina device are now correct. Thanks <a href="https://github.com/AshBardhan" target="_blank">Ashish Bardhan</a>.</li>
|
||||
<li><strong>Bugfix</strong> - Double console log in detached mode fixed.</li>
|
||||
<li><strong>Bugfix</strong> - Console.clear now works in detached mode too.</li>
|
||||
<li><strong>Bugfix</strong> - DOCTYPE added in preview.</li>
|
||||
<li><strong>Bugfix</strong> - Typo correction in README. Thanks <a href="https://github.com/AdilMah" target="_blank">Adil Mahmood</a>.</li>
|
||||
<li>gstatic.com is available to load external JavaScripts from.</li>
|
||||
<li>Popular libraries list updated. Thanks <a href="https://github.com/diomed" target="_blank">diomed</a>.</li>
|
||||
<li>Added <a href="https://github.com/chinchang/web-maker/blob/master/CONTRIBUTING.md" target="_blank">contribution guidelines</a> in the Github repository.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="notification">
|
||||
<span class="notification__version">2.9.2</span>
|
||||
<ul>
|
||||
<li>Minor bug fixes.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="notification">
|
||||
<span class="notification__version">2.9.1</span>
|
||||
<ul>
|
||||
<li><a href="https://medium.com/web-maker/v2-9-lots-of-goodies-bd1e939571f6" target="_blank">Read blog post about last release.</a></li>
|
||||
<li>Use Ctrl/Cmd+D to select next occurence of matching selection.</li>
|
||||
<li>Improve onboard experience.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="notification">
|
||||
<span class="notification__version">2.9.0</span>
|
||||
<ul>
|
||||
<li><a href="https://medium.com/web-maker/v2-9-lots-of-goodies-bd1e939571f6" target="_blank">Read blog post about this release.</a></li>
|
||||
<li><strong>Detached Preview</strong> - Yes, you read that correct! You can now detach your preview and send it to your secondary monitor.
|
||||
</li>
|
||||
<li><strong>Find & Replace</strong> - Long awaited, now its there. Ctrl/Cmd+f to find and add Alt to replace.</li>
|
||||
<li><strong>Atomic CSS (Atomizer) configurations</strong> - Add custom config for Atomic CSS. <a href="https://github.com/acss-io/atomizer#api" target="_blank">Read more</a>.</li>
|
||||
<li><strong>Light mode</strong> - This new setting makes Web Maker drop some heavy effects like blur etc to gain more performance. Thanks <a href="https://github.com/iamandrewluca" target="_blank">Andrew</a>.</li>
|
||||
<li><strong>Preserve logs setting</strong> - Choose whether or not to preserve logs across preview refreshes. Thanks <a href="https://github.com/BasitAli" target="_blank">Basit</a>.</li>
|
||||
<li><strong>Line wrap setting</strong> - As the name says.</li>
|
||||
<li>Semantic UI added to popular libraries.</li>
|
||||
<li>Bootstrap, Vue, UI-Kit and more updated to latest versions in popular libraries.</li>
|
||||
<li>UX improvements in settings UI</li>
|
||||
|
||||
<li><strong>Bugfix</strong> - Trigger preview refresh anytime with Ctrl/⌘ + Shift + 5. Even with auto-preview on.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="notification">
|
||||
<span class="notification__version">2.8.1</span>
|
||||
<ul>
|
||||
<li>Vue.js & UIKit version updated to latest version in 'Add Library' list.</li>
|
||||
<li>UTF-8 charset added to preview HTML to support universal characters.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="notification">
|
||||
<span class="notification__version">2.8.0</span>
|
||||
<ul>
|
||||
<li><a href="https://medium.com/web-maker/release-v2-8-is-out-f44e6ea5d9c4" target="_blank">Read blog post about this release.</a></li>
|
||||
<li><strong>Auto Save</strong> - Your creations now auto-save after your
|
||||
first manual save. This is configurable from settings.
|
||||
</li>
|
||||
<li><strong>Base2Tone-Meadow Editor Theme</strong> - First user contributed theme.
|
||||
Thanks to Diomed.</li>
|
||||
<li><strong>Use System Fonts</strong> - You can now use any of your existing
|
||||
system fonts in the editor!</li>
|
||||
<li><strong>Matching Tag Highlight</strong> - Cursor over any HTML tag would
|
||||
highlight the matching pair tag.</li>
|
||||
<li>Auto-completion suggestion can now be switched off from settings.</li>
|
||||
<li><strong>Improvement</strong> - Stop white flicker in editor when the app
|
||||
opens.</li>
|
||||
<li><strong>Bugfix</strong> - Add Babel Polyfill to enable use of next-gen
|
||||
built-ins like Promise or WeakMap.
|
||||
</li>
|
||||
<li>Vue.js version updated to 2.4.0 in popular library list.</li>
|
||||
<li>Downloads permission is optional. Asked only when you take screenshot.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="notification">
|
||||
<span class="notification__version">2.7.2</span>
|
||||
<ul>
|
||||
<li><strong>External Libraries</strong> - Add Foundation.js and update UIKit 3 to latest beta.</li>
|
||||
<li><strong>rawgit.com</strong> & <strong>wzrd.in</strong> domains are now allowed for loading external libraries from.</li>
|
||||
<li>Minor booting speed improvements</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="notification">
|
||||
<span class="notification__version">2.7.1</span>
|
||||
<ul>
|
||||
<li><strong>Framer.js support</strong> - You can now load the latest framer.js library from <a href="https://builds.framerjs.com/" target="_blank">framer builds page</a> and start coding framer prototypes.</li>
|
||||
<li><strong>Bugfix</strong>: Edit on CodePen is back in action.</li>
|
||||
<li><strong>Bugfix</strong>: Autocompletion menu doesn't show on cut and paste now.</li>
|
||||
<li><strong>Bugfix</strong>: Updated & fixed urls of some common external libraries to latest versions. UIKit3 & Bootstrap 4α are now in the list.</li>
|
||||
<li>Preprocessor selector are now more accessible.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="notification">
|
||||
<span class="notification__version">2.7.0</span>
|
||||
<ul>
|
||||
<li><strong>Fork any creation!</strong>: Now you can fork any existing creation of yours to start a new work based on it. One big use case of this feature is "Templates"! <a target="_blank" href="https://kushagragour.in/blog/2017/05/web-maker-fork-templates/?utm_source=webmakerapp&utm_medium=referral">Read more about it</a>.</li>
|
||||
<li><strong>Fonts 😍 </strong>: Super-awesome 4 fonts (mostly with ligature support) now available to choose from. Fira Code is the default font now.</li>
|
||||
<li>Updated most used external libraries to latest versions.</li>
|
||||
<li><strong>Bugfix</strong>: Add missing Bootstrap JS file to most used external libraries list.</li>
|
||||
<li>Several other minor bugfixes and improvements to make Web Maker awesome!</li>
|
||||
|
||||
<li>Great news to share with you - Web Maker has been featured on the Chrome Webstore homepage! Thanks for all the love :)</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="notification">
|
||||
<span class="notification__version">2.6.1</span>
|
||||
<ul>
|
||||
<li><strong>Bugfix</strong>: Emojis vanishing while exporting to Codepen has been fixed.</li>
|
||||
<li><strong>Bugfix</strong>: <code>console.clear()</code> now doesn't error and clears the inbuilt console.</li>
|
||||
<li><strong>Bugfix</strong>: External libraries added to the creation are exported as well to Codepen.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="notification">
|
||||
<span class="notification__version">2.6.0</span>
|
||||
<ul>
|
||||
<li><strong>The "Console"</strong>: The most awaited feature is here! There is now an inbuilt console to see your logs, errors and for quickly evaluating JavaScript code inside your preview. Enjoy! I also a <a href="https://kushagragour.in/blog/2017/05/web-maker-console-is-here/?utm_source=webmakerapp&utm_medium=referral"
|
||||
target="_blank">blog post about it</a>.</li>
|
||||
<li>Number slider which popped on clicking any number in the code has been removed due to poor user experience.</li>
|
||||
<li>Minor usability improvements.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="notification">
|
||||
<span class="notification__version">2.5.0</span>
|
||||
<ul>
|
||||
<li><strong>Atomic CSS</strong>: Use can now use Atomic CSS(ACSS) in your work! <a href="https://acss.io/" target="_blank">Read more about it here</a>.</li>
|
||||
<li><strong>Search your saved creations</strong>: Easily search through all your saved creations by title.</li>
|
||||
<li><strong>Configurable Auto-preview</strong> - You can turn off the auto preview in settings if you don't want the preview to update as you type.</li>
|
||||
<li><strong>Configurable refresh on resize</strong> - You can configure whether you want the preview to refresh when you resize the preview panel.</li>
|
||||
<li><strong>Bugfix</strong> - Fix indentation <a href="https://github.com/chinchang/web-maker/issues/104" target="_blank">issue</a> with custom indentation size.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="notification">
|
||||
<span class="notification__version">2.4.2</span>
|
||||
<ul>
|
||||
<li><strong>Improved infinite loop protection</strong>: Infinite loop protection is now faster and more reliable. And works without the need of Escodegen. Thanks to Ariya Hidayat!</li>
|
||||
<li><strong>Bugfix</strong> - Default parameters not working in JavaScript is fixed.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="notification">
|
||||
<span class="notification__version">2.4.0</span>
|
||||
<ul>
|
||||
<li><strong>Import/Export</strong>: Your creations are most important. Now export all your creations into a single file as a backup that can be imported anytime & anywhere.</li>
|
||||
<li><strong>Editor themes</strong>: You have been heard. Now you can choose from a huge list of wonderful editor themes!</li>
|
||||
<li><strong>Identation settings</strong>: Not a spaces fan? Switch to tabs and set your indentation size.</li>
|
||||
<li><strong>Vim key bindings</strong>: Rejoice Vim lovers!</li>
|
||||
<li><strong>Code blast</strong>: Why don't you try coding with this switched on from the settings? Go on...</li>
|
||||
<li><strong>Important</strong>: Due to security policy changes from Chrome 57 onwards, Web Maker now allows loading external JavaScript libraries only from certain whitelisted 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/)</li>
|
||||
<li>Save button now highlights when you have unsaved changes.</li>
|
||||
<li>Jade is now called Pug. Just a name change.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="notification">
|
||||
<span class="notification__version">2.3.2</span>
|
||||
<ul>
|
||||
<li>Update Babel to support latest and coolest ES6 features.</li>
|
||||
<li>Improve onboarding experience at first install.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="notification">
|
||||
<span class="notification__version">2.3.1</span>
|
||||
<ul>
|
||||
<li><strong>Bugfix</strong> - Splitting of code and preview panes is remembered by the editor.</li>
|
||||
<li>Title of the creation is used for the file name when saving as HTML.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="notification">
|
||||
<span class="notification__version">2.3.0</span>
|
||||
<ul>
|
||||
<li><strong>Add Library Autocompletion</strong> - Just start typing the name of library and you'll be shown matching libraries from cdnjs.</li>
|
||||
<li><strong>Preview Screenshot Capture</strong> - Want to grab a nice screenshot of your creation. You have it! Click and capture.</li>
|
||||
<li><strong>Auto Indent Code</strong> - Select your code and hit Shift-Tab to auto-indent it!</li>
|
||||
<li><strong>Keyboard Navigation in Saved List</strong> - Now select your creation using arrow keys and hit ENTER to open it.</li>
|
||||
<li>Highlight active line in code panes.</li>
|
||||
<li><strong>Bugfix</strong> - Fix in generated title of new creation.</li>
|
||||
<li><strong>Bugfix</strong> - HTML autocompletion is manual triggered now with Ctrl+Space.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="notification">
|
||||
<span class="notification__version">2.2.0</span>
|
||||
<ul>
|
||||
<li><strong>Code Autocompletion</strong> - See code suggestions while you type!</li>
|
||||
<li><strong>Full Screen Preview</strong> - Checkout your creation in a full-screen layout.</li>
|
||||
<li><strong>SASS</strong> - SASS support added for CSS.</li>
|
||||
<li><strong>Faster CSS update</strong> - Preview updates instantly without refresh when just CSS is changed.</li>
|
||||
<li><strong>Bugfix</strong> - Indentation fixed while going on new line.</li>
|
||||
<li><strong>Bugfix</strong> - Works even in Chrome Canary now. Though libraries can be added only through CDNs.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="notification">
|
||||
<span class="notification__version">2.1.0</span>
|
||||
<ul>
|
||||
<li><strong>TypeScript</strong> - Now you can code in TypeScript too!</li>
|
||||
<li><strong>Stylus Preprocessor</strong> - Stylus supported adding for CSS.</li>
|
||||
<li><strong>Code Folding</strong> - Collapse large code blocks for easy editing.</li>
|
||||
<li><strong>Bugfix</strong> - Support JSX in JavaScript.</li>
|
||||
<li>Better onboarding for first time users.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="notification">
|
||||
<span class="notification__version">2.0.0</span>
|
||||
<ul>
|
||||
<li><strong>Save and Load</strong> - Long pending and super-useful, now you can save your creations and resume them anytime later.</li>
|
||||
<li><strong>Insert JS & CSS</strong> - Load popular JavaScript & CSS libraries in your work without writing any code.</li>
|
||||
<li><strong>Collapsed Panes</strong> - Collapse/uncollapse code panes with a single click. Your pane configuration is even saved with every creation!</li>
|
||||
<li><strong>Quick color & number change</strong> - Click on any color or number and experiment with quick values using a slider.</li>
|
||||
<li><strong>Linting</strong> - See your code errors right where you are coding.</li>
|
||||
<li>No more browser hang due to infinite loops!</li>
|
||||
<!-- <li><a href="https://kushagragour.in/blog/web-maker-2">Read more about this big release</a></li> -->
|
||||
</ul>
|
||||
</div>
|
||||
<div class="notification">
|
||||
<span class="notification__version">1.7.0</span>
|
||||
<ul>
|
||||
<li><strong>Preprocessors!</strong> - Enjoy a whole list of preprocessors for HTML(Jade & markdown), CSS(SCSS & LESS) and JavaScript(CoffeeScript & Babel).</li>
|
||||
<li>More awesome font for code.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="notification">
|
||||
<span class="notification__version">1.6.0</span>
|
||||
<ul>
|
||||
<li>You can now configure Web-Maker to not replace new tab page from the settings. It is always accessible from the icon in the top-right.</li>
|
||||
<li>Download current code as HTML file with Ctrl/⌘ + S keyboard shortcut.</li>
|
||||
<li>New notifications panel added so you are always aware of the new changes in Web-Maker.</li>
|
||||
</ul>
|
||||
</div>
|
||||
37
src/partials/help-modal.html
Normal file
37
src/partials/help-modal.html
Normal file
@@ -0,0 +1,37 @@
|
||||
<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.6</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>
|
||||
<p>Tweet out your feature requests, comments & suggestions to <a target="_blank" href="https://twitter.com/webmakerApp">@webmakerApp</a>.</p>
|
||||
<p>Like this extension? Please <a href="https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh/reviews" target="_blank">rate it here</a>.</p>
|
||||
<p>
|
||||
<a aria-label="Rate Web Maker" href="https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh/reviews" target="_blank" class="btn btn-icon"><svg><use xlink:href="#heart-icon"></use></svg>Show some love</a>
|
||||
<a aria-label="Chat" href="https://gitter.im/web-maker-app/Lobby" target="_blank" class="btn btn-icon"><svg><use xlink:href="#chat-icon"></use></svg>Chat</a>
|
||||
<a aria-label="Report a Bug" href="https://github.com/chinchang/web-maker/issues" target="_blank" class="btn btn-icon"><svg><use xlink:href="#bug-icon"></use></svg>Report a bug</a>
|
||||
<a aria-label="Support the developer" href="https://www.paypal.me/kushagragour" target="_blank" class="btn btn-icon"><svg><use xlink:href="#gift-icon"></use></svg>Support the developer</a>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<h3>Awesome libraries used</h3>
|
||||
<ul>
|
||||
<li><a target="_blank" href="https://kushagragour.in/lab/hint/">Hint.css</a> & <a target="_blank" href="https://github.com/chinchang/screenlog.js">Screenlog.js</a> - By me :)</li>
|
||||
<li><a target="_blank" href="https://nathancahill.github.io/Split.js/">Split.js</a> - Nathan Cahill</li>
|
||||
<li><a target="_blank" href="https://codemirror.net/">Codemirror</a> - Marijn Haverbeke</li>
|
||||
<li><a target="_blank" href="https://emmet.io/">Emmet</a> - Sergey Chikuyonok</li>
|
||||
<li><a target="_blank" href="http://esprima.org/">Esprima</a> - Ariya Hidayat</li>
|
||||
<li><a target="_blank" href="https://github.com/enjalot/Inlet">Inlet</a> - Ian Johnson</li>
|
||||
<li><a target="_blank" href="https://webmakerapp.com/">Web Maker!</a> - whhat!</li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<h3>License</h3>
|
||||
"Web Maker" is <a target="_blank" href="https://github.com/chinchang/web-maker">open-source</a> under the <a href="https://opensource.org/licenses/MIT" target="_blank">MIT License</a>.
|
||||
</p>
|
||||
</div>
|
||||
106
src/partials/keyboard-shortcuts.html
Normal file
106
src/partials/keyboard-shortcuts.html
Normal file
@@ -0,0 +1,106 @@
|
||||
<a d-click="onModalCloseBtnClick" href="" aria-label="Close keyboard shortcuts modal" title="Close" class="js-modal__close-btn modal__close-btn">
|
||||
<svg>
|
||||
<use xlink:href="#cross-icon"></use>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<h1>Keyboard Shortcuts</h1>
|
||||
|
||||
<div class="flex">
|
||||
<div>
|
||||
<h2>Global</h2>
|
||||
<p>
|
||||
<span class="kbd-shortcut__keys">
|
||||
Ctrl/⌘ + Shift + ?
|
||||
</span>
|
||||
<span class="kbd-shortcut__details">See keyboard shortcuts</span>
|
||||
</p>
|
||||
<p>
|
||||
<span class="kbd-shortcut__keys">
|
||||
Ctrl/⌘ + Shift + 5
|
||||
</span>
|
||||
<span class="kbd-shortcut__details">Refresh preview</span>
|
||||
</p>
|
||||
<p>
|
||||
<span class="kbd-shortcut__keys">
|
||||
Ctrl/⌘ + S
|
||||
</span>
|
||||
<span class="kbd-shortcut__details">Save current creations</span>
|
||||
</p>
|
||||
<p>
|
||||
<span class="kbd-shortcut__keys">
|
||||
Ctrl/⌘ + O
|
||||
</span>
|
||||
<span class="kbd-shortcut__details">Open list of saved creations</span>
|
||||
</p>
|
||||
<p>
|
||||
<span class="kbd-shortcut__keys">
|
||||
Ctrl + L
|
||||
</span>
|
||||
<span class="kbd-shortcut__details">Clear console (works when console input is focused)</span>
|
||||
</p>
|
||||
<p>
|
||||
<span class="kbd-shortcut__keys">
|
||||
Esc
|
||||
</span>
|
||||
<span class="kbd-shortcut__details">Close saved creations panel & modals</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="ml-2">
|
||||
<h2>Editor</h2>
|
||||
<p>
|
||||
<span class="kbd-shortcut__keys">
|
||||
Ctrl/⌘ + F
|
||||
</span>
|
||||
<span class="kbd-shortcut__details">Find</span>
|
||||
</p>
|
||||
<p>
|
||||
<span class="kbd-shortcut__keys">
|
||||
Ctrl/⌘ + G
|
||||
</span>
|
||||
<span class="kbd-shortcut__details">Select next match</span>
|
||||
</p>
|
||||
<p>
|
||||
<span class="kbd-shortcut__keys">
|
||||
Ctrl/⌘ + Shift + G
|
||||
</span>
|
||||
<span class="kbd-shortcut__details">Select previous match</span>
|
||||
</p>
|
||||
<p>
|
||||
<span class="kbd-shortcut__keys">
|
||||
Ctrl/⌘ + Opt/Alt + F
|
||||
</span>
|
||||
<span class="kbd-shortcut__details">Find & replace</span>
|
||||
</p>
|
||||
<p>
|
||||
<span class="kbd-shortcut__keys">
|
||||
Shift + Tab
|
||||
</span>
|
||||
<span class="kbd-shortcut__details">Realign code</span>
|
||||
</p>
|
||||
<p>
|
||||
<span class="kbd-shortcut__keys">
|
||||
Ctrl/⌘ + ]
|
||||
</span>
|
||||
<span class="kbd-shortcut__details">Indent code right</span>
|
||||
</p>
|
||||
<p>
|
||||
<span class="kbd-shortcut__keys">
|
||||
Ctrl/⌘ + [
|
||||
</span>
|
||||
<span class="kbd-shortcut__details">Indent code left</span>
|
||||
</p>
|
||||
<p>
|
||||
<span class="kbd-shortcut__keys">
|
||||
Tab
|
||||
</span>
|
||||
<span class="kbd-shortcut__details">Emmet code completion <a href="https://emmet.io/" target="_blank">Read more</a></span>
|
||||
</p>
|
||||
<p>
|
||||
<span class="kbd-shortcut__keys">
|
||||
Ctrl/⌘ + /
|
||||
</span>
|
||||
<span class="kbd-shortcut__details">Single line comment</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
53
src/partials/onboard-modal.html
Normal file
53
src/partials/onboard-modal.html
Normal file
@@ -0,0 +1,53 @@
|
||||
<div class="tac">
|
||||
<svg width="130px" height="50px">
|
||||
<use xlink:href="#logo" />
|
||||
</svg>
|
||||
<h1 style="margin-top:20px">Welcome to Web Maker</h1>
|
||||
</div>
|
||||
|
||||
<div class="flex" style="margin-top;: 100px;">
|
||||
<div class="onboard-step">
|
||||
<div class="tac">
|
||||
<svg class="onboard-step__icon" viewBox="0 0 24 24">
|
||||
<path d="M13.64,21.97C13.14,22.21 12.54,22 12.31,21.5L10.13,16.76L7.62,18.78C7.45,18.92 7.24,19 7,19A1,1 0 0,1 6,18V3A1,1 0 0,1 7,2C7.24,2 7.47,2.09 7.64,2.23L7.65,2.22L19.14,11.86C19.57,12.22 19.62,12.85 19.27,13.27C19.12,13.45 18.91,13.57 18.7,13.61L15.54,14.23L17.74,18.96C18,19.46 17.76,20.05 17.26,20.28L13.64,21.97Z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<p>
|
||||
Open Web Maker anytime by clicking the
|
||||
<svg class="relative" style="top:5px;" width="40" height="30">
|
||||
<use xlink:href="#logo" />
|
||||
</svg> button in top-right side of your browser.
|
||||
</p>
|
||||
</div>
|
||||
<div class="onboard-step">
|
||||
<div class="tac">
|
||||
<svg class="onboard-step__icon" viewBox="0 0 24 24">
|
||||
<use xlink:href="#settings-icon"></use>
|
||||
</svg>
|
||||
</div>
|
||||
<p>
|
||||
Configure and customize settings by clicking the gear icon (
|
||||
<svg style="width:18px;height:18px;position:relative;top:3px;fill:#888"
|
||||
viewBox="0 0 24 24">
|
||||
<use xlink:href="#settings-icon"></use>
|
||||
</svg>) in bottom right of the app.
|
||||
</p>
|
||||
</div>
|
||||
<div class="onboard-step">
|
||||
<div class="tac">
|
||||
<svg class="onboard-step__icon" style="stroke-width:0.2px;">
|
||||
<use xlink:href="#twitter-icon"></use>
|
||||
</svg>
|
||||
</div>
|
||||
<p>
|
||||
Follow <a href="https://twitter.com/intent/follow?screen_name=webmakerApp">@webmakerApp</a> to know about the new upcoming
|
||||
features!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<p class="tac">
|
||||
<button class="btn" d-click="closeAllOverlays">Lets start!</button>
|
||||
</p>
|
||||
9
src/preview.html
Normal file
9
src/preview.html
Normal file
@@ -0,0 +1,9 @@
|
||||
<link rel="stylesheet" href="style.css">
|
||||
|
||||
<body>
|
||||
|
||||
<iframe src="about://blank" frameborder="0" id="demo-frame" allowfullscreen></iframe>
|
||||
|
||||
|
||||
<script src="detached-window.js"></script>
|
||||
</body>
|
||||
1552
src/script.js
1552
src/script.js
File diff suppressed because it is too large
Load Diff
318
src/style.css
318
src/style.css
@@ -1,10 +1,3 @@
|
||||
@font-face {
|
||||
font-family: 'Inconsolata';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Inconsolata'), url(../Inconsolata-Regular.ttf) format('truetype');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
|
||||
}
|
||||
:root {
|
||||
--color-bg: #252637;
|
||||
--color-sidebar: #3A2B63;
|
||||
@@ -17,7 +10,8 @@ body {
|
||||
background: var(--color-bg);
|
||||
color: rgba(255,255,255,0.9);
|
||||
min-height: 100vh;
|
||||
font-family: Helvetica, arial;
|
||||
font-size: 87.5%;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
}
|
||||
h1 {
|
||||
margin-top: 0;
|
||||
@@ -25,17 +19,21 @@ h1 {
|
||||
a { text-decoration: none; color: crimson; cursor: pointer; }
|
||||
/*a:hover { text-decoration: underline; }*/
|
||||
|
||||
.hide { display: none!important; }
|
||||
.flex { display: flex; }
|
||||
.flex-grow { flex-grow: 1; }
|
||||
.flex-v-center { align-items: center; }
|
||||
.fr { float: right; }
|
||||
.relative { position: relative; }
|
||||
.tac { text-align: center; }
|
||||
.tar { text-align: right; }
|
||||
.va-m { vertical-align: middle; }
|
||||
.full-width { width: 100%; }
|
||||
.opacity--30 { opacity: 0.3; }
|
||||
.opacity--70 { opacity: 0.7; }
|
||||
.pointer-none { pointer-events: none; }
|
||||
.ml-1 { margin-left: 1rem; }
|
||||
.ml-2 { margin-left: 2rem; }
|
||||
hr {
|
||||
background: 0;
|
||||
border: 0;
|
||||
@@ -70,6 +68,14 @@ select, input[type="text"], input[type="number"], textarea {
|
||||
padding: 3px 5px;
|
||||
font-size: inherit;
|
||||
}
|
||||
.hidden-select {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.btn {
|
||||
display: inline-block;
|
||||
border: 0;
|
||||
@@ -100,24 +106,31 @@ select, input[type="text"], input[type="number"], textarea {
|
||||
content: '★';
|
||||
color: #eee333;
|
||||
}
|
||||
/* used to show keyboard specific content when something is keyboard focused */
|
||||
.show-when-selected { display: none; }
|
||||
.selected .show-when-selected { display: inline-block; }
|
||||
|
||||
.main-container {
|
||||
position: absolute;
|
||||
left: 0; right: 0;
|
||||
top: 0; bottom: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
will-change: -webkit-filter;
|
||||
transition: 0.10s ease 0.2s;
|
||||
}
|
||||
.overlay-visible .main-container {
|
||||
body:not(.light-version).overlay-visible .main-container {
|
||||
transition-duration: 0.5s;
|
||||
transition-delay: 0.4s;
|
||||
-webkit-filter: blur(3px);
|
||||
filter: blur(3px);
|
||||
}
|
||||
.code-side,
|
||||
.demo-side {
|
||||
flex-basis: inherit;
|
||||
position: relative;
|
||||
width: 50%;
|
||||
}
|
||||
.layout-3 .content-wrap {
|
||||
flex-direction: row-reverse;
|
||||
@@ -125,7 +138,6 @@ select, input[type="text"], input[type="number"], textarea {
|
||||
.code-side {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 50%;
|
||||
}
|
||||
.layout-2 .content-wrap {
|
||||
flex-direction: column;
|
||||
@@ -134,6 +146,9 @@ select, input[type="text"], input[type="number"], textarea {
|
||||
flex-direction: row;
|
||||
width: auto;
|
||||
}
|
||||
.layout-2 .demo-side {
|
||||
width: auto;
|
||||
}
|
||||
.layout-4 .code-side {
|
||||
display: none;
|
||||
}
|
||||
@@ -143,6 +158,16 @@ select, input[type="text"], input[type="number"], textarea {
|
||||
.layout-4 .demo-side {
|
||||
width: 100% !important;
|
||||
}
|
||||
.is-detached-mode .demo-side {
|
||||
display: none;
|
||||
}
|
||||
.is-detached-mode .code-side {
|
||||
width: 100% !important;
|
||||
}
|
||||
.is-detached-mode.layout-2 .code-side {
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.code-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -181,15 +206,16 @@ select, input[type="text"], input[type="number"], textarea {
|
||||
color: #888;
|
||||
border-bottom: 1px solid rgba(0,0,0,0.3);
|
||||
font-weight: bold;
|
||||
user-select: none;
|
||||
}
|
||||
.code-wrap__header-label {
|
||||
/*transform: translate(0px) scale(1.2);*/
|
||||
display: inline-block;
|
||||
font-size: 1.3em;
|
||||
font-size: 1.1em;
|
||||
opacity: 0.5;
|
||||
/*transform-origin: left center;*/
|
||||
}
|
||||
.layout-2 .is-minimized .code-wrap__header {
|
||||
.layout-2 .code-side .is-minimized .code-wrap__header {
|
||||
writing-mode: vertical-lr;
|
||||
padding: 10px 5px;
|
||||
}
|
||||
@@ -200,16 +226,24 @@ select, input[type="text"], input[type="number"], textarea {
|
||||
opacity: 0;
|
||||
}
|
||||
.code-wrap__header-btn {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin-left: 8px;
|
||||
}
|
||||
.code-wrap__header-btn,
|
||||
.code-wrap__header-btn > svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
display: inline-block;
|
||||
}
|
||||
.code-wrap__collapse-btn:before {
|
||||
content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="width:18px;height:18px" viewBox="0 0 24 24"><path fill="rgba(255,255,255,0.2)" d="M19.5,3.09L15,7.59V4H13V11H20V9H16.41L20.91,4.5L19.5,3.09M4,13V15H7.59L3.09,19.5L4.5,20.91L9,16.41V20H11V13H4Z" /></svg>');
|
||||
}
|
||||
.is-minimized .code-wrap__collapse-btn:before {
|
||||
|
||||
/* maximize icon */
|
||||
content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="width:18px;height:18px" viewBox="0 0 24 24"><path fill="rgba(255,255,255,0.2)" d="M10,21V19H6.41L10.91,14.5L9.5,13.09L5,17.59V14H3V21H10M14.5,10.91L19,6.41V10H21V3H14V5H17.59L13.09,9.5L14.5,10.91Z" /></svg>');
|
||||
}
|
||||
.is-maximized .code-wrap__collapse-btn:before {
|
||||
/* minimize icon */
|
||||
content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="width:18px;height:18px" viewBox="0 0 24 24"><path fill="rgba(255,255,255,0.2)" d="M19.5,3.09L15,7.59V4H13V11H20V9H16.41L20.91,4.5L19.5,3.09M4,13V15H7.59L3.09,19.5L4.5,20.91L9,16.41V20H11V13H4Z" /></svg>');
|
||||
}
|
||||
@keyframes pop-in {
|
||||
from { transform: scale(0.9); opacity: 0; }
|
||||
to { transform: scale(1); opacity: 1; }
|
||||
@@ -225,7 +259,7 @@ select, input[type="text"], input[type="number"], textarea {
|
||||
height: calc(100%);
|
||||
}
|
||||
.Codemirror pre {
|
||||
font-family: 'Inconsolata', monospace;
|
||||
font-variant-ligatures: contextual;
|
||||
}
|
||||
.cm-s-monokai .CodeMirror-linenumber {
|
||||
color:rgba(255,255,255,0.2);
|
||||
@@ -262,20 +296,29 @@ li.CodeMirror-hint-active {
|
||||
#demo-frame {
|
||||
border: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
height: calc(100% - 29px); /* minus minimized console height */
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
background: white;
|
||||
}
|
||||
/* When demo frame is in detached window */
|
||||
body > #demo-frame {
|
||||
height: 100%; /* Because console is no more here */
|
||||
}
|
||||
.main-header,
|
||||
.footer {
|
||||
padding: 5px 10px;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
background-color: rgb(18, 19, 27);
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
border-top: 1px solid rgba(255,255,255,0.14);
|
||||
/*line-height: 20px;*/
|
||||
}
|
||||
.footer {
|
||||
z-index: 6; // Because .console is 6
|
||||
}
|
||||
.main-header {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
border: 0;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.14);
|
||||
}
|
||||
@@ -372,7 +415,16 @@ li.CodeMirror-hint-active {
|
||||
background: none;
|
||||
border: 0;
|
||||
color: rgba(255,255,255,0.6);
|
||||
width: calc(100vw - 400px);
|
||||
flex: 1;
|
||||
}
|
||||
.search-input {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
padding: 10px 20px;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
font-size: 16px;
|
||||
color: white;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.modal {
|
||||
position: fixed;
|
||||
@@ -391,6 +443,20 @@ li.CodeMirror-hint-active {
|
||||
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;
|
||||
@@ -399,7 +465,7 @@ li.CodeMirror-hint-active {
|
||||
margin: 0 auto;
|
||||
opacity: 0;
|
||||
padding: 2em;
|
||||
font-size: 1.3em;
|
||||
font-size: 1.1em;
|
||||
line-height: 1.4;
|
||||
max-height: 90vh;
|
||||
box-sizing: border-box;
|
||||
@@ -428,12 +494,19 @@ li.CodeMirror-hint-active {
|
||||
background: rgba(0,0,0,0.6);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
/* Make settings modal smaller */
|
||||
@media screen and (min-width: 600px) {
|
||||
.modal--settings {
|
||||
/* width: 600px; */
|
||||
/* margin-left: -300px; */
|
||||
}
|
||||
}
|
||||
.saved-items-pane {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 400px;
|
||||
width: 450px;
|
||||
padding: 20px 30px;
|
||||
z-index: 6;
|
||||
background-color: var(--color-sidebar);
|
||||
@@ -512,23 +585,35 @@ li.CodeMirror-hint-active {
|
||||
.saved-item-tile.selected {
|
||||
background: rgba(255,255,255,0.1);
|
||||
}
|
||||
.saved-item-tile__close-btn {
|
||||
padding: 7px 10px;
|
||||
.saved-item-tile__btns {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 6px;
|
||||
z-index: 1;
|
||||
color: rgba(255,255,255,0.3);
|
||||
border-radius: 50%;
|
||||
background: rgba(255,255,255,0.05);
|
||||
right: 8px;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: 0.25s ease;
|
||||
}
|
||||
.saved-item-tile__close-btn:hover {
|
||||
.saved-item-tile.selected .saved-item-tile__btns,
|
||||
.saved-item-tile:hover .saved-item-tile__btns {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.saved-item-tile__btn {
|
||||
padding: 7px 10px;
|
||||
color: rgba(255,255,255,0.3);
|
||||
border-radius: 20px;
|
||||
margin-left: 2px;
|
||||
background: rgba(255,255,255,0.05);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.saved-item-tile__btn:hover {
|
||||
background: rgba(255,255,255,0.8);
|
||||
color: #555;
|
||||
}
|
||||
.saved-item-tile__title {
|
||||
pointer-events: none;
|
||||
font-size: 1.6em;
|
||||
font-size: 1.4em;
|
||||
margin: 0 0 1em 0;
|
||||
opacity: 0.8;
|
||||
}
|
||||
@@ -647,7 +732,7 @@ li.CodeMirror-hint-active {
|
||||
}
|
||||
.dropdown__menu > li > a {
|
||||
display: block;
|
||||
padding: 10px 15px;
|
||||
padding: 6px 15px;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -670,16 +755,21 @@ li.CodeMirror-hint-active {
|
||||
position: fixed;
|
||||
will-change: transform;
|
||||
left: 50%;
|
||||
top: 0;
|
||||
top: -5px;
|
||||
padding: 10px;
|
||||
background: var(--color-sidebar);
|
||||
background: white;
|
||||
border: 1px solid #eee;
|
||||
color: #333;
|
||||
box-shadow: 0 3px 5px rgba(0,0,0,0.2);
|
||||
/*color: #333;*/
|
||||
font-size: 1rem;
|
||||
border-radius: 3px;
|
||||
z-index: 6;
|
||||
transform: translateY(-100%);
|
||||
transform: translateX(-50%) translateY(-100%);
|
||||
transition: 0.3s ease;
|
||||
}
|
||||
.alerts-container.is-active {
|
||||
transform: translateY(0);
|
||||
transform: translateX(-50%) translateY(0);
|
||||
}
|
||||
|
||||
.error-gutter {
|
||||
@@ -721,33 +811,42 @@ li.CodeMirror-hint-active {
|
||||
padding: 1px 6px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.onboard-selection-wrap {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.onboard-step {
|
||||
background: #f7f2f1;
|
||||
border: 1px solid #ecdede;
|
||||
margin: 15px;
|
||||
padding: 20px 30px;
|
||||
background-color: white;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 16px 22px rgba(0, 0, 0, 0.1);
|
||||
flex: 1;
|
||||
opacity: 0;
|
||||
animation: onboard-step-show 0.6s ease forwards;
|
||||
animation-delay: 0.1s;
|
||||
}
|
||||
.onboard-selection {
|
||||
padding: 10px;
|
||||
margin: 0 40px;
|
||||
border-radius: 5px;
|
||||
transition: 0.25s ease;
|
||||
position: relative;
|
||||
border: 1px solid transparent;
|
||||
.onboard-step:nth-child(2) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
.onboard-selection:hover {
|
||||
cursor: pointer;
|
||||
/*background-color: rgba(0,0,0,0.3);*/
|
||||
transform: scale(1.15);
|
||||
/*border-color: rgba(0,0,0,0.4);*/
|
||||
.onboard-step:nth-child(3) {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
.onboard-step__icon {
|
||||
fill: transparent!important;
|
||||
stroke-width: 0.3px;
|
||||
stroke: #eeb096;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
@keyframes onboard-step-show {
|
||||
from {
|
||||
transform: translateY(10px);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
.onboard-selection.selected:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: -20px;
|
||||
bottom: 40px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
background: white url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="width:32px;height:32px" viewBox="0 0 24 24"><path fill="limegreen" d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M11,16.5L18,9.5L16.59,8.09L11,13.67L7.91,10.59L6.5,12L11,16.5Z" /></svg>');
|
||||
}
|
||||
|
||||
.autocomplete-dropdown {
|
||||
@@ -761,8 +860,8 @@ li.CodeMirror-hint-active {
|
||||
}
|
||||
.autocomplete__loader {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
right: 3px;
|
||||
bottom: 1px;
|
||||
}
|
||||
@keyframes wobble {
|
||||
from {
|
||||
@@ -800,3 +899,100 @@ li.CodeMirror-hint-active {
|
||||
.wobble {
|
||||
animation-name: wobble;
|
||||
}
|
||||
.console {
|
||||
background: var(--color-bg);
|
||||
z-index: 6; /* bring above iframe & codemirror and also scrollbar in codemirror */
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
min-height: 80px;
|
||||
height: 35vh;
|
||||
left: 0;
|
||||
right: 0;
|
||||
transform: translateY(0);
|
||||
transition: transform 0.4s cubic-bezier(0.76, 0.01, 0.13, 0.9);
|
||||
}
|
||||
.console.is-minimized {
|
||||
transform: translateY(calc(100% - 29px));
|
||||
}
|
||||
.console .Codemirror {
|
||||
height: calc(100% - 55px);
|
||||
}
|
||||
.console-exec-input {
|
||||
padding: 5px;
|
||||
font-size: 1.3em;
|
||||
flex: 1;
|
||||
background: rgba(0,0,0,0.3);
|
||||
color: white;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
}
|
||||
.console:not(.is-minimized) .code-wrap__header {
|
||||
cursor: ns-resize;
|
||||
}
|
||||
.global-console-container {
|
||||
display: none;
|
||||
position: relative;
|
||||
height: 35px;
|
||||
}
|
||||
/* Detached mode */
|
||||
.is-detached-mode .console,
|
||||
.is-detached-mode .footer {
|
||||
z-index: 4;
|
||||
}
|
||||
.is-detached-mode .global-console-container {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.kbd-shortcut__keys {
|
||||
background: rgba(0,0,0,0.1);
|
||||
border-radius: 3px;
|
||||
padding: 3px 8px;
|
||||
margin-right: 5px;
|
||||
display: inline-block;
|
||||
font-size: 0.9rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
.kbd-shortcut__details {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Codemirror themes basic bg styles. This is here so that there is no big FOUC
|
||||
while the theme CSS file is loading */
|
||||
.cm-s-paraiso-dark.CodeMirror { background: #2f1e2e; color: #b9b6b0; }
|
||||
.cm-s-paraiso-dark .CodeMirror-gutters { background: #2f1e2e; border-right: 0px; }
|
||||
.cm-s-paraiso-dark .CodeMirror-activeline-background { background: #4D344A; }
|
||||
|
||||
.cm-s-monokai.CodeMirror { background: #272822; color: #f8f8f2; }
|
||||
.cm-s-monokai .CodeMirror-gutters { background: #272822; border-right: 0px; }
|
||||
.cm-s-monokai .CodeMirror-activeline-background { background: #373831; }
|
||||
|
||||
.cm-s-3024-day.CodeMirror { background: #f7f7f7; color: #3a3432; }
|
||||
.cm-s-3024-day .CodeMirror-gutters { background: #f7f7f7; border-right: 0px; }
|
||||
.cm-s-3024-day .CodeMirror-activeline-background { background: #e8f2ff; }
|
||||
|
||||
.cm-s-material.CodeMirror {
|
||||
background-color: #263238;
|
||||
color: rgba(233, 237, 237, 1);
|
||||
}
|
||||
.cm-s-material .CodeMirror-gutters {
|
||||
background: #263238;
|
||||
color: rgb(83,127,126);
|
||||
}
|
||||
.cm-s-material .CodeMirror-activeline-background { background: rgba(0, 0, 0, 0); }
|
||||
|
||||
.cm-s-dracula.CodeMirror, .cm-s-dracula .CodeMirror-gutters {
|
||||
background-color: #282a36 !important;
|
||||
color: #f8f8f2 !important;
|
||||
}
|
||||
.cm-s-dracula .CodeMirror-activeline-background { background: rgba(255,255,255,0.1); }
|
||||
|
||||
.cm-s-blackboard.CodeMirror { background: #0C1021; color: #F8F8F8; }
|
||||
.cm-s-blackboard .CodeMirror-gutters { background: #0C1021; border-right: 0; }
|
||||
.cm-s-blackboard .CodeMirror-activeline-background { background: #3C3636; }
|
||||
|
||||
.cm-s-midnight.CodeMirror {
|
||||
background: #0F192A;
|
||||
color: #D1EDFF;
|
||||
}
|
||||
.cm-s-midnight .CodeMirror-gutters { background: #0F192A; border-right: 1px solid; }
|
||||
.cm-s-midnight .CodeMirror-activeline-background { background: #253540; }
|
||||
|
||||
@@ -1,11 +1,10 @@
|
||||
// textarea-autocomplete.js
|
||||
(function() {
|
||||
|
||||
class TextareaAutoComplete {
|
||||
|
||||
constructor (textarea, filter) {
|
||||
constructor(textarea, options) {
|
||||
this.t = textarea;
|
||||
this.filter = filter;
|
||||
this.filter = options.filter;
|
||||
this.selectedCallback = options.selectedCallback;
|
||||
var wrap = document.createElement('div');
|
||||
wrap.classList.add('btn-group');
|
||||
textarea.parentElement.insertBefore(wrap, textarea);
|
||||
@@ -30,10 +29,10 @@
|
||||
});
|
||||
}, 100);
|
||||
|
||||
this.t.addEventListener('input', (e) => this.onInput(e));
|
||||
this.t.addEventListener('keydown', (e) => this.onKeyDown(e));
|
||||
this.t.addEventListener('blur', (e) => this.closeSuggestions(e));
|
||||
this.list.addEventListener('mousedown', (e) => this.onListMouseDown(e));
|
||||
this.t.addEventListener('input', e => this.onInput(e));
|
||||
this.t.addEventListener('keydown', e => this.onKeyDown(e));
|
||||
this.t.addEventListener('blur', e => this.closeSuggestions(e));
|
||||
this.list.addEventListener('mousedown', e => this.onListMouseDown(e));
|
||||
}
|
||||
|
||||
get currentLineNumber() {
|
||||
@@ -49,24 +48,28 @@
|
||||
}
|
||||
getList(input) {
|
||||
var url = 'https://api.cdnjs.com/libraries?search=';
|
||||
return fetch(url + input)
|
||||
.then((response) => {
|
||||
return response.json().then((json) => json.results);
|
||||
return fetch(url + input).then(response => {
|
||||
return response.json().then(json => json.results);
|
||||
});
|
||||
}
|
||||
replaceCurrentLine(val) {
|
||||
var lines = this.t.value.split('\n');
|
||||
lines.splice(this.currentLineNumber - 1, 1, val)
|
||||
lines.splice(this.currentLineNumber - 1, 1, val);
|
||||
this.t.value = lines.join('\n');
|
||||
}
|
||||
onInput() {
|
||||
var currentLine = this.currentLine;
|
||||
if (currentLine) {
|
||||
if (currentLine.indexOf('/') !== -1 || currentLine.match(/https*:\/\//)) { return; }
|
||||
if (
|
||||
currentLine.indexOf('/') !== -1 ||
|
||||
currentLine.match(/https*:\/\//)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
clearTimeout(this.timeout);
|
||||
this.timeout = setTimeout(() => {
|
||||
this.loader.style.display = 'block';
|
||||
this.getList(currentLine).then((arr) => {
|
||||
this.getList(currentLine).then(arr => {
|
||||
this.loader.style.display = 'none';
|
||||
if (!arr.length) {
|
||||
this.closeSuggestions();
|
||||
@@ -74,12 +77,13 @@
|
||||
}
|
||||
this.list.innerHTML = '';
|
||||
if (this.filter) {
|
||||
|
||||
/* eslint-disable no-param-reassign */
|
||||
arr = arr.filter(this.filter);
|
||||
}
|
||||
for (var i = 0; i < Math.min(arr.length, 10); i++) {
|
||||
this.list.innerHTML += `<li data-url="${arr[i].latest}"><a>${arr[i].name}</a></li>`;
|
||||
this.list.innerHTML += `<li data-url="${arr[i].latest}"><a>${arr[
|
||||
i
|
||||
].name}</a></li>`;
|
||||
}
|
||||
this.isShowingSuggestions = true;
|
||||
if (!this.textareaBounds) {
|
||||
@@ -95,7 +99,9 @@
|
||||
}
|
||||
onKeyDown(event) {
|
||||
var selectedItemElement;
|
||||
if (!this.isShowingSuggestions) { return; }
|
||||
if (!this.isShowingSuggestions) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.keyCode === 27) {
|
||||
this.closeSuggestions();
|
||||
@@ -123,19 +129,26 @@
|
||||
event.preventDefault();
|
||||
} else if (event.keyCode === 13 && this.isShowingSuggestions) {
|
||||
selectedItemElement = this.list.querySelector('.selected');
|
||||
this.replaceCurrentLine(selectedItemElement.dataset.url)
|
||||
this.selectSuggestion(selectedItemElement.dataset.url);
|
||||
this.closeSuggestions();
|
||||
}
|
||||
}
|
||||
onListMouseDown(event) {
|
||||
var target = event.target;
|
||||
if (target.parentElement.dataset.url) {
|
||||
this.replaceCurrentLine(target.parentElement.dataset.url)
|
||||
this.closeSuggestions();
|
||||
this.selectSuggestion(target.parentElement.dataset.url);
|
||||
}
|
||||
}
|
||||
|
||||
selectSuggestion(value) {
|
||||
if (this.selectedCallback) {
|
||||
this.selectedCallback.call(null, value);
|
||||
} else {
|
||||
this.replaceCurrentLine(value);
|
||||
}
|
||||
this.closeSuggestions();
|
||||
}
|
||||
}
|
||||
|
||||
window.TextareaAutoComplete = TextareaAutoComplete;
|
||||
|
||||
})();
|
||||
163
src/utils.js
163
src/utils.js
@@ -2,8 +2,33 @@
|
||||
window.DEBUG = document.cookie.indexOf('wmdebug') > -1;
|
||||
|
||||
window.$ = document.querySelector.bind(document);
|
||||
window.$all = document.querySelectorAll.bind(document);
|
||||
var alphaNum = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
|
||||
window.$all = selector => [...document.querySelectorAll(selector)];
|
||||
var alphaNum =
|
||||
'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
|
||||
|
||||
/**
|
||||
* The following 2 functions are supposed to find the next/previous sibling until the
|
||||
* passed `selector` is matched. But for now it actually finds the next/previous
|
||||
* element of `this` element in the list of `selector` matched element inside `this`'s
|
||||
* parent.
|
||||
* @param Selector that should match for next siblings
|
||||
* @return element Next element that mathes `selector`
|
||||
*/
|
||||
Node.prototype.nextUntil = function(selector) {
|
||||
const siblings = [...this.parentNode.querySelectorAll(selector)];
|
||||
const index = siblings.indexOf(this);
|
||||
return siblings[index + 1];
|
||||
};
|
||||
|
||||
/*
|
||||
* @param Selector that should match for next siblings
|
||||
* @return element Next element that mathes `selector`
|
||||
*/
|
||||
Node.prototype.previousUntil = function(selector) {
|
||||
const siblings = [...this.parentNode.querySelectorAll(selector)];
|
||||
const index = siblings.indexOf(this);
|
||||
return siblings[index - 1];
|
||||
};
|
||||
|
||||
// https://github.com/substack/semver-compare/blob/master/index.js
|
||||
function semverCompare(a, b) {
|
||||
@@ -12,10 +37,18 @@
|
||||
for (var i = 0; i < 3; i++) {
|
||||
var na = Number(pa[i]);
|
||||
var nb = Number(pb[i]);
|
||||
if (na > nb) { return 1; }
|
||||
if (nb > na) { return -1; }
|
||||
if (!isNaN(na) && isNaN(nb)) { return 1; }
|
||||
if (isNaN(na) && !isNaN(nb)) { return -1; }
|
||||
if (na > nb) {
|
||||
return 1;
|
||||
}
|
||||
if (nb > na) {
|
||||
return -1;
|
||||
}
|
||||
if (!isNaN(na) && isNaN(nb)) {
|
||||
return 1;
|
||||
}
|
||||
if (isNaN(na) && !isNaN(nb)) {
|
||||
return -1;
|
||||
}
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
@@ -42,59 +75,88 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Generate 2 ASTs for the code to be inserted in loops for infinite run protection.
|
||||
// The `myVar` variable names would be changed later for every insertion.
|
||||
function getLoopProtectorBlocks() {
|
||||
var ast1 = esprima.parse('var myvar = Date.now();');
|
||||
var ast2 = esprima.parse('while(a){if (Date.now() - a787897 > 1000) { window.top.previewException(new Error("Infinite loop")); break;}}');
|
||||
return {
|
||||
before: ast1.body[0],
|
||||
inside: ast2.body[0].body.body[0]
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Add timed limit on the loops found in the passed AST body
|
||||
* @param {ASTBody} Body of an AST generated by esprima or any ES compliant AST
|
||||
* Adds timed limit on the loops found in the passed code.
|
||||
* Contributed by Ariya Hidayat!
|
||||
* @param code {string} Code to be protected from infinite loops.
|
||||
*/
|
||||
function addInfiniteLoopProtection(astBody) {
|
||||
if (!astBody) { return; }
|
||||
if (!Array.isArray(astBody)) {
|
||||
addInfiniteLoopProtection(astBody.body);
|
||||
return;
|
||||
}
|
||||
var el, randomVariableName, insertionBLocks;
|
||||
function addInfiniteLoopProtection(code) {
|
||||
var loopId = 1;
|
||||
var patches = [];
|
||||
var varPrefix = '_wmloopvar';
|
||||
var varStr = 'var %d = Date.now();\n';
|
||||
var checkStr =
|
||||
'\nif (Date.now() - %d > 1000) { window.top.previewException(new Error("Infinite loop")); break;}\n';
|
||||
|
||||
for (var i = astBody.length; i--;) {
|
||||
el = astBody[i];
|
||||
if (el && el.type === 'ForStatement' || el.type === 'WhileStatement' || el.type === 'DoWhileStatement') {
|
||||
randomVariableName = '_' + generateRandomId(3);
|
||||
insertionBLocks = getLoopProtectorBlocks();
|
||||
insertionBLocks.before.declarations[0].id.name = insertionBLocks.inside.test.left.right.name = randomVariableName;
|
||||
// Insert time variable assignment
|
||||
astBody.splice(i, 0, insertionBLocks.before);
|
||||
// If the loop's body is a single statement, then convert it into a block statement
|
||||
// so that we can insert our conditional break inside it.
|
||||
if (!Array.isArray(el.body)) {
|
||||
el.body = {
|
||||
body: [ el.body ],
|
||||
type: 'BlockStatement'
|
||||
};
|
||||
}
|
||||
// Insert IfStatement
|
||||
el.body.body.unshift(insertionBLocks.inside);
|
||||
}
|
||||
if (el.body) {
|
||||
addInfiniteLoopProtection(el.body);
|
||||
esprima.parse(code, { tolerant: true, range: true, jsx: true }, function(
|
||||
node
|
||||
) {
|
||||
switch (node.type) {
|
||||
case 'DoWhileStatement':
|
||||
case 'ForStatement':
|
||||
case 'ForInStatement':
|
||||
case 'ForOfStatement':
|
||||
case 'WhileStatement':
|
||||
var start = 1 + node.body.range[0];
|
||||
var end = node.body.range[1];
|
||||
var prolog = checkStr.replace('%d', varPrefix + loopId);
|
||||
var epilog = '';
|
||||
|
||||
if (node.body.type !== 'BlockStatement') {
|
||||
// `while(1) doThat()` becomes `while(1) {doThat()}`
|
||||
prolog = '{' + prolog;
|
||||
epilog = '}';
|
||||
--start;
|
||||
}
|
||||
|
||||
patches.push({ pos: start, str: prolog });
|
||||
patches.push({ pos: end, str: epilog });
|
||||
patches.push({
|
||||
pos: node.range[0],
|
||||
str: varStr.replace('%d', varPrefix + loopId)
|
||||
});
|
||||
++loopId;
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
/* eslint-disable no-param-reassign */
|
||||
patches
|
||||
.sort(function(a, b) {
|
||||
return b.pos - a.pos;
|
||||
})
|
||||
.forEach(function(patch) {
|
||||
code = code.slice(0, patch.pos) + patch.str + code.slice(patch.pos);
|
||||
});
|
||||
|
||||
/* eslint-disable no-param-reassign */
|
||||
return code;
|
||||
}
|
||||
|
||||
function getHumanDate(timestamp) {
|
||||
var d = new Date(timestamp);
|
||||
var retVal = d.getDate() + ' '
|
||||
+ [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'][d.getMonth()] + ' '
|
||||
+ d.getFullYear();
|
||||
var retVal =
|
||||
d.getDate() +
|
||||
' ' +
|
||||
[
|
||||
'January',
|
||||
'February',
|
||||
'March',
|
||||
'April',
|
||||
'May',
|
||||
'June',
|
||||
'July',
|
||||
'August',
|
||||
'September',
|
||||
'October',
|
||||
'November',
|
||||
'December'
|
||||
][d.getMonth()] +
|
||||
' ' +
|
||||
d.getFullYear();
|
||||
return retVal;
|
||||
}
|
||||
|
||||
@@ -107,7 +169,6 @@
|
||||
// call handler
|
||||
return callback(e);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
window.utils = {
|
||||
|
||||
Reference in New Issue
Block a user