mirror of
https://github.com/odoo/owl.git
synced 2025-10-06 19:59:41 +07:00
[REF] github page: move page to docs folder on master branch
Currently, some of the things on the playground must be changed directly on the master branch while other things require checking out the gh-pages branch and making the modifications there. Even when changes need to be made on the master branch, all changes that are not direcly in owl itself need to be copied by hand to the gh-pages branch. This commit moves all files that exist on the gh-pages branch to the master branch in the docs folder, this change will require configuring the github page to use the docs folder instead of a separate branch, but will make maintenance of the github page and playground easier going forward.
This commit is contained in:
Samuel Degueldre
committed by
Géry Debongnie
Géry Debongnie
parent
9475de4d18
commit
b8b5190bc6
@@ -1,18 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>OWL Playground</title>
|
||||
<link rel="icon" href="data:,">
|
||||
|
||||
<script src="libs/ace.js" type="text/javascript" charset="utf-8"></script>
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/solid.css" integrity="sha384-QokYePQSOwpBDuhlHOsX0ymF6R/vLk/UQVz3WHa6wygxI5oGTmDTv8wahFOSspdm" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/fontawesome.css" integrity="sha384-vd1e11sR28tEK9YANUtpIOdjGW14pS87bUBuOIoBILVWLFnS+MCX9T6MMf0VdPGq" crossorigin="anonymous">
|
||||
|
||||
<!-- Application JS/CSS -->
|
||||
<link rel="stylesheet" href="playground.css">
|
||||
<script type="module" src="playground.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
-3
@@ -1,3 +0,0 @@
|
||||
(function(a,b){if("function"==typeof define&&define.amd)define([],b);else if("undefined"!=typeof exports)b();else{b(),a.FileSaver={exports:{}}.exports}})(this,function(){"use strict";function b(a,b){return"undefined"==typeof b?b={autoBom:!1}:"object"!=typeof b&&(console.warn("Depricated: Expected third argument to be a object"),b={autoBom:!b}),b.autoBom&&/^\s*(?:text\/\S*|application\/xml|\S*\/\S*\+xml)\s*;.*charset\s*=\s*utf-8/i.test(a.type)?new Blob(["\uFEFF",a],{type:a.type}):a}function c(b,c,d){var e=new XMLHttpRequest;e.open("GET",b),e.responseType="blob",e.onload=function(){a(e.response,c,d)},e.onerror=function(){console.error("could not download file")},e.send()}function d(a){var b=new XMLHttpRequest;return b.open("HEAD",a,!1),b.send(),200<=b.status&&299>=b.status}function e(a){try{a.dispatchEvent(new MouseEvent("click"))}catch(c){var b=document.createEvent("MouseEvents");b.initMouseEvent("click",!0,!0,window,0,0,0,80,20,!1,!1,!1,!1,0,null),a.dispatchEvent(b)}}var f="object"==typeof window&&window.window===window?window:"object"==typeof self&&self.self===self?self:"object"==typeof global&&global.global===global?global:void 0,a=f.saveAs||("object"!=typeof window||window!==f?function(){}:"download"in HTMLAnchorElement.prototype?function(b,g,h){var i=f.URL||f.webkitURL,j=document.createElement("a");g=g||b.name||"download",j.download=g,j.rel="noopener","string"==typeof b?(j.href=b,j.origin===location.origin?e(j):d(j.href)?c(b,g,h):e(j,j.target="_blank")):(j.href=i.createObjectURL(b),setTimeout(function(){i.revokeObjectURL(j.href)},4E4),setTimeout(function(){e(j)},0))}:"msSaveOrOpenBlob"in navigator?function(f,g,h){if(g=g||f.name||"download","string"!=typeof f)navigator.msSaveOrOpenBlob(b(f,h),g);else if(d(f))c(f,g,h);else{var i=document.createElement("a");i.href=f,i.target="_blank",setTimeout(function(){e(i)})}}:function(a,b,d,e){if(e=e||open("","_blank"),e&&(e.document.title=e.document.body.innerText="downloading..."),"string"==typeof a)return c(a,b,d);var g="application/octet-stream"===a.type,h=/constructor/i.test(f.HTMLElement)||f.safari,i=/CriOS\/[\d]+/.test(navigator.userAgent);if((i||g&&h)&&"object"==typeof FileReader){var j=new FileReader;j.onloadend=function(){var a=j.result;a=i?a:a.replace(/^data:[^;]*;/,"data:attachment/file;"),e?e.location.href=a:location=a,e=null},j.readAsDataURL(a)}else{var k=f.URL||f.webkitURL,l=k.createObjectURL(a);e?e.location=l:location.href=l,e=null,setTimeout(function(){k.revokeObjectURL(l)},4E4)}});f.saveAs=a.saveAs=a,"undefined"!=typeof module&&(module.exports=a)});
|
||||
|
||||
//# sourceMappingURL=FileSaver.min.js.map
|
||||
File diff suppressed because it is too large
Load Diff
Vendored
-15
File diff suppressed because one or more lines are too long
@@ -1,980 +0,0 @@
|
||||
ace.define(
|
||||
"ace/mode/css_highlight_rules",
|
||||
[
|
||||
"require",
|
||||
"exports",
|
||||
"module",
|
||||
"ace/lib/oop",
|
||||
"ace/lib/lang",
|
||||
"ace/mode/text_highlight_rules"
|
||||
],
|
||||
function(require, exports, module) {
|
||||
"use strict";
|
||||
|
||||
var oop = require("../lib/oop");
|
||||
var lang = require("../lib/lang");
|
||||
var TextHighlightRules = require("./text_highlight_rules")
|
||||
.TextHighlightRules;
|
||||
var supportType = (exports.supportType =
|
||||
"align-content|align-items|align-self|all|animation|animation-delay|animation-direction|animation-duration|animation-fill-mode|animation-iteration-count|animation-name|animation-play-state|animation-timing-function|backface-visibility|background|background-attachment|background-blend-mode|background-clip|background-color|background-image|background-origin|background-position|background-repeat|background-size|border|border-bottom|border-bottom-color|border-bottom-left-radius|border-bottom-right-radius|border-bottom-style|border-bottom-width|border-collapse|border-color|border-image|border-image-outset|border-image-repeat|border-image-slice|border-image-source|border-image-width|border-left|border-left-color|border-left-style|border-left-width|border-radius|border-right|border-right-color|border-right-style|border-right-width|border-spacing|border-style|border-top|border-top-color|border-top-left-radius|border-top-right-radius|border-top-style|border-top-width|border-width|bottom|box-shadow|box-sizing|caption-side|clear|clip|color|column-count|column-fill|column-gap|column-rule|column-rule-color|column-rule-style|column-rule-width|column-span|column-width|columns|content|counter-increment|counter-reset|cursor|direction|display|empty-cells|filter|flex|flex-basis|flex-direction|flex-flow|flex-grow|flex-shrink|flex-wrap|float|font|font-family|font-size|font-size-adjust|font-stretch|font-style|font-variant|font-weight|hanging-punctuation|height|justify-content|left|letter-spacing|line-height|list-style|list-style-image|list-style-position|list-style-type|margin|margin-bottom|margin-left|margin-right|margin-top|max-height|max-width|max-zoom|min-height|min-width|min-zoom|nav-down|nav-index|nav-left|nav-right|nav-up|opacity|order|outline|outline-color|outline-offset|outline-style|outline-width|overflow|overflow-x|overflow-y|padding|padding-bottom|padding-left|padding-right|padding-top|page-break-after|page-break-before|page-break-inside|perspective|perspective-origin|position|quotes|resize|right|tab-size|table-layout|text-align|text-align-last|text-decoration|text-decoration-color|text-decoration-line|text-decoration-style|text-indent|text-justify|text-overflow|text-shadow|text-transform|top|transform|transform-origin|transform-style|transition|transition-delay|transition-duration|transition-property|transition-timing-function|unicode-bidi|user-select|user-zoom|vertical-align|visibility|white-space|width|word-break|word-spacing|word-wrap|z-index");
|
||||
var supportFunction = (exports.supportFunction =
|
||||
"rgb|rgba|url|attr|counter|counters");
|
||||
var supportConstant = (exports.supportConstant =
|
||||
"absolute|after-edge|after|all-scroll|all|alphabetic|always|antialiased|armenian|auto|avoid-column|avoid-page|avoid|balance|baseline|before-edge|before|below|bidi-override|block-line-height|block|bold|bolder|border-box|both|bottom|box|break-all|break-word|capitalize|caps-height|caption|center|central|char|circle|cjk-ideographic|clone|close-quote|col-resize|collapse|column|consider-shifts|contain|content-box|cover|crosshair|cubic-bezier|dashed|decimal-leading-zero|decimal|default|disabled|disc|disregard-shifts|distribute-all-lines|distribute-letter|distribute-space|distribute|dotted|double|e-resize|ease-in|ease-in-out|ease-out|ease|ellipsis|end|exclude-ruby|fill|fixed|georgian|glyphs|grid-height|groove|hand|hanging|hebrew|help|hidden|hiragana-iroha|hiragana|horizontal|icon|ideograph-alpha|ideograph-numeric|ideograph-parenthesis|ideograph-space|ideographic|inactive|include-ruby|inherit|initial|inline-block|inline-box|inline-line-height|inline-table|inline|inset|inside|inter-ideograph|inter-word|invert|italic|justify|katakana-iroha|katakana|keep-all|last|left|lighter|line-edge|line-through|line|linear|list-item|local|loose|lower-alpha|lower-greek|lower-latin|lower-roman|lowercase|lr-tb|ltr|mathematical|max-height|max-size|medium|menu|message-box|middle|move|n-resize|ne-resize|newspaper|no-change|no-close-quote|no-drop|no-open-quote|no-repeat|none|normal|not-allowed|nowrap|nw-resize|oblique|open-quote|outset|outside|overline|padding-box|page|pointer|pre-line|pre-wrap|pre|preserve-3d|progress|relative|repeat-x|repeat-y|repeat|replaced|reset-size|ridge|right|round|row-resize|rtl|s-resize|scroll|se-resize|separate|slice|small-caps|small-caption|solid|space|square|start|static|status-bar|step-end|step-start|steps|stretch|strict|sub|super|sw-resize|table-caption|table-cell|table-column-group|table-column|table-footer-group|table-header-group|table-row-group|table-row|table|tb-rl|text-after-edge|text-before-edge|text-bottom|text-size|text-top|text|thick|thin|transparent|underline|upper-alpha|upper-latin|upper-roman|uppercase|use-script|vertical-ideographic|vertical-text|visible|w-resize|wait|whitespace|z-index|zero|zoom");
|
||||
var supportConstantColor = (exports.supportConstantColor =
|
||||
"aliceblue|antiquewhite|aqua|aquamarine|azure|beige|bisque|black|blanchedalmond|blue|blueviolet|brown|burlywood|cadetblue|chartreuse|chocolate|coral|cornflowerblue|cornsilk|crimson|cyan|darkblue|darkcyan|darkgoldenrod|darkgray|darkgreen|darkgrey|darkkhaki|darkmagenta|darkolivegreen|darkorange|darkorchid|darkred|darksalmon|darkseagreen|darkslateblue|darkslategray|darkslategrey|darkturquoise|darkviolet|deeppink|deepskyblue|dimgray|dimgrey|dodgerblue|firebrick|floralwhite|forestgreen|fuchsia|gainsboro|ghostwhite|gold|goldenrod|gray|green|greenyellow|grey|honeydew|hotpink|indianred|indigo|ivory|khaki|lavender|lavenderblush|lawngreen|lemonchiffon|lightblue|lightcoral|lightcyan|lightgoldenrodyellow|lightgray|lightgreen|lightgrey|lightpink|lightsalmon|lightseagreen|lightskyblue|lightslategray|lightslategrey|lightsteelblue|lightyellow|lime|limegreen|linen|magenta|maroon|mediumaquamarine|mediumblue|mediumorchid|mediumpurple|mediumseagreen|mediumslateblue|mediumspringgreen|mediumturquoise|mediumvioletred|midnightblue|mintcream|mistyrose|moccasin|navajowhite|navy|oldlace|olive|olivedrab|orange|orangered|orchid|palegoldenrod|palegreen|paleturquoise|palevioletred|papayawhip|peachpuff|peru|pink|plum|powderblue|purple|rebeccapurple|red|rosybrown|royalblue|saddlebrown|salmon|sandybrown|seagreen|seashell|sienna|silver|skyblue|slateblue|slategray|slategrey|snow|springgreen|steelblue|tan|teal|thistle|tomato|turquoise|violet|wheat|white|whitesmoke|yellow|yellowgreen");
|
||||
var supportConstantFonts = (exports.supportConstantFonts =
|
||||
"arial|century|comic|courier|cursive|fantasy|garamond|georgia|helvetica|impact|lucida|symbol|system|tahoma|times|trebuchet|utopia|verdana|webdings|sans-serif|serif|monospace");
|
||||
|
||||
var numRe = (exports.numRe =
|
||||
"\\-?(?:(?:[0-9]+(?:\\.[0-9]+)?)|(?:\\.[0-9]+))");
|
||||
var pseudoElements = (exports.pseudoElements =
|
||||
"(\\:+)\\b(after|before|first-letter|first-line|moz-selection|selection)\\b");
|
||||
var pseudoClasses = (exports.pseudoClasses =
|
||||
"(:)\\b(active|checked|disabled|empty|enabled|first-child|first-of-type|focus|hover|indeterminate|invalid|last-child|last-of-type|link|not|nth-child|nth-last-child|nth-last-of-type|nth-of-type|only-child|only-of-type|required|root|target|valid|visited)\\b");
|
||||
|
||||
var CssHighlightRules = function() {
|
||||
var keywordMapper = this.createKeywordMapper(
|
||||
{
|
||||
"support.function": supportFunction,
|
||||
"support.constant": supportConstant,
|
||||
"support.type": supportType,
|
||||
"support.constant.color": supportConstantColor,
|
||||
"support.constant.fonts": supportConstantFonts
|
||||
},
|
||||
"text",
|
||||
true
|
||||
);
|
||||
|
||||
this.$rules = {
|
||||
start: [
|
||||
{
|
||||
include: ["strings", "url", "comments"]
|
||||
},
|
||||
{
|
||||
token: "paren.lparen",
|
||||
regex: "\\{",
|
||||
next: "ruleset"
|
||||
},
|
||||
{
|
||||
token: "paren.rparen",
|
||||
regex: "\\}"
|
||||
},
|
||||
{
|
||||
token: "string",
|
||||
regex: "@(?!viewport)",
|
||||
next: "media"
|
||||
},
|
||||
{
|
||||
token: "keyword",
|
||||
regex: "#[a-z0-9-_]+"
|
||||
},
|
||||
{
|
||||
token: "keyword",
|
||||
regex: "%"
|
||||
},
|
||||
{
|
||||
token: "variable",
|
||||
regex: "\\.[a-z0-9-_]+"
|
||||
},
|
||||
{
|
||||
token: "string",
|
||||
regex: ":[a-z0-9-_]+"
|
||||
},
|
||||
{
|
||||
token: "constant.numeric",
|
||||
regex: numRe
|
||||
},
|
||||
{
|
||||
token: "constant",
|
||||
regex: "[a-z0-9-_]+"
|
||||
},
|
||||
{
|
||||
caseInsensitive: true
|
||||
}
|
||||
],
|
||||
|
||||
media: [
|
||||
{
|
||||
include: ["strings", "url", "comments"]
|
||||
},
|
||||
{
|
||||
token: "paren.lparen",
|
||||
regex: "\\{",
|
||||
next: "start"
|
||||
},
|
||||
{
|
||||
token: "paren.rparen",
|
||||
regex: "\\}",
|
||||
next: "start"
|
||||
},
|
||||
{
|
||||
token: "string",
|
||||
regex: ";",
|
||||
next: "start"
|
||||
},
|
||||
{
|
||||
token: "keyword",
|
||||
regex:
|
||||
"(?:media|supports|document|charset|import|namespace|media|supports|document" +
|
||||
"|page|font|keyframes|viewport|counter-style|font-feature-values" +
|
||||
"|swash|ornaments|annotation|stylistic|styleset|character-variant)"
|
||||
}
|
||||
],
|
||||
|
||||
comments: [
|
||||
{
|
||||
token: "comment", // multi line comment
|
||||
regex: "\\/\\*",
|
||||
push: [
|
||||
{
|
||||
token: "comment",
|
||||
regex: "\\*\\/",
|
||||
next: "pop"
|
||||
},
|
||||
{
|
||||
defaultToken: "comment"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
|
||||
ruleset: [
|
||||
{
|
||||
regex: "-(webkit|ms|moz|o)-",
|
||||
token: "text"
|
||||
},
|
||||
{
|
||||
token: "punctuation.operator",
|
||||
regex: "[:;]"
|
||||
},
|
||||
{
|
||||
token: "paren.rparen",
|
||||
regex: "\\}",
|
||||
next: "start"
|
||||
},
|
||||
{
|
||||
include: ["strings", "url", "comments"]
|
||||
},
|
||||
{
|
||||
token: ["constant.numeric", "keyword"],
|
||||
regex:
|
||||
"(" +
|
||||
numRe +
|
||||
")(ch|cm|deg|em|ex|fr|gd|grad|Hz|in|kHz|mm|ms|pc|pt|px|rad|rem|s|turn|vh|vmax|vmin|vm|vw|%)"
|
||||
},
|
||||
{
|
||||
token: "constant.numeric",
|
||||
regex: numRe
|
||||
},
|
||||
{
|
||||
token: "constant.numeric", // hex6 color
|
||||
regex: "#[a-f0-9]{6}"
|
||||
},
|
||||
{
|
||||
token: "constant.numeric", // hex3 color
|
||||
regex: "#[a-f0-9]{3}"
|
||||
},
|
||||
{
|
||||
token: [
|
||||
"punctuation",
|
||||
"entity.other.attribute-name.pseudo-element.css"
|
||||
],
|
||||
regex: pseudoElements
|
||||
},
|
||||
{
|
||||
token: [
|
||||
"punctuation",
|
||||
"entity.other.attribute-name.pseudo-class.css"
|
||||
],
|
||||
regex: pseudoClasses
|
||||
},
|
||||
{
|
||||
include: "url"
|
||||
},
|
||||
{
|
||||
token: keywordMapper,
|
||||
regex: "\\-?[a-zA-Z_][a-zA-Z0-9_\\-]*"
|
||||
},
|
||||
{
|
||||
caseInsensitive: true
|
||||
}
|
||||
],
|
||||
|
||||
url: [
|
||||
{
|
||||
token: "support.function",
|
||||
regex: "(?:url(:?-prefix)?|domain|regexp)\\(",
|
||||
push: [
|
||||
{
|
||||
token: "support.function",
|
||||
regex: "\\)",
|
||||
next: "pop"
|
||||
},
|
||||
{
|
||||
defaultToken: "string"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
|
||||
strings: [
|
||||
{
|
||||
token: "string.start",
|
||||
regex: "'",
|
||||
push: [
|
||||
{
|
||||
token: "string.end",
|
||||
regex: "'|$",
|
||||
next: "pop"
|
||||
},
|
||||
{
|
||||
include: "escapes"
|
||||
},
|
||||
{
|
||||
token: "constant.language.escape",
|
||||
regex: /\\$/,
|
||||
consumeLineEnd: true
|
||||
},
|
||||
{
|
||||
defaultToken: "string"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
token: "string.start",
|
||||
regex: '"',
|
||||
push: [
|
||||
{
|
||||
token: "string.end",
|
||||
regex: '"|$',
|
||||
next: "pop"
|
||||
},
|
||||
{
|
||||
include: "escapes"
|
||||
},
|
||||
{
|
||||
token: "constant.language.escape",
|
||||
regex: /\\$/,
|
||||
consumeLineEnd: true
|
||||
},
|
||||
{
|
||||
defaultToken: "string"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
escapes: [
|
||||
{
|
||||
token: "constant.language.escape",
|
||||
regex: /\\([a-fA-F\d]{1,6}|[^a-fA-F\d])/
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
this.normalizeRules();
|
||||
};
|
||||
|
||||
oop.inherits(CssHighlightRules, TextHighlightRules);
|
||||
|
||||
exports.CssHighlightRules = CssHighlightRules;
|
||||
}
|
||||
);
|
||||
|
||||
ace.define(
|
||||
"ace/mode/matching_brace_outdent",
|
||||
["require", "exports", "module", "ace/range"],
|
||||
function(require, exports, module) {
|
||||
"use strict";
|
||||
|
||||
var Range = require("../range").Range;
|
||||
|
||||
var MatchingBraceOutdent = function() {};
|
||||
|
||||
(function() {
|
||||
this.checkOutdent = function(line, input) {
|
||||
if (!/^\s+$/.test(line)) return false;
|
||||
|
||||
return /^\s*\}/.test(input);
|
||||
};
|
||||
|
||||
this.autoOutdent = function(doc, row) {
|
||||
var line = doc.getLine(row);
|
||||
var match = line.match(/^(\s*\})/);
|
||||
|
||||
if (!match) return 0;
|
||||
|
||||
var column = match[1].length;
|
||||
var openBracePos = doc.findMatchingBracket({
|
||||
row: row,
|
||||
column: column
|
||||
});
|
||||
|
||||
if (!openBracePos || openBracePos.row == row) return 0;
|
||||
|
||||
var indent = this.$getIndent(doc.getLine(openBracePos.row));
|
||||
doc.replace(new Range(row, 0, row, column - 1), indent);
|
||||
};
|
||||
|
||||
this.$getIndent = function(line) {
|
||||
return line.match(/^\s*/)[0];
|
||||
};
|
||||
}.call(MatchingBraceOutdent.prototype));
|
||||
|
||||
exports.MatchingBraceOutdent = MatchingBraceOutdent;
|
||||
}
|
||||
);
|
||||
|
||||
ace.define(
|
||||
"ace/mode/css_completions",
|
||||
["require", "exports", "module"],
|
||||
function(require, exports, module) {
|
||||
"use strict";
|
||||
|
||||
var propertyMap = {
|
||||
background: { "#$0": 1 },
|
||||
"background-color": { "#$0": 1, transparent: 1, fixed: 1 },
|
||||
"background-image": { "url('/$0')": 1 },
|
||||
"background-repeat": {
|
||||
repeat: 1,
|
||||
"repeat-x": 1,
|
||||
"repeat-y": 1,
|
||||
"no-repeat": 1,
|
||||
inherit: 1
|
||||
},
|
||||
"background-position": {
|
||||
bottom: 2,
|
||||
center: 2,
|
||||
left: 2,
|
||||
right: 2,
|
||||
top: 2,
|
||||
inherit: 2
|
||||
},
|
||||
"background-attachment": { scroll: 1, fixed: 1 },
|
||||
"background-size": { cover: 1, contain: 1 },
|
||||
"background-clip": {
|
||||
"border-box": 1,
|
||||
"padding-box": 1,
|
||||
"content-box": 1
|
||||
},
|
||||
"background-origin": {
|
||||
"border-box": 1,
|
||||
"padding-box": 1,
|
||||
"content-box": 1
|
||||
},
|
||||
border: { "solid $0": 1, "dashed $0": 1, "dotted $0": 1, "#$0": 1 },
|
||||
"border-color": { "#$0": 1 },
|
||||
"border-style": {
|
||||
solid: 2,
|
||||
dashed: 2,
|
||||
dotted: 2,
|
||||
double: 2,
|
||||
groove: 2,
|
||||
hidden: 2,
|
||||
inherit: 2,
|
||||
inset: 2,
|
||||
none: 2,
|
||||
outset: 2,
|
||||
ridged: 2
|
||||
},
|
||||
"border-collapse": { collapse: 1, separate: 1 },
|
||||
bottom: { px: 1, em: 1, "%": 1 },
|
||||
clear: { left: 1, right: 1, both: 1, none: 1 },
|
||||
color: { "#$0": 1, "rgb(#$00,0,0)": 1 },
|
||||
cursor: {
|
||||
default: 1,
|
||||
pointer: 1,
|
||||
move: 1,
|
||||
text: 1,
|
||||
wait: 1,
|
||||
help: 1,
|
||||
progress: 1,
|
||||
"n-resize": 1,
|
||||
"ne-resize": 1,
|
||||
"e-resize": 1,
|
||||
"se-resize": 1,
|
||||
"s-resize": 1,
|
||||
"sw-resize": 1,
|
||||
"w-resize": 1,
|
||||
"nw-resize": 1
|
||||
},
|
||||
display: {
|
||||
none: 1,
|
||||
block: 1,
|
||||
inline: 1,
|
||||
"inline-block": 1,
|
||||
"table-cell": 1
|
||||
},
|
||||
"empty-cells": { show: 1, hide: 1 },
|
||||
float: { left: 1, right: 1, none: 1 },
|
||||
"font-family": {
|
||||
Arial: 2,
|
||||
"Comic Sans MS": 2,
|
||||
Consolas: 2,
|
||||
"Courier New": 2,
|
||||
Courier: 2,
|
||||
Georgia: 2,
|
||||
Monospace: 2,
|
||||
"Sans-Serif": 2,
|
||||
"Segoe UI": 2,
|
||||
Tahoma: 2,
|
||||
"Times New Roman": 2,
|
||||
"Trebuchet MS": 2,
|
||||
Verdana: 1
|
||||
},
|
||||
"font-size": { px: 1, em: 1, "%": 1 },
|
||||
"font-weight": { bold: 1, normal: 1 },
|
||||
"font-style": { italic: 1, normal: 1 },
|
||||
"font-variant": { normal: 1, "small-caps": 1 },
|
||||
height: { px: 1, em: 1, "%": 1 },
|
||||
left: { px: 1, em: 1, "%": 1 },
|
||||
"letter-spacing": { normal: 1 },
|
||||
"line-height": { normal: 1 },
|
||||
"list-style-type": {
|
||||
none: 1,
|
||||
disc: 1,
|
||||
circle: 1,
|
||||
square: 1,
|
||||
decimal: 1,
|
||||
"decimal-leading-zero": 1,
|
||||
"lower-roman": 1,
|
||||
"upper-roman": 1,
|
||||
"lower-greek": 1,
|
||||
"lower-latin": 1,
|
||||
"upper-latin": 1,
|
||||
georgian: 1,
|
||||
"lower-alpha": 1,
|
||||
"upper-alpha": 1
|
||||
},
|
||||
margin: { px: 1, em: 1, "%": 1 },
|
||||
"margin-right": { px: 1, em: 1, "%": 1 },
|
||||
"margin-left": { px: 1, em: 1, "%": 1 },
|
||||
"margin-top": { px: 1, em: 1, "%": 1 },
|
||||
"margin-bottom": { px: 1, em: 1, "%": 1 },
|
||||
"max-height": { px: 1, em: 1, "%": 1 },
|
||||
"max-width": { px: 1, em: 1, "%": 1 },
|
||||
"min-height": { px: 1, em: 1, "%": 1 },
|
||||
"min-width": { px: 1, em: 1, "%": 1 },
|
||||
overflow: { hidden: 1, visible: 1, auto: 1, scroll: 1 },
|
||||
"overflow-x": { hidden: 1, visible: 1, auto: 1, scroll: 1 },
|
||||
"overflow-y": { hidden: 1, visible: 1, auto: 1, scroll: 1 },
|
||||
padding: { px: 1, em: 1, "%": 1 },
|
||||
"padding-top": { px: 1, em: 1, "%": 1 },
|
||||
"padding-right": { px: 1, em: 1, "%": 1 },
|
||||
"padding-bottom": { px: 1, em: 1, "%": 1 },
|
||||
"padding-left": { px: 1, em: 1, "%": 1 },
|
||||
"page-break-after": { auto: 1, always: 1, avoid: 1, left: 1, right: 1 },
|
||||
"page-break-before": { auto: 1, always: 1, avoid: 1, left: 1, right: 1 },
|
||||
position: { absolute: 1, relative: 1, fixed: 1, static: 1 },
|
||||
right: { px: 1, em: 1, "%": 1 },
|
||||
"table-layout": { fixed: 1, auto: 1 },
|
||||
"text-decoration": { none: 1, underline: 1, "line-through": 1, blink: 1 },
|
||||
"text-align": { left: 1, right: 1, center: 1, justify: 1 },
|
||||
"text-transform": { capitalize: 1, uppercase: 1, lowercase: 1, none: 1 },
|
||||
top: { px: 1, em: 1, "%": 1 },
|
||||
"vertical-align": { top: 1, bottom: 1 },
|
||||
visibility: { hidden: 1, visible: 1 },
|
||||
"white-space": {
|
||||
nowrap: 1,
|
||||
normal: 1,
|
||||
pre: 1,
|
||||
"pre-line": 1,
|
||||
"pre-wrap": 1
|
||||
},
|
||||
width: { px: 1, em: 1, "%": 1 },
|
||||
"word-spacing": { normal: 1 },
|
||||
filter: { "alpha(opacity=$0100)": 1 },
|
||||
|
||||
"text-shadow": { "$02px 2px 2px #777": 1 },
|
||||
"text-overflow": { "ellipsis-word": 1, clip: 1, ellipsis: 1 },
|
||||
"-moz-border-radius": 1,
|
||||
"-moz-border-radius-topright": 1,
|
||||
"-moz-border-radius-bottomright": 1,
|
||||
"-moz-border-radius-topleft": 1,
|
||||
"-moz-border-radius-bottomleft": 1,
|
||||
"-webkit-border-radius": 1,
|
||||
"-webkit-border-top-right-radius": 1,
|
||||
"-webkit-border-top-left-radius": 1,
|
||||
"-webkit-border-bottom-right-radius": 1,
|
||||
"-webkit-border-bottom-left-radius": 1,
|
||||
"-moz-box-shadow": 1,
|
||||
"-webkit-box-shadow": 1,
|
||||
transform: { "rotate($00deg)": 1, "skew($00deg)": 1 },
|
||||
"-moz-transform": { "rotate($00deg)": 1, "skew($00deg)": 1 },
|
||||
"-webkit-transform": { "rotate($00deg)": 1, "skew($00deg)": 1 }
|
||||
};
|
||||
|
||||
var CssCompletions = function() {};
|
||||
|
||||
(function() {
|
||||
this.completionsDefined = false;
|
||||
|
||||
this.defineCompletions = function() {
|
||||
if (document) {
|
||||
var style = document.createElement("c").style;
|
||||
|
||||
for (var i in style) {
|
||||
if (typeof style[i] !== "string") continue;
|
||||
|
||||
var name = i.replace(/[A-Z]/g, function(x) {
|
||||
return "-" + x.toLowerCase();
|
||||
});
|
||||
|
||||
if (!propertyMap.hasOwnProperty(name)) propertyMap[name] = 1;
|
||||
}
|
||||
}
|
||||
|
||||
this.completionsDefined = true;
|
||||
};
|
||||
|
||||
this.getCompletions = function(state, session, pos, prefix) {
|
||||
if (!this.completionsDefined) {
|
||||
this.defineCompletions();
|
||||
}
|
||||
|
||||
if (state === "ruleset" || session.$mode.$id == "ace/mode/scss") {
|
||||
var line = session.getLine(pos.row).substr(0, pos.column);
|
||||
if (/:[^;]+$/.test(line)) {
|
||||
/([\w\-]+):[^:]*$/.test(line);
|
||||
|
||||
return this.getPropertyValueCompletions(
|
||||
state,
|
||||
session,
|
||||
pos,
|
||||
prefix
|
||||
);
|
||||
} else {
|
||||
return this.getPropertyCompletions(state, session, pos, prefix);
|
||||
}
|
||||
}
|
||||
|
||||
return [];
|
||||
};
|
||||
|
||||
this.getPropertyCompletions = function(state, session, pos, prefix) {
|
||||
var properties = Object.keys(propertyMap);
|
||||
return properties.map(function(property) {
|
||||
return {
|
||||
caption: property,
|
||||
snippet: property + ": $0;",
|
||||
meta: "property",
|
||||
score: 1000000
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
this.getPropertyValueCompletions = function(state, session, pos, prefix) {
|
||||
var line = session.getLine(pos.row).substr(0, pos.column);
|
||||
var property = (/([\w\-]+):[^:]*$/.exec(line) || {})[1];
|
||||
|
||||
if (!property) return [];
|
||||
var values = [];
|
||||
if (
|
||||
property in propertyMap &&
|
||||
typeof propertyMap[property] === "object"
|
||||
) {
|
||||
values = Object.keys(propertyMap[property]);
|
||||
}
|
||||
return values.map(function(value) {
|
||||
return {
|
||||
caption: value,
|
||||
snippet: value,
|
||||
meta: "property value",
|
||||
score: 1000000
|
||||
};
|
||||
});
|
||||
};
|
||||
}.call(CssCompletions.prototype));
|
||||
|
||||
exports.CssCompletions = CssCompletions;
|
||||
}
|
||||
);
|
||||
|
||||
ace.define(
|
||||
"ace/mode/behaviour/css",
|
||||
[
|
||||
"require",
|
||||
"exports",
|
||||
"module",
|
||||
"ace/lib/oop",
|
||||
"ace/mode/behaviour",
|
||||
"ace/mode/behaviour/cstyle",
|
||||
"ace/token_iterator"
|
||||
],
|
||||
function(require, exports, module) {
|
||||
"use strict";
|
||||
|
||||
var oop = require("../../lib/oop");
|
||||
var Behaviour = require("../behaviour").Behaviour;
|
||||
var CstyleBehaviour = require("./cstyle").CstyleBehaviour;
|
||||
var TokenIterator = require("../../token_iterator").TokenIterator;
|
||||
|
||||
var CssBehaviour = function() {
|
||||
this.inherit(CstyleBehaviour);
|
||||
|
||||
this.add("colon", "insertion", function(
|
||||
state,
|
||||
action,
|
||||
editor,
|
||||
session,
|
||||
text
|
||||
) {
|
||||
if (text === ":" && editor.selection.isEmpty()) {
|
||||
var cursor = editor.getCursorPosition();
|
||||
var iterator = new TokenIterator(session, cursor.row, cursor.column);
|
||||
var token = iterator.getCurrentToken();
|
||||
if (token && token.value.match(/\s+/)) {
|
||||
token = iterator.stepBackward();
|
||||
}
|
||||
if (token && token.type === "support.type") {
|
||||
var line = session.doc.getLine(cursor.row);
|
||||
var rightChar = line.substring(cursor.column, cursor.column + 1);
|
||||
if (rightChar === ":") {
|
||||
return {
|
||||
text: "",
|
||||
selection: [1, 1]
|
||||
};
|
||||
}
|
||||
if (/^(\s+[^;]|\s*$)/.test(line.substring(cursor.column))) {
|
||||
return {
|
||||
text: ":;",
|
||||
selection: [1, 1]
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
this.add("colon", "deletion", function(
|
||||
state,
|
||||
action,
|
||||
editor,
|
||||
session,
|
||||
range
|
||||
) {
|
||||
var selected = session.doc.getTextRange(range);
|
||||
if (!range.isMultiLine() && selected === ":") {
|
||||
var cursor = editor.getCursorPosition();
|
||||
var iterator = new TokenIterator(session, cursor.row, cursor.column);
|
||||
var token = iterator.getCurrentToken();
|
||||
if (token && token.value.match(/\s+/)) {
|
||||
token = iterator.stepBackward();
|
||||
}
|
||||
if (token && token.type === "support.type") {
|
||||
var line = session.doc.getLine(range.start.row);
|
||||
var rightChar = line.substring(
|
||||
range.end.column,
|
||||
range.end.column + 1
|
||||
);
|
||||
if (rightChar === ";") {
|
||||
range.end.column++;
|
||||
return range;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
this.add("semicolon", "insertion", function(
|
||||
state,
|
||||
action,
|
||||
editor,
|
||||
session,
|
||||
text
|
||||
) {
|
||||
if (text === ";" && editor.selection.isEmpty()) {
|
||||
var cursor = editor.getCursorPosition();
|
||||
var line = session.doc.getLine(cursor.row);
|
||||
var rightChar = line.substring(cursor.column, cursor.column + 1);
|
||||
if (rightChar === ";") {
|
||||
return {
|
||||
text: "",
|
||||
selection: [1, 1]
|
||||
};
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
this.add("!important", "insertion", function(
|
||||
state,
|
||||
action,
|
||||
editor,
|
||||
session,
|
||||
text
|
||||
) {
|
||||
if (text === "!" && editor.selection.isEmpty()) {
|
||||
var cursor = editor.getCursorPosition();
|
||||
var line = session.doc.getLine(cursor.row);
|
||||
|
||||
if (/^\s*(;|}|$)/.test(line.substring(cursor.column))) {
|
||||
return {
|
||||
text: "!important",
|
||||
selection: [10, 10]
|
||||
};
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
oop.inherits(CssBehaviour, CstyleBehaviour);
|
||||
|
||||
exports.CssBehaviour = CssBehaviour;
|
||||
}
|
||||
);
|
||||
|
||||
ace.define(
|
||||
"ace/mode/folding/cstyle",
|
||||
[
|
||||
"require",
|
||||
"exports",
|
||||
"module",
|
||||
"ace/lib/oop",
|
||||
"ace/range",
|
||||
"ace/mode/folding/fold_mode"
|
||||
],
|
||||
function(require, exports, module) {
|
||||
"use strict";
|
||||
|
||||
var oop = require("../../lib/oop");
|
||||
var Range = require("../../range").Range;
|
||||
var BaseFoldMode = require("./fold_mode").FoldMode;
|
||||
|
||||
var FoldMode = (exports.FoldMode = function(commentRegex) {
|
||||
if (commentRegex) {
|
||||
this.foldingStartMarker = new RegExp(
|
||||
this.foldingStartMarker.source.replace(
|
||||
/\|[^|]*?$/,
|
||||
"|" + commentRegex.start
|
||||
)
|
||||
);
|
||||
this.foldingStopMarker = new RegExp(
|
||||
this.foldingStopMarker.source.replace(
|
||||
/\|[^|]*?$/,
|
||||
"|" + commentRegex.end
|
||||
)
|
||||
);
|
||||
}
|
||||
});
|
||||
oop.inherits(FoldMode, BaseFoldMode);
|
||||
|
||||
(function() {
|
||||
this.foldingStartMarker = /([\{\[\(])[^\}\]\)]*$|^\s*(\/\*)/;
|
||||
this.foldingStopMarker = /^[^\[\{\(]*([\}\]\)])|^[\s\*]*(\*\/)/;
|
||||
this.singleLineBlockCommentRe = /^\s*(\/\*).*\*\/\s*$/;
|
||||
this.tripleStarBlockCommentRe = /^\s*(\/\*\*\*).*\*\/\s*$/;
|
||||
this.startRegionRe = /^\s*(\/\*|\/\/)#?region\b/;
|
||||
this._getFoldWidgetBase = this.getFoldWidget;
|
||||
this.getFoldWidget = function(session, foldStyle, row) {
|
||||
var line = session.getLine(row);
|
||||
|
||||
if (this.singleLineBlockCommentRe.test(line)) {
|
||||
if (
|
||||
!this.startRegionRe.test(line) &&
|
||||
!this.tripleStarBlockCommentRe.test(line)
|
||||
)
|
||||
return "";
|
||||
}
|
||||
|
||||
var fw = this._getFoldWidgetBase(session, foldStyle, row);
|
||||
|
||||
if (!fw && this.startRegionRe.test(line)) return "start"; // lineCommentRegionStart
|
||||
|
||||
return fw;
|
||||
};
|
||||
|
||||
this.getFoldWidgetRange = function(
|
||||
session,
|
||||
foldStyle,
|
||||
row,
|
||||
forceMultiline
|
||||
) {
|
||||
var line = session.getLine(row);
|
||||
|
||||
if (this.startRegionRe.test(line))
|
||||
return this.getCommentRegionBlock(session, line, row);
|
||||
|
||||
var match = line.match(this.foldingStartMarker);
|
||||
if (match) {
|
||||
var i = match.index;
|
||||
|
||||
if (match[1])
|
||||
return this.openingBracketBlock(session, match[1], row, i);
|
||||
|
||||
var range = session.getCommentFoldRange(row, i + match[0].length, 1);
|
||||
|
||||
if (range && !range.isMultiLine()) {
|
||||
if (forceMultiline) {
|
||||
range = this.getSectionRange(session, row);
|
||||
} else if (foldStyle != "all") range = null;
|
||||
}
|
||||
|
||||
return range;
|
||||
}
|
||||
|
||||
if (foldStyle === "markbegin") return;
|
||||
|
||||
var match = line.match(this.foldingStopMarker);
|
||||
if (match) {
|
||||
var i = match.index + match[0].length;
|
||||
|
||||
if (match[1])
|
||||
return this.closingBracketBlock(session, match[1], row, i);
|
||||
|
||||
return session.getCommentFoldRange(row, i, -1);
|
||||
}
|
||||
};
|
||||
|
||||
this.getSectionRange = function(session, row) {
|
||||
var line = session.getLine(row);
|
||||
var startIndent = line.search(/\S/);
|
||||
var startRow = row;
|
||||
var startColumn = line.length;
|
||||
row = row + 1;
|
||||
var endRow = row;
|
||||
var maxRow = session.getLength();
|
||||
while (++row < maxRow) {
|
||||
line = session.getLine(row);
|
||||
var indent = line.search(/\S/);
|
||||
if (indent === -1) continue;
|
||||
if (startIndent > indent) break;
|
||||
var subRange = this.getFoldWidgetRange(session, "all", row);
|
||||
|
||||
if (subRange) {
|
||||
if (subRange.start.row <= startRow) {
|
||||
break;
|
||||
} else if (subRange.isMultiLine()) {
|
||||
row = subRange.end.row;
|
||||
} else if (startIndent == indent) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
endRow = row;
|
||||
}
|
||||
|
||||
return new Range(
|
||||
startRow,
|
||||
startColumn,
|
||||
endRow,
|
||||
session.getLine(endRow).length
|
||||
);
|
||||
};
|
||||
this.getCommentRegionBlock = function(session, line, row) {
|
||||
var startColumn = line.search(/\s*$/);
|
||||
var maxRow = session.getLength();
|
||||
var startRow = row;
|
||||
|
||||
var re = /^\s*(?:\/\*|\/\/|--)#?(end)?region\b/;
|
||||
var depth = 1;
|
||||
while (++row < maxRow) {
|
||||
line = session.getLine(row);
|
||||
var m = re.exec(line);
|
||||
if (!m) continue;
|
||||
if (m[1]) depth--;
|
||||
else depth++;
|
||||
|
||||
if (!depth) break;
|
||||
}
|
||||
|
||||
var endRow = row;
|
||||
if (endRow > startRow) {
|
||||
return new Range(startRow, startColumn, endRow, line.length);
|
||||
}
|
||||
};
|
||||
}.call(FoldMode.prototype));
|
||||
}
|
||||
);
|
||||
|
||||
ace.define(
|
||||
"ace/mode/css",
|
||||
[
|
||||
"require",
|
||||
"exports",
|
||||
"module",
|
||||
"ace/lib/oop",
|
||||
"ace/mode/text",
|
||||
"ace/mode/css_highlight_rules",
|
||||
"ace/mode/matching_brace_outdent",
|
||||
"ace/worker/worker_client",
|
||||
"ace/mode/css_completions",
|
||||
"ace/mode/behaviour/css",
|
||||
"ace/mode/folding/cstyle"
|
||||
],
|
||||
function(require, exports, module) {
|
||||
"use strict";
|
||||
|
||||
var oop = require("../lib/oop");
|
||||
var TextMode = require("./text").Mode;
|
||||
var CssHighlightRules = require("./css_highlight_rules").CssHighlightRules;
|
||||
var MatchingBraceOutdent = require("./matching_brace_outdent")
|
||||
.MatchingBraceOutdent;
|
||||
var WorkerClient = require("../worker/worker_client").WorkerClient;
|
||||
var CssCompletions = require("./css_completions").CssCompletions;
|
||||
var CssBehaviour = require("./behaviour/css").CssBehaviour;
|
||||
var CStyleFoldMode = require("./folding/cstyle").FoldMode;
|
||||
|
||||
var Mode = function() {
|
||||
this.HighlightRules = CssHighlightRules;
|
||||
this.$outdent = new MatchingBraceOutdent();
|
||||
this.$behaviour = new CssBehaviour();
|
||||
this.$completer = new CssCompletions();
|
||||
this.foldingRules = new CStyleFoldMode();
|
||||
};
|
||||
oop.inherits(Mode, TextMode);
|
||||
|
||||
(function() {
|
||||
this.foldingRules = "cStyle";
|
||||
this.blockComment = { start: "/*", end: "*/" };
|
||||
|
||||
this.getNextLineIndent = function(state, line, tab) {
|
||||
var indent = this.$getIndent(line);
|
||||
var tokens = this.getTokenizer().getLineTokens(line, state).tokens;
|
||||
if (tokens.length && tokens[tokens.length - 1].type == "comment") {
|
||||
return indent;
|
||||
}
|
||||
|
||||
var match = line.match(/^.*\{\s*$/);
|
||||
if (match) {
|
||||
indent += tab;
|
||||
}
|
||||
|
||||
return indent;
|
||||
};
|
||||
|
||||
this.checkOutdent = function(state, line, input) {
|
||||
return this.$outdent.checkOutdent(line, input);
|
||||
};
|
||||
|
||||
this.autoOutdent = function(state, doc, row) {
|
||||
this.$outdent.autoOutdent(doc, row);
|
||||
};
|
||||
|
||||
this.getCompletions = function(state, session, pos, prefix) {
|
||||
return this.$completer.getCompletions(state, session, pos, prefix);
|
||||
};
|
||||
|
||||
this.createWorker = function(session) {
|
||||
var worker = new WorkerClient(["ace"], "ace/mode/css_worker", "Worker");
|
||||
worker.attachToDocument(session.getDocument());
|
||||
|
||||
worker.on("annotate", function(e) {
|
||||
session.setAnnotations(e.data);
|
||||
});
|
||||
|
||||
worker.on("terminate", function() {
|
||||
session.clearAnnotations();
|
||||
});
|
||||
|
||||
return worker;
|
||||
};
|
||||
|
||||
this.$id = "ace/mode/css";
|
||||
}.call(Mode.prototype));
|
||||
|
||||
exports.Mode = Mode;
|
||||
}
|
||||
);
|
||||
(function() {
|
||||
ace.require(["ace/mode/css"], function(m) {
|
||||
if (typeof module == "object" && typeof exports == "object" && module) {
|
||||
module.exports = m;
|
||||
}
|
||||
});
|
||||
})();
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,820 +0,0 @@
|
||||
ace.define(
|
||||
"ace/mode/xml_highlight_rules",
|
||||
[
|
||||
"require",
|
||||
"exports",
|
||||
"module",
|
||||
"ace/lib/oop",
|
||||
"ace/mode/text_highlight_rules"
|
||||
],
|
||||
function(require, exports, module) {
|
||||
"use strict";
|
||||
|
||||
var oop = require("../lib/oop");
|
||||
var TextHighlightRules = require("./text_highlight_rules")
|
||||
.TextHighlightRules;
|
||||
|
||||
var XmlHighlightRules = function(normalize) {
|
||||
var tagRegex = "[_:a-zA-Z\xc0-\uffff][-_:.a-zA-Z0-9\xc0-\uffff]*";
|
||||
|
||||
this.$rules = {
|
||||
start: [
|
||||
{
|
||||
token: "string.cdata.xml",
|
||||
regex: "<\\!\\[CDATA\\[",
|
||||
next: "cdata"
|
||||
},
|
||||
{
|
||||
token: ["punctuation.instruction.xml", "keyword.instruction.xml"],
|
||||
regex: "(<\\?)(" + tagRegex + ")",
|
||||
next: "processing_instruction"
|
||||
},
|
||||
{ token: "comment.start.xml", regex: "<\\!--", next: "comment" },
|
||||
{
|
||||
token: ["xml-pe.doctype.xml", "xml-pe.doctype.xml"],
|
||||
regex: "(<\\!)(DOCTYPE)(?=[\\s])",
|
||||
next: "doctype",
|
||||
caseInsensitive: true
|
||||
},
|
||||
{ include: "tag" },
|
||||
{ token: "text.end-tag-open.xml", regex: "</" },
|
||||
{ token: "text.tag-open.xml", regex: "<" },
|
||||
{ include: "reference" },
|
||||
{ defaultToken: "text.xml" }
|
||||
],
|
||||
|
||||
processing_instruction: [
|
||||
{
|
||||
token: "entity.other.attribute-name.decl-attribute-name.xml",
|
||||
regex: tagRegex
|
||||
},
|
||||
{
|
||||
token: "keyword.operator.decl-attribute-equals.xml",
|
||||
regex: "="
|
||||
},
|
||||
{
|
||||
include: "whitespace"
|
||||
},
|
||||
{
|
||||
include: "string"
|
||||
},
|
||||
{
|
||||
token: "punctuation.xml-decl.xml",
|
||||
regex: "\\?>",
|
||||
next: "start"
|
||||
}
|
||||
],
|
||||
|
||||
doctype: [
|
||||
{ include: "whitespace" },
|
||||
{ include: "string" },
|
||||
{ token: "xml-pe.doctype.xml", regex: ">", next: "start" },
|
||||
{ token: "xml-pe.xml", regex: "[-_a-zA-Z0-9:]+" },
|
||||
{ token: "punctuation.int-subset", regex: "\\[", push: "int_subset" }
|
||||
],
|
||||
|
||||
int_subset: [
|
||||
{
|
||||
token: "text.xml",
|
||||
regex: "\\s+"
|
||||
},
|
||||
{
|
||||
token: "punctuation.int-subset.xml",
|
||||
regex: "]",
|
||||
next: "pop"
|
||||
},
|
||||
{
|
||||
token: ["punctuation.markup-decl.xml", "keyword.markup-decl.xml"],
|
||||
regex: "(<\\!)(" + tagRegex + ")",
|
||||
push: [
|
||||
{
|
||||
token: "text",
|
||||
regex: "\\s+"
|
||||
},
|
||||
{
|
||||
token: "punctuation.markup-decl.xml",
|
||||
regex: ">",
|
||||
next: "pop"
|
||||
},
|
||||
{ include: "string" }
|
||||
]
|
||||
}
|
||||
],
|
||||
|
||||
cdata: [
|
||||
{ token: "string.cdata.xml", regex: "\\]\\]>", next: "start" },
|
||||
{ token: "text.xml", regex: "\\s+" },
|
||||
{ token: "text.xml", regex: "(?:[^\\]]|\\](?!\\]>))+" }
|
||||
],
|
||||
|
||||
comment: [
|
||||
{ token: "comment.end.xml", regex: "-->", next: "start" },
|
||||
{ defaultToken: "comment.xml" }
|
||||
],
|
||||
|
||||
reference: [
|
||||
{
|
||||
token: "constant.language.escape.reference.xml",
|
||||
regex: "(?:&#[0-9]+;)|(?:&#x[0-9a-fA-F]+;)|(?:&[a-zA-Z0-9_:\\.-]+;)"
|
||||
}
|
||||
],
|
||||
|
||||
attr_reference: [
|
||||
{
|
||||
token: "constant.language.escape.reference.attribute-value.xml",
|
||||
regex: "(?:&#[0-9]+;)|(?:&#x[0-9a-fA-F]+;)|(?:&[a-zA-Z0-9_:\\.-]+;)"
|
||||
}
|
||||
],
|
||||
|
||||
tag: [
|
||||
{
|
||||
token: [
|
||||
"meta.tag.punctuation.tag-open.xml",
|
||||
"meta.tag.punctuation.end-tag-open.xml",
|
||||
"meta.tag.tag-name.xml"
|
||||
],
|
||||
regex: "(?:(<)|(</))((?:" + tagRegex + ":)?" + tagRegex + ")",
|
||||
next: [
|
||||
{ include: "attributes" },
|
||||
{
|
||||
token: "meta.tag.punctuation.tag-close.xml",
|
||||
regex: "/?>",
|
||||
next: "start"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
|
||||
tag_whitespace: [{ token: "text.tag-whitespace.xml", regex: "\\s+" }],
|
||||
whitespace: [{ token: "text.whitespace.xml", regex: "\\s+" }],
|
||||
string: [
|
||||
{
|
||||
token: "string.xml",
|
||||
regex: "'",
|
||||
push: [
|
||||
{ token: "string.xml", regex: "'", next: "pop" },
|
||||
{ defaultToken: "string.xml" }
|
||||
]
|
||||
},
|
||||
{
|
||||
token: "string.xml",
|
||||
regex: '"',
|
||||
push: [
|
||||
{ token: "string.xml", regex: '"', next: "pop" },
|
||||
{ defaultToken: "string.xml" }
|
||||
]
|
||||
}
|
||||
],
|
||||
|
||||
attributes: [
|
||||
{
|
||||
token: "entity.other.attribute-name.xml",
|
||||
regex: tagRegex
|
||||
},
|
||||
{
|
||||
token: "keyword.operator.attribute-equals.xml",
|
||||
regex: "="
|
||||
},
|
||||
{
|
||||
include: "tag_whitespace"
|
||||
},
|
||||
{
|
||||
include: "attribute_value"
|
||||
}
|
||||
],
|
||||
|
||||
attribute_value: [
|
||||
{
|
||||
token: "string.attribute-value.xml",
|
||||
regex: "'",
|
||||
push: [
|
||||
{ token: "string.attribute-value.xml", regex: "'", next: "pop" },
|
||||
{ include: "attr_reference" },
|
||||
{ defaultToken: "string.attribute-value.xml" }
|
||||
]
|
||||
},
|
||||
{
|
||||
token: "string.attribute-value.xml",
|
||||
regex: '"',
|
||||
push: [
|
||||
{ token: "string.attribute-value.xml", regex: '"', next: "pop" },
|
||||
{ include: "attr_reference" },
|
||||
{ defaultToken: "string.attribute-value.xml" }
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
if (this.constructor === XmlHighlightRules) this.normalizeRules();
|
||||
};
|
||||
|
||||
(function() {
|
||||
this.embedTagRules = function(HighlightRules, prefix, tag) {
|
||||
this.$rules.tag.unshift({
|
||||
token: [
|
||||
"meta.tag.punctuation.tag-open.xml",
|
||||
"meta.tag." + tag + ".tag-name.xml"
|
||||
],
|
||||
regex: "(<)(" + tag + "(?=\\s|>|$))",
|
||||
next: [
|
||||
{ include: "attributes" },
|
||||
{
|
||||
token: "meta.tag.punctuation.tag-close.xml",
|
||||
regex: "/?>",
|
||||
next: prefix + "start"
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
this.$rules[tag + "-end"] = [
|
||||
{ include: "attributes" },
|
||||
{
|
||||
token: "meta.tag.punctuation.tag-close.xml",
|
||||
regex: "/?>",
|
||||
next: "start",
|
||||
onMatch: function(value, currentState, stack) {
|
||||
stack.splice(0);
|
||||
return this.token;
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
this.embedRules(HighlightRules, prefix, [
|
||||
{
|
||||
token: [
|
||||
"meta.tag.punctuation.end-tag-open.xml",
|
||||
"meta.tag." + tag + ".tag-name.xml"
|
||||
],
|
||||
regex: "(</)(" + tag + "(?=\\s|>|$))",
|
||||
next: tag + "-end"
|
||||
},
|
||||
{
|
||||
token: "string.cdata.xml",
|
||||
regex: "<\\!\\[CDATA\\["
|
||||
},
|
||||
{
|
||||
token: "string.cdata.xml",
|
||||
regex: "\\]\\]>"
|
||||
}
|
||||
]);
|
||||
};
|
||||
}.call(TextHighlightRules.prototype));
|
||||
|
||||
oop.inherits(XmlHighlightRules, TextHighlightRules);
|
||||
|
||||
exports.XmlHighlightRules = XmlHighlightRules;
|
||||
}
|
||||
);
|
||||
|
||||
ace.define(
|
||||
"ace/mode/behaviour/xml",
|
||||
[
|
||||
"require",
|
||||
"exports",
|
||||
"module",
|
||||
"ace/lib/oop",
|
||||
"ace/mode/behaviour",
|
||||
"ace/token_iterator",
|
||||
"ace/lib/lang"
|
||||
],
|
||||
function(require, exports, module) {
|
||||
"use strict";
|
||||
|
||||
var oop = require("../../lib/oop");
|
||||
var Behaviour = require("../behaviour").Behaviour;
|
||||
var TokenIterator = require("../../token_iterator").TokenIterator;
|
||||
var lang = require("../../lib/lang");
|
||||
|
||||
function is(token, type) {
|
||||
return token && token.type.lastIndexOf(type + ".xml") > -1;
|
||||
}
|
||||
|
||||
var XmlBehaviour = function() {
|
||||
this.add("string_dquotes", "insertion", function(
|
||||
state,
|
||||
action,
|
||||
editor,
|
||||
session,
|
||||
text
|
||||
) {
|
||||
if (text == '"' || text == "'") {
|
||||
var quote = text;
|
||||
var selected = session.doc.getTextRange(editor.getSelectionRange());
|
||||
if (
|
||||
selected !== "" &&
|
||||
selected !== "'" &&
|
||||
selected != '"' &&
|
||||
editor.getWrapBehavioursEnabled()
|
||||
) {
|
||||
return {
|
||||
text: quote + selected + quote,
|
||||
selection: false
|
||||
};
|
||||
}
|
||||
|
||||
var cursor = editor.getCursorPosition();
|
||||
var line = session.doc.getLine(cursor.row);
|
||||
var rightChar = line.substring(cursor.column, cursor.column + 1);
|
||||
var iterator = new TokenIterator(session, cursor.row, cursor.column);
|
||||
var token = iterator.getCurrentToken();
|
||||
|
||||
if (
|
||||
rightChar == quote &&
|
||||
(is(token, "attribute-value") || is(token, "string"))
|
||||
) {
|
||||
return {
|
||||
text: "",
|
||||
selection: [1, 1]
|
||||
};
|
||||
}
|
||||
|
||||
if (!token) token = iterator.stepBackward();
|
||||
|
||||
if (!token) return;
|
||||
|
||||
while (is(token, "tag-whitespace") || is(token, "whitespace")) {
|
||||
token = iterator.stepBackward();
|
||||
}
|
||||
var rightSpace = !rightChar || rightChar.match(/\s/);
|
||||
if (
|
||||
(is(token, "attribute-equals") &&
|
||||
(rightSpace || rightChar == ">")) ||
|
||||
(is(token, "decl-attribute-equals") &&
|
||||
(rightSpace || rightChar == "?"))
|
||||
) {
|
||||
return {
|
||||
text: quote + quote,
|
||||
selection: [1, 1]
|
||||
};
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
this.add("string_dquotes", "deletion", function(
|
||||
state,
|
||||
action,
|
||||
editor,
|
||||
session,
|
||||
range
|
||||
) {
|
||||
var selected = session.doc.getTextRange(range);
|
||||
if (!range.isMultiLine() && (selected == '"' || selected == "'")) {
|
||||
var line = session.doc.getLine(range.start.row);
|
||||
var rightChar = line.substring(
|
||||
range.start.column + 1,
|
||||
range.start.column + 2
|
||||
);
|
||||
if (rightChar == selected) {
|
||||
range.end.column++;
|
||||
return range;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
this.add("autoclosing", "insertion", function(
|
||||
state,
|
||||
action,
|
||||
editor,
|
||||
session,
|
||||
text
|
||||
) {
|
||||
if (text == ">") {
|
||||
var position = editor.getSelectionRange().start;
|
||||
var iterator = new TokenIterator(
|
||||
session,
|
||||
position.row,
|
||||
position.column
|
||||
);
|
||||
var token = iterator.getCurrentToken() || iterator.stepBackward();
|
||||
if (
|
||||
!token ||
|
||||
!(
|
||||
is(token, "tag-name") ||
|
||||
is(token, "tag-whitespace") ||
|
||||
is(token, "attribute-name") ||
|
||||
is(token, "attribute-equals") ||
|
||||
is(token, "attribute-value")
|
||||
)
|
||||
)
|
||||
return;
|
||||
if (is(token, "reference.attribute-value")) return;
|
||||
if (is(token, "attribute-value")) {
|
||||
var tokenEndColumn =
|
||||
iterator.getCurrentTokenColumn() + token.value.length;
|
||||
if (position.column < tokenEndColumn) return;
|
||||
if (position.column == tokenEndColumn) {
|
||||
var nextToken = iterator.stepForward();
|
||||
if (nextToken && is(nextToken, "attribute-value")) return;
|
||||
iterator.stepBackward();
|
||||
}
|
||||
}
|
||||
|
||||
if (
|
||||
/^\s*>/.test(session.getLine(position.row).slice(position.column))
|
||||
)
|
||||
return;
|
||||
while (!is(token, "tag-name")) {
|
||||
token = iterator.stepBackward();
|
||||
if (token.value == "<") {
|
||||
token = iterator.stepForward();
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
var tokenRow = iterator.getCurrentTokenRow();
|
||||
var tokenColumn = iterator.getCurrentTokenColumn();
|
||||
if (is(iterator.stepBackward(), "end-tag-open")) return;
|
||||
|
||||
var element = token.value;
|
||||
if (tokenRow == position.row)
|
||||
element = element.substring(0, position.column - tokenColumn);
|
||||
|
||||
if (this.voidElements.hasOwnProperty(element.toLowerCase())) return;
|
||||
|
||||
return {
|
||||
text: ">" + "</" + element + ">",
|
||||
selection: [1, 1]
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
this.add("autoindent", "insertion", function(
|
||||
state,
|
||||
action,
|
||||
editor,
|
||||
session,
|
||||
text
|
||||
) {
|
||||
if (text == "\n") {
|
||||
var cursor = editor.getCursorPosition();
|
||||
var line = session.getLine(cursor.row);
|
||||
var iterator = new TokenIterator(session, cursor.row, cursor.column);
|
||||
var token = iterator.getCurrentToken();
|
||||
|
||||
if (token && token.type.indexOf("tag-close") !== -1) {
|
||||
if (token.value == "/>") return;
|
||||
while (token && token.type.indexOf("tag-name") === -1) {
|
||||
token = iterator.stepBackward();
|
||||
}
|
||||
|
||||
if (!token) {
|
||||
return;
|
||||
}
|
||||
|
||||
var tag = token.value;
|
||||
var row = iterator.getCurrentTokenRow();
|
||||
token = iterator.stepBackward();
|
||||
if (!token || token.type.indexOf("end-tag") !== -1) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.voidElements && !this.voidElements[tag]) {
|
||||
var nextToken = session.getTokenAt(cursor.row, cursor.column + 1);
|
||||
var line = session.getLine(row);
|
||||
var nextIndent = this.$getIndent(line);
|
||||
var indent = nextIndent + session.getTabString();
|
||||
|
||||
if (nextToken && nextToken.value === "</") {
|
||||
return {
|
||||
text: "\n" + indent + "\n" + nextIndent,
|
||||
selection: [1, indent.length, 1, indent.length]
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
text: "\n" + indent
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
oop.inherits(XmlBehaviour, Behaviour);
|
||||
|
||||
exports.XmlBehaviour = XmlBehaviour;
|
||||
}
|
||||
);
|
||||
|
||||
ace.define(
|
||||
"ace/mode/folding/xml",
|
||||
[
|
||||
"require",
|
||||
"exports",
|
||||
"module",
|
||||
"ace/lib/oop",
|
||||
"ace/lib/lang",
|
||||
"ace/range",
|
||||
"ace/mode/folding/fold_mode",
|
||||
"ace/token_iterator"
|
||||
],
|
||||
function(require, exports, module) {
|
||||
"use strict";
|
||||
|
||||
var oop = require("../../lib/oop");
|
||||
var lang = require("../../lib/lang");
|
||||
var Range = require("../../range").Range;
|
||||
var BaseFoldMode = require("./fold_mode").FoldMode;
|
||||
var TokenIterator = require("../../token_iterator").TokenIterator;
|
||||
|
||||
var FoldMode = (exports.FoldMode = function(voidElements, optionalEndTags) {
|
||||
BaseFoldMode.call(this);
|
||||
this.voidElements = voidElements || {};
|
||||
this.optionalEndTags = oop.mixin({}, this.voidElements);
|
||||
if (optionalEndTags) oop.mixin(this.optionalEndTags, optionalEndTags);
|
||||
});
|
||||
oop.inherits(FoldMode, BaseFoldMode);
|
||||
|
||||
var Tag = function() {
|
||||
this.tagName = "";
|
||||
this.closing = false;
|
||||
this.selfClosing = false;
|
||||
this.start = { row: 0, column: 0 };
|
||||
this.end = { row: 0, column: 0 };
|
||||
};
|
||||
|
||||
function is(token, type) {
|
||||
return token.type.lastIndexOf(type + ".xml") > -1;
|
||||
}
|
||||
|
||||
(function() {
|
||||
this.getFoldWidget = function(session, foldStyle, row) {
|
||||
var tag = this._getFirstTagInLine(session, row);
|
||||
|
||||
if (!tag) return this.getCommentFoldWidget(session, row);
|
||||
|
||||
if (tag.closing || (!tag.tagName && tag.selfClosing))
|
||||
return foldStyle == "markbeginend" ? "end" : "";
|
||||
|
||||
if (
|
||||
!tag.tagName ||
|
||||
tag.selfClosing ||
|
||||
this.voidElements.hasOwnProperty(tag.tagName.toLowerCase())
|
||||
)
|
||||
return "";
|
||||
|
||||
if (this._findEndTagInLine(session, row, tag.tagName, tag.end.column))
|
||||
return "";
|
||||
|
||||
return "start";
|
||||
};
|
||||
|
||||
this.getCommentFoldWidget = function(session, row) {
|
||||
if (
|
||||
/comment/.test(session.getState(row)) &&
|
||||
/<!-/.test(session.getLine(row))
|
||||
)
|
||||
return "start";
|
||||
return "";
|
||||
};
|
||||
this._getFirstTagInLine = function(session, row) {
|
||||
var tokens = session.getTokens(row);
|
||||
var tag = new Tag();
|
||||
|
||||
for (var i = 0; i < tokens.length; i++) {
|
||||
var token = tokens[i];
|
||||
if (is(token, "tag-open")) {
|
||||
tag.end.column = tag.start.column + token.value.length;
|
||||
tag.closing = is(token, "end-tag-open");
|
||||
token = tokens[++i];
|
||||
if (!token) return null;
|
||||
tag.tagName = token.value;
|
||||
tag.end.column += token.value.length;
|
||||
for (i++; i < tokens.length; i++) {
|
||||
token = tokens[i];
|
||||
tag.end.column += token.value.length;
|
||||
if (is(token, "tag-close")) {
|
||||
tag.selfClosing = token.value == "/>";
|
||||
break;
|
||||
}
|
||||
}
|
||||
return tag;
|
||||
} else if (is(token, "tag-close")) {
|
||||
tag.selfClosing = token.value == "/>";
|
||||
return tag;
|
||||
}
|
||||
tag.start.column += token.value.length;
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
this._findEndTagInLine = function(session, row, tagName, startColumn) {
|
||||
var tokens = session.getTokens(row);
|
||||
var column = 0;
|
||||
for (var i = 0; i < tokens.length; i++) {
|
||||
var token = tokens[i];
|
||||
column += token.value.length;
|
||||
if (column < startColumn) continue;
|
||||
if (is(token, "end-tag-open")) {
|
||||
token = tokens[i + 1];
|
||||
if (token && token.value == tagName) return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
};
|
||||
this._readTagForward = function(iterator) {
|
||||
var token = iterator.getCurrentToken();
|
||||
if (!token) return null;
|
||||
|
||||
var tag = new Tag();
|
||||
do {
|
||||
if (is(token, "tag-open")) {
|
||||
tag.closing = is(token, "end-tag-open");
|
||||
tag.start.row = iterator.getCurrentTokenRow();
|
||||
tag.start.column = iterator.getCurrentTokenColumn();
|
||||
} else if (is(token, "tag-name")) {
|
||||
tag.tagName = token.value;
|
||||
} else if (is(token, "tag-close")) {
|
||||
tag.selfClosing = token.value == "/>";
|
||||
tag.end.row = iterator.getCurrentTokenRow();
|
||||
tag.end.column =
|
||||
iterator.getCurrentTokenColumn() + token.value.length;
|
||||
iterator.stepForward();
|
||||
return tag;
|
||||
}
|
||||
} while ((token = iterator.stepForward()));
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
this._readTagBackward = function(iterator) {
|
||||
var token = iterator.getCurrentToken();
|
||||
if (!token) return null;
|
||||
|
||||
var tag = new Tag();
|
||||
do {
|
||||
if (is(token, "tag-open")) {
|
||||
tag.closing = is(token, "end-tag-open");
|
||||
tag.start.row = iterator.getCurrentTokenRow();
|
||||
tag.start.column = iterator.getCurrentTokenColumn();
|
||||
iterator.stepBackward();
|
||||
return tag;
|
||||
} else if (is(token, "tag-name")) {
|
||||
tag.tagName = token.value;
|
||||
} else if (is(token, "tag-close")) {
|
||||
tag.selfClosing = token.value == "/>";
|
||||
tag.end.row = iterator.getCurrentTokenRow();
|
||||
tag.end.column =
|
||||
iterator.getCurrentTokenColumn() + token.value.length;
|
||||
}
|
||||
} while ((token = iterator.stepBackward()));
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
this._pop = function(stack, tag) {
|
||||
while (stack.length) {
|
||||
var top = stack[stack.length - 1];
|
||||
if (!tag || top.tagName == tag.tagName) {
|
||||
return stack.pop();
|
||||
} else if (this.optionalEndTags.hasOwnProperty(top.tagName)) {
|
||||
stack.pop();
|
||||
continue;
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
this.getFoldWidgetRange = function(session, foldStyle, row) {
|
||||
var firstTag = this._getFirstTagInLine(session, row);
|
||||
|
||||
if (!firstTag) {
|
||||
return (
|
||||
this.getCommentFoldWidget(session, row) &&
|
||||
session.getCommentFoldRange(row, session.getLine(row).length)
|
||||
);
|
||||
}
|
||||
|
||||
var isBackward = firstTag.closing || firstTag.selfClosing;
|
||||
var stack = [];
|
||||
var tag;
|
||||
|
||||
if (!isBackward) {
|
||||
var iterator = new TokenIterator(session, row, firstTag.start.column);
|
||||
var start = {
|
||||
row: row,
|
||||
column: firstTag.start.column + firstTag.tagName.length + 2
|
||||
};
|
||||
if (firstTag.start.row == firstTag.end.row)
|
||||
start.column = firstTag.end.column;
|
||||
while ((tag = this._readTagForward(iterator))) {
|
||||
if (tag.selfClosing) {
|
||||
if (!stack.length) {
|
||||
tag.start.column += tag.tagName.length + 2;
|
||||
tag.end.column -= 2;
|
||||
return Range.fromPoints(tag.start, tag.end);
|
||||
} else continue;
|
||||
}
|
||||
|
||||
if (tag.closing) {
|
||||
this._pop(stack, tag);
|
||||
if (stack.length == 0) return Range.fromPoints(start, tag.start);
|
||||
} else {
|
||||
stack.push(tag);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
var iterator = new TokenIterator(session, row, firstTag.end.column);
|
||||
var end = {
|
||||
row: row,
|
||||
column: firstTag.start.column
|
||||
};
|
||||
|
||||
while ((tag = this._readTagBackward(iterator))) {
|
||||
if (tag.selfClosing) {
|
||||
if (!stack.length) {
|
||||
tag.start.column += tag.tagName.length + 2;
|
||||
tag.end.column -= 2;
|
||||
return Range.fromPoints(tag.start, tag.end);
|
||||
} else continue;
|
||||
}
|
||||
|
||||
if (!tag.closing) {
|
||||
this._pop(stack, tag);
|
||||
if (stack.length == 0) {
|
||||
tag.start.column += tag.tagName.length + 2;
|
||||
if (
|
||||
tag.start.row == tag.end.row &&
|
||||
tag.start.column < tag.end.column
|
||||
)
|
||||
tag.start.column = tag.end.column;
|
||||
return Range.fromPoints(tag.start, end);
|
||||
}
|
||||
} else {
|
||||
stack.push(tag);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}.call(FoldMode.prototype));
|
||||
}
|
||||
);
|
||||
|
||||
ace.define(
|
||||
"ace/mode/xml",
|
||||
[
|
||||
"require",
|
||||
"exports",
|
||||
"module",
|
||||
"ace/lib/oop",
|
||||
"ace/lib/lang",
|
||||
"ace/mode/text",
|
||||
"ace/mode/xml_highlight_rules",
|
||||
"ace/mode/behaviour/xml",
|
||||
"ace/mode/folding/xml",
|
||||
"ace/worker/worker_client"
|
||||
],
|
||||
function(require, exports, module) {
|
||||
"use strict";
|
||||
|
||||
var oop = require("../lib/oop");
|
||||
var lang = require("../lib/lang");
|
||||
var TextMode = require("./text").Mode;
|
||||
var XmlHighlightRules = require("./xml_highlight_rules").XmlHighlightRules;
|
||||
var XmlBehaviour = require("./behaviour/xml").XmlBehaviour;
|
||||
var XmlFoldMode = require("./folding/xml").FoldMode;
|
||||
var WorkerClient = require("../worker/worker_client").WorkerClient;
|
||||
|
||||
var Mode = function() {
|
||||
this.HighlightRules = XmlHighlightRules;
|
||||
this.$behaviour = new XmlBehaviour();
|
||||
this.foldingRules = new XmlFoldMode();
|
||||
};
|
||||
|
||||
oop.inherits(Mode, TextMode);
|
||||
|
||||
(function() {
|
||||
this.voidElements = lang.arrayToMap([]);
|
||||
|
||||
this.blockComment = { start: "<!--", end: "-->" };
|
||||
|
||||
this.createWorker = function(session) {
|
||||
var worker = new WorkerClient(["ace"], "ace/mode/xml_worker", "Worker");
|
||||
worker.attachToDocument(session.getDocument());
|
||||
|
||||
worker.on("error", function(e) {
|
||||
session.setAnnotations(e.data);
|
||||
});
|
||||
|
||||
worker.on("terminate", function() {
|
||||
session.clearAnnotations();
|
||||
});
|
||||
|
||||
return worker;
|
||||
};
|
||||
|
||||
this.$id = "ace/mode/xml";
|
||||
}.call(Mode.prototype));
|
||||
|
||||
exports.Mode = Mode;
|
||||
}
|
||||
);
|
||||
(function() {
|
||||
ace.require(["ace/mode/xml"], function(m) {
|
||||
if (typeof module == "object" && typeof exports == "object" && module) {
|
||||
module.exports = m;
|
||||
}
|
||||
});
|
||||
})();
|
||||
@@ -1,116 +0,0 @@
|
||||
ace.define(
|
||||
"ace/theme/monokai",
|
||||
["require", "exports", "module", "ace/lib/dom"],
|
||||
function(require, exports, module) {
|
||||
exports.isDark = true;
|
||||
exports.cssClass = "ace-monokai";
|
||||
exports.cssText =
|
||||
".ace-monokai .ace_gutter {\
|
||||
background: #2F3129;\
|
||||
color: #8F908A\
|
||||
}\
|
||||
.ace-monokai .ace_print-margin {\
|
||||
width: 1px;\
|
||||
background: #555651\
|
||||
}\
|
||||
.ace-monokai {\
|
||||
background-color: #272822;\
|
||||
color: #F8F8F2\
|
||||
}\
|
||||
.ace-monokai .ace_cursor {\
|
||||
color: #F8F8F0\
|
||||
}\
|
||||
.ace-monokai .ace_marker-layer .ace_selection {\
|
||||
background: #49483E\
|
||||
}\
|
||||
.ace-monokai.ace_multiselect .ace_selection.ace_start {\
|
||||
box-shadow: 0 0 3px 0px #272822;\
|
||||
}\
|
||||
.ace-monokai .ace_marker-layer .ace_step {\
|
||||
background: rgb(102, 82, 0)\
|
||||
}\
|
||||
.ace-monokai .ace_marker-layer .ace_bracket {\
|
||||
margin: -1px 0 0 -1px;\
|
||||
border: 1px solid #49483E\
|
||||
}\
|
||||
.ace-monokai .ace_marker-layer .ace_active-line {\
|
||||
background: #202020\
|
||||
}\
|
||||
.ace-monokai .ace_gutter-active-line {\
|
||||
background-color: #272727\
|
||||
}\
|
||||
.ace-monokai .ace_marker-layer .ace_selected-word {\
|
||||
border: 1px solid #49483E\
|
||||
}\
|
||||
.ace-monokai .ace_invisible {\
|
||||
color: #52524d\
|
||||
}\
|
||||
.ace-monokai .ace_entity.ace_name.ace_tag,\
|
||||
.ace-monokai .ace_keyword,\
|
||||
.ace-monokai .ace_meta.ace_tag,\
|
||||
.ace-monokai .ace_storage {\
|
||||
color: #F92672\
|
||||
}\
|
||||
.ace-monokai .ace_punctuation,\
|
||||
.ace-monokai .ace_punctuation.ace_tag {\
|
||||
color: #fff\
|
||||
}\
|
||||
.ace-monokai .ace_constant.ace_character,\
|
||||
.ace-monokai .ace_constant.ace_language,\
|
||||
.ace-monokai .ace_constant.ace_numeric,\
|
||||
.ace-monokai .ace_constant.ace_other {\
|
||||
color: #AE81FF\
|
||||
}\
|
||||
.ace-monokai .ace_invalid {\
|
||||
color: #F8F8F0;\
|
||||
background-color: #F92672\
|
||||
}\
|
||||
.ace-monokai .ace_invalid.ace_deprecated {\
|
||||
color: #F8F8F0;\
|
||||
background-color: #AE81FF\
|
||||
}\
|
||||
.ace-monokai .ace_support.ace_constant,\
|
||||
.ace-monokai .ace_support.ace_function {\
|
||||
color: #66D9EF\
|
||||
}\
|
||||
.ace-monokai .ace_fold {\
|
||||
background-color: #A6E22E;\
|
||||
border-color: #F8F8F2\
|
||||
}\
|
||||
.ace-monokai .ace_storage.ace_type,\
|
||||
.ace-monokai .ace_support.ace_class,\
|
||||
.ace-monokai .ace_support.ace_type {\
|
||||
font-style: italic;\
|
||||
color: #66D9EF\
|
||||
}\
|
||||
.ace-monokai .ace_entity.ace_name.ace_function,\
|
||||
.ace-monokai .ace_entity.ace_other,\
|
||||
.ace-monokai .ace_entity.ace_other.ace_attribute-name,\
|
||||
.ace-monokai .ace_variable {\
|
||||
color: #A6E22E\
|
||||
}\
|
||||
.ace-monokai .ace_variable.ace_parameter {\
|
||||
font-style: italic;\
|
||||
color: #FD971F\
|
||||
}\
|
||||
.ace-monokai .ace_string {\
|
||||
color: #E6DB74\
|
||||
}\
|
||||
.ace-monokai .ace_comment {\
|
||||
color: #75715E\
|
||||
}\
|
||||
.ace-monokai .ace_indent-guide {\
|
||||
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQImWPQ0FD0ZXBzd/wPAAjVAoxeSgNeAAAAAElFTkSuQmCC) right repeat-y\
|
||||
}";
|
||||
|
||||
var dom = require("../lib/dom");
|
||||
dom.importCssString(exports.cssText, exports.cssClass);
|
||||
}
|
||||
);
|
||||
(function() {
|
||||
ace.require(["ace/theme/monokai"], function(m) {
|
||||
if (typeof module == "object" && typeof exports == "object" && module) {
|
||||
module.exports = m;
|
||||
}
|
||||
});
|
||||
})();
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,194 +0,0 @@
|
||||
/* GENERIC STUFF ****************************************/
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
padding: 5px;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
/* APPLICATION ROOT ****************************************/
|
||||
.playground {
|
||||
display: grid;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
grid-template-columns: auto 8px 1fr;
|
||||
}
|
||||
|
||||
/* LEFT BAR ****************************************/
|
||||
.left-bar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #2f3129;
|
||||
}
|
||||
|
||||
.left-bar.split {
|
||||
grid-template-rows: 50px 60% 23px 30%;
|
||||
}
|
||||
|
||||
.menubar {
|
||||
background-color: #1c2128;
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
display: flex;
|
||||
flex: 0 0 50px;
|
||||
flex-direction: row-reverse;
|
||||
align-items: center;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.menubar select {
|
||||
margin: 10px;
|
||||
font-size: 16px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.run-code {
|
||||
margin-right: 12px;
|
||||
height: 25px;
|
||||
border: 2px solid transparent;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.run-code:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.flash {
|
||||
background-position: center;
|
||||
transition: background 0.5s;
|
||||
}
|
||||
|
||||
.flash:active {
|
||||
background-color: #41454a;
|
||||
background-size: 100%;
|
||||
transition: background 0s;
|
||||
}
|
||||
|
||||
.layout-selector {
|
||||
cursor: pointer;
|
||||
padding: 5px;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.share-code {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.copied-notification {
|
||||
font-size: x-small;
|
||||
position: absolute;
|
||||
bottom: -5px;
|
||||
white-space: nowrap;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
/* TABBED EDITOR ****************************************/
|
||||
|
||||
.tabbed-editor {
|
||||
flex: 2 2 auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.separator.horizontal + .tabbed-editor {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.tabBar {
|
||||
color: white;
|
||||
height: 22px;
|
||||
margin-top: -22px;
|
||||
padding-left: 5px;
|
||||
user-select: none;
|
||||
width: 170px;
|
||||
}
|
||||
|
||||
.tabBar.resizeable {
|
||||
cursor: row-resize;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tab {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
padding: 0 8px;
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
width: 34px;
|
||||
text-align: center;
|
||||
border-bottom: 2px solid transparent;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.tab.active {
|
||||
border-bottom: 2px solid gray;
|
||||
}
|
||||
|
||||
.code-editor {
|
||||
margin-top: 8px;
|
||||
height: calc(100% - 10px);
|
||||
}
|
||||
|
||||
/* SEPARATOR ****************************************/
|
||||
|
||||
.separator {
|
||||
background-color: #1c2128;
|
||||
cursor: col-resize;
|
||||
}
|
||||
|
||||
.separator.horizontal {
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
/* RIGHT PANE ****************************************/
|
||||
.right-pane {
|
||||
background-color: bisque;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.right-pane iframe {
|
||||
background-color: white;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.right-pane iframe.disabled {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.content {
|
||||
height: 100%;
|
||||
}
|
||||
.right-pane .welcome {
|
||||
text-align: center;
|
||||
font-size: 30px;
|
||||
color: gray;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.right-pane .url {
|
||||
font-size: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.url a {
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.right-pane .note {
|
||||
font-size: 18px;
|
||||
text-align: left;
|
||||
margin-top: 20px;
|
||||
padding: 5%;
|
||||
}
|
||||
|
||||
@@ -1,404 +0,0 @@
|
||||
import { debounce, loadJS } from "./utils.js";
|
||||
import {
|
||||
App,
|
||||
Component,
|
||||
useState,
|
||||
useRef,
|
||||
onMounted,
|
||||
onWillUnmount,
|
||||
onPatched,
|
||||
onWillUpdateProps,
|
||||
loadFile as _loadFile,
|
||||
whenReady,
|
||||
__info__,
|
||||
useEffect,
|
||||
onWillStart,
|
||||
} from "../owl.js";
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Constants, helpers, utils
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
const MODES = {
|
||||
js: "ace/mode/javascript",
|
||||
css: "ace/mode/css",
|
||||
xml: "ace/mode/xml"
|
||||
};
|
||||
|
||||
const DEFAULT_XML = `<templates>
|
||||
</templates>`;
|
||||
|
||||
// Memoize loadFile so that samples aren't reloaded whenever a sample is selected
|
||||
const fileCache = {};
|
||||
const loadFile = (path) => {
|
||||
if (!(path in fileCache)) {
|
||||
fileCache[path] = _loadFile(path);
|
||||
}
|
||||
return fileCache[path];
|
||||
}
|
||||
|
||||
/**
|
||||
* Make an iframe, with all the js, css and xml properly injected.
|
||||
*/
|
||||
function makeCodeIframe(js, css, xml) {
|
||||
// escape backticks in the xml so they don't close the template string
|
||||
const escapedXml = xml.replace(/`/g, '\\\`');
|
||||
|
||||
const iframe = document.createElement("iframe");
|
||||
iframe.onload = () => {
|
||||
const doc = iframe.contentDocument;
|
||||
|
||||
const importMap = doc.createElement("script");
|
||||
importMap.type = "importmap";
|
||||
importMap.textContent = `{ "imports": { "@odoo/owl": "../owl.js" } }`;
|
||||
doc.head.appendChild(importMap);
|
||||
|
||||
const script = doc.createElement("script");
|
||||
script.type = "module";
|
||||
script.textContent = `const TEMPLATES = \`${escapedXml}\`\n${js}`;
|
||||
doc.body.appendChild(script);
|
||||
|
||||
const style = document.createElement("style");
|
||||
style.innerText = css;
|
||||
doc.head.appendChild(style);
|
||||
};
|
||||
return iframe;
|
||||
}
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// SAMPLES
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
const SAMPLES = [
|
||||
{
|
||||
description: "Components",
|
||||
folder: "components",
|
||||
code: ["js", "xml", "css"],
|
||||
},
|
||||
{
|
||||
description: "Form Input Bindings",
|
||||
folder: "form",
|
||||
code: ["js", "xml"],
|
||||
},
|
||||
{
|
||||
description: "Inline templates",
|
||||
folder: "single_file_component",
|
||||
code: ["js"],
|
||||
},
|
||||
{
|
||||
description: "Lifecycle demo",
|
||||
folder: "lifecycle_demo",
|
||||
code: ["js", "xml", "css"],
|
||||
},
|
||||
{
|
||||
description: "Customized hook",
|
||||
folder: "custom_hooks",
|
||||
code: ["js", "xml", "css"],
|
||||
},
|
||||
{
|
||||
description: "Todo List App (with reactivity)",
|
||||
folder: "todo_app",
|
||||
code: ["js", "xml", "css"],
|
||||
},
|
||||
{
|
||||
description: "Responsive app",
|
||||
folder: "responsive_app",
|
||||
code: ["js", "xml", "css"],
|
||||
},
|
||||
{
|
||||
description: "Slots And Generic Components",
|
||||
folder: "slots",
|
||||
code: ["js", "xml", "css"],
|
||||
},
|
||||
{
|
||||
description: "Window Management System",
|
||||
folder: "window_manager",
|
||||
code: ["js", "xml", "css"],
|
||||
},
|
||||
{
|
||||
description: "Benchmark example",
|
||||
folder: "benchmark",
|
||||
code: ["js", "xml", "css"],
|
||||
},
|
||||
]
|
||||
|
||||
function loadSamples() {
|
||||
const result = SAMPLES.map(({ description, folder, code }) => ({
|
||||
description,
|
||||
code: async () => Object.fromEntries(
|
||||
await Promise.all(
|
||||
code.map(async (type) => [type, await loadFile(`./samples/${folder}/${folder}.${type}`)])
|
||||
)
|
||||
),
|
||||
}));
|
||||
const localSample = localStorage.getItem("owl-playground-local-sample");
|
||||
if (localSample) {
|
||||
const { js, css, xml } = JSON.parse(localSample);
|
||||
result.unshift({
|
||||
description: "Local Storage Code",
|
||||
code: () => Promise.resolve({ js, xml, css }),
|
||||
});
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Tabbed editor
|
||||
//------------------------------------------------------------------------------
|
||||
class TabbedEditor extends Component {
|
||||
setup() {
|
||||
const props = this.props;
|
||||
this.state = useState({
|
||||
currentTab: props.js !== false ? "js" : props.xml ? "xml" : "css"
|
||||
});
|
||||
this.setTab = debounce(this.setTab.bind(this), 250, true);
|
||||
|
||||
this.sessions = {};
|
||||
this._setupSessions(props);
|
||||
this.editorNode = useRef("editor");
|
||||
this._updateCode = this._updateCode.bind(this);
|
||||
|
||||
onMounted(() => {
|
||||
this.editor = this.editor || ace.edit(this.editorNode.el);
|
||||
|
||||
this.editor.setValue(this.props[this.state.currentTab], -1);
|
||||
this.editor.setFontSize("12px");
|
||||
this.editor.setTheme("ace/theme/monokai");
|
||||
this.editor.setSession(this.sessions[this.state.currentTab]);
|
||||
const tabSize = this.state.currentTab === "xml" ? 2 : 4;
|
||||
this.editor.session.setOption("tabSize", tabSize);
|
||||
this.editor.on("blur", this._updateCode);
|
||||
this.interval = setInterval(this._updateCode, 3000);
|
||||
});
|
||||
|
||||
onPatched(() => {
|
||||
const session = this.sessions[this.state.currentTab];
|
||||
let content = this.props[this.state.currentTab];
|
||||
if (content === false) {
|
||||
const tab = this.props.js !== false ? "js" : this.props.xml ? "xml" : "css";
|
||||
content = this.props[tab];
|
||||
this.state.currentTab = tab;
|
||||
}
|
||||
if (this.editor.getValue() !== content) {
|
||||
session.setValue(content, -1);
|
||||
this.editor.setSession(session);
|
||||
this.editor.resize();
|
||||
}
|
||||
});
|
||||
|
||||
onWillUpdateProps((nextProps) => this._setupSessions(nextProps));
|
||||
|
||||
onWillUnmount(() => {
|
||||
clearInterval(this.interval);
|
||||
this.editor.off("blur", this._updateCode);
|
||||
});
|
||||
}
|
||||
|
||||
setTab(tab) {
|
||||
if (this.state.currentTab !== tab) {
|
||||
this.state.currentTab = tab;
|
||||
const session = this.sessions[this.state.currentTab];
|
||||
session.doc.setValue(this.props[tab], -1);
|
||||
this.editor.setSession(session);
|
||||
}
|
||||
}
|
||||
|
||||
onMouseDown(ev) {
|
||||
if (ev.target.tagName === "DIV") {
|
||||
let y = ev.clientY;
|
||||
const resizer = ev => {
|
||||
const delta = ev.clientY - y;
|
||||
y = ev.clientY;
|
||||
this.props.updatePanelHeight({ delta });
|
||||
};
|
||||
document.body.addEventListener("mousemove", resizer);
|
||||
document.body.addEventListener("mouseup", () => {
|
||||
document.body.removeEventListener("mousemove", resizer);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
_setupSessions(props) {
|
||||
for (let tab of ["js", "xml", "css"]) {
|
||||
if (props[tab] !== false && !this.sessions[tab]) {
|
||||
this.sessions[tab] = new ace.EditSession(props[tab], MODES[tab]);
|
||||
this.sessions[tab].setOption("useWorker", false);
|
||||
const tabSize = tab === "xml" ? 2 : 4;
|
||||
this.sessions[tab].setOption("tabSize", tabSize);
|
||||
this.sessions[tab].setUndoManager(new ace.UndoManager());
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
_updateCode() {
|
||||
const editorValue = this.editor.getValue();
|
||||
const propsValue = this.props[this.state.currentTab];
|
||||
if (editorValue !== propsValue) {
|
||||
this.props.updateCode({
|
||||
type: this.state.currentTab,
|
||||
value: editorValue
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
TabbedEditor.template = "TabbedEditor";
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// MAIN APP
|
||||
//------------------------------------------------------------------------------
|
||||
class Playground extends Component {
|
||||
static template = "Playground";
|
||||
static components = { TabbedEditor };
|
||||
setup() {
|
||||
this.version = __info__.version;
|
||||
|
||||
this.isDirty = false;
|
||||
this.state = useState({
|
||||
js: "",
|
||||
css: "",
|
||||
xml: DEFAULT_XML,
|
||||
displayWelcome: true,
|
||||
splitLayout: true,
|
||||
leftPaneWidth: Math.ceil(window.innerWidth / 2),
|
||||
topPanelHeight: null
|
||||
});
|
||||
|
||||
this.samples = loadSamples();
|
||||
if (window.location.hash) {
|
||||
try {
|
||||
const { js, css, xml } = JSON.parse(atob(decodeURIComponent(window.location.hash.slice(1))));
|
||||
if ([js, css, xml].every(item => typeof item === "string")) {
|
||||
Object.assign(this.state, { js, css, xml });
|
||||
}
|
||||
} catch {}
|
||||
}
|
||||
onWillStart(async () => {
|
||||
if (!this.state.js) {
|
||||
this.setSample(await this.samples[0].code());
|
||||
}
|
||||
})
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
if (this.isDirty) {
|
||||
const { js, css, xml } = this.state;
|
||||
const str = JSON.stringify({ js, css, xml });
|
||||
localStorage.setItem("owl-playground-local-sample", str);
|
||||
}
|
||||
}, 1000);
|
||||
return () => clearInterval(interval);
|
||||
}, () => []);
|
||||
|
||||
this.toggleLayout = debounce(this.toggleLayout, 250, true);
|
||||
this.runCode = debounce(this.runCode, 250, true);
|
||||
this.exportStandaloneApp = debounce(this.exportStandaloneApp, 250, true);
|
||||
this.content = useRef("content");
|
||||
this.updateCode = this.updateCode.bind(this);
|
||||
}
|
||||
|
||||
runCode() {
|
||||
this.content.el.innerHTML = "";
|
||||
this.state.displayWelcome = false;
|
||||
|
||||
const { js, css, xml } = this.state;
|
||||
const subiframe = makeCodeIframe(js, css, xml);
|
||||
this.content.el.appendChild(subiframe);
|
||||
}
|
||||
|
||||
shareCode() {
|
||||
const state = btoa(JSON.stringify({ js: this.state.js, css: this.state.css, xml: this.state.xml }));
|
||||
const link = new URL(window.location.href);
|
||||
link.hash = state;
|
||||
if (navigator.clipboard) {
|
||||
navigator.clipboard.writeText(link.href);
|
||||
clearTimeout(this.state.copied)
|
||||
this.state.copied = setTimeout(() => this.state.copied = null, 2000);
|
||||
}
|
||||
window.location.href = link.href;
|
||||
}
|
||||
|
||||
setSample(sample) {
|
||||
this.state.js = sample.js;
|
||||
this.state.css = sample.css || "";
|
||||
this.state.xml = sample.xml || DEFAULT_XML;
|
||||
localStorage.removeItem("owl-playground-local-sample");
|
||||
this.isDirty = false;
|
||||
}
|
||||
|
||||
get leftPaneStyle() {
|
||||
return `width:${this.state.leftPaneWidth}px`;
|
||||
}
|
||||
|
||||
get topEditorStyle() {
|
||||
return `flex: 0 0 ${this.state.topPanelHeight}px`;
|
||||
}
|
||||
|
||||
async onSampleChange(ev) {
|
||||
this.setSample(await this.samples.find(s => s.description === ev.target.value).code());
|
||||
}
|
||||
|
||||
onMouseDown() {
|
||||
const resizer = ev => {
|
||||
this.state.leftPaneWidth = ev.clientX;
|
||||
};
|
||||
|
||||
document.body.addEventListener("mousemove", resizer);
|
||||
for (let iframe of document.getElementsByTagName("iframe")) {
|
||||
iframe.classList.add("disabled");
|
||||
}
|
||||
|
||||
document.body.addEventListener("mouseup", () => {
|
||||
document.body.removeEventListener("mousemove", resizer);
|
||||
for (let iframe of document.getElementsByTagName("iframe")) {
|
||||
iframe.classList.remove("disabled");
|
||||
}
|
||||
});
|
||||
}
|
||||
updateCode({type, value}) {
|
||||
if (this.state[type] !== value) {
|
||||
this.state[type] = value;
|
||||
this.isDirty = true;
|
||||
}
|
||||
}
|
||||
toggleLayout() {
|
||||
this.state.splitLayout = !this.state.splitLayout;
|
||||
}
|
||||
updatePanelHeight({ delta }) {
|
||||
let height = this.state.topPanelHeight || document.querySelector(".tabbed-editor").clientHeight;
|
||||
this.state.topPanelHeight = height + delta;
|
||||
}
|
||||
|
||||
async exportStandaloneApp() {
|
||||
const { js, css, xml } = this.state;
|
||||
|
||||
await loadJS("libs/jszip.min.js");
|
||||
const zip = new JSZip();
|
||||
zip.file("app.py", await loadFile("./standalone_app/app.py"));
|
||||
zip.file("index.html", await loadFile("./standalone_app/index.html"));
|
||||
zip.file("owl.js", await loadFile("../owl.js"));
|
||||
zip.file("app.js", `const TEMPLATES = await (await fetch('app.xml')).text();\n${js}`);
|
||||
zip.file("app.css", css);
|
||||
zip.file("app.xml", xml);
|
||||
|
||||
await loadJS("libs/FileSaver.min.js");
|
||||
saveAs(await zip.generateAsync({ type: "blob" }), "app.zip");
|
||||
}
|
||||
}
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Application initialization
|
||||
//------------------------------------------------------------------------------
|
||||
async function start() {
|
||||
document.title = `${document.title} (v${__info__.version})`;
|
||||
const commit = `https://github.com/odoo/owl/commit/${__info__.hash}`;
|
||||
console.info(`This application is using Owl built with the following commit:`, commit);
|
||||
const [templates] = await Promise.all([
|
||||
loadFile("templates.xml"),
|
||||
whenReady()
|
||||
]);
|
||||
const rootApp = new App(Playground);
|
||||
rootApp.addTemplates(templates);
|
||||
|
||||
await rootApp.mount(document.body);
|
||||
}
|
||||
|
||||
start();
|
||||
@@ -1,11 +0,0 @@
|
||||
tr.danger {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.remove:hover {
|
||||
font-weight: bold;
|
||||
}
|
||||
.remove {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -1,124 +0,0 @@
|
||||
import { Component, mount, useState, onPatched} from "@odoo/owl";
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Data generation
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
let idCounter = 1;
|
||||
const adjectives = [
|
||||
"pretty", "large", "big", "small", "tall", "short", "long", "handsome", "plain",
|
||||
"quaint", "clean", "elegant", "easy", "angry", "crazy", "helpful", "mushy", "odd",
|
||||
"unsightly", "adorable", "important", "inexpensive", "cheap", "expensive", "fancy"];
|
||||
const colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"];
|
||||
const nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"];
|
||||
|
||||
function _random (max) { return Math.round(Math.random() * 1000) % max; };
|
||||
|
||||
function buildData(count) {
|
||||
const data = new Array(count);
|
||||
for (let i = 0; i < count; i++) {
|
||||
const label = `${adjectives[_random(adjectives.length)]} ${colours[_random(colours.length)]} ${nouns[_random(nouns.length)]}`;
|
||||
data[i] = {
|
||||
id: idCounter++,
|
||||
label,
|
||||
};
|
||||
}
|
||||
return data;
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Components
|
||||
// -----------------------------------------------------------------------------
|
||||
class Button extends Component {
|
||||
static template = "Button";
|
||||
}
|
||||
|
||||
|
||||
class Row extends Component {
|
||||
static template = "Row";
|
||||
}
|
||||
|
||||
class Root extends Component {
|
||||
static template = "Root";
|
||||
static components = { Button, Row };
|
||||
|
||||
setup() {
|
||||
this.state = useState({
|
||||
rows: [],
|
||||
selectedRowId: null
|
||||
});
|
||||
this.benchmarking = false;
|
||||
onPatched(() => {
|
||||
if (this.benchmarking) {
|
||||
this.stop();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
start(descr) {
|
||||
this.benchmarking = `[${descr}]`;
|
||||
console.time(this.benchmarking);
|
||||
}
|
||||
stop() {
|
||||
console.timeEnd(this.benchmarking);
|
||||
this.benchmarking = false;
|
||||
}
|
||||
|
||||
run() {
|
||||
this.start('add1000');
|
||||
this.state.rows = buildData(1000);
|
||||
this.state.selectedRowId = null;
|
||||
}
|
||||
|
||||
runLots() {
|
||||
this.start('add10_000');
|
||||
this.state.rows = buildData(10_000);
|
||||
this.state.selectedRowId = null;
|
||||
}
|
||||
|
||||
add() {
|
||||
this.start('append1000');
|
||||
this.state.rows = this.state.rows.concat(buildData(1000));
|
||||
}
|
||||
|
||||
update() {
|
||||
this.start('update1/10th');
|
||||
let index = 0;
|
||||
const rows = this.state.rows;
|
||||
while (index < rows.length) {
|
||||
rows[index].label = rows[index].label + " !!!";
|
||||
index += 10;
|
||||
}
|
||||
}
|
||||
|
||||
clear() {
|
||||
this.start('clear');
|
||||
this.state.rows = [];
|
||||
this.state.selectedRowId = null;
|
||||
}
|
||||
|
||||
swapRows() {
|
||||
this.start('swap');
|
||||
const rows = this.state.rows;
|
||||
if (rows.length > 998) {
|
||||
let tmp = rows[1];
|
||||
rows[1] = rows[998];
|
||||
rows[998] = tmp;
|
||||
}
|
||||
}
|
||||
|
||||
selectRow(id) {
|
||||
this.start('select');
|
||||
this.state.selectedRowId = id;
|
||||
}
|
||||
|
||||
removeRow(id) {
|
||||
this.start('remove1');
|
||||
const rows = this.state.rows;
|
||||
rows.splice(rows.findIndex(row => row.id === id), 1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// dev=false for benchmarking. we don't want to benchmark dev code!
|
||||
mount(Root, document.body, { templates: TEMPLATES, dev: false });
|
||||
@@ -1,52 +0,0 @@
|
||||
<templates>
|
||||
<t t-name="Button">
|
||||
<div class='col-sm-6 smallpad'>
|
||||
<button t-att-id="props.id" class='btn btn-primary btn-block' type='button' t-on-click="props.onClick">
|
||||
<t t-esc="props.text"/>
|
||||
</button>
|
||||
</div>
|
||||
</t>
|
||||
<t t-name="Row">
|
||||
<tr t-att-class="props.isSelected ? 'danger' : ''">
|
||||
<td class="col-md-1" t-esc="props.row.id" />
|
||||
<td class="col-md-4">
|
||||
<a t-on-click="() => props.onSelect(props.row.id)" t-esc="props.row.label" />
|
||||
</td>
|
||||
<td class="col-md-1">
|
||||
<a t-on-click="() => props.onRemove(props.row.id)" class="remove">[x]
|
||||
<span class='glyphicon glyphicon-remove' aria-hidden="true" />
|
||||
</a>
|
||||
</td>
|
||||
<td class='col-md-6'/>
|
||||
</tr>
|
||||
</t>
|
||||
<t t-name="Root">
|
||||
<div class='container'>
|
||||
<div class='jumbotron'>
|
||||
<div class='row'>
|
||||
<div class='col-md-6'>
|
||||
<h1>Owl Keyed</h1>
|
||||
</div>
|
||||
<div class='col-md-6'>
|
||||
<div class='row'>
|
||||
<Button id="'run'" onClick.bind="run" text="'Create 1,000 rows'" />
|
||||
<Button id="'runlots'" onClick.bind="runLots" text="'Create 10,000 rows'" />
|
||||
<Button id="'add'" onClick.bind="add" text="'Append 1,000 rows'" />
|
||||
<Button id="'update'" onClick.bind="update" text="'Update every 10th row'" />
|
||||
<Button id="'clear'" onClick.bind="clear" text="'Clear'" />
|
||||
<Button id="'swaprows'" onClick.bind="swapRows" text="'Swap Rows'" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<table class='table table-hover table-striped test-data'>
|
||||
<tbody>
|
||||
<t t-foreach="state.rows" t-as="row" t-key="row.id">
|
||||
<Row row="row" isSelected="row.id === state.selectedRowId" onSelect.bind="selectRow" onRemove.bind="removeRow"/>
|
||||
</t>
|
||||
</tbody>
|
||||
</table>
|
||||
<span class='preloadicon glyphicon glyphicon-remove' aria-hidden="true" />
|
||||
</div>
|
||||
</t>
|
||||
</templates>
|
||||
@@ -1,10 +0,0 @@
|
||||
.greeter {
|
||||
font-size: 20px;
|
||||
width: 300px;
|
||||
height: 100px;
|
||||
margin: 5px;
|
||||
text-align: center;
|
||||
line-height: 100px;
|
||||
background-color: #eeeeee;
|
||||
user-select: none;
|
||||
}
|
||||
@@ -1,26 +0,0 @@
|
||||
// In this example, we show how components can be defined and created.
|
||||
import { Component, useState, mount } from "@odoo/owl";
|
||||
|
||||
class Greeter extends Component {
|
||||
static template = "Greeter";
|
||||
|
||||
setup() {
|
||||
this.state = useState({ word: 'Hello' });
|
||||
}
|
||||
|
||||
toggle() {
|
||||
this.state.word = this.state.word === 'Hi' ? 'Hello' : 'Hi';
|
||||
}
|
||||
}
|
||||
|
||||
// Main root component
|
||||
class Root extends Component {
|
||||
static components = { Greeter };
|
||||
static template = "Root"
|
||||
|
||||
setup() {
|
||||
this.state = useState({ name: 'World'});
|
||||
}
|
||||
}
|
||||
|
||||
mount(Root, document.body, { templates: TEMPLATES, dev: true });
|
||||
@@ -1,9 +0,0 @@
|
||||
<templates>
|
||||
<div t-name="Greeter" class="greeter" t-on-click="toggle">
|
||||
<t t-esc="state.word"/>, <t t-esc="props.name"/>
|
||||
</div>
|
||||
|
||||
<t t-name="Root">
|
||||
<Greeter name="state.name"/>
|
||||
</t>
|
||||
</templates>
|
||||
@@ -1,6 +0,0 @@
|
||||
|
||||
button {
|
||||
width: 120px;
|
||||
height: 35px;
|
||||
font-size: 16px;
|
||||
}
|
||||
@@ -1,40 +0,0 @@
|
||||
// In this example, we show how hooks can be used or defined.
|
||||
import { Component, mount, useState, onWillDestroy } from "@odoo/owl";
|
||||
|
||||
// We define here a custom behaviour: this hook tracks the state of the mouse
|
||||
// position
|
||||
function useMouse() {
|
||||
const position = useState({x:0, y: 0});
|
||||
|
||||
function update(e) {
|
||||
position.x = e.clientX;
|
||||
position.y = e.clientY;
|
||||
}
|
||||
window.addEventListener('mousemove', update);
|
||||
onWillDestroy(() => {
|
||||
window.removeEventListener('mousemove', update);
|
||||
});
|
||||
|
||||
return position;
|
||||
}
|
||||
|
||||
|
||||
// Main root component
|
||||
class Root extends Component {
|
||||
static template = "Root";
|
||||
|
||||
setup() {
|
||||
// simple state hook (reactive object)
|
||||
this.counter = useState({ value: 0 });
|
||||
|
||||
// this hooks is bound to the 'mouse' property.
|
||||
this.mouse = useMouse();
|
||||
}
|
||||
|
||||
increment() {
|
||||
this.counter.value++;
|
||||
}
|
||||
}
|
||||
|
||||
// Application setup
|
||||
mount(Root, document.body, { templates: TEMPLATES, dev: true });
|
||||
@@ -1,7 +0,0 @@
|
||||
|
||||
<templates>
|
||||
<div t-name="Root">
|
||||
<button t-on-click="increment">Click! <t t-esc="counter.value"/></button>
|
||||
<div>Mouse: <t t-esc="mouse.x"/>, <t t-esc="mouse.y"/></div>
|
||||
</div>
|
||||
</templates>
|
||||
@@ -1,22 +0,0 @@
|
||||
// This example illustrate how the t-model directive can be used to synchronize
|
||||
// data between html inputs (and select/textareas) and the state of a component.
|
||||
// Note that there are two controls with t-model="color": they are totally
|
||||
// synchronized.
|
||||
import { Component, useState, mount } from "@odoo/owl";
|
||||
|
||||
class Form extends Component {
|
||||
static template = "Form";
|
||||
|
||||
setup() {
|
||||
this.state = useState({
|
||||
text: "",
|
||||
othertext: "",
|
||||
number: 11,
|
||||
color: "",
|
||||
bool: false
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Application setup
|
||||
mount(Form, document.body, { templates: TEMPLATES, dev: true });
|
||||
@@ -1,37 +0,0 @@
|
||||
<templates>
|
||||
<div t-name="Form">
|
||||
<h1>Form</h1>
|
||||
<div>
|
||||
Text (immediate): <input t-model="state.text"/>
|
||||
</div>
|
||||
<div>
|
||||
Other text (lazy): <input t-model.lazy="state.othertext"/>
|
||||
</div>
|
||||
<div>
|
||||
Number: <input t-model.number="state.number"/>
|
||||
</div>
|
||||
<div>
|
||||
Boolean: <input type="checkbox" t-model="state.bool"/>
|
||||
</div>
|
||||
<div>
|
||||
Color, with a select:
|
||||
<select t-model="state.color">
|
||||
<option value="">Select a color</option>
|
||||
<option value="red">Red</option>
|
||||
<option value="blue">Blue</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
Color, with radio buttons:
|
||||
<span><input type="radio" name="color" id="red" value="red" t-model="state.color"/><label for="red">Red</label></span>
|
||||
<span><input type="radio" name="color" id="blue" value="blue" t-model="state.color"/><label for="blue">Blue</label></span>
|
||||
</div>
|
||||
<hr/>
|
||||
<h1>State</h1>
|
||||
<div>Text: <t t-esc="state.text"/></div>
|
||||
<div>Other Text: <t t-esc="state.othertext"/></div>
|
||||
<div>Number: <t t-esc="state.number"/></div>
|
||||
<div>Boolean: <t t-if="state.bool">True</t><t t-else="">False</t></div>
|
||||
<div>Color: <t t-esc="state.color"/></div>
|
||||
</div>
|
||||
</templates>
|
||||
@@ -1,7 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"paths": {
|
||||
"owl": ["../../../src/index.ts"],
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -1,11 +0,0 @@
|
||||
button {
|
||||
font-size: 18px;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.demo {
|
||||
margin: 10px;
|
||||
padding: 10px;
|
||||
background-color: #dddddd;
|
||||
width: 250px;
|
||||
}
|
||||
@@ -1,68 +0,0 @@
|
||||
// This example shows all the possible lifecycle hooks
|
||||
//
|
||||
// The root component controls a sub component (DemoComponent). It logs all its lifecycle
|
||||
// methods in the console. Try modifying its state by clicking on it, or by
|
||||
// clicking on the two main buttons, and look into the console to see what
|
||||
// happens.
|
||||
import {
|
||||
Component,
|
||||
useState,
|
||||
mount,
|
||||
useComponent,
|
||||
onWillStart,
|
||||
onMounted,
|
||||
onWillUnmount,
|
||||
onWillUpdateProps,
|
||||
onPatched,
|
||||
onWillPatch,
|
||||
onWillRender,
|
||||
onRendered,
|
||||
onWillDestroy,
|
||||
} from "@odoo/owl";
|
||||
|
||||
function useLogLifecycle() {
|
||||
const component = useComponent();
|
||||
const name = component.constructor.name;
|
||||
onWillStart(() => console.log(`${name}:willStart`));
|
||||
onMounted(() => console.log(`${name}:mounted`));
|
||||
onWillUpdateProps(() => console.log(`${name}:willUpdateProps`));
|
||||
onWillRender(() => console.log(`${name}:willRender`));
|
||||
onRendered(() => console.log(`${name}:rendered`));
|
||||
onWillPatch(() => console.log(`${name}:willPatch`));
|
||||
onPatched(() => console.log(`${name}:patched`));
|
||||
onWillUnmount(() => console.log(`${name}:willUnmount`));
|
||||
onWillDestroy(() => console.log(`${name}:willDestroy`));
|
||||
}
|
||||
|
||||
class DemoComponent extends Component {
|
||||
static template = "DemoComponent";
|
||||
|
||||
setup() {
|
||||
useLogLifecycle();
|
||||
this.state = useState({ n: 0 });
|
||||
}
|
||||
increment() {
|
||||
this.state.n++;
|
||||
}
|
||||
}
|
||||
|
||||
class Root extends Component {
|
||||
static template = "Root";
|
||||
static components = { DemoComponent };
|
||||
|
||||
setup() {
|
||||
useLogLifecycle();
|
||||
this.state = useState({ n: 0, flag: true });
|
||||
}
|
||||
|
||||
increment() {
|
||||
this.state.n++;
|
||||
}
|
||||
|
||||
toggleSubComponent() {
|
||||
this.state.flag = !this.state.flag;
|
||||
}
|
||||
}
|
||||
|
||||
mount(Root, document.body, { templates: TEMPLATES, dev: true });
|
||||
|
||||
@@ -1,15 +0,0 @@
|
||||
<templates>
|
||||
<div t-name="DemoComponent" t-on-click="increment" class="demo">
|
||||
<div>Demo Sub Component</div>
|
||||
<div>(click on me to update me)</div>
|
||||
<div>Props: <t t-esc="props.n"/>, State: <t t-esc="state.n"/>. </div>
|
||||
</div>
|
||||
|
||||
<div t-name="Root">
|
||||
<button t-on-click="increment">Increment Parent State</button>
|
||||
<button t-on-click="toggleSubComponent">Toggle SubComponent</button>
|
||||
<div t-if="state.flag">
|
||||
<DemoComponent n="state.n"/>
|
||||
</div>
|
||||
</div>
|
||||
</templates>
|
||||
@@ -1,56 +0,0 @@
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.app {
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.app.desktop {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
flex: 0 0 30px;
|
||||
height: 30px;
|
||||
background-color: cadetblue;
|
||||
color: white;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.controlpanel {
|
||||
flex: 0 0 100px;
|
||||
height: 100px;
|
||||
background-color: #dddddd;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
flex: 1 1 auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.formview {
|
||||
overflow-y: auto;
|
||||
flex: 1 1 60%;
|
||||
min-height: 200px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.chatter {
|
||||
overflow-y: auto;
|
||||
flex: 1 1 40%;
|
||||
background-color: #eeeeee;
|
||||
color: #333333;
|
||||
padding: 8px;
|
||||
}
|
||||
@@ -1,118 +0,0 @@
|
||||
// In this example, we show how one can design an application that is responsive:
|
||||
// its UI is different in mobile mode or in desktop mode.
|
||||
//
|
||||
// The main idea is to have a "isMobile" key in the environment, then listen
|
||||
// to resize events and update the env if needed. Then, the whole interface
|
||||
// will be updated, creating and destroying components as needed.
|
||||
//
|
||||
// To see this in action, try resizing the window. The application will switch
|
||||
// to mobile mode whenever it has less than 768px.
|
||||
import { Component, useState, mount, reactive, useEnv } from "@odoo/owl";
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Helpers
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
function debounce(func, wait, immediate) {
|
||||
let timeout;
|
||||
return function () {
|
||||
const context = this;
|
||||
const args = arguments;
|
||||
function later() {
|
||||
timeout = null;
|
||||
if (!immediate) {
|
||||
func.apply(context, args);
|
||||
}
|
||||
}
|
||||
const callNow = immediate && !timeout;
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(later, wait);
|
||||
if (callNow) {
|
||||
func.apply(context, args);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Responsive hook
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
function createUI() {
|
||||
const getIsMobile = () => window.innerWidth <= 768;
|
||||
|
||||
const ui = reactive({ isMobile: getIsMobile() });
|
||||
|
||||
const updateEnv = debounce(() => {
|
||||
const isMobile = getIsMobile();
|
||||
if (ui.isMobile !== isMobile) {
|
||||
ui.isMobile = isMobile;
|
||||
}
|
||||
}, 15);
|
||||
window.addEventListener("resize", updateEnv);
|
||||
return ui;
|
||||
}
|
||||
|
||||
function useUI() {
|
||||
const env = useEnv();
|
||||
return useState(env.ui);
|
||||
}
|
||||
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Components
|
||||
//------------------------------------------------------------------------------
|
||||
class Navbar extends Component {
|
||||
static template = "Navbar";
|
||||
}
|
||||
|
||||
class MobileSearchView extends Component {
|
||||
static template = "MobileSearchView";
|
||||
}
|
||||
|
||||
class ControlPanel extends Component {
|
||||
static template = "ControlPanel";
|
||||
static components = { MobileSearchView };
|
||||
setup() {
|
||||
this.ui = useUI();
|
||||
}
|
||||
}
|
||||
|
||||
class AdvancedComponent extends Component {
|
||||
static template = "AdvancedComponent";
|
||||
}
|
||||
|
||||
class FormView extends Component {
|
||||
static template = "FormView";
|
||||
static components = { AdvancedComponent };
|
||||
setup() {
|
||||
this.ui = useUI();
|
||||
}
|
||||
}
|
||||
|
||||
class Chatter extends Component {
|
||||
static template = "Chatter";
|
||||
|
||||
setup() {
|
||||
this.messages = Array.from(Array(100).keys());
|
||||
}
|
||||
}
|
||||
|
||||
class Root extends Component {
|
||||
static template = "Root";
|
||||
static components = { Navbar, ControlPanel, FormView, Chatter };
|
||||
|
||||
setup() {
|
||||
this.ui = useUI();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Application Startup
|
||||
//------------------------------------------------------------------------------
|
||||
const env = {
|
||||
ui: createUI()
|
||||
};
|
||||
|
||||
mount(Root, document.body, { templates: TEMPLATES, env, dev: true });
|
||||
@@ -1,42 +0,0 @@
|
||||
<templates>
|
||||
<div t-name="Navbar" class="navbar">Navbar</div>
|
||||
|
||||
<div t-name="ControlPanel" class="controlpanel">
|
||||
<h2>Control Panel</h2>
|
||||
<MobileSearchView t-if="ui.isMobile" />
|
||||
</div>
|
||||
|
||||
<div t-name="FormView" class="formview">
|
||||
<h2>Form View</h2>
|
||||
<AdvancedComponent t-if="!ui.isMobile" />
|
||||
</div>
|
||||
|
||||
<div t-name="Chatter" class="chatter">
|
||||
<h2>Chatter</h2>
|
||||
<t t-foreach="messages" t-as="item" t-key="item"><div>Message <t t-esc="item"/></div></t>
|
||||
</div>
|
||||
|
||||
<div t-name="MobileSearchView">Mobile searchview</div>
|
||||
|
||||
<div t-name="AdvancedComponent">
|
||||
This component is only created in desktop mode.
|
||||
<button>Button!</button>
|
||||
</div>
|
||||
|
||||
<t t-name="maincontent">
|
||||
<FormView />
|
||||
<Chatter />
|
||||
</t>
|
||||
<div t-name="Root" class="app" t-att-class="{mobile: ui.isMobile, desktop: !ui.isMobile}">
|
||||
<Navbar/>
|
||||
<ControlPanel/>
|
||||
<div class="content-wrapper" t-if="!ui.isMobile">
|
||||
<div class="content">
|
||||
<t t-call="maincontent"/>
|
||||
</div>
|
||||
</div>
|
||||
<t t-else="">
|
||||
<t t-call="maincontent"/>
|
||||
</t>
|
||||
</div>
|
||||
</templates>
|
||||
@@ -1,28 +0,0 @@
|
||||
// This example illustrates how one can write Owl components with
|
||||
// inline templates.
|
||||
|
||||
import { Component, useState, xml, mount } from "@odoo/owl";
|
||||
|
||||
// Counter component
|
||||
class Counter extends Component {
|
||||
static template = xml`
|
||||
<button t-on-click="() => state.value++">
|
||||
Click! [<t t-esc="state.value"/>]
|
||||
</button>`;
|
||||
|
||||
state = useState({ value: 0 })
|
||||
}
|
||||
|
||||
// Root
|
||||
class Root extends Component {
|
||||
static template = xml`
|
||||
<div>
|
||||
<Counter/>
|
||||
<Counter/>
|
||||
</div>`;
|
||||
|
||||
static components = { Counter };
|
||||
}
|
||||
|
||||
// Application setup
|
||||
mount(Root, document.body, { templates: TEMPLATES, dev: true});
|
||||
@@ -1,43 +0,0 @@
|
||||
.main {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #eeeeee;
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
margin: 10px;
|
||||
border: 1px solid gray;
|
||||
}
|
||||
|
||||
.card.full {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.card.small {
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
flex: 0 0 25px;
|
||||
font-weight: bold;
|
||||
background-color: darkcyan;
|
||||
color: white;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.card-title button {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
flex: 1 1 auto;
|
||||
padding: 5px;
|
||||
border-top: 1px solid white;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
border-top: 1px solid white;
|
||||
}
|
||||
@@ -1,49 +0,0 @@
|
||||
// We show here how slots can be used to create generic components.
|
||||
// In this example, the Card component is basically only a container. It is not
|
||||
// aware of its content. It just knows where it should be (with t-slot).
|
||||
// The parent component define the content with t-set-slot.
|
||||
//
|
||||
// Note that the t-on-click event, defined in the Root template, is executed in
|
||||
// the context of the Root component, even though it is inside the Card component
|
||||
import { Component, useState, mount } from "@odoo/owl";
|
||||
|
||||
class Card extends Component {
|
||||
static template = "Card";
|
||||
|
||||
setup() {
|
||||
this.state = useState({ showContent: true });
|
||||
}
|
||||
|
||||
toggleDisplay() {
|
||||
this.state.showContent = !this.state.showContent;
|
||||
}
|
||||
}
|
||||
|
||||
class Counter extends Component {
|
||||
static template = "Counter";
|
||||
|
||||
setup() {
|
||||
this.state = useState({val: 1});
|
||||
}
|
||||
|
||||
inc() {
|
||||
this.state.val++;
|
||||
}
|
||||
}
|
||||
|
||||
// Main root component
|
||||
class Root extends Component {
|
||||
static template = "Root"
|
||||
static components = { Card, Counter };
|
||||
|
||||
setup() {
|
||||
this.state = useState({a: 1, b: 3});
|
||||
}
|
||||
|
||||
inc(key, delta) {
|
||||
this.state[key] += delta;
|
||||
}
|
||||
}
|
||||
|
||||
// Application setup
|
||||
mount(Root, document.body, { templates: TEMPLATES, dev: true});
|
||||
@@ -1,33 +0,0 @@
|
||||
<templates>
|
||||
<div t-name="Card" class="card" t-att-class="state.showContent ? 'full' : 'small'">
|
||||
<div class="card-title">
|
||||
<t t-esc="props.title"/><button t-on-click="toggleDisplay">Toggle</button>
|
||||
</div>
|
||||
<t t-if="state.showContent">
|
||||
<div class="card-content" >
|
||||
<t t-slot="content"/>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<t t-slot="footer"/>
|
||||
</div>
|
||||
</t>
|
||||
</div>
|
||||
|
||||
<div t-name="Counter">
|
||||
<t t-esc="state.val"/><button t-on-click="inc">Inc</button>
|
||||
</div>
|
||||
|
||||
<div t-name="Root" class="main">
|
||||
<Card title="'Title card A'">
|
||||
<t t-set-slot="content">Content of card 1... [<t t-esc="state.a"/>]</t>
|
||||
<t t-set-slot="footer"><button t-on-click="() => this.inc('a', 1)">Increment A</button></t>
|
||||
</Card>
|
||||
<Card title="'Title card B'">
|
||||
<t t-set-slot="content">
|
||||
<div>Card 2... [<t t-esc="state.b"/>]</div>
|
||||
<Counter />
|
||||
</t>
|
||||
<t t-set-slot="footer"><button t-on-click="() => this.inc('b', -1)">Decrement B</button></t>
|
||||
</Card>
|
||||
</div>
|
||||
</templates>
|
||||
@@ -1,379 +0,0 @@
|
||||
html,body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: none;
|
||||
font-size: 100%;
|
||||
vertical-align: baseline;
|
||||
font-family: inherit;
|
||||
font-weight: inherit;
|
||||
color: inherit;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
body {
|
||||
font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
line-height: 1.4em;
|
||||
background: #f5f5f5;
|
||||
color: #4d4d4d;
|
||||
min-width: 230px;
|
||||
max-width: 550px;
|
||||
margin: 0 auto;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.todoapp {
|
||||
background: #fff;
|
||||
margin: 130px 0 40px 0;
|
||||
position: relative;
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.todoapp input::-webkit-input-placeholder {
|
||||
font-style: italic;
|
||||
font-weight: 300;
|
||||
color: #e6e6e6;
|
||||
}
|
||||
|
||||
.todoapp input::-moz-placeholder {
|
||||
font-style: italic;
|
||||
font-weight: 300;
|
||||
color: #e6e6e6;
|
||||
}
|
||||
|
||||
.todoapp input::input-placeholder {
|
||||
font-style: italic;
|
||||
font-weight: 300;
|
||||
color: #e6e6e6;
|
||||
}
|
||||
|
||||
.todoapp h1 {
|
||||
position: absolute;
|
||||
top: -155px;
|
||||
width: 100%;
|
||||
font-size: 100px;
|
||||
font-weight: 100;
|
||||
text-align: center;
|
||||
color: rgba(175, 47, 47, 0.15);
|
||||
-webkit-text-rendering: optimizeLegibility;
|
||||
-moz-text-rendering: optimizeLegibility;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
.new-todo,
|
||||
.edit {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
font-size: 24px;
|
||||
font-family: inherit;
|
||||
font-weight: inherit;
|
||||
line-height: 1.4em;
|
||||
border: 0;
|
||||
color: inherit;
|
||||
padding: 6px;
|
||||
border: 1px solid #999;
|
||||
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
|
||||
box-sizing: border-box;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.new-todo {
|
||||
padding: 16px 16px 16px 60px;
|
||||
border: none;
|
||||
background: rgba(0, 0, 0, 0.003);
|
||||
box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
.main {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
border-top: 1px solid #e6e6e6;
|
||||
}
|
||||
|
||||
.toggle-all {
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
border: none; /* Mobile Safari */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
right: 100%;
|
||||
bottom: 100%;
|
||||
}
|
||||
|
||||
.toggle-all + label {
|
||||
width: 60px;
|
||||
height: 34px;
|
||||
font-size: 0;
|
||||
position: absolute;
|
||||
top: -52px;
|
||||
left: -13px;
|
||||
-webkit-transform: rotate(90deg);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.toggle-all + label:before {
|
||||
content: "❯";
|
||||
font-size: 22px;
|
||||
color: #e6e6e6;
|
||||
padding: 10px 27px 10px 27px;
|
||||
}
|
||||
|
||||
.toggle-all:checked + label:before {
|
||||
color: #737373;
|
||||
}
|
||||
|
||||
.todo-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.todo-list li {
|
||||
position: relative;
|
||||
font-size: 24px;
|
||||
border-bottom: 1px solid #ededed;
|
||||
}
|
||||
|
||||
.todo-list li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.todo-list li.editing {
|
||||
border-bottom: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.todo-list li.editing .edit {
|
||||
display: block;
|
||||
width: calc(100% - 43px);
|
||||
padding: 12px 16px;
|
||||
margin: 0 0 0 43px;
|
||||
}
|
||||
|
||||
.todo-list li.editing .view {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.todo-list li .toggle {
|
||||
text-align: center;
|
||||
width: 40px;
|
||||
/* auto, since non-WebKit browsers doesn't support input styling */
|
||||
height: auto;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto 0;
|
||||
border: none; /* Mobile Safari */
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.todo-list li .toggle {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.todo-list li .toggle + label {
|
||||
/*
|
||||
Firefox requires \`#\` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433
|
||||
IE and Edge requires *everything* to be escaped to render, so we do that instead of just the \`#\` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/
|
||||
*/
|
||||
background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center left;
|
||||
}
|
||||
|
||||
.todo-list li .toggle:checked + label {
|
||||
background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.todo-list li label {
|
||||
word-break: break-all;
|
||||
padding: 15px 15px 15px 60px;
|
||||
display: block;
|
||||
line-height: 1.2;
|
||||
transition: color 0.4s;
|
||||
}
|
||||
|
||||
.todo-list li.completed label {
|
||||
color: #d9d9d9;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.todo-list li .destroy {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 10px;
|
||||
bottom: 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: auto 0;
|
||||
font-size: 30px;
|
||||
color: #cc9a9a;
|
||||
margin-bottom: 11px;
|
||||
transition: color 0.2s ease-out;
|
||||
}
|
||||
|
||||
.todo-list li .destroy:hover {
|
||||
color: #af5b5e;
|
||||
}
|
||||
|
||||
.todo-list li .destroy:after {
|
||||
content: "×";
|
||||
}
|
||||
|
||||
.todo-list li:hover .destroy {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.todo-list li .edit {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.todo-list li.editing:last-child {
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
color: #777;
|
||||
padding: 10px 15px;
|
||||
height: 20px;
|
||||
text-align: center;
|
||||
border-top: 1px solid #e6e6e6;
|
||||
}
|
||||
|
||||
.footer:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 50px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6,
|
||||
0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6,
|
||||
0 17px 2px -6px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.todo-count {
|
||||
float: left;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.todo-count strong {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.filters {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.filters li {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.filters li a {
|
||||
color: inherit;
|
||||
margin: 3px;
|
||||
padding: 3px 7px;
|
||||
text-decoration: none;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.filters li a:hover {
|
||||
border-color: rgba(175, 47, 47, 0.1);
|
||||
}
|
||||
|
||||
.filters li a.selected {
|
||||
border-color: rgba(175, 47, 47, 0.2);
|
||||
}
|
||||
|
||||
.clear-completed,
|
||||
html .clear-completed:active {
|
||||
float: right;
|
||||
position: relative;
|
||||
line-height: 20px;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.clear-completed:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.info {
|
||||
margin: 65px auto 0;
|
||||
color: #bfbfbf;
|
||||
font-size: 10px;
|
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.info p {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.info a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.info a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/*
|
||||
Hack to remove background from Mobile Safari.
|
||||
Can't use it globally since it destroys checkboxes in Firefox
|
||||
*/
|
||||
@media screen and (-webkit-min-device-pixel-ratio: 0) {
|
||||
.toggle-all,
|
||||
.todo-list li .toggle {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.todo-list li .toggle {
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 430px) {
|
||||
.footer {
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.filters {
|
||||
bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.filters a {
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -1,182 +0,0 @@
|
||||
// This example is an implementation of the TodoList application, from the
|
||||
// www.todomvc.com project. This is a non trivial application with some
|
||||
// interesting user interactions. It uses the local storage for persistence.
|
||||
//
|
||||
// In this implementation, we use the owl reactivity mechanism.
|
||||
import { Component, useState, mount, useRef, reactive, useEnv, useEffect } from "@odoo/owl";
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Constants, helpers
|
||||
//------------------------------------------------------------------------------
|
||||
const ENTER_KEY = 13;
|
||||
const ESC_KEY = 27;
|
||||
|
||||
function useAutofocus(name) {
|
||||
let ref = useRef(name);
|
||||
useEffect(el => el && el.focus(), () => [ref.el]);
|
||||
}
|
||||
|
||||
function useStore() {
|
||||
const env = useEnv();
|
||||
return useState(env.store);
|
||||
}
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Task store
|
||||
//------------------------------------------------------------------------------
|
||||
class TaskList {
|
||||
constructor(tasks) {
|
||||
this.tasks = tasks || [];
|
||||
const taskIds = this.tasks.map((t) => t.id);
|
||||
this.nextId = taskIds.length ? Math.max(...taskIds) + 1 : 1;
|
||||
}
|
||||
|
||||
addTask(text) {
|
||||
text = text.trim();
|
||||
if (text) {
|
||||
const task = {
|
||||
id: this.nextId++,
|
||||
text: text,
|
||||
isCompleted: false,
|
||||
};
|
||||
this.tasks.push(task);
|
||||
}
|
||||
}
|
||||
|
||||
toggleTask(task) {
|
||||
task.isCompleted = !task.isCompleted;
|
||||
}
|
||||
|
||||
toggleTask(id) {
|
||||
const task = this.tasks.find(t => t.id === id);
|
||||
task.isCompleted = !task.isCompleted;
|
||||
}
|
||||
|
||||
toggleAll(value) {
|
||||
for (let task of this.tasks) {
|
||||
task.isCompleted = value;
|
||||
}
|
||||
}
|
||||
|
||||
clearCompleted() {
|
||||
const tasks = this.tasks.filter(t => t.isCompleted);
|
||||
for (let task of tasks) {
|
||||
this.deleteTask(task);
|
||||
}
|
||||
}
|
||||
|
||||
deleteTask(id) {
|
||||
const index = this.tasks.findIndex((t) => t.id === id);
|
||||
this.tasks.splice(index, 1);
|
||||
}
|
||||
|
||||
updateTask(id, text) {
|
||||
const value = text.trim();
|
||||
if (!value) {
|
||||
this.deleteTask(id);
|
||||
} else {
|
||||
const task = this.tasks.find(t => t.id === id);
|
||||
task.text = value;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function createTaskStore() {
|
||||
const saveTasks = () => localStorage.setItem("todoapp", JSON.stringify(taskStore.tasks));
|
||||
const initialTasks = JSON.parse(localStorage.getItem("todoapp") || "[]");
|
||||
const taskStore = reactive(new TaskList(initialTasks), saveTasks);
|
||||
saveTasks();
|
||||
return taskStore;
|
||||
}
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Todo
|
||||
//------------------------------------------------------------------------------
|
||||
class Todo extends Component {
|
||||
static template = "Todo";
|
||||
|
||||
setup() {
|
||||
useAutofocus("input");
|
||||
this.store = useStore();
|
||||
this.state = useState({
|
||||
isEditing: false
|
||||
});
|
||||
}
|
||||
|
||||
handleKeyup(ev) {
|
||||
if (ev.keyCode === ENTER_KEY) {
|
||||
this.updateText(ev.target.value);
|
||||
}
|
||||
if (ev.keyCode === ESC_KEY) {
|
||||
ev.target.value = this.props.text;
|
||||
this.state.isEditing = false;
|
||||
}
|
||||
}
|
||||
|
||||
handleBlur(ev) {
|
||||
this.updateText(ev.target.value);
|
||||
}
|
||||
|
||||
updateText(text) {
|
||||
this.store.updateTask(this.props.id, text);
|
||||
this.state.isEditing = false;
|
||||
}
|
||||
}
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// TodoList
|
||||
//------------------------------------------------------------------------------
|
||||
class TodoList extends Component {
|
||||
static template = "TodoList";
|
||||
static components = { Todo };
|
||||
|
||||
setup() {
|
||||
this.store = useStore();
|
||||
this.state = useState({ filter: "all" });
|
||||
}
|
||||
|
||||
get displayedTasks() {
|
||||
const tasks = this.store.tasks;
|
||||
switch (this.state.filter) {
|
||||
case "active":
|
||||
return tasks.filter((t) => !t.isCompleted);
|
||||
case "completed":
|
||||
return tasks.filter((t) => t.isCompleted);
|
||||
case "all":
|
||||
return tasks;
|
||||
}
|
||||
}
|
||||
|
||||
get allChecked() {
|
||||
return this.store.tasks.every(todo => todo.isCompleted);
|
||||
}
|
||||
|
||||
get remaining() {
|
||||
return this.store.tasks.filter(todo => !todo.isCompleted).length;
|
||||
}
|
||||
|
||||
get remainingText() {
|
||||
const items = this.remaining < 2 ? "item" : "items";
|
||||
return ` ${items} left`;
|
||||
}
|
||||
|
||||
addTodo(ev) {
|
||||
if (ev.keyCode === ENTER_KEY) {
|
||||
const text = ev.target.value;
|
||||
if (text.trim()) {
|
||||
this.store.addTask(text);
|
||||
}
|
||||
ev.target.value = "";
|
||||
}
|
||||
}
|
||||
|
||||
setFilter(filter) {
|
||||
this.state.filter = filter;
|
||||
}
|
||||
}
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// App Initialization
|
||||
//------------------------------------------------------------------------------
|
||||
const env = { store: createTaskStore() };
|
||||
mount(TodoList, document.body, { env, templates: TEMPLATES, dev: true });
|
||||
@@ -1,50 +0,0 @@
|
||||
<templates>
|
||||
<section t-name="TodoList" class="todoapp">
|
||||
<header class="header">
|
||||
<h1>todos</h1>
|
||||
<input class="new-todo" autofocus="true" autocomplete="off" placeholder="What needs to be done?" t-on-keyup="addTodo"/>
|
||||
</header>
|
||||
<section class="main" t-if="store.tasks.length">
|
||||
<input class="toggle-all" id="toggle-all" type="checkbox" t-att-checked="allChecked" t-on-click="() => store.toggleAll(!allChecked)"/>
|
||||
<label for="toggle-all"></label>
|
||||
<ul class="todo-list">
|
||||
<t t-foreach="displayedTasks" t-as="todo" t-key="todo.id">
|
||||
<Todo id="todo.id" isCompleted="todo.isCompleted" text="todo.text"/>
|
||||
</t>
|
||||
</ul>
|
||||
</section>
|
||||
<footer class="footer" t-if="store.tasks.length">
|
||||
<span class="todo-count">
|
||||
<strong>
|
||||
<t t-esc="remaining"/>
|
||||
</strong>
|
||||
<t t-esc="remainingText"/>
|
||||
</span>
|
||||
<ul class="filters">
|
||||
<li>
|
||||
<a t-on-click="() => this.setFilter('all')" t-att-class="{selected: state.filter === 'all'}">All</a>
|
||||
</li>
|
||||
<li>
|
||||
<a t-on-click="() => this.setFilter('active')" t-att-class="{selected: state.filter === 'active'}">Active</a>
|
||||
</li>
|
||||
<li>
|
||||
<a t-on-click="() => this.setFilter('completed')" t-att-class="{selected: state.filter === 'completed'}">Completed</a>
|
||||
</li>
|
||||
</ul>
|
||||
<button class="clear-completed" t-if="store.tasks.length gt remaining" t-on-click="() => store.clearCompleted()">
|
||||
Clear completed
|
||||
</button>
|
||||
</footer>
|
||||
</section>
|
||||
|
||||
<li t-name="Todo" class="todo" t-att-class="{completed: props.isCompleted, editing: state.isEditing}">
|
||||
<div class="view">
|
||||
<input class="toggle" type="checkbox" t-on-change="() => store.toggleTask(props.id)" t-att-checked="props.completed"/>
|
||||
<label t-on-dblclick="() => state.isEditing = true">
|
||||
<t t-esc="props.text"/>
|
||||
</label>
|
||||
<button class="destroy" t-on-click="() => store.deleteTask(props.id)"></button>
|
||||
</div>
|
||||
<input class="edit" t-ref="input" t-if="state.isEditing" t-att-value="props.text" t-on-keyup="handleKeyup" t-on-blur="handleBlur"/>
|
||||
</li>
|
||||
</templates>
|
||||
@@ -1,70 +0,0 @@
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.app {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: grid;
|
||||
grid-template-rows: auto 50px;
|
||||
}
|
||||
|
||||
.window-manager {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #eeeeee;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.menubar {
|
||||
background-color: #875a7b;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.menubar button {
|
||||
height: 40px;
|
||||
font-size: 18px;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.window {
|
||||
display: grid;
|
||||
grid-template-rows: 30px auto;
|
||||
border: 1px solid gray;
|
||||
background-color: white;
|
||||
position: absolute;
|
||||
box-shadow: 1px 1px 2px 1px grey;
|
||||
}
|
||||
|
||||
.window.dragging {
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.window .header {
|
||||
background-color: #875a7b;
|
||||
display: grid;
|
||||
grid-template-columns: auto 24px;
|
||||
color: white;
|
||||
line-height: 30px;
|
||||
padding-left: 5px;
|
||||
cursor: default;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.window .header .close {
|
||||
cursor: pointer;
|
||||
font-size: 22px;
|
||||
padding-left: 4px;
|
||||
padding-right: 4px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.counter {
|
||||
font-size: 20px;
|
||||
}
|
||||
.counter button {
|
||||
width: 80px;
|
||||
height:40px;
|
||||
font-size: 20px;
|
||||
}
|
||||
@@ -1,192 +0,0 @@
|
||||
// This example is slightly more complex than usual. We demonstrate
|
||||
// here a way to manage sub windows in Owl, declaratively. This is still just a
|
||||
// demonstration. Managing windows can be as complex as we want. For example,
|
||||
// we could implement the following features:
|
||||
// - resizing windows
|
||||
// - minimizing windows
|
||||
// - configuration options for windows to make a window non resizeable
|
||||
// - minimal width/height
|
||||
// - better heuristic for initial window position
|
||||
// - ...
|
||||
import { Component, useState, mount, useRef, reactive, useEnv, onMounted } from "@odoo/owl";
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Window manager code
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
class WindowManager {
|
||||
// contains all components with metadata
|
||||
static Windows = {};
|
||||
windows = {}; // mapping id => info
|
||||
nextId = 1;
|
||||
|
||||
add(type) {
|
||||
const Comp = WindowManager.Windows[type];
|
||||
const left = 50 + Math.round(Math.random()*(window.innerWidth - 50 - Comp.defaultWidth));
|
||||
const top = 50 + Math.round(Math.random()*(window.innerHeight - 100 - Comp.defaultHeight));
|
||||
const id = this.nextId++;
|
||||
this.windows[id] = {
|
||||
id,
|
||||
title: Comp.defaultTitle,
|
||||
width: Comp.defaultWidth,
|
||||
height: Comp.defaultHeight,
|
||||
left,
|
||||
top,
|
||||
Component: Comp,
|
||||
};
|
||||
}
|
||||
|
||||
close(id) {
|
||||
delete this.windows[id];
|
||||
}
|
||||
|
||||
updatePosition(id, left, top) {
|
||||
const w = this.windows[id];
|
||||
w.left = left;
|
||||
w.top = top;
|
||||
}
|
||||
|
||||
getWindows() {
|
||||
return Object.values(this.windows);
|
||||
}
|
||||
}
|
||||
|
||||
function createWindowService() {
|
||||
return reactive(new WindowManager());
|
||||
}
|
||||
|
||||
function useWindowService() {
|
||||
const env = useEnv();
|
||||
return useState(env.windowService);
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Generic Window Component
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
class Window extends Component {
|
||||
static template = "Window";
|
||||
static nextZIndex = 1;
|
||||
zIndex = 0;
|
||||
|
||||
setup() {
|
||||
this.windowService = useWindowService();
|
||||
this.root = useRef('root');
|
||||
onMounted(this.updateZIndex);
|
||||
}
|
||||
|
||||
get style() {
|
||||
let { width, height, top, left } = this.props.info;
|
||||
return `width: ${width}px;height: ${height}px;top:${top}px;left:${left}px;z-index:${this.zIndex}`;
|
||||
}
|
||||
|
||||
close() {
|
||||
this.windowService.close(this.props.info.id);
|
||||
}
|
||||
|
||||
startDragAndDrop(ev) {
|
||||
this.updateZIndex();
|
||||
const self = this;
|
||||
const root = this.root;
|
||||
|
||||
const el = root.el;
|
||||
el.classList.add('dragging');
|
||||
|
||||
const current = this.props.info;
|
||||
const offsetX = current.left - ev.pageX;
|
||||
const offsetY = current.top - ev.pageY;
|
||||
let left, top;
|
||||
|
||||
window.addEventListener("mousemove", moveWindow);
|
||||
window.addEventListener("mouseup", stopDnD, { once: true });
|
||||
|
||||
function moveWindow(ev) {
|
||||
left = Math.max(offsetX + ev.pageX, 0);
|
||||
top = Math.max(offsetY + ev.pageY, 0);
|
||||
el.style.left = `${left}px`;
|
||||
el.style.top = `${top}px`;
|
||||
}
|
||||
function stopDnD() {
|
||||
window.removeEventListener("mousemove", moveWindow);
|
||||
el.classList.remove('dragging');
|
||||
|
||||
if (top !== undefined && left !== undefined) {
|
||||
self.windowService.updatePosition(current.id, left, top);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
updateZIndex() {
|
||||
this.zIndex = Window.nextZIndex++;
|
||||
this.root.el.style['z-index'] = this.zIndex;
|
||||
}
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Two concrete Window type implementations
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
class HelloWorld extends Component {
|
||||
static template = "HelloWorld";
|
||||
static defaultTitle = "Hello Owl!";
|
||||
static defaultWidth = 200;
|
||||
static defaultHeight = 100;
|
||||
}
|
||||
|
||||
|
||||
class Counter extends Component {
|
||||
static template = "Counter";
|
||||
static defaultTitle = "Click Counter";
|
||||
static defaultWidth = 300;
|
||||
static defaultHeight = 120;
|
||||
|
||||
state = useState({ value: 0 });
|
||||
|
||||
inc() {
|
||||
this.state.value++;
|
||||
}
|
||||
}
|
||||
|
||||
// register window components
|
||||
WindowManager.Windows.Hello = HelloWorld;
|
||||
WindowManager.Windows.Counter = Counter;
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Window Container
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
class WindowContainer extends Component {
|
||||
static template = "WindowContainer";
|
||||
static components = { Window };
|
||||
|
||||
setup() {
|
||||
this.windowService = useWindowService();
|
||||
}
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Root Component
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
class Root extends Component {
|
||||
static template = "Root";
|
||||
static components = { WindowContainer };
|
||||
|
||||
setup() {
|
||||
this.windowService = useWindowService();
|
||||
}
|
||||
|
||||
addWindow(type) {
|
||||
this.windowService.add(type);
|
||||
}
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Setup
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
const env = {
|
||||
windowService: createWindowService(),
|
||||
};
|
||||
|
||||
mount(Root, document.body, { templates: TEMPLATES, env, dev: true });
|
||||
@@ -1,32 +0,0 @@
|
||||
<templates>
|
||||
<div t-name="Window" class="window" t-att-style="style" t-on-click="updateZIndex" t-ref="root">
|
||||
<div class="header">
|
||||
<span t-on-mousedown="startDragAndDrop"><t t-esc="props.info.title"/></span>
|
||||
<span class="close" t-on-click.stop="close">×</span>
|
||||
</div>
|
||||
<t t-slot="default"/>
|
||||
</div>
|
||||
|
||||
<div t-name="WindowContainer" class="window-manager">
|
||||
<Window t-foreach="windowService.getWindows()" t-as="w" t-key="w.id" info="w">
|
||||
<t t-component="w.Component"/>
|
||||
</Window>
|
||||
</div>
|
||||
|
||||
<div t-name="Root" class="app">
|
||||
<WindowContainer/>
|
||||
<div class="menubar">
|
||||
<button t-on-click="() => this.addWindow('Hello')">Say Hello</button>
|
||||
<button t-on-click="() => this.addWindow('Counter')">Counter</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div t-name="HelloWorld">
|
||||
Some content here...
|
||||
</div>
|
||||
|
||||
<div t-name="Counter" class="counter">
|
||||
<button t-on-click="inc">Click</button>
|
||||
<span><t t-esc="state.value"/></span>
|
||||
</div>
|
||||
</templates>
|
||||
@@ -1,28 +0,0 @@
|
||||
#!/usr/bin/env python3
|
||||
|
||||
import threading
|
||||
import time
|
||||
|
||||
from http.server import SimpleHTTPRequestHandler, HTTPServer
|
||||
|
||||
httpd = None
|
||||
def start_server():
|
||||
global httpd
|
||||
SimpleHTTPRequestHandler.extensions_map['.js'] = 'application/javascript'
|
||||
httpd = HTTPServer(('0.0.0.0', 3600), SimpleHTTPRequestHandler)
|
||||
httpd.serve_forever()
|
||||
|
||||
url = 'http://127.0.0.1:3600'
|
||||
|
||||
if __name__ == "__main__":
|
||||
print("Owl Application")
|
||||
print("---------------")
|
||||
print("Server running on: {}".format(url))
|
||||
threading.Thread(target=start_server, daemon=True).start()
|
||||
|
||||
while True:
|
||||
try:
|
||||
time.sleep(1)
|
||||
except KeyboardInterrupt:
|
||||
httpd.server_close()
|
||||
quit(0)
|
||||
@@ -1,22 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>OWL App</title>
|
||||
<link rel="icon" href="data:,">
|
||||
|
||||
<link rel="stylesheet" href="app.css">
|
||||
<script type="importmap">{ "imports": { "@odoo/owl": "./owl.js" } }</script>
|
||||
<script type="module" src="app.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<pre>
|
||||
This app requires a web server, simply opening the html file using your browser will not work.
|
||||
You can run a simple web server with one of the following:
|
||||
- if you have python3 installed, run app.py with python3 or run 'python3 -m http.server' in the app folder
|
||||
- if you have node/npm installed, run 'npx serve' in the app folder
|
||||
- if you have php installed, run 'php -S localhost:8080 -t .' in the app folder
|
||||
</pre>
|
||||
<script>if (window.location.protocol !== "file:") document.querySelector("pre").remove()</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,59 +0,0 @@
|
||||
<templates>
|
||||
<div t-name="TabbedEditor" class="tabbed-editor" t-att-style="props.style">
|
||||
<div class="tabBar" t-att-class="{resizeable: props.resizeable}" t-on-mousedown="onMouseDown">
|
||||
<t t-foreach="['js', 'xml', 'css']" t-as="tab" t-key="tab">
|
||||
<a t-ref="{{tab}}" t-if="props[tab] !== false" t-key="tab" class="tab flash" t-att-class="{active: state.currentTab===tab}" t-on-click="() => setTab(tab)">
|
||||
<t t-esc="tab"/>
|
||||
</a>
|
||||
</t>
|
||||
</div>
|
||||
<div class="code-editor" t-ref="editor"></div>
|
||||
</div>
|
||||
|
||||
<div t-name="Root" class="playground">
|
||||
<div class="left-bar" t-att-class="{split: state.splitLayout}"
|
||||
t-att-style="leftPaneStyle">
|
||||
<div class="menubar">
|
||||
<a class="btn run-code flash" t-on-click="runCode" title="Execute this Code">▶ Run</a>
|
||||
<select t-on-change="onSampleChange">
|
||||
<option t-foreach="samples" t-as="sample" t-key="sample_index">
|
||||
<t t-esc="sample.description"/>
|
||||
</option>
|
||||
</select>
|
||||
<a class="btn flash" t-on-click="exportStandaloneApp" title="Download zip that bundles this app with a tiny python web server"><i class="fas fa-download"></i></a>
|
||||
<a class="layout-selector flash" t-on-click="toggleLayout" title="Toggle Layout"><i class="fas" t-att-class="state.splitLayout ? 'fa-toggle-on' : 'fa-toggle-off'"></i></a>
|
||||
<a class="btn flash share-code" t-on-click="shareCode" title="Copy a link to this playground"><span>Share</span><span class="copied-notification" t-if="state.copied">Copied link to clipboard!</span></a>
|
||||
</div>
|
||||
<TabbedEditor
|
||||
js="state.js"
|
||||
css="!state.splitLayout and state.css"
|
||||
xml="!state.splitLayout and state.xml"
|
||||
style="topEditorStyle"
|
||||
updateCode="updateCode"/>
|
||||
<t t-if="state.splitLayout">
|
||||
<div class="separator horizontal"/>
|
||||
<TabbedEditor
|
||||
js="false"
|
||||
css="state.css"
|
||||
xml="state.xml"
|
||||
resizeable="true"
|
||||
updatePanelHeight.bind="updatePanelHeight"
|
||||
updateCode="updateCode"/>
|
||||
</t>
|
||||
</div>
|
||||
<div class="separator vertical" t-on-mousedown="onMouseDown"/>
|
||||
<div class="right-pane">
|
||||
<div class="welcome" t-if="state.displayWelcome">
|
||||
<div>🦉 Odoo Web Library 🦉</div>
|
||||
<div>v<t t-esc="version"/></div>
|
||||
<div class="url"><a href="https://github.com/odoo/owl">https://github.com/odoo/owl</a></div>
|
||||
<div class="note">
|
||||
<p>
|
||||
Note: these examples make use of recent features of Javascript, and require a recent browser to work without a transpilation step! Among other things, it uses class fields and import maps. If you encounter issues, make sure your browser is up to date.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content" t-ref="content"/>
|
||||
</div>
|
||||
</div>
|
||||
</templates>
|
||||
@@ -1,43 +0,0 @@
|
||||
export function debounce(func, wait, immediate) {
|
||||
let timeout;
|
||||
return function () {
|
||||
const context = this;
|
||||
const args = arguments;
|
||||
function later() {
|
||||
timeout = null;
|
||||
if (!immediate) {
|
||||
func.apply(context, args);
|
||||
}
|
||||
}
|
||||
const callNow = immediate && !timeout;
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(later, wait);
|
||||
if (callNow) {
|
||||
func.apply(context, args);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
const loadedScripts = {};
|
||||
|
||||
export function loadJS(url) {
|
||||
if (url in loadedScripts) {
|
||||
return loadedScripts[url];
|
||||
}
|
||||
const promise = new Promise(function (resolve, reject) {
|
||||
const script = document.createElement("script");
|
||||
script.type = "text/javascript";
|
||||
script.src = url;
|
||||
script.onload = function () {
|
||||
resolve();
|
||||
};
|
||||
script.onerror = function () {
|
||||
reject(`Error loading file '${url}'`);
|
||||
};
|
||||
const head = document.head || document.getElementsByTagName("head")[0];
|
||||
head.appendChild(script);
|
||||
});
|
||||
loadedScripts[url] = promise;
|
||||
return promise;
|
||||
}
|
||||
@@ -6,7 +6,7 @@ from http.server import SimpleHTTPRequestHandler, HTTPServer
|
||||
|
||||
HOST = '127.0.0.1'
|
||||
PORT = 8000
|
||||
URL = 'http://{0}:{1}/tools/playground'.format(HOST, PORT)
|
||||
URL = 'http://{0}:{1}/docs/playground'.format(HOST, PORT)
|
||||
|
||||
|
||||
# We define our own handler here to remap owl.js GET requests to the Owl build
|
||||
@@ -15,7 +15,7 @@ URL = 'http://{0}:{1}/tools/playground'.format(HOST, PORT)
|
||||
# we want to update the playground.
|
||||
class OWLHandler(SimpleHTTPRequestHandler):
|
||||
def do_GET(self):
|
||||
if self.path == '/tools/owl.js' or self.path == '/tools/playground/owl.js':
|
||||
if self.path == '/docs/owl.js' or self.path == '/docs/playground/owl.js':
|
||||
self.path = '/dist/owl.es.js'
|
||||
return SimpleHTTPRequestHandler.do_GET(self)
|
||||
|
||||
+40
-69
@@ -7,7 +7,6 @@ const chalk = require("chalk");
|
||||
const branchName = require('current-git-branch');
|
||||
|
||||
const REL_NOTES_FILE = `release-notes.md`;
|
||||
const STEPS = 8;
|
||||
const branch = "master";
|
||||
|
||||
const rl = readline.createInterface({
|
||||
@@ -29,26 +28,28 @@ async function startRelease() {
|
||||
logError(`You shall not pass! You are not on the ${branch} branch!`)
|
||||
return;
|
||||
}
|
||||
|
||||
log(`*** Owl release script ***`);
|
||||
log(`Current Version: ${package.version}`);
|
||||
|
||||
log("Check if code formatting is right...")
|
||||
const STEPS = 11;
|
||||
let step = 1;
|
||||
// ---------------------------------------------------------------------------
|
||||
log(`Step ${step++}/${STEPS}: Checking if code formatting is right...`)
|
||||
const checkFormatting = await execCommand("npm run check-formatting");
|
||||
if (checkFormatting !== 0) {
|
||||
logError("Prettier format validation failed. Aborting.");
|
||||
return;
|
||||
}
|
||||
|
||||
log(`*** Owl release script ***`);
|
||||
log(`Current Version: ${package.version}`);
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
log(`Step 1/${STEPS}: collecting info...`);
|
||||
log(`Step ${step++}/${STEPS}: collecting info...`);
|
||||
let next = await ask("Next version: ");
|
||||
if (next[0] === 'v') next = next.substring(1);
|
||||
let file = await ask(`Release notes (${REL_NOTES_FILE}): `);
|
||||
file = file || REL_NOTES_FILE;
|
||||
let content;
|
||||
if (!fs.existsSync(`./${file}`)) {
|
||||
let lastRelease = await getOutput("git log --grep='\\[REL\\]' -n 1 --pretty=%H");
|
||||
const lastRelease = await getOutput("git log --grep='\\[REL\\]' -n 1 --pretty=%H");
|
||||
const commitsSinceLastRelease = await getOutput(`git log ${lastRelease.trim()}..HEAD --pretty=%s`);
|
||||
const commitsAsMdList = commitsSinceLastRelease.trim().split("\n").map(l => " - " + l).join("\n");
|
||||
log(`${file} did not exist, created a template containing all commits since last release.`)
|
||||
@@ -59,6 +60,7 @@ async function startRelease() {
|
||||
return;
|
||||
}
|
||||
}
|
||||
let content;
|
||||
try {
|
||||
content = await readFile("./" + file);
|
||||
} catch (e) {
|
||||
@@ -68,15 +70,12 @@ async function startRelease() {
|
||||
}
|
||||
let shouldBeDraft = await ask(`Should be a draft [y/n] ? (n)`);
|
||||
let draft = ""
|
||||
if (shouldBeDraft.toLowerCase() === 'y')
|
||||
{
|
||||
if (shouldBeDraft.toLowerCase() === 'y') {
|
||||
draft = "--draft";
|
||||
}
|
||||
let shouldUploadPlayground = await ask(`Should this release be uploaded on the playground [y/n] ? (y)`);
|
||||
shouldUploadPlayground = shouldUploadPlayground.toLowerCase() !== 'n';
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
log(`Step 2/${STEPS}: running tests...`);
|
||||
log(`Step ${step++}/${STEPS}: running tests...`);
|
||||
const testsResult = await execCommand("npm run test");
|
||||
if (testsResult !== 0) {
|
||||
logError("Test suite does not pass. Aborting.");
|
||||
@@ -84,28 +83,16 @@ async function startRelease() {
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
log(`Step 3/${STEPS}: updating package.json...`);
|
||||
await writeFile("package.json", JSON.stringify({...package, version: next}, null, 2) + "\n");
|
||||
await writeFile("package-lock.json", JSON.stringify({...packageLock, version: next}, null, 2) + "\n");
|
||||
await writeFile("./src/version.ts", `// do not modify manually. This file is generated by the release script.\nexport const version = "${next}";\n`);
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
log(`Step 4/${STEPS}: creating git commit...`);
|
||||
const escapedContent = content.replace(/\"/g, '\\\"').replace(/\`/g, '\\\`');
|
||||
const gitResult = await execCommand(`git commit -am "[REL] v${next}\n\n${escapedContent}"`);
|
||||
if (gitResult !== 0) {
|
||||
logError("Git commit failed. Aborting.");
|
||||
return;
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
log(`Step 5/${STEPS}: building owl and devtools...`);
|
||||
log(`Step ${step++}/${STEPS}: building owl...`);
|
||||
await execCommand("rm -rf dist/");
|
||||
const buildResult = await execCommand("npm run build");
|
||||
if (buildResult !== 0) {
|
||||
logError("Build failed. Aborting.");
|
||||
return;
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
log(`Step ${step++}/${STEPS}: building devtools...`);
|
||||
const chromeResult = await execCommand("npm run build:devtools-chrome");
|
||||
if (chromeResult !== 0) {
|
||||
logError("Build devtools chrome failed. Aborting.");
|
||||
@@ -122,7 +109,27 @@ async function startRelease() {
|
||||
await execCommand("rm -r dist/devtools-chrome dist/devtools-firefox && rm dist/compiler.js");
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
log(`Step 6/${STEPS}: pushing on github...`);
|
||||
log(`Step ${step++}/${STEPS}: updating package.json...`);
|
||||
await writeFile("package.json", JSON.stringify({...package, version: next}, null, 2) + "\n");
|
||||
await writeFile("package-lock.json", JSON.stringify({...packageLock, version: next}, null, 2) + "\n");
|
||||
await writeFile("./src/version.ts", `// do not modify manually. This file is generated by the release script.\nexport const version = "${next}";\n`);
|
||||
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
log(`Step ${step++}/${STEPS}: updating owl on github page...`);
|
||||
await fs.copyFileSync("dist/owl.es.js", "docs/owl.js");
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
log(`Step ${step++}/${STEPS}: creating git commit...`);
|
||||
const escapedContent = content.replace(/\"/g, '\\\"').replace(/\`/g, '\\\`');
|
||||
const gitResult = await execCommand(`git commit -am "[REL] v${next}\n\n${escapedContent}"`);
|
||||
if (gitResult !== 0) {
|
||||
logError("Git commit failed. Aborting.");
|
||||
return;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
log(`Step ${step++}/${STEPS}: pushing on github...`);
|
||||
const pushResult = await execCommand("git push origin " + branch);
|
||||
if (pushResult !== 0) {
|
||||
logError("git push failed. Aborting.");
|
||||
@@ -131,55 +138,19 @@ async function startRelease() {
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
log(`Step 7/${STEPS}: Creating the release...`);
|
||||
log(`Step ${step++}/${STEPS}: Creating the release...`);
|
||||
const relaseResult = await execCommand(`gh release create v${next} dist/*.js dist/*.zip ${draft} -F ${file}`);
|
||||
if (relaseResult !== 0) {
|
||||
logError("github release failed. Aborting.");
|
||||
return;
|
||||
}
|
||||
|
||||
log(`Step 8/${STEPS}: publishing module on npm...`);
|
||||
await execCommand("npm run publish");
|
||||
log(`Step ${step++}/${STEPS}: publishing module on npm...`);
|
||||
await execCommand("npm publish");
|
||||
|
||||
log("Owl Release process completed! Thank you for your patience");
|
||||
await execCommand(`gh release view`);
|
||||
await execCommand(`gh release view -w`);
|
||||
|
||||
if (shouldUploadPlayground) {
|
||||
log(`Bonus step: publishing new release on playground...`);
|
||||
let owl_code = null;
|
||||
let status = 0
|
||||
|
||||
try {
|
||||
owl_code = await readFile("dist/owl.iife.js");
|
||||
} catch (e) {
|
||||
logSubContent(e.message);
|
||||
logError("Cannot read owl.iife.js... Aborting");
|
||||
return;
|
||||
}
|
||||
|
||||
status |= await execCommand("git checkout gh-pages");
|
||||
status |= await execCommand("git pull --rebase");
|
||||
|
||||
if (status !== 0) {
|
||||
logError("Couldn't switch to gh-pages branch")
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
fs.writeFileSync('owl.js', owl_code)
|
||||
} catch (err) {
|
||||
logError(err)
|
||||
return;
|
||||
}
|
||||
|
||||
status |= await execCommand(`git commit -am "[IMP] update owl to v${next}"`);
|
||||
status |= await execCommand(`git push origin gh-pages`);
|
||||
status |= await execCommand("git checkout -");
|
||||
if (status !== 0) {
|
||||
logError("Something went wrong for the playground update.")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
Reference in New Issue
Block a user