├── images └── editor.png ├── favicons ├── favicon.ico ├── favicon-16x16.png ├── favicon-32x32.png ├── mstile-150x150.png ├── apple-touch-icon.png ├── android-chrome-192x192.png ├── android-chrome-256x256.png ├── browserconfig.xml ├── site.webmanifest └── safari-pinned-tab.svg ├── preview.html ├── robots.txt ├── .jshintrc ├── .gitattributes ├── .github └── ISSUE_TEMPLATE │ ├── feature_request.md │ └── bug_report.md ├── sitemap.xml ├── LICENSE.md ├── css ├── reset.css ├── jquery-ui.structure.min.css ├── jquery-ui.min.css ├── styles.min.css └── styles.css ├── README.md ├── .gitignore ├── js ├── main.min.js ├── main.js └── jquery-ui.min.js └── index.html /images/editor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/markhillard/Editor/HEAD/images/editor.png -------------------------------------------------------------------------------- /favicons/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/markhillard/Editor/HEAD/favicons/favicon.ico -------------------------------------------------------------------------------- /favicons/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/markhillard/Editor/HEAD/favicons/favicon-16x16.png -------------------------------------------------------------------------------- /favicons/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/markhillard/Editor/HEAD/favicons/favicon-32x32.png -------------------------------------------------------------------------------- /favicons/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/markhillard/Editor/HEAD/favicons/mstile-150x150.png -------------------------------------------------------------------------------- /favicons/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/markhillard/Editor/HEAD/favicons/apple-touch-icon.png -------------------------------------------------------------------------------- /preview.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /favicons/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/markhillard/Editor/HEAD/favicons/android-chrome-192x192.png -------------------------------------------------------------------------------- /favicons/android-chrome-256x256.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/markhillard/Editor/HEAD/favicons/android-chrome-256x256.png -------------------------------------------------------------------------------- /robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Disallow: 3 | Disallow: /css/ 4 | Disallow: /favicons/ 5 | Disallow: /images/ 6 | Disallow: /js/ 7 | Sitemap: https://markhillard.github.io/Editor/sitemap.xml 8 | -------------------------------------------------------------------------------- /favicons/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | #282a36 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "browser": true, 3 | "devel": true, 4 | "unused": false, 5 | "undef": true, 6 | "multistr": true, 7 | "globals": { 8 | "strict": false, 9 | "$": false, 10 | "CodeMirror": false, 11 | "htmlcode": false, 12 | "csscode": false, 13 | "jscode": false, 14 | "Bloodhound": false, 15 | "emmetCodeMirror": false, 16 | "saveAs": false 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | 4 | # Custom for Visual Studio 5 | *.cs diff=csharp 6 | 7 | # Standard to msysgit 8 | *.doc diff=astextplain 9 | *.DOC diff=astextplain 10 | *.docx diff=astextplain 11 | *.DOCX diff=astextplain 12 | *.dot diff=astextplain 13 | *.DOT diff=astextplain 14 | *.pdf diff=astextplain 15 | *.PDF diff=astextplain 16 | *.rtf diff=astextplain 17 | *.RTF diff=astextplain 18 | -------------------------------------------------------------------------------- /favicons/site.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Editor", 3 | "short_name": "Editor", 4 | "icons": [ 5 | { 6 | "src": "https://markhillard.github.io/Editor/favicons/android-chrome-192x192.png?v=4", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "https://markhillard.github.io/Editor/favicons/android-chrome-256x256.png?v=4", 12 | "sizes": "256x256", 13 | "type": "image/png" 14 | } 15 | ], 16 | "theme_color": "#282a36", 17 | "background_color": "#282a36", 18 | "display": "standalone" 19 | } 20 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | 5 | --- 6 | 7 | **Is your feature request related to a problem? Please describe.** 8 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 9 | 10 | **Describe the solution you'd like** 11 | A clear and concise description of what you want to happen. 12 | 13 | **Describe alternatives you've considered** 14 | A clear and concise description of any alternative solutions or features you've considered. 15 | 16 | **Additional context** 17 | Add any other context or screenshots about the feature request here. 18 | -------------------------------------------------------------------------------- /sitemap.xml: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | 8 | http://markhillard.github.io/Editor/ 9 | 2016-02-06T23:42:27+00:00 10 | monthly 11 | 1.00 12 | 13 | 14 | http://markhillard.github.io/Editor/preview.html 15 | 2016-02-06T23:42:27+00:00 16 | monthly 17 | 0.80 18 | 19 | 20 | -------------------------------------------------------------------------------- /favicons/safari-pinned-tab.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 7 | 8 | Created by potrace 1.11, written by Peter Selinger 2001-2013 9 | 10 | 12 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | 5 | --- 6 | 7 | **Describe the bug** 8 | A clear and concise description of what the bug is. 9 | 10 | **To Reproduce** 11 | Steps to reproduce the behavior: 12 | 1. Go to '...' 13 | 2. Click on '....' 14 | 3. Scroll down to '....' 15 | 4. See error 16 | 17 | **Expected behavior** 18 | A clear and concise description of what you expected to happen. 19 | 20 | **Screenshots** 21 | If applicable, add screenshots to help explain your problem. 22 | 23 | **Desktop (please complete the following information):** 24 | - OS: [e.g. iOS] 25 | - Browser [e.g. chrome, safari] 26 | - Version [e.g. 22] 27 | 28 | **Smartphone (please complete the following information):** 29 | - Device: [e.g. iPhone6] 30 | - OS: [e.g. iOS8.1] 31 | - Browser [e.g. stock browser, safari] 32 | - Version [e.g. 22] 33 | 34 | **Additional context** 35 | Add any other context about the problem here. 36 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Mark Hillard 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /css/reset.css: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ 2 | v2.0 | 20110126 3 | License: none (public domain) 4 | */ 5 | 6 | html, body, div, span, applet, object, iframe, 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 8 | a, abbr, acronym, address, big, cite, code, 9 | del, dfn, em, img, ins, kbd, q, s, samp, 10 | small, strike, strong, sub, sup, tt, var, 11 | b, u, i, center, 12 | dl, dt, dd, ol, ul, li, 13 | fieldset, form, label, legend, 14 | table, caption, tbody, tfoot, thead, tr, th, td, 15 | article, aside, canvas, details, embed, 16 | figure, figcaption, footer, header, hgroup, 17 | menu, nav, output, ruby, section, summary, 18 | time, mark, audio, video { 19 | margin: 0; 20 | padding: 0; 21 | border: 0; 22 | font-size: 100%; 23 | font: inherit; 24 | vertical-align: baseline; 25 | } 26 | /* HTML5 display-role reset for older browsers */ 27 | article, aside, details, figcaption, figure, 28 | footer, header, hgroup, menu, nav, section { 29 | display: block; 30 | } 31 | body { 32 | line-height: 1; 33 | } 34 | ol, ul { 35 | list-style: none; 36 | } 37 | blockquote, q { 38 | quotes: none; 39 | } 40 | blockquote:before, blockquote:after, 41 | q:before, q:after { 42 | content: ''; 43 | content: none; 44 | } 45 | table { 46 | border-collapse: collapse; 47 | border-spacing: 0; 48 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Editor 2 | 3 | [![Editor releases](https://img.shields.io/github/release/markhillard/Editor.svg)](https://github.com/markhillard/Editor/releases) 4 | 5 | Editor is a responsive HTML/CSS/JS code editor that renders what you type in real-time. It utilizes the following libraries: 6 | 7 | - [jQuery](http://jquery.com/) 8 | - [jQuery UI - Resizable](https://jqueryui.com/resizable/) 9 | - [CodeMirror](https://codemirror.net/) 10 | - [FileSaver.js](https://github.com/eligrey/FileSaver.js) 11 | - [Blob.js](https://github.com/eligrey/Blob.js) 12 | - [typeahead.js](https://twitter.github.io/typeahead.js/) 13 | 14 | ## Style 15 | 16 | - Theme: [Dracula](https://codemirror.net/demo/theme.html#dracula) 17 | - Font: [Fira Code](https://github.com/tonsky/FiraCode) 18 | - Icons: [Font Awesome](https://fontawesome.com/) 19 | 20 | ## Features 21 | 22 | - Auto-Save (Local Storage) 23 | - Resizable Code/Preview Pane 24 | - Preview Pane Width Indicator 25 | - Syntax Highlighting 26 | - Code Folding 27 | - Code Linting 28 | - Tag/Bracket Matching 29 | - Auto-Close HTML Tags 30 | - Eric Meyer's CSS Reset 31 | - Font Resizer 32 | - Text Wrapping Toggles 33 | - Reset Editor Defaults 34 | - Refresh Editor 35 | - Clear Editor 36 | - Run Scripts In Browser 37 | - Save As HTML File 38 | - Dependency Injection 39 | 40 | ### CodeMirror Keymaps 41 | 42 | - [Sublime](https://codemirror.net/demo/sublime.html) 43 | - [Emmet](https://github.com/emmetio/codemirror) 44 | 45 | **Note:** If Emmet is enabled the Sublime Keymap will be disabled, and vice-versa. 46 | 47 | ## Browser Support 48 | 49 | Editor works in all modern web browsers and IE10+. 50 | -------------------------------------------------------------------------------- /css/jquery-ui.structure.min.css: -------------------------------------------------------------------------------- 1 | /*! jQuery UI - v1.13.0 - 2021-12-09 2 | * http://jqueryui.com 3 | * Copyright jQuery Foundation and other contributors; Licensed MIT */ 4 | 5 | .ui-helper-hidden{display:none}.ui-helper-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.ui-helper-reset{margin:0;padding:0;border:0;outline:0;line-height:1.3;text-decoration:none;font-size:100%;list-style:none}.ui-helper-clearfix:before,.ui-helper-clearfix:after{content:"";display:table;border-collapse:collapse}.ui-helper-clearfix:after{clear:both}.ui-helper-zfix{width:100%;height:100%;top:0;left:0;position:absolute;opacity:0;-ms-filter:"alpha(opacity=0)"}.ui-front{z-index:100}.ui-state-disabled{cursor:default!important;pointer-events:none}.ui-icon{display:inline-block;vertical-align:middle;margin-top:-.25em;position:relative;text-indent:-99999px;overflow:hidden;background-repeat:no-repeat}.ui-widget-icon-block{left:50%;margin-left:-8px;display:block}.ui-widget-overlay{position:fixed;top:0;left:0;width:100%;height:100%}.ui-resizable{position:relative}.ui-resizable-handle{position:absolute;font-size:0.1px;display:block;-ms-touch-action:none;touch-action:none}.ui-resizable-disabled .ui-resizable-handle,.ui-resizable-autohide .ui-resizable-handle{display:none}.ui-resizable-n{cursor:n-resize;height:7px;width:100%;top:-5px;left:0}.ui-resizable-s{cursor:s-resize;height:7px;width:100%;bottom:-5px;left:0}.ui-resizable-e{cursor:e-resize;width:7px;right:-5px;top:0;height:100%}.ui-resizable-w{cursor:w-resize;width:7px;left:-5px;top:0;height:100%}.ui-resizable-se{cursor:se-resize;width:12px;height:12px;right:1px;bottom:1px}.ui-resizable-sw{cursor:sw-resize;width:9px;height:9px;left:-5px;bottom:-5px}.ui-resizable-nw{cursor:nw-resize;width:9px;height:9px;left:-5px;top:-5px}.ui-resizable-ne{cursor:ne-resize;width:9px;height:9px;right:-5px;top:-5px} 6 | -------------------------------------------------------------------------------- /css/jquery-ui.min.css: -------------------------------------------------------------------------------- 1 | /*! jQuery UI - v1.13.0 - 2021-12-09 2 | * http://jqueryui.com 3 | * Includes: core.css, resizable.css 4 | * Copyright jQuery Foundation and other contributors; Licensed MIT */ 5 | 6 | .ui-helper-hidden{display:none}.ui-helper-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.ui-helper-reset{margin:0;padding:0;border:0;outline:0;line-height:1.3;text-decoration:none;font-size:100%;list-style:none}.ui-helper-clearfix:before,.ui-helper-clearfix:after{content:"";display:table;border-collapse:collapse}.ui-helper-clearfix:after{clear:both}.ui-helper-zfix{width:100%;height:100%;top:0;left:0;position:absolute;opacity:0;-ms-filter:"alpha(opacity=0)"}.ui-front{z-index:100}.ui-state-disabled{cursor:default!important;pointer-events:none}.ui-icon{display:inline-block;vertical-align:middle;margin-top:-.25em;position:relative;text-indent:-99999px;overflow:hidden;background-repeat:no-repeat}.ui-widget-icon-block{left:50%;margin-left:-8px;display:block}.ui-widget-overlay{position:fixed;top:0;left:0;width:100%;height:100%}.ui-resizable{position:relative}.ui-resizable-handle{position:absolute;font-size:0.1px;display:block;-ms-touch-action:none;touch-action:none}.ui-resizable-disabled .ui-resizable-handle,.ui-resizable-autohide .ui-resizable-handle{display:none}.ui-resizable-n{cursor:n-resize;height:7px;width:100%;top:-5px;left:0}.ui-resizable-s{cursor:s-resize;height:7px;width:100%;bottom:-5px;left:0}.ui-resizable-e{cursor:e-resize;width:7px;right:-5px;top:0;height:100%}.ui-resizable-w{cursor:w-resize;width:7px;left:-5px;top:0;height:100%}.ui-resizable-se{cursor:se-resize;width:12px;height:12px;right:1px;bottom:1px}.ui-resizable-sw{cursor:sw-resize;width:9px;height:9px;left:-5px;bottom:-5px}.ui-resizable-nw{cursor:nw-resize;width:9px;height:9px;left:-5px;top:-5px}.ui-resizable-ne{cursor:ne-resize;width:9px;height:9px;right:-5px;top:-5px} 7 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | ################# 2 | ## Eclipse 3 | ################# 4 | 5 | *.pydevproject 6 | .project 7 | .metadata 8 | bin/ 9 | tmp/ 10 | *.tmp 11 | *.bak 12 | *.swp 13 | *~.nib 14 | local.properties 15 | .classpath 16 | .settings/ 17 | .loadpath 18 | 19 | # External tool builders 20 | .externalToolBuilders/ 21 | 22 | # Locally stored "Eclipse launch configurations" 23 | *.launch 24 | 25 | # CDT-specific 26 | .cproject 27 | 28 | # PDT-specific 29 | .buildpath 30 | 31 | 32 | ################# 33 | ## Visual Studio 34 | ################# 35 | 36 | ## Ignore Visual Studio temporary files, build results, and 37 | ## files generated by popular Visual Studio add-ons. 38 | 39 | # User-specific files 40 | *.suo 41 | *.user 42 | *.sln.docstates 43 | 44 | # Build results 45 | 46 | [Dd]ebug/ 47 | [Rr]elease/ 48 | x64/ 49 | build/ 50 | [Bb]in/ 51 | [Oo]bj/ 52 | 53 | # MSTest test Results 54 | [Tt]est[Rr]esult*/ 55 | [Bb]uild[Ll]og.* 56 | 57 | *_i.c 58 | *_p.c 59 | *.ilk 60 | *.meta 61 | *.obj 62 | *.pch 63 | *.pdb 64 | *.pgc 65 | *.pgd 66 | *.rsp 67 | *.sbr 68 | *.tlb 69 | *.tli 70 | *.tlh 71 | *.tmp 72 | *.tmp_proj 73 | *.log 74 | *.vspscc 75 | *.vssscc 76 | .builds 77 | *.pidb 78 | *.log 79 | *.scc 80 | 81 | # Visual C++ cache files 82 | ipch/ 83 | *.aps 84 | *.ncb 85 | *.opensdf 86 | *.sdf 87 | *.cachefile 88 | 89 | # Visual Studio profiler 90 | *.psess 91 | *.vsp 92 | *.vspx 93 | 94 | # Guidance Automation Toolkit 95 | *.gpState 96 | 97 | # ReSharper is a .NET coding add-in 98 | _ReSharper*/ 99 | *.[Rr]e[Ss]harper 100 | 101 | # TeamCity is a build add-in 102 | _TeamCity* 103 | 104 | # DotCover is a Code Coverage Tool 105 | *.dotCover 106 | 107 | # NCrunch 108 | *.ncrunch* 109 | .*crunch*.local.xml 110 | 111 | # Installshield output folder 112 | [Ee]xpress/ 113 | 114 | # DocProject is a documentation generator add-in 115 | DocProject/buildhelp/ 116 | DocProject/Help/*.HxT 117 | DocProject/Help/*.HxC 118 | DocProject/Help/*.hhc 119 | DocProject/Help/*.hhk 120 | DocProject/Help/*.hhp 121 | DocProject/Help/Html2 122 | DocProject/Help/html 123 | 124 | # Click-Once directory 125 | publish/ 126 | 127 | # Publish Web Output 128 | *.Publish.xml 129 | *.pubxml 130 | *.publishproj 131 | 132 | # NuGet Packages Directory 133 | ## TODO: If you have NuGet Package Restore enabled, uncomment the next line 134 | #packages/ 135 | 136 | # Windows Azure Build Output 137 | csx 138 | *.build.csdef 139 | 140 | # Windows Store app package directory 141 | AppPackages/ 142 | 143 | # Others 144 | sql/ 145 | *.Cache 146 | ClientBin/ 147 | [Ss]tyle[Cc]op.* 148 | ~$* 149 | *~ 150 | *.dbmdl 151 | *.[Pp]ublish.xml 152 | *.pfx 153 | *.publishsettings 154 | 155 | # RIA/Silverlight projects 156 | Generated_Code/ 157 | 158 | # Backup & report files from converting an old project file to a newer 159 | # Visual Studio version. Backup files are not needed, because we have git ;-) 160 | _UpgradeReport_Files/ 161 | Backup*/ 162 | UpgradeLog*.XML 163 | UpgradeLog*.htm 164 | 165 | # SQL Server files 166 | App_Data/*.mdf 167 | App_Data/*.ldf 168 | 169 | ############# 170 | ## Windows detritus 171 | ############# 172 | 173 | # Windows image file caches 174 | Thumbs.db 175 | ehthumbs.db 176 | 177 | # Folder config file 178 | Desktop.ini 179 | 180 | # Recycle Bin used on file shares 181 | $RECYCLE.BIN/ 182 | 183 | # Mac crap 184 | .DS_Store 185 | 186 | 187 | ############# 188 | ## Python 189 | ############# 190 | 191 | *.py[cod] 192 | 193 | # Packages 194 | *.egg 195 | *.egg-info 196 | dist/ 197 | build/ 198 | eggs/ 199 | parts/ 200 | var/ 201 | sdist/ 202 | develop-eggs/ 203 | .installed.cfg 204 | 205 | # Installer logs 206 | pip-log.txt 207 | 208 | # Unit test / coverage reports 209 | .coverage 210 | .tox 211 | 212 | #Translations 213 | *.mo 214 | 215 | #Mr Developer 216 | .mr.developer.cfg 217 | -------------------------------------------------------------------------------- /js/main.min.js: -------------------------------------------------------------------------------- 1 | var E=$.noConflict(!0);E(document).ready(function(){var i=document.editor=CodeMirror.fromTextArea(htmlcode,{mode:"htmlmixed",profile:"html",keyMap:"sublime",lineNumbers:!0,lineWrapping:!1,theme:"dracula",tabSize:4,indentUnit:4,extraKeys:{Tab:"indentMore"},foldGutter:!0,gutters:["CodeMirror-lint-markers","CodeMirror-linenumbers","CodeMirror-foldgutter"],matchTags:{bothTags:!0},matchBrackets:!1,autoCloseTags:!0,autoCloseBrackets:!0,scrollbarStyle:"overlay",styleActiveLine:!0,showTrailingSpace:!0,lint:!1}),o=document.editor=CodeMirror.fromTextArea(csscode,{mode:"css",profile:"css",keyMap:"sublime",lineNumbers:!0,lineWrapping:!1,theme:"dracula",tabSize:4,indentUnit:4,extraKeys:{Tab:"indentMore"},foldGutter:!0,gutters:["CodeMirror-lint-markers","CodeMirror-linenumbers","CodeMirror-foldgutter"],matchBrackets:!0,autoCloseBrackets:!0,scrollbarStyle:"overlay",styleActiveLine:!0,showTrailingSpace:!0,lint:!1}),n=document.editor=CodeMirror.fromTextArea(jscode,{mode:"javascript",keyMap:"sublime",lineNumbers:!0,lineWrapping:!1,theme:"dracula",tabSize:4,indentUnit:4,extraKeys:{Tab:"indentMore"},foldGutter:!0,gutters:["CodeMirror-lint-markers","CodeMirror-linenumbers","CodeMirror-foldgutter"],matchBrackets:!0,autoCloseBrackets:!0,scrollbarStyle:"overlay",styleActiveLine:!0,showTrailingSpace:!0,lint:!1}),e=E(".font-size input");function t(e,t){e.getWrapperElement().style["font-size"]=t+"%",e.refresh()}var s,a,l=document.getElementById("preview");function r(){var e=E("#preview").contents().find("body"),t=i.getValue();e.html(t),c()}function c(){var e=E("#preview").contents().find("head"),t=o.getValue();e.html('")}s=l.contentDocument||(l.contentWindow||l).document,a=i.getValue(),s.open(),s.write(a),s.close(),c();var d,p=' 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 133 | 134 | 135 | 136 |
137 |

loading

138 |
139 | 140 |
141 |
142 | 145 |
146 | view 147 | HTML 148 | CSS 149 | JS 150 | preview 151 |
152 |
153 | 157 | 158 |
159 |
160 | tools 161 | wrap 162 | wrap 163 | wrap 164 | emmet 165 | lint 166 | watch 167 | reset 168 | refresh 169 | clear 170 | run 171 | save 172 |
173 |
174 | 175 |
176 |
177 |
178 |
179 |
180 | 181 |
182 |
183 | 184 |
185 |
186 | 187 |
188 |
189 |
190 | 191 | 192 |
193 |
194 |
195 | 196 | 197 | 198 | 199 | 200 | 201 | -------------------------------------------------------------------------------- /css/styles.css: -------------------------------------------------------------------------------- 1 | /* 2 | ███████ ██████ ██ ████████ ██████ ██████ 3 | ██ ██ ██ ██ ██ ██ ██ ██ ██ 4 | █████ ██ ██ ██ ██ ██ ██ ██████ 5 | ██ ██ ██ ██ ██ ██ ██ ██ ██ 6 | ███████ ██████ ██ ██ ██████ ██ ██ 7 | 2021 ~ Mark Hillard | (mark@)markhillard.com 8 | */ 9 | 10 | 11 | /* CSS Reset 12 | ================================================== */ 13 | 14 | html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video { 15 | border:0; 16 | font:inherit; 17 | font-size:100%; 18 | margin:0; 19 | padding:0; 20 | vertical-align:baseline; 21 | } 22 | 23 | article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { 24 | display:block; 25 | } 26 | 27 | body { line-height:1; } 28 | ul,ol { list-style:none; } 29 | blockquote,q { quotes:none; } 30 | blockquote::before,blockquote::after,q::before,q::after { content:none; } 31 | table { border-collapse:collapse; border-spacing:0; } 32 | 33 | button,input:not([type="checkbox"],[type="radio"]),textarea { appearance:none; background:none; } 34 | button::-moz-focus-inner,input::-moz-focus-inner { border:0; padding:0; } 35 | 36 | * { -webkit-tap-highlight-color:rgba(0, 0, 0, 0); -webkit-tap-highlight-color:transparent; } 37 | 38 | *,*::before,*::after { box-sizing:border-box; } 39 | *,*:focus { outline:none; } 40 | 41 | 42 | 43 | /* Global Page Styles 44 | ================================================== */ 45 | 46 | html,body { 47 | -webkit-font-smoothing:antialiased; 48 | -webkit-text-size-adjust:100%; 49 | font-family:"Fira Code", "Source Code Pro", monospace; 50 | font-size:100%; 51 | font-weight:400; 52 | height:100%; 53 | line-height:1.45; 54 | overflow:hidden; 55 | } 56 | 57 | /* Highlighting */ 58 | ::selection { background-color:#282a36; color:#fff; } 59 | 60 | 61 | 62 | /* CodeMirror Overrides 63 | ================================================== */ 64 | 65 | .CodeMirror { 66 | font-family:"Fira Code", "Source Code Pro", monospace; 67 | font-feature-settings:"calt" 1; 68 | font-variant-ligatures:contextual; 69 | height:100%; 70 | } 71 | 72 | .CodeMirror-lines { 73 | padding:0; 74 | } 75 | 76 | .CodeMirror-scrollbar-filler, 77 | .CodeMirror-gutter-filler { 78 | background-color:transparent; 79 | } 80 | 81 | .CodeMirror-overlayscroll-horizontal { 82 | height:10px; 83 | transition:height ease 300ms; 84 | } 85 | 86 | .CodeMirror-overlayscroll-horizontal:hover, 87 | .CodeMirror-overlayscroll-horizontal.hold { 88 | height:15px; 89 | } 90 | 91 | .CodeMirror-overlayscroll-vertical { 92 | transition:width ease 300ms; 93 | width:10px; 94 | } 95 | 96 | .CodeMirror-overlayscroll-vertical:hover, 97 | .CodeMirror-overlayscroll-vertical.hold { 98 | width:15px; 99 | } 100 | 101 | .CodeMirror-overlayscroll-horizontal div, 102 | .CodeMirror-overlayscroll-vertical div { 103 | background:#333540; 104 | border-radius:0; 105 | } 106 | 107 | .CodeMirror-matchingtag, 108 | .CodeMirror-matchingbracket { 109 | background:none; 110 | border-bottom:1px solid #f8f8f0; 111 | text-decoration:none !important; 112 | } 113 | 114 | .CodeMirror-nonmatchingbracket { 115 | background-color:#dc3545; 116 | color:#fff !important; 117 | } 118 | 119 | .CodeMirror-guttermarker-subtle { 120 | color:#6d8a88; 121 | } 122 | 123 | .CodeMirror-foldmarker { 124 | background-color:#0e0f13; 125 | color:#fff; 126 | font-family:inherit; 127 | padding:0 7px; 128 | text-shadow:none; 129 | } 130 | 131 | .CodeMirror-lint-marker-error, 132 | .CodeMirror-lint-marker-warning { 133 | cursor:help; 134 | height:14px; 135 | left:5px; 136 | top:-2px; 137 | width:14px; 138 | } 139 | 140 | .CodeMirror-lint-mark-error, 141 | .CodeMirror-lint-mark-warning { 142 | background-image:none; 143 | color:#fff !important; 144 | cursor:help; 145 | } 146 | 147 | .CodeMirror-lint-mark-error { 148 | background-color:#dc3545; 149 | } 150 | 151 | .CodeMirror-lint-mark-warning { 152 | background-color:#ffc107; 153 | } 154 | 155 | .CodeMirror-lint-marker-error, 156 | .CodeMirror-lint-message-error { 157 | background-image:url("data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgZGF0YS1wcmVmaXg9ImZhcyIgZGF0YS1pY29uPSJ0aW1lcy1jaXJjbGUiIGNsYXNzPSJzdmctaW5saW5lLS1mYSBmYS10aW1lcy1jaXJjbGUgZmEtdy0xNiIgcm9sZT0iaW1nIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjZGMzNTQ1IiBkPSJNMjU2IDhDMTE5IDggOCAxMTkgOCAyNTZzMTExIDI0OCAyNDggMjQ4IDI0OC0xMTEgMjQ4LTI0OFMzOTMgOCAyNTYgOHptMTIxLjYgMzEzLjFjNC43IDQuNyA0LjcgMTIuMyAwIDE3TDMzOCAzNzcuNmMtNC43IDQuNy0xMi4zIDQuNy0xNyAwTDI1NiAzMTJsLTY1LjEgNjUuNmMtNC43IDQuNy0xMi4zIDQuNy0xNyAwTDEzNC40IDMzOGMtNC43LTQuNy00LjctMTIuMyAwLTE3bDY1LjYtNjUtNjUuNi02NS4xYy00LjctNC43LTQuNy0xMi4zIDAtMTdsMzkuNi0zOS42YzQuNy00LjcgMTIuMy00LjcgMTcgMGw2NSA2NS43IDY1LjEtNjUuNmM0LjctNC43IDEyLjMtNC43IDE3IDBsMzkuNiAzOS42YzQuNyA0LjcgNC43IDEyLjMgMCAxN0wzMTIgMjU2bDY1LjYgNjUuMXoiPjwvcGF0aD48L3N2Zz4="); 158 | } 159 | 160 | .CodeMirror-lint-marker-warning, 161 | .CodeMirror-lint-message-warning { 162 | background-image:url("data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgZGF0YS1wcmVmaXg9ImZhcyIgZGF0YS1pY29uPSJleGNsYW1hdGlvbi10cmlhbmdsZSIgY2xhc3M9InN2Zy1pbmxpbmUtLWZhIGZhLWV4Y2xhbWF0aW9uLXRyaWFuZ2xlIGZhLXctMTgiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgNTc2IDUxMiI+PHBhdGggZmlsbD0iI2ZmYzEwNyIgZD0iTTU2OS41MTcgNDQwLjAxM0M1ODcuOTc1IDQ3Mi4wMDcgNTY0LjgwNiA1MTIgNTI3Ljk0IDUxMkg0OC4wNTRjLTM2LjkzNyAwLTU5Ljk5OS00MC4wNTUtNDEuNTc3LTcxLjk4N0wyNDYuNDIzIDIzLjk4NWMxOC40NjctMzIuMDA5IDY0LjcyLTMxLjk1MSA4My4xNTQgMGwyMzkuOTQgNDE2LjAyOHpNMjg4IDM1NGMtMjUuNDA1IDAtNDYgMjAuNTk1LTQ2IDQ2czIwLjU5NSA0NiA0NiA0NiA0Ni0yMC41OTUgNDYtNDYtMjAuNTk1LTQ2LTQ2LTQ2em0tNDMuNjczLTE2NS4zNDZsNy40MTggMTM2Yy4zNDcgNi4zNjQgNS42MDkgMTEuMzQ2IDExLjk4MiAxMS4zNDZoNDguNTQ2YzYuMzczIDAgMTEuNjM1LTQuOTgyIDExLjk4Mi0xMS4zNDZsNy40MTgtMTM2Yy4zNzUtNi44NzQtNS4wOTgtMTIuNjU0LTExLjk4Mi0xMi42NTRoLTYzLjM4M2MtNi44ODQgMC0xMi4zNTYgNS43OC0xMS45ODEgMTIuNjU0eiI+PC9wYXRoPjwvc3ZnPg=="); 163 | } 164 | 165 | .CodeMirror-lint-marker-multiple { 166 | cursor:help; 167 | right:-1px; 168 | top:-4px; 169 | } 170 | 171 | .CodeMirror-lint-tooltip { 172 | background-color:#0e0f13; 173 | border-radius:0; 174 | border:none; 175 | color:#fff; 176 | font-family:inherit; 177 | font-size:.9rem; 178 | padding:5px 9px; 179 | transition:none; 180 | } 181 | 182 | .CodeMirror-lint-message-error, 183 | .CodeMirror-lint-message-warning { 184 | background-position:top 3px left; 185 | background-repeat:no-repeat; 186 | background-size:14px; 187 | padding-left:22px; 188 | } 189 | 190 | .cm-trailingspace { 191 | border-bottom:1px dotted #dc3545; 192 | } 193 | 194 | 195 | 196 | /* jQuery UI Overrides 197 | ================================================== */ 198 | 199 | .ui-resizable-e { 200 | background-color:#0e0f13; 201 | cursor:col-resize !important; 202 | right:-16px !important; 203 | width:16px !important; 204 | } 205 | 206 | /* Mobile & Tablet */ 207 | @media only screen and (max-width:800px) { 208 | .ui-resizable-handle { 209 | display:none !important; 210 | } 211 | } 212 | 213 | 214 | 215 | /* Utility Bar 216 | ================================================== */ 217 | 218 | #utils { 219 | background-color:#282a36; 220 | border-bottom:16px solid #0e0f13; 221 | display:flex; 222 | flex-direction:row; 223 | } 224 | 225 | #utils > div { 226 | font-size:0; 227 | } 228 | 229 | .logo { 230 | width:43px; 231 | } 232 | 233 | .logo a { 234 | color:#fff; 235 | display:block; 236 | font-size:2rem; 237 | font-weight:700; 238 | height:auto; 239 | line-height:43px; 240 | margin:0 auto; 241 | text-align:center; 242 | text-decoration:none; 243 | width:100%; 244 | } 245 | 246 | .logo a:hover { 247 | background-color:#0e0f13; 248 | } 249 | 250 | .code-tools { 251 | position:absolute; 252 | right:266px; 253 | } 254 | 255 | .code-swap span, 256 | .code-tools span { 257 | background-color:#282a36; 258 | border-right:1px solid #0e0f13; 259 | color:#6d8a88; 260 | cursor:pointer; 261 | display:inline-block; 262 | font-size:1rem; 263 | font-weight:700; 264 | height:43px; 265 | padding:10px 15px; 266 | text-decoration:none; 267 | } 268 | 269 | .code-swap span.code-swap-html, 270 | .code-tools span.toggle-lineWrapping { 271 | border-left:1px solid #0e0f13; 272 | } 273 | 274 | .code-swap span:hover, 275 | .code-tools span:hover { 276 | background-color:#0e0f13; 277 | } 278 | 279 | .code-swap span.active, 280 | .code-tools span.active, 281 | .code-tools span:not([class^="toggle"]):active { 282 | background-color:#6d8a88 !important; 283 | color:#333540; 284 | } 285 | 286 | .code-swap span.toggle-view, 287 | .code-swap span.toggle-preview, 288 | .code-tools span.toggle-tools { 289 | display:none; 290 | } 291 | 292 | .code-swap span svg, 293 | .code-tools span svg { 294 | margin-left:5px; 295 | } 296 | 297 | /* Custom */ 298 | @media only screen and (max-width:1538px) { 299 | .code-tools span { 300 | border-left:1px solid #0e0f13; 301 | display:block; 302 | height:auto; 303 | position:relative; 304 | text-align:right; 305 | z-index:100; 306 | } 307 | 308 | .code-tools span:last-child { 309 | border-bottom:1px solid #0e0f13; 310 | } 311 | 312 | .code-tools span.toggle-tools { 313 | display:block; 314 | } 315 | 316 | .code-tools span.toggle-tools ~ span { 317 | display:none; 318 | } 319 | 320 | .code-tools span.toggle-tools.active, 321 | .code-tools span.toggle-tools:active { 322 | background-color:#0e0f13 !important; 323 | color:#6d8a88; 324 | } 325 | 326 | .code-tools span.toggle-tools.active ~ span { 327 | border-top:1px solid #0e0f13; 328 | display:block; 329 | } 330 | } 331 | 332 | /* Mobile & Tablet */ 333 | @media only screen and (max-width:800px) { 334 | .logo { 335 | position:absolute; 336 | } 337 | 338 | .code-tools { 339 | right:0; 340 | } 341 | 342 | .code-tools span { 343 | border-right:none; 344 | } 345 | 346 | .code-swap { 347 | left:43px; 348 | position:absolute; 349 | } 350 | 351 | .code-swap span { 352 | border-left:1px solid #0e0f13; 353 | display:block; 354 | height:auto; 355 | position:relative; 356 | text-align:left; 357 | z-index:100; 358 | } 359 | 360 | .code-swap span:last-child { 361 | border-bottom:1px solid #0e0f13; 362 | } 363 | 364 | .code-swap span.toggle-view, 365 | .code-swap span.toggle-preview { 366 | display:block; 367 | } 368 | 369 | .code-swap span.toggle-view ~ span { 370 | display:none; 371 | } 372 | 373 | .code-swap span.toggle-view.enabled, 374 | .code-swap span.toggle-view:active { 375 | background-color:#0e0f13 !important; 376 | color:#6d8a88; 377 | } 378 | 379 | .code-swap span.toggle-view.enabled ~ span { 380 | border-top:1px solid #0e0f13; 381 | display:block !important; 382 | } 383 | } 384 | 385 | /* IE10+ */ 386 | @media screen and (-ms-high-contrast:active), (-ms-high-contrast:none) { 387 | .toggle-lineWrapping { 388 | padding:11px 15px 9px !important; 389 | } 390 | } 391 | 392 | .toggle-lineWrapping.css, 393 | .toggle-lineWrapping.js { 394 | position:absolute; 395 | visibility:hidden; 396 | } 397 | 398 | .reset-editor:active, 399 | .clear-editor:active, 400 | .run-script:active { 401 | background-color:#6d8a88; 402 | color:#333540; 403 | } 404 | 405 | 406 | 407 | /* Font Size 408 | ================================================== */ 409 | 410 | .font-size { 411 | border-right:1px solid #0e0f13; 412 | position:relative; 413 | } 414 | 415 | .font-size > input { 416 | appearance:none; 417 | background:none; 418 | background-color:#6d8a88; 419 | border:none; 420 | box-shadow:0 1px 0 #0e0f13; 421 | color:#282a36; 422 | display:block; 423 | font-family:"Fira Code", "Source Code Pro", monospace; 424 | font-size:1rem; 425 | font-weight:700; 426 | height:43px; 427 | padding:11px 15px 11px 52px; 428 | width:128px; 429 | } 430 | 431 | .font-size > label { 432 | color:#282a36; 433 | cursor:text; 434 | font-size:1rem; 435 | left:12px; 436 | position:absolute; 437 | top:13px; 438 | } 439 | 440 | /* Mobile & Tablet */ 441 | @media only screen and (max-width:800px) { 442 | .font-size { 443 | border-top:1px solid #0e0f13; 444 | margin-top:43px; 445 | } 446 | } 447 | 448 | 449 | 450 | /* cdnjs Search 451 | ================================================== */ 452 | 453 | .cdnjs-search { 454 | position:absolute; 455 | right:0; 456 | } 457 | 458 | .cdnjs-search .query { 459 | appearance:none; 460 | background:none; 461 | background-color:#6d8a88; 462 | border:none; 463 | box-shadow:0 1px 0 #0e0f13; 464 | color:#282a36; 465 | display:block; 466 | font-family:"Fira Code", "Source Code Pro", monospace; 467 | font-size:1rem; 468 | font-weight:700; 469 | height:43px; 470 | padding:11px 15px; 471 | width:266px; 472 | } 473 | 474 | /* Placeholder Styles */ 475 | .cdnjs-search .query::-moz-placeholder { color:#48565c; opacity:1; } 476 | .cdnjs-search .query:-ms-input-placeholder { color:#48565c; opacity:1; } 477 | .cdnjs-search .query::-webkit-input-placeholder { color:#48565c; opacity:1; } 478 | 479 | .tt-hint { 480 | color:#48565c !important; 481 | } 482 | 483 | .tt-menu { 484 | margin-top:1px; 485 | max-height:calc(100vh - 44px); 486 | overflow-x:hidden; 487 | overflow-y:auto; 488 | text-align:left; 489 | width:100%; 490 | } 491 | 492 | .tt-menu .lib { 493 | line-height:1.2; 494 | } 495 | 496 | .tt-menu .no-match { 497 | background-color:#6d8a88; 498 | color:#282a36; 499 | font-size:1rem; 500 | font-weight:700; 501 | padding:11px 15px; 502 | } 503 | 504 | .tt-menu .version, 505 | .tt-menu .description { 506 | color:#48565c; 507 | font-size:.8rem; 508 | font-weight:500; 509 | } 510 | 511 | .tt-suggestion { 512 | background-color:#6d8a88; 513 | color:#282a36; 514 | cursor:pointer; 515 | font-size:1rem; 516 | font-weight:700; 517 | padding:11px 15px; 518 | word-wrap:break-word; 519 | } 520 | 521 | .tt-cursor, 522 | .tt-suggestion:hover { 523 | background-color:#0e0f13; 524 | color:#6d8a88; 525 | } 526 | 527 | /* Mobile & Tablet */ 528 | @media only screen and (max-width:800px) { 529 | .cdnjs-search { 530 | border-top:1px solid #0e0f13; 531 | margin-top:43px; 532 | position:relative; 533 | width:100%; 534 | } 535 | 536 | .cdnjs-search .query { 537 | width:calc(100vw - 129px); 538 | } 539 | 540 | .tt-menu { 541 | max-height:calc(100vh - 88px); 542 | } 543 | } 544 | 545 | 546 | 547 | /* Editor 548 | ================================================== */ 549 | 550 | #editor { 551 | display:flex; 552 | flex-direction:row; 553 | height:calc(100vh - 59px); 554 | } 555 | 556 | #preview { 557 | height:100%; 558 | margin-left:16px; 559 | width:calc(100% - 16px); 560 | } 561 | 562 | .preview-width { 563 | background-color:#0e0f13; 564 | bottom:0; 565 | color:#fff; 566 | display:none; 567 | font-size:1rem; 568 | left:16px; 569 | margin:0 auto; 570 | padding:5px 10px 5px 5px; 571 | position:absolute; 572 | } 573 | 574 | .code-pane { 575 | width:calc(50% - 16px); 576 | } 577 | 578 | .preview-pane { 579 | height:calc(100vh - 59px); 580 | position:relative; 581 | width:calc(50% + 16px); 582 | } 583 | 584 | [class^="code-pane-"] { 585 | height:calc(100vh - 59px); 586 | position:relative; 587 | } 588 | 589 | /* Mobile & Tablet */ 590 | @media only screen and (max-width:800px) { 591 | #editor, 592 | #preview, 593 | .code-pane, 594 | .preview-pane, 595 | [class^="code-pane-"] { 596 | height:calc(100vh - 103px); 597 | margin-left:0 !important; 598 | width:100% !important; 599 | width:100vw !important; 600 | } 601 | } 602 | 603 | 604 | 605 | /* Loading Indicator 606 | ================================================== */ 607 | 608 | #load { 609 | background-color:#282a36; 610 | height:100%; 611 | opacity:1; 612 | position:fixed; 613 | transition:opacity 300ms ease-out; 614 | width:100%; 615 | z-index:9999; 616 | } 617 | 618 | .lds-ellipsis { 619 | display:inline-block; 620 | height:39px; 621 | left:50%; 622 | position:absolute; 623 | position:relative; 624 | top:50%; 625 | transform:translate(-50%, -50%); 626 | width:57px; 627 | } 628 | 629 | .lds-ellipsis p { 630 | color:#fff; 631 | font-size:.83rem; 632 | margin:0 auto; 633 | position:absolute; 634 | text-align:center; 635 | } 636 | 637 | .lds-ellipsis div { 638 | animation-timing-function:cubic-bezier(0, 1, 1, 0); 639 | background:#fff; 640 | border-radius:50%; 641 | height:11px; 642 | position:absolute; 643 | top:27px; 644 | width:11px; 645 | } 646 | 647 | .lds-ellipsis div:first-child { 648 | animation:lds-ellipsis1 600ms infinite; 649 | left:4px; 650 | } 651 | 652 | .lds-ellipsis div:nth-child(2) { 653 | animation:lds-ellipsis2 600ms infinite; 654 | left:4px; 655 | } 656 | 657 | .lds-ellipsis div:nth-child(3) { 658 | left:26px; 659 | animation:lds-ellipsis2 600ms infinite; 660 | } 661 | 662 | .lds-ellipsis div:last-child { 663 | animation:lds-ellipsis3 600ms infinite; 664 | left:45px; 665 | } 666 | 667 | @keyframes lds-ellipsis1 { 668 | 0% { transform:scale(0); } 669 | 100% { transform:scale(1); } 670 | } 671 | 672 | @keyframes lds-ellipsis2 { 673 | 0% { transform:translate(0, 0); } 674 | 100% { transform:translate(19px, 0); } 675 | } 676 | 677 | @keyframes lds-ellipsis3 { 678 | 0% { transform:scale(1); } 679 | 100% { transform:scale(0); } 680 | } 681 | -------------------------------------------------------------------------------- /js/main.js: -------------------------------------------------------------------------------- 1 | /*! 2 | ███████ ██████ ██ ████████ ██████ ██████ 3 | ██ ██ ██ ██ ██ ██ ██ ██ ██ 4 | █████ ██ ██ ██ ██ ██ ██ ██████ 5 | ██ ██ ██ ██ ██ ██ ██ ██ ██ 6 | ███████ ██████ ██ ██ ██████ ██ ██ 7 | 2021 ~ Mark Hillard | (mark@)markhillard.com 8 | */ 9 | 10 | 11 | /*! Table Of Contents: 12 | // ------------------------------ 13 | // INITIALIZE CODEMIRROR 14 | // CODE LOADING 15 | // DEFAULTS 16 | // LOCAL STORAGE 17 | // EDITOR UPDATES 18 | // DEPENDENCY INJECTION 19 | // RESIZE FUNCTIONS 20 | // GENERAL FUNCTIONS 21 | // UTILITY FUNCTIONS 22 | // REFRESH EDITOR 23 | // ------------------------------ 24 | */ 25 | 26 | 27 | // make jQuery play nice 28 | var E = $.noConflict(true); 29 | 30 | E(document).ready(function () { 31 | 32 | // INITIALIZE CODEMIRROR 33 | // ------------------------------ 34 | // html code 35 | var editorHTML = document.editor = CodeMirror.fromTextArea(htmlcode, { 36 | mode: 'htmlmixed', 37 | profile: 'html', 38 | keyMap: 'sublime', 39 | lineNumbers: true, 40 | lineWrapping: false, 41 | theme: 'dracula', 42 | tabSize: 4, 43 | indentUnit: 4, 44 | extraKeys: { 45 | 'Tab': 'indentMore' 46 | }, 47 | foldGutter: true, 48 | gutters: ['CodeMirror-lint-markers', 'CodeMirror-linenumbers', 'CodeMirror-foldgutter'], 49 | matchTags: { 50 | bothTags: true 51 | }, 52 | matchBrackets: false, 53 | autoCloseTags: true, 54 | autoCloseBrackets: true, 55 | scrollbarStyle: 'overlay', 56 | styleActiveLine: true, 57 | showTrailingSpace: true, 58 | lint: false 59 | }); 60 | 61 | // css code 62 | var editorCSS = document.editor = CodeMirror.fromTextArea(csscode, { 63 | mode: 'css', 64 | profile: 'css', 65 | keyMap: 'sublime', 66 | lineNumbers: true, 67 | lineWrapping: false, 68 | theme: 'dracula', 69 | tabSize: 4, 70 | indentUnit: 4, 71 | extraKeys: { 72 | 'Tab': 'indentMore' 73 | }, 74 | foldGutter: true, 75 | gutters: ['CodeMirror-lint-markers', 'CodeMirror-linenumbers', 'CodeMirror-foldgutter'], 76 | matchBrackets: true, 77 | autoCloseBrackets: true, 78 | scrollbarStyle: 'overlay', 79 | styleActiveLine: true, 80 | showTrailingSpace: true, 81 | lint: false 82 | }); 83 | 84 | // js code 85 | var editorJS = document.editor = CodeMirror.fromTextArea(jscode, { 86 | mode: 'javascript', 87 | keyMap: 'sublime', 88 | lineNumbers: true, 89 | lineWrapping: false, 90 | theme: 'dracula', 91 | tabSize: 4, 92 | indentUnit: 4, 93 | extraKeys: { 94 | 'Tab': 'indentMore' 95 | }, 96 | foldGutter: true, 97 | gutters: ['CodeMirror-lint-markers', 'CodeMirror-linenumbers', 'CodeMirror-foldgutter'], 98 | matchBrackets: true, 99 | autoCloseBrackets: true, 100 | scrollbarStyle: 'overlay', 101 | styleActiveLine: true, 102 | showTrailingSpace: true, 103 | lint: false 104 | }); 105 | 106 | // font size 107 | var fontSize = E('.font-size input'); 108 | function updateFontSize(editor, size) { 109 | editor.getWrapperElement().style['font-size'] = size + '%'; 110 | editor.refresh(); 111 | } 112 | 113 | 114 | // CODE LOADING 115 | // ------------------------------ 116 | // preview window 117 | var iframe = document.getElementById('preview'), 118 | preview; 119 | 120 | if (iframe.contentDocument) { 121 | preview = iframe.contentDocument; 122 | } else if (iframe.contentWindow) { 123 | preview = iframe.contentWindow.document; 124 | } else { 125 | preview = iframe.document; 126 | } 127 | 128 | // load html 129 | function loadHTML() { 130 | var body = E('#preview').contents().find('body'), 131 | html = editorHTML.getValue(); 132 | 133 | body.html(html); 134 | loadCSS(); 135 | } 136 | 137 | // start html 138 | function startHTML() { 139 | var html = editorHTML.getValue(); 140 | preview.open(); 141 | preview.write(html); 142 | preview.close(); 143 | loadCSS(); 144 | } 145 | 146 | // load css 147 | function loadCSS() { 148 | var head = E('#preview').contents().find('head'), 149 | reset = '', 150 | css = editorCSS.getValue(); 151 | 152 | head.html(reset + ''); 153 | } 154 | 155 | // load js 156 | function loadJS() { 157 | var html = editorHTML.getValue(), 158 | js = editorJS.getValue(); 159 | 160 | preview.open(); 161 | preview.write(html + '\n
\n

Editor

\n

Real-time, responsive HTML/CSS/JS code editor

\n

Fork me on GitHub

\n
', 172 | defaultCSS = '@import url(\"https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700\&display=swap\");\n\nhtml,body {\n background-color: #282a36;\n color: #fff;\n font-family: \"Fira Code\", monospace;\n font-weight: 400;\n overflow: hidden;\n text-align: center;\n}\n\nmain {\n left: 50%;\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n width: 80%;\n}\n\nh1 {\n font-size: 8rem;\n font-weight: 700;\n margin: 0;\n}\n\np {\n font-size: 1rem;\n letter-spacing: .03rem;\n line-height: 1.45;\n margin: 1rem 0;\n}\n\na {\n color: #6d8a88;\n}\n\n@media only screen and (max-width: 600px) {\n h1 {\n font-size: 4rem;\n }\n}', 173 | defaultJS = '$(document).ready(function () {\n $(\'h1\').fadeOut(800).fadeIn(800);\n $(\'p\').first().delay(400).fadeOut(800).fadeIn(400);\n $(\'p\').last().delay(800).fadeOut(800).fadeIn(400);\n});', 174 | defaultFontSize = '100'; 175 | 176 | 177 | // LOCAL STORAGE 178 | // ------------------------------ 179 | // set default html value 180 | if (localStorage.getItem('htmlcode') === null) { 181 | localStorage.setItem('htmlcode', defaultHTML); 182 | } 183 | 184 | // set default css value 185 | if (localStorage.getItem('csscode') === null) { 186 | localStorage.setItem('csscode', defaultCSS); 187 | } 188 | 189 | // set default js value 190 | if (localStorage.getItem('jscode') === null) { 191 | localStorage.setItem('jscode', defaultJS); 192 | } 193 | 194 | // set default font size 195 | if (localStorage.getItem('fontsize') === null) { 196 | localStorage.setItem('fontsize', defaultFontSize); 197 | } 198 | 199 | // load code values 200 | editorHTML.setValue(localStorage.getItem('htmlcode')); 201 | editorCSS.setValue(localStorage.getItem('csscode')); 202 | editorJS.setValue(localStorage.getItem('jscode')); 203 | 204 | // load font size 205 | fontSize.val(localStorage.getItem('fontsize')); 206 | 207 | 208 | // EDITOR UPDATES 209 | // ------------------------------ 210 | // editor update (html) 211 | var delayHTML; 212 | editorHTML.on('change', function () { 213 | if (watch) { 214 | clearTimeout(delayHTML); 215 | delayHTML = setTimeout(loadHTML, 1000); 216 | } 217 | localStorage.setItem('htmlcode', editorHTML.getValue()); 218 | }); 219 | 220 | // editor update (css) 221 | editorCSS.on('change', function () { 222 | if (watch) { 223 | loadCSS(); 224 | } 225 | localStorage.setItem('csscode', editorCSS.getValue()); 226 | }); 227 | 228 | // editor update (js) 229 | editorJS.on('change', function () { 230 | localStorage.setItem('jscode', editorJS.getValue()); 231 | }); 232 | 233 | // run font size update 234 | updateFontSize(editorHTML, fontSize.val()); 235 | updateFontSize(editorCSS, fontSize.val()); 236 | updateFontSize(editorJS, fontSize.val()); 237 | 238 | // run editor update (html) 239 | loadHTML(); 240 | 241 | 242 | // DEPENDENCY INJECTION 243 | // ------------------------------ 244 | // cdnjs typeahead search 245 | var query = E('.cdnjs-search .query'); 246 | E.get('https://api.cdnjs.com/libraries?fields=version,description').done(function (data) { 247 | var searchData = data.results, 248 | search = new Bloodhound({ 249 | datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'), 250 | queryTokenizer: Bloodhound.tokenizers.whitespace, 251 | local: searchData 252 | }); 253 | 254 | query.typeahead(null, { 255 | display: 'name', 256 | name: 'search', 257 | source: search, 258 | limit: Infinity, 259 | templates: { 260 | empty: function () { 261 | return '

unable to match query!

'; 262 | }, 263 | suggestion: function (data) { 264 | return '

' + data.name + ' ' + data.version + '
' + data.description + '

'; 265 | } 266 | } 267 | }).on('typeahead:select', function (e, datum) { 268 | var latest = datum.latest; 269 | loadDep(latest); 270 | clearSearch(); 271 | }).on('typeahead:change', function () { 272 | clearSearch(); 273 | }); 274 | }).fail(function () { 275 | alert('error getting cdnjs libraries!'); 276 | }); 277 | 278 | // clear typeahead search and close results list 279 | function clearSearch() { 280 | query.typeahead('val', ''); 281 | query.typeahead('close'); 282 | } 283 | 284 | // load dependency 285 | function loadDep(url) { 286 | var dep; 287 | if (url.indexOf('<') !== -1) { 288 | dep = url; 289 | } else { 290 | if (url.endsWith('.js')) { 291 | dep = '\n\n\n', 615 | blob = new Blob([text], { 616 | type: 'text/html; charset=utf-8' 617 | }); 618 | 619 | saveAs(blob, 'editor.html'); 620 | }); 621 | 622 | 623 | // REFRESH EDITOR 624 | // ------------------------------ 625 | editorHTML.refresh(); 626 | editorCSS.refresh(); 627 | editorJS.refresh(); 628 | 629 | }); 630 | -------------------------------------------------------------------------------- /js/jquery-ui.min.js: -------------------------------------------------------------------------------- 1 | /*! jQuery UI - v1.13.0 - 2021-12-09 2 | * http://jqueryui.com 3 | * Includes: widget.js, disable-selection.js, widgets/resizable.js, widgets/mouse.js 4 | * Copyright jQuery Foundation and other contributors; Licensed MIT */ 5 | 6 | !function(t){"use strict";"function"==typeof define&&define.amd?define(["jquery"],t):t(jQuery)}(function(_){"use strict";_.ui=_.ui||{};_.ui.version="1.13.0";var n,i=0,h=Array.prototype.hasOwnProperty,a=Array.prototype.slice;_.cleanData=(n=_.cleanData,function(t){for(var e,i,s=0;null!=(i=t[s]);s++)(e=_._data(i,"events"))&&e.remove&&_(i).triggerHandler("remove");n(t)}),_.widget=function(t,i,e){var s,n,o,h={},a=t.split(".")[0],r=a+"-"+(t=t.split(".")[1]);return e||(e=i,i=_.Widget),Array.isArray(e)&&(e=_.extend.apply(null,[{}].concat(e))),_.expr.pseudos[r.toLowerCase()]=function(t){return!!_.data(t,r)},_[a]=_[a]||{},s=_[a][t],n=_[a][t]=function(t,e){if(!this._createWidget)return new n(t,e);arguments.length&&this._createWidget(t,e)},_.extend(n,s,{version:e.version,_proto:_.extend({},e),_childConstructors:[]}),(o=new i).options=_.widget.extend({},o.options),_.each(e,function(e,s){function n(){return i.prototype[e].apply(this,arguments)}function o(t){return i.prototype[e].apply(this,t)}h[e]="function"==typeof s?function(){var t,e=this._super,i=this._superApply;return this._super=n,this._superApply=o,t=s.apply(this,arguments),this._super=e,this._superApply=i,t}:s}),n.prototype=_.widget.extend(o,{widgetEventPrefix:s&&o.widgetEventPrefix||t},h,{constructor:n,namespace:a,widgetName:t,widgetFullName:r}),s?(_.each(s._childConstructors,function(t,e){var i=e.prototype;_.widget(i.namespace+"."+i.widgetName,n,e._proto)}),delete s._childConstructors):i._childConstructors.push(n),_.widget.bridge(t,n),n},_.widget.extend=function(t){for(var e,i,s=a.call(arguments,1),n=0,o=s.length;n",options:{classes:{},disabled:!1,create:null},_createWidget:function(t,e){e=_(e||this.defaultElement||this)[0],this.element=_(e),this.uuid=i++,this.eventNamespace="."+this.widgetName+this.uuid,this.bindings=_(),this.hoverable=_(),this.focusable=_(),this.classesElementLookup={},e!==this&&(_.data(e,this.widgetFullName,this),this._on(!0,this.element,{remove:function(t){t.target===e&&this.destroy()}}),this.document=_(e.style?e.ownerDocument:e.document||e),this.window=_(this.document[0].defaultView||this.document[0].parentWindow)),this.options=_.widget.extend({},this.options,this._getCreateOptions(),t),this._create(),this.options.disabled&&this._setOptionDisabled(this.options.disabled),this._trigger("create",null,this._getCreateEventData()),this._init()},_getCreateOptions:function(){return{}},_getCreateEventData:_.noop,_create:_.noop,_init:_.noop,destroy:function(){var i=this;this._destroy(),_.each(this.classesElementLookup,function(t,e){i._removeClass(e,t)}),this.element.off(this.eventNamespace).removeData(this.widgetFullName),this.widget().off(this.eventNamespace).removeAttr("aria-disabled"),this.bindings.off(this.eventNamespace)},_destroy:_.noop,widget:function(){return this.element},option:function(t,e){var i,s,n,o=t;if(0===arguments.length)return _.widget.extend({},this.options);if("string"==typeof t)if(o={},t=(i=t.split(".")).shift(),i.length){for(s=o[t]=_.widget.extend({},this.options[t]),n=0;n=this.options.distance},_mouseDelayMet:function(){return this.mouseDelayMet},_mouseStart:function(){},_mouseDrag:function(){},_mouseStop:function(){},_mouseCapture:function(){return!0}}),_.ui.plugin={add:function(t,e,i){var s,n=_.ui[t].prototype;for(s in i)n.plugins[s]=n.plugins[s]||[],n.plugins[s].push([e,i[s]])},call:function(t,e,i,s){var n,o=t.plugins[e];if(o&&(s||t.element[0].parentNode&&11!==t.element[0].parentNode.nodeType))for(n=0;n").css({overflow:"hidden",position:this.element.css("position"),width:this.element.outerWidth(),height:this.element.outerHeight(),top:this.element.css("top"),left:this.element.css("left")})),this.element=this.element.parent().data("ui-resizable",this.element.resizable("instance")),this.elementIsWrapper=!0,t={marginTop:this.originalElement.css("marginTop"),marginRight:this.originalElement.css("marginRight"),marginBottom:this.originalElement.css("marginBottom"),marginLeft:this.originalElement.css("marginLeft")},this.element.css(t),this.originalElement.css("margin",0),this.originalResizeStyle=this.originalElement.css("resize"),this.originalElement.css("resize","none"),this._proportionallyResizeElements.push(this.originalElement.css({position:"static",zoom:1,display:"block"})),this.originalElement.css(t),this._proportionallyResize()),this._setupHandles(),e.autoHide&&_(this.element).on("mouseenter",function(){e.disabled||(i._removeClass("ui-resizable-autohide"),i._handles.show())}).on("mouseleave",function(){e.disabled||i.resizing||(i._addClass("ui-resizable-autohide"),i._handles.hide())}),this._mouseInit()},_destroy:function(){this._mouseDestroy(),this._addedHandles.remove();function t(t){_(t).removeData("resizable").removeData("ui-resizable").off(".resizable")}var e;return this.elementIsWrapper&&(t(this.element),e=this.element,this.originalElement.css({position:e.css("position"),width:e.outerWidth(),height:e.outerHeight(),top:e.css("top"),left:e.css("left")}).insertAfter(e),e.remove()),this.originalElement.css("resize",this.originalResizeStyle),t(this.originalElement),this},_setOption:function(t,e){switch(this._super(t,e),t){case"handles":this._removeHandles(),this._setupHandles();break;case"aspectRatio":this._aspectRatio=!!e}},_setupHandles:function(){var t,e,i,s,n,o=this.options,h=this;if(this.handles=o.handles||(_(".ui-resizable-handle",this.element).length?{n:".ui-resizable-n",e:".ui-resizable-e",s:".ui-resizable-s",w:".ui-resizable-w",se:".ui-resizable-se",sw:".ui-resizable-sw",ne:".ui-resizable-ne",nw:".ui-resizable-nw"}:"e,s,se"),this._handles=_(),this._addedHandles=_(),this.handles.constructor===String)for("all"===this.handles&&(this.handles="n,e,s,w,se,sw,ne,nw"),i=this.handles.split(","),this.handles={},e=0;e"),this._addClass(n,"ui-resizable-handle "+s),n.css({zIndex:o.zIndex}),this.handles[t]=".ui-resizable-"+t,this.element.children(this.handles[t]).length||(this.element.append(n),this._addedHandles=this._addedHandles.add(n));this._renderAxis=function(t){var e,i,s;for(e in t=t||this.element,this.handles)this.handles[e].constructor===String?this.handles[e]=this.element.children(this.handles[e]).first().show():(this.handles[e].jquery||this.handles[e].nodeType)&&(this.handles[e]=_(this.handles[e]),this._on(this.handles[e],{mousedown:h._mouseDown})),this.elementIsWrapper&&this.originalElement[0].nodeName.match(/^(textarea|input|select|button)$/i)&&(i=_(this.handles[e],this.element),s=/sw|ne|nw|se|n|s/.test(e)?i.outerHeight():i.outerWidth(),i=["padding",/ne|nw|n/.test(e)?"Top":/se|sw|s/.test(e)?"Bottom":/^e$/.test(e)?"Right":"Left"].join(""),t.css(i,s),this._proportionallyResize()),this._handles=this._handles.add(this.handles[e])},this._renderAxis(this.element),this._handles=this._handles.add(this.element.find(".ui-resizable-handle")),this._handles.disableSelection(),this._handles.on("mouseover",function(){h.resizing||(this.className&&(n=this.className.match(/ui-resizable-(se|sw|ne|nw|n|e|s|w)/i)),h.axis=n&&n[1]?n[1]:"se")}),o.autoHide&&(this._handles.hide(),this._addClass("ui-resizable-autohide"))},_removeHandles:function(){this._addedHandles.remove()},_mouseCapture:function(t){var e,i,s=!1;for(e in this.handles)(i=_(this.handles[e])[0])!==t.target&&!_.contains(i,t.target)||(s=!0);return!this.options.disabled&&s},_mouseStart:function(t){var e,i,s=this.options,n=this.element;return this.resizing=!0,this._renderProxy(),e=this._num(this.helper.css("left")),i=this._num(this.helper.css("top")),s.containment&&(e+=_(s.containment).scrollLeft()||0,i+=_(s.containment).scrollTop()||0),this.offset=this.helper.offset(),this.position={left:e,top:i},this.size=this._helper?{width:this.helper.width(),height:this.helper.height()}:{width:n.width(),height:n.height()},this.originalSize=this._helper?{width:n.outerWidth(),height:n.outerHeight()}:{width:n.width(),height:n.height()},this.sizeDiff={width:n.outerWidth()-n.width(),height:n.outerHeight()-n.height()},this.originalPosition={left:e,top:i},this.originalMousePosition={left:t.pageX,top:t.pageY},this.aspectRatio="number"==typeof s.aspectRatio?s.aspectRatio:this.originalSize.width/this.originalSize.height||1,s=_(".ui-resizable-"+this.axis).css("cursor"),_("body").css("cursor","auto"===s?this.axis+"-resize":s),this._addClass("ui-resizable-resizing"),this._propagate("start",t),!0},_mouseDrag:function(t){var e=this.originalMousePosition,i=this.axis,s=t.pageX-e.left||0,e=t.pageY-e.top||0,i=this._change[i];return this._updatePrevProperties(),i&&(e=i.apply(this,[t,s,e]),this._updateVirtualBoundaries(t.shiftKey),(this._aspectRatio||t.shiftKey)&&(e=this._updateRatio(e,t)),e=this._respectSize(e,t),this._updateCache(e),this._propagate("resize",t),e=this._applyChanges(),!this._helper&&this._proportionallyResizeElements.length&&this._proportionallyResize(),_.isEmptyObject(e)||(this._updatePrevProperties(),this._trigger("resize",t,this.ui()),this._applyChanges())),!1},_mouseStop:function(t){this.resizing=!1;var e,i,s,n=this.options,o=this;return this._helper&&(s=(e=(i=this._proportionallyResizeElements).length&&/textarea/i.test(i[0].nodeName))&&this._hasScroll(i[0],"left")?0:o.sizeDiff.height,i=e?0:o.sizeDiff.width,e={width:o.helper.width()-i,height:o.helper.height()-s},i=parseFloat(o.element.css("left"))+(o.position.left-o.originalPosition.left)||null,s=parseFloat(o.element.css("top"))+(o.position.top-o.originalPosition.top)||null,n.animate||this.element.css(_.extend(e,{top:s,left:i})),o.helper.height(o.size.height),o.helper.width(o.size.width),this._helper&&!n.animate&&this._proportionallyResize()),_("body").css("cursor","auto"),this._removeClass("ui-resizable-resizing"),this._propagate("stop",t),this._helper&&this.helper.remove(),!1},_updatePrevProperties:function(){this.prevPosition={top:this.position.top,left:this.position.left},this.prevSize={width:this.size.width,height:this.size.height}},_applyChanges:function(){var t={};return this.position.top!==this.prevPosition.top&&(t.top=this.position.top+"px"),this.position.left!==this.prevPosition.left&&(t.left=this.position.left+"px"),this.size.width!==this.prevSize.width&&(t.width=this.size.width+"px"),this.size.height!==this.prevSize.height&&(t.height=this.size.height+"px"),this.helper.css(t),t},_updateVirtualBoundaries:function(t){var e,i,s=this.options,n={minWidth:this._isNumber(s.minWidth)?s.minWidth:0,maxWidth:this._isNumber(s.maxWidth)?s.maxWidth:1/0,minHeight:this._isNumber(s.minHeight)?s.minHeight:0,maxHeight:this._isNumber(s.maxHeight)?s.maxHeight:1/0};(this._aspectRatio||t)&&(e=n.minHeight*this.aspectRatio,i=n.minWidth/this.aspectRatio,s=n.maxHeight*this.aspectRatio,t=n.maxWidth/this.aspectRatio,e>n.minWidth&&(n.minWidth=e),i>n.minHeight&&(n.minHeight=i),st.width,h=this._isNumber(t.height)&&e.minHeight&&e.minHeight>t.height,a=this.originalPosition.left+this.originalSize.width,r=this.originalPosition.top+this.originalSize.height,l=/sw|nw|w/.test(i),i=/nw|ne|n/.test(i);return o&&(t.width=e.minWidth),h&&(t.height=e.minHeight),s&&(t.width=e.maxWidth),n&&(t.height=e.maxHeight),o&&l&&(t.left=a-e.minWidth),s&&l&&(t.left=a-e.maxWidth),h&&i&&(t.top=r-e.minHeight),n&&i&&(t.top=r-e.maxHeight),t.width||t.height||t.left||!t.top?t.width||t.height||t.top||!t.left||(t.left=null):t.top=null,t},_getPaddingPlusBorderDimensions:function(t){for(var e=0,i=[],s=[t.css("borderTopWidth"),t.css("borderRightWidth"),t.css("borderBottomWidth"),t.css("borderLeftWidth")],n=[t.css("paddingTop"),t.css("paddingRight"),t.css("paddingBottom"),t.css("paddingLeft")];e<4;e++)i[e]=parseFloat(s[e])||0,i[e]+=parseFloat(n[e])||0;return{height:i[0]+i[2],width:i[1]+i[3]}},_proportionallyResize:function(){if(this._proportionallyResizeElements.length)for(var t,e=0,i=this.helper||this.element;e").css({overflow:"hidden"}),this._addClass(this.helper,this._helper),this.helper.css({width:this.element.outerWidth(),height:this.element.outerHeight(),position:"absolute",left:this.elementOffset.left+"px",top:this.elementOffset.top+"px",zIndex:++e.zIndex}),this.helper.appendTo("body").disableSelection()):this.helper=this.element},_change:{e:function(t,e){return{width:this.originalSize.width+e}},w:function(t,e){var i=this.originalSize;return{left:this.originalPosition.left+e,width:i.width-e}},n:function(t,e,i){var s=this.originalSize;return{top:this.originalPosition.top+i,height:s.height-i}},s:function(t,e,i){return{height:this.originalSize.height+i}},se:function(t,e,i){return _.extend(this._change.s.apply(this,arguments),this._change.e.apply(this,[t,e,i]))},sw:function(t,e,i){return _.extend(this._change.s.apply(this,arguments),this._change.w.apply(this,[t,e,i]))},ne:function(t,e,i){return _.extend(this._change.n.apply(this,arguments),this._change.e.apply(this,[t,e,i]))},nw:function(t,e,i){return _.extend(this._change.n.apply(this,arguments),this._change.w.apply(this,[t,e,i]))}},_propagate:function(t,e){_.ui.plugin.call(this,t,[e,this.ui()]),"resize"!==t&&this._trigger(t,e,this.ui())},plugins:{},ui:function(){return{originalElement:this.originalElement,element:this.element,helper:this.helper,position:this.position,size:this.size,originalSize:this.originalSize,originalPosition:this.originalPosition}}}),_.ui.plugin.add("resizable","animate",{stop:function(e){var i=_(this).resizable("instance"),t=i.options,s=i._proportionallyResizeElements,n=s.length&&/textarea/i.test(s[0].nodeName),o=n&&i._hasScroll(s[0],"left")?0:i.sizeDiff.height,h=n?0:i.sizeDiff.width,n={width:i.size.width-h,height:i.size.height-o},h=parseFloat(i.element.css("left"))+(i.position.left-i.originalPosition.left)||null,o=parseFloat(i.element.css("top"))+(i.position.top-i.originalPosition.top)||null;i.element.animate(_.extend(n,o&&h?{top:o,left:h}:{}),{duration:t.animateDuration,easing:t.animateEasing,step:function(){var t={width:parseFloat(i.element.css("width")),height:parseFloat(i.element.css("height")),top:parseFloat(i.element.css("top")),left:parseFloat(i.element.css("left"))};s&&s.length&&_(s[0]).css({width:t.width,height:t.height}),i._updateCache(t),i._propagate("resize",e)}})}}),_.ui.plugin.add("resizable","containment",{start:function(){var i,s,n=_(this).resizable("instance"),t=n.options,e=n.element,o=t.containment,h=o instanceof _?o.get(0):/parent/.test(o)?e.parent().get(0):o;h&&(n.containerElement=_(h),/document/.test(o)||o===document?(n.containerOffset={left:0,top:0},n.containerPosition={left:0,top:0},n.parentData={element:_(document),left:0,top:0,width:_(document).width(),height:_(document).height()||document.body.parentNode.scrollHeight}):(i=_(h),s=[],_(["Top","Right","Left","Bottom"]).each(function(t,e){s[t]=n._num(i.css("padding"+e))}),n.containerOffset=i.offset(),n.containerPosition=i.position(),n.containerSize={height:i.innerHeight()-s[3],width:i.innerWidth()-s[1]},t=n.containerOffset,e=n.containerSize.height,o=n.containerSize.width,o=n._hasScroll(h,"left")?h.scrollWidth:o,e=n._hasScroll(h)?h.scrollHeight:e,n.parentData={element:h,left:t.left,top:t.top,width:o,height:e}))},resize:function(t){var e=_(this).resizable("instance"),i=e.options,s=e.containerOffset,n=e.position,o=e._aspectRatio||t.shiftKey,h={top:0,left:0},a=e.containerElement,t=!0;a[0]!==document&&/static/.test(a.css("position"))&&(h=s),n.left<(e._helper?s.left:0)&&(e.size.width=e.size.width+(e._helper?e.position.left-s.left:e.position.left-h.left),o&&(e.size.height=e.size.width/e.aspectRatio,t=!1),e.position.left=i.helper?s.left:0),n.top<(e._helper?s.top:0)&&(e.size.height=e.size.height+(e._helper?e.position.top-s.top:e.position.top),o&&(e.size.width=e.size.height*e.aspectRatio,t=!1),e.position.top=e._helper?s.top:0),i=e.containerElement.get(0)===e.element.parent().get(0),n=/relative|absolute/.test(e.containerElement.css("position")),i&&n?(e.offset.left=e.parentData.left+e.position.left,e.offset.top=e.parentData.top+e.position.top):(e.offset.left=e.element.offset().left,e.offset.top=e.element.offset().top),n=Math.abs(e.sizeDiff.width+(e._helper?e.offset.left-h.left:e.offset.left-s.left)),s=Math.abs(e.sizeDiff.height+(e._helper?e.offset.top-h.top:e.offset.top-s.top)),n+e.size.width>=e.parentData.width&&(e.size.width=e.parentData.width-n,o&&(e.size.height=e.size.width/e.aspectRatio,t=!1)),s+e.size.height>=e.parentData.height&&(e.size.height=e.parentData.height-s,o&&(e.size.width=e.size.height*e.aspectRatio,t=!1)),t||(e.position.left=e.prevPosition.left,e.position.top=e.prevPosition.top,e.size.width=e.prevSize.width,e.size.height=e.prevSize.height)},stop:function(){var t=_(this).resizable("instance"),e=t.options,i=t.containerOffset,s=t.containerPosition,n=t.containerElement,o=_(t.helper),h=o.offset(),a=o.outerWidth()-t.sizeDiff.width,o=o.outerHeight()-t.sizeDiff.height;t._helper&&!e.animate&&/relative/.test(n.css("position"))&&_(this).css({left:h.left-s.left-i.left,width:a,height:o}),t._helper&&!e.animate&&/static/.test(n.css("position"))&&_(this).css({left:h.left-s.left-i.left,width:a,height:o})}}),_.ui.plugin.add("resizable","alsoResize",{start:function(){var t=_(this).resizable("instance").options;_(t.alsoResize).each(function(){var t=_(this);t.data("ui-resizable-alsoresize",{width:parseFloat(t.width()),height:parseFloat(t.height()),left:parseFloat(t.css("left")),top:parseFloat(t.css("top"))})})},resize:function(t,i){var e=_(this).resizable("instance"),s=e.options,n=e.originalSize,o=e.originalPosition,h={height:e.size.height-n.height||0,width:e.size.width-n.width||0,top:e.position.top-o.top||0,left:e.position.left-o.left||0};_(s.alsoResize).each(function(){var t=_(this),s=_(this).data("ui-resizable-alsoresize"),n={},e=t.parents(i.originalElement[0]).length?["width","height"]:["width","height","top","left"];_.each(e,function(t,e){var i=(s[e]||0)+(h[e]||0);i&&0<=i&&(n[e]=i||null)}),t.css(n)})},stop:function(){_(this).removeData("ui-resizable-alsoresize")}}),_.ui.plugin.add("resizable","ghost",{start:function(){var t=_(this).resizable("instance"),e=t.size;t.ghost=t.originalElement.clone(),t.ghost.css({opacity:.25,display:"block",position:"relative",height:e.height,width:e.width,margin:0,left:0,top:0}),t._addClass(t.ghost,"ui-resizable-ghost"),!1!==_.uiBackCompat&&"string"==typeof t.options.ghost&&t.ghost.addClass(this.options.ghost),t.ghost.appendTo(t.helper)},resize:function(){var t=_(this).resizable("instance");t.ghost&&t.ghost.css({position:"relative",height:t.size.height,width:t.size.width})},stop:function(){var t=_(this).resizable("instance");t.ghost&&t.helper&&t.helper.get(0).removeChild(t.ghost.get(0))}}),_.ui.plugin.add("resizable","grid",{resize:function(){var t,e=_(this).resizable("instance"),i=e.options,s=e.size,n=e.originalSize,o=e.originalPosition,h=e.axis,a="number"==typeof i.grid?[i.grid,i.grid]:i.grid,r=a[0]||1,l=a[1]||1,p=Math.round((s.width-n.width)/r)*r,u=Math.round((s.height-n.height)/l)*l,d=n.width+p,c=n.height+u,g=i.maxWidth&&i.maxWidthd,s=i.minHeight&&i.minHeight>c;i.grid=a,f&&(d+=r),s&&(c+=l),g&&(d-=r),m&&(c-=l),/^(se|s|e)$/.test(h)?(e.size.width=d,e.size.height=c):/^(ne)$/.test(h)?(e.size.width=d,e.size.height=c,e.position.top=o.top-u):/^(sw)$/.test(h)?(e.size.width=d,e.size.height=c,e.position.left=o.left-p):((c-l<=0||d-r<=0)&&(t=e._getPaddingPlusBorderDimensions(this)),0