mirror of
https://github.com/odoo/owl.git
synced 2025-10-06 19:59:41 +07:00
[IMP] playground: update Owl to 0.9.0
This commit is contained in:
Géry Debongnie
+4
-4
@@ -6,7 +6,7 @@ async function owlSourceCode() {
|
||||
if (owlJS) {
|
||||
return owlJS;
|
||||
}
|
||||
const result = await fetch("/libs/owl.js");
|
||||
const result = await fetch("../owl.js");
|
||||
owlJS = await result.text();
|
||||
return owlJS;
|
||||
}
|
||||
@@ -196,7 +196,7 @@ class App extends owl.Component {
|
||||
// inject js
|
||||
const owlScript = doc.createElement("script");
|
||||
owlScript.type = "text/javascript";
|
||||
owlScript.src = "../libs/owl.js";
|
||||
owlScript.src = "../owl.js";
|
||||
owlScript.addEventListener("load", () => {
|
||||
const script = doc.createElement("script");
|
||||
script.type = "text/javascript";
|
||||
@@ -278,8 +278,8 @@ class App extends owl.Component {
|
||||
}
|
||||
|
||||
async downloadCode() {
|
||||
await owl.utils.loadJS("../libs/FileSaver.min.js");
|
||||
await owl.utils.loadJS("../libs/jszip.min.js");
|
||||
await owl.utils.loadJS("libs/FileSaver.min.js");
|
||||
await owl.utils.loadJS("libs/jszip.min.js");
|
||||
|
||||
const zip = new JSZip();
|
||||
|
||||
|
||||
@@ -5,8 +5,8 @@
|
||||
<title>OWL Playground</title>
|
||||
<link rel="icon" href="data:,">
|
||||
|
||||
<script src="../libs/ace.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script src="../libs/owl.js"></script>
|
||||
<script src="libs/ace.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script src="../owl.js"></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">
|
||||
|
||||
|
||||
Vendored
+3
@@ -0,0 +1,3 @@
|
||||
(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
|
||||
+21315
File diff suppressed because it is too large
Load Diff
Vendored
+15
File diff suppressed because one or more lines are too long
@@ -0,0 +1,980 @@
|
||||
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
@@ -0,0 +1,820 @@
|
||||
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;
|
||||
}
|
||||
});
|
||||
})();
|
||||
@@ -0,0 +1,116 @@
|
||||
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
+365
-296
@@ -1,17 +1,17 @@
|
||||
const CLICK_COUNTER = `class ClickCounter extends owl.Component {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
this.template = "clickcounter";
|
||||
this.state = {value: 0};
|
||||
}
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
this.template = "clickcounter";
|
||||
this.state = { value: 0 };
|
||||
}
|
||||
|
||||
increment() {
|
||||
this.state.value++;
|
||||
}
|
||||
increment() {
|
||||
this.state.value++;
|
||||
}
|
||||
}
|
||||
|
||||
const qweb = new owl.QWeb(TEMPLATES);
|
||||
const counter = new ClickCounter({qweb});
|
||||
const counter = new ClickCounter({ qweb });
|
||||
counter.mount(document.body);
|
||||
`;
|
||||
|
||||
@@ -29,50 +29,50 @@ const CLICK_COUNTER_CSS = `button {
|
||||
|
||||
const CLICK_COUNTER_ESNEXT = `// This example will not work if your browser does not support ESNext class fields
|
||||
class ClickCounter extends owl.Component {
|
||||
template = "clickcounter";
|
||||
state = {value: 0};
|
||||
template = "clickcounter";
|
||||
state = { value: 0 };
|
||||
|
||||
increment() {
|
||||
this.state.value++;
|
||||
}
|
||||
increment() {
|
||||
this.state.value++;
|
||||
}
|
||||
}
|
||||
|
||||
const qweb = new owl.QWeb(TEMPLATES);
|
||||
const counter = new ClickCounter({qweb});
|
||||
const counter = new ClickCounter({ qweb });
|
||||
counter.mount(document.body);
|
||||
`;
|
||||
|
||||
const WIDGET_COMPOSITION = `class ClickCounter extends owl.Component {
|
||||
constructor(parent, props) {
|
||||
super(parent, props);
|
||||
this.template = "clickcounter";
|
||||
this.state = {value: props.initialState || 0};
|
||||
}
|
||||
constructor(parent, props) {
|
||||
super(parent, props);
|
||||
this.template = "clickcounter";
|
||||
this.state = { value: props.initialState || 0 };
|
||||
}
|
||||
|
||||
increment() {
|
||||
this.state.value++;
|
||||
}
|
||||
increment() {
|
||||
this.state.value++;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
let nextId = 1;
|
||||
|
||||
class App extends owl.Component {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
this.template = "app";
|
||||
this.state = {counters: []}
|
||||
this.widgets = { ClickCounter };
|
||||
}
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
this.template = "app";
|
||||
this.state = { counters: [] }
|
||||
this.widgets = { ClickCounter };
|
||||
}
|
||||
|
||||
addCounter() {
|
||||
this.state.counters.push(nextId++);
|
||||
}
|
||||
addCounter() {
|
||||
this.state.counters.push(nextId++);
|
||||
}
|
||||
}
|
||||
|
||||
const qweb = new owl.QWeb(TEMPLATES);
|
||||
const app = new App({qweb});
|
||||
app.mount(document.body);`;
|
||||
const app = new App({ qweb });
|
||||
app.mount(document.body);
|
||||
`;
|
||||
|
||||
const WIDGET_COMPOSITION_XML = `<templates>
|
||||
<button t-name="clickcounter" t-on-click="increment">
|
||||
@@ -95,54 +95,106 @@ const WIDGET_COMPOSITION_CSS = `button {
|
||||
width: 220px;
|
||||
}`;
|
||||
|
||||
const LIFECYCLE_DEMO = `const { Component, QWeb } = owl;
|
||||
const ANIMATION = `// This example will not work if your browser does not support ESNext class fields
|
||||
class App extends owl.Component {
|
||||
template = "app";
|
||||
state = {flag: 0};
|
||||
|
||||
class HookWidget extends Component {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
this.template = "demo.hookwidget";
|
||||
this.state = { n: 0 };
|
||||
console.log("constructor");
|
||||
}
|
||||
async willStart() {
|
||||
console.log("willstart");
|
||||
}
|
||||
mounted() {
|
||||
console.log("mounted");
|
||||
}
|
||||
async willUpdateProps(nextProps) {
|
||||
console.log("willUpdateProps", nextProps);
|
||||
}
|
||||
willPatch() {
|
||||
console.log("willPatch");
|
||||
}
|
||||
patched() {
|
||||
console.log("patched");
|
||||
}
|
||||
willUnmount() {
|
||||
console.log("willUnmount");
|
||||
}
|
||||
increment() {
|
||||
this.state.n++;
|
||||
}
|
||||
toggle() {
|
||||
this.state.flag = !this.state.flag;
|
||||
}
|
||||
}
|
||||
|
||||
class ParentWidget extends Component {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
this.widgets = { HookWidget };
|
||||
this.template = "demo.parentwidget";
|
||||
this.state = { n: 0, flag: true };
|
||||
}
|
||||
increment() {
|
||||
this.state.n++;
|
||||
}
|
||||
toggleSubWidget() {
|
||||
this.state.flag = !this.state.flag;
|
||||
}
|
||||
const qweb = new owl.QWeb(TEMPLATES);
|
||||
const app = new App({qweb});
|
||||
app.mount(document.body);
|
||||
`;
|
||||
|
||||
const ANIMATION_XML = `<templates>
|
||||
<div t-name="app">
|
||||
<button t-on-click="toggle">
|
||||
Click Me!
|
||||
</button>
|
||||
<div>
|
||||
<div t-if="state.flag" class="square" t-transition="fade">Hello</div>
|
||||
</div>
|
||||
</div>
|
||||
</templates>
|
||||
`;
|
||||
|
||||
const ANIMATION_CSS = `button {
|
||||
width: 100px;
|
||||
height: 30px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
const qweb = new QWeb(TEMPLATES);
|
||||
.square {
|
||||
background-color: red;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
color: white;
|
||||
margin: 20px;
|
||||
font-size: 24px;
|
||||
line-height: 100px;
|
||||
text-align: center;
|
||||
line-height: 100px;
|
||||
}
|
||||
|
||||
.fade-enter-active, .fade-leave-active {
|
||||
transition: opacity .5s;
|
||||
}
|
||||
.fade-enter, .fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
`;
|
||||
|
||||
|
||||
const LIFECYCLE_DEMO = `class HookWidget extends owl.Component {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
this.template = "demo.hookwidget";
|
||||
this.state = { n: 0 };
|
||||
console.log("constructor");
|
||||
}
|
||||
async willStart() {
|
||||
console.log("willstart");
|
||||
}
|
||||
mounted() {
|
||||
console.log("mounted");
|
||||
}
|
||||
async willUpdateProps(nextProps) {
|
||||
console.log("willUpdateProps", nextProps);
|
||||
}
|
||||
willPatch() {
|
||||
console.log("willPatch");
|
||||
}
|
||||
patched() {
|
||||
console.log("patched");
|
||||
}
|
||||
willUnmount() {
|
||||
console.log("willUnmount");
|
||||
}
|
||||
increment() {
|
||||
this.state.n++;
|
||||
}
|
||||
}
|
||||
|
||||
class ParentWidget extends owl.Component {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
this.widgets = { HookWidget };
|
||||
this.template = "demo.parentwidget";
|
||||
this.state = { n: 0, flag: true };
|
||||
}
|
||||
increment() {
|
||||
this.state.n++;
|
||||
}
|
||||
toggleSubWidget() {
|
||||
this.state.flag = !this.state.flag;
|
||||
}
|
||||
}
|
||||
|
||||
const qweb = new owl.QWeb(TEMPLATES);
|
||||
const widget = new ParentWidget({ qweb });
|
||||
widget.mount(document.body);
|
||||
`;
|
||||
@@ -164,92 +216,88 @@ const BENCHMARK_APP = `//-------------------------------------------------------
|
||||
const messages = [];
|
||||
const authors = ["Aaron", "David", "Vincent"];
|
||||
const content = [
|
||||
"Lorem ipsum dolor sit amet",
|
||||
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem",
|
||||
"Excepteur sint occaecat cupidatat non proident"
|
||||
"Lorem ipsum dolor sit amet",
|
||||
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem",
|
||||
"Excepteur sint occaecat cupidatat non proident"
|
||||
];
|
||||
|
||||
function chooseRandomly(array) {
|
||||
const index = Math.floor(Math.random() * array.length);
|
||||
return array[index];
|
||||
const index = Math.floor(Math.random() * array.length);
|
||||
return array[index];
|
||||
}
|
||||
|
||||
for (let i = 1; i < 16000; i++) {
|
||||
messages.push({
|
||||
id: i,
|
||||
author: chooseRandomly(authors),
|
||||
msg: \`\${i}: \${chooseRandomly(content)}\`,
|
||||
likes: 0
|
||||
});
|
||||
messages.push({
|
||||
id: i,
|
||||
author: chooseRandomly(authors),
|
||||
msg: \`\${i}: \${chooseRandomly(content)}\`,
|
||||
likes: 0
|
||||
});
|
||||
}
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Counter Widget
|
||||
//------------------------------------------------------------------------------
|
||||
class Counter extends owl.Component {
|
||||
constructor(parent, props) {
|
||||
super(parent, props);
|
||||
this.template = "counter";
|
||||
this.state = {
|
||||
counter: props.initialState || 0
|
||||
};
|
||||
}
|
||||
constructor(parent, props) {
|
||||
super(parent, props);
|
||||
this.template = "counter";
|
||||
this.state = { counter: props.initialState || 0 };
|
||||
}
|
||||
|
||||
increment(delta) {
|
||||
this.state.counter += delta;
|
||||
}
|
||||
increment(delta) {
|
||||
this.state.counter += delta;
|
||||
}
|
||||
}
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Message Widget
|
||||
//------------------------------------------------------------------------------
|
||||
class Message extends owl.Component {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
this.template = "message";
|
||||
this.widgets = { Counter };
|
||||
}
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
this.template = "message";
|
||||
this.widgets = { Counter };
|
||||
}
|
||||
|
||||
removeMessage() {
|
||||
this.trigger("remove_message", {
|
||||
id: this.props.id
|
||||
});
|
||||
}
|
||||
removeMessage() {
|
||||
this.trigger("remove_message", {
|
||||
id: this.props.id
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Root Widget
|
||||
//------------------------------------------------------------------------------
|
||||
class App extends owl.Component {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
this.template = "root";
|
||||
this.widgets = { Message };
|
||||
this.state = {
|
||||
messages: messages.slice(0, 10)
|
||||
};
|
||||
}
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
this.template = "root";
|
||||
this.widgets = { Message };
|
||||
this.state = { messages: messages.slice(0, 10) };
|
||||
}
|
||||
|
||||
setMessageCount(n) {
|
||||
this.state.messages = messages.slice(0,n);
|
||||
}
|
||||
setMessageCount(n) {
|
||||
this.state.messages = messages.slice(0, n);
|
||||
}
|
||||
|
||||
removeMessage(data) {
|
||||
const index = messages.findIndex(m => m.id === data.id);
|
||||
this.state.messages.splice(index, 1);
|
||||
}
|
||||
removeMessage(data) {
|
||||
const index = messages.findIndex(m => m.id === data.id);
|
||||
this.state.messages.splice(index, 1);
|
||||
}
|
||||
|
||||
increment(delta) {
|
||||
const n = this.state.messages.length + delta;
|
||||
this.setMessageCount(n);
|
||||
}
|
||||
increment(delta) {
|
||||
const n = this.state.messages.length + delta;
|
||||
this.setMessageCount(n);
|
||||
}
|
||||
}
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Application initialization
|
||||
//------------------------------------------------------------------------------
|
||||
const env = {
|
||||
qweb: new owl.QWeb(TEMPLATES)
|
||||
qweb: new owl.QWeb(TEMPLATES)
|
||||
};
|
||||
|
||||
const app = new App(env);
|
||||
@@ -349,177 +397,193 @@ const LOCALSTORAGE_KEY = "todos-odoo";
|
||||
// Store Definition
|
||||
//------------------------------------------------------------------------------
|
||||
const actions = {
|
||||
addTodo({ commit }, title) {
|
||||
commit("addTodo", title);
|
||||
},
|
||||
removeTodo({ commit }, id) {
|
||||
commit("removeTodo", id);
|
||||
},
|
||||
toggleTodo({ state, commit }, id) {
|
||||
const todo = state.todos.find(t => t.id === id);
|
||||
commit("editTodo", { id, completed: !todo.completed });
|
||||
},
|
||||
clearCompleted({ state, commit }) {
|
||||
state.todos
|
||||
.filter(todo => todo.completed)
|
||||
.forEach(todo => {
|
||||
commit("removeTodo", todo.id);
|
||||
});
|
||||
},
|
||||
toggleAll({ state, commit }, completed) {
|
||||
state.todos.forEach(todo => {
|
||||
commit("editTodo", { id: todo.id, completed });
|
||||
});
|
||||
},
|
||||
editTodo({ commit }, { id, title }) {
|
||||
commit("editTodo", { id, title });
|
||||
}
|
||||
addTodo({ commit }, title) {
|
||||
commit("addTodo", title);
|
||||
},
|
||||
removeTodo({ commit }, id) {
|
||||
commit("removeTodo", id);
|
||||
},
|
||||
toggleTodo({ state, commit }, id) {
|
||||
const todo = state.todos.find(t => t.id === id);
|
||||
commit("editTodo", { id, completed: !todo.completed });
|
||||
},
|
||||
clearCompleted({ state, commit }) {
|
||||
state.todos
|
||||
.filter(todo => todo.completed)
|
||||
.forEach(todo => {
|
||||
commit("removeTodo", todo.id);
|
||||
});
|
||||
},
|
||||
toggleAll({ state, commit }, completed) {
|
||||
state.todos.forEach(todo => {
|
||||
commit("editTodo", {
|
||||
id: todo.id,
|
||||
completed
|
||||
});
|
||||
});
|
||||
},
|
||||
editTodo({ commit }, { id, title }) {
|
||||
commit("editTodo", { id, title });
|
||||
}
|
||||
};
|
||||
|
||||
const mutations = {
|
||||
addTodo({ state }, title) {
|
||||
const id = state.nextId++;
|
||||
const todo = { id, title, completed: false };
|
||||
state.todos.push(todo);
|
||||
},
|
||||
removeTodo({ state }, id) {
|
||||
const index = state.todos.findIndex(t => t.id === id);
|
||||
state.todos.splice(index, 1);
|
||||
},
|
||||
editTodo({ state }, { id, title, completed }) {
|
||||
const todo = state.todos.find(t => t.id === id);
|
||||
if (title !== undefined) {
|
||||
todo.title = title;
|
||||
addTodo({ state }, title) {
|
||||
const id = state.nextId++;
|
||||
const todo = {
|
||||
id,
|
||||
title,
|
||||
completed: false
|
||||
};
|
||||
state.todos.push(todo);
|
||||
},
|
||||
removeTodo({ state }, id) {
|
||||
const index = state.todos.findIndex(t => t.id === id);
|
||||
state.todos.splice(index, 1);
|
||||
},
|
||||
editTodo({ state }, { id, title, completed }) {
|
||||
const todo = state.todos.find(t => t.id === id);
|
||||
if (title !== undefined) {
|
||||
todo.title = title;
|
||||
}
|
||||
if (completed !== undefined) {
|
||||
todo.completed = completed;
|
||||
}
|
||||
}
|
||||
if (completed !== undefined) {
|
||||
todo.completed = completed;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function makeStore() {
|
||||
const todos = JSON.parse(
|
||||
window.localStorage.getItem(LOCALSTORAGE_KEY) || "[]"
|
||||
);
|
||||
const nextId = Math.max(0, ...todos.map(t => t.id || 0)) + 1;
|
||||
const state = { todos, nextId };
|
||||
const store = new owl.Store({ state, actions, mutations });
|
||||
store.on("update", null, () => {
|
||||
const state = JSON.stringify(store.state.todos);
|
||||
window.localStorage.setItem(LOCALSTORAGE_KEY, state);
|
||||
});
|
||||
return store;
|
||||
const todos = JSON.parse(
|
||||
window.localStorage.getItem(LOCALSTORAGE_KEY) || "[]"
|
||||
);
|
||||
const nextId = Math.max(0, ...todos.map(t => t.id || 0)) + 1;
|
||||
const state = {
|
||||
todos,
|
||||
nextId
|
||||
};
|
||||
const store = new owl.Store({
|
||||
state,
|
||||
actions,
|
||||
mutations
|
||||
});
|
||||
store.on("update", null, () => {
|
||||
const state = JSON.stringify(store.state.todos);
|
||||
window.localStorage.setItem(LOCALSTORAGE_KEY, state);
|
||||
});
|
||||
return store;
|
||||
}
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// TodoItem
|
||||
//------------------------------------------------------------------------------
|
||||
class TodoItem extends owl.Component {
|
||||
template = "todoitem";
|
||||
state = { isEditing: false };
|
||||
template = "todoitem";
|
||||
state = { isEditing: false };
|
||||
|
||||
removeTodo() {
|
||||
this.env.store.dispatch("removeTodo", this.props.id);
|
||||
}
|
||||
|
||||
toggleTodo() {
|
||||
this.env.store.dispatch("toggleTodo", this.props.id);
|
||||
}
|
||||
|
||||
async editTodo() {
|
||||
this.state.isEditing = true;
|
||||
setTimeout(() => {
|
||||
this.refs.input.value = "";
|
||||
this.refs.input.focus();
|
||||
this.refs.input.value = this.props.title;
|
||||
});
|
||||
}
|
||||
|
||||
handleKeyup(ev) {
|
||||
if (ev.keyCode === ENTER_KEY) {
|
||||
this.updateTitle(ev.target.value);
|
||||
removeTodo() {
|
||||
this.env.store.dispatch("removeTodo", this.props.id);
|
||||
}
|
||||
if (ev.keyCode === ESC_KEY) {
|
||||
ev.target.value = this.props.title;
|
||||
this.state.isEditing = false;
|
||||
}
|
||||
}
|
||||
|
||||
handleBlur(ev) {
|
||||
this.updateTitle(ev.target.value);
|
||||
}
|
||||
|
||||
updateTitle(title) {
|
||||
const value = title.trim();
|
||||
if (!value) {
|
||||
this.removeTodo(this.props.id);
|
||||
} else {
|
||||
this.env.store.dispatch("editTodo", {
|
||||
id: this.props.id,
|
||||
title: value
|
||||
});
|
||||
this.state.isEditing = false;
|
||||
toggleTodo() {
|
||||
this.env.store.dispatch("toggleTodo", this.props.id);
|
||||
}
|
||||
|
||||
async editTodo() {
|
||||
this.state.isEditing = true;
|
||||
setTimeout(() => {
|
||||
this.refs.input.value = "";
|
||||
this.refs.input.focus();
|
||||
this.refs.input.value = this.props.title;
|
||||
});
|
||||
}
|
||||
|
||||
handleKeyup(ev) {
|
||||
if (ev.keyCode === ENTER_KEY) {
|
||||
this.updateTitle(ev.target.value);
|
||||
}
|
||||
if (ev.keyCode === ESC_KEY) {
|
||||
ev.target.value = this.props.title;
|
||||
this.state.isEditing = false;
|
||||
}
|
||||
}
|
||||
|
||||
handleBlur(ev) {
|
||||
this.updateTitle(ev.target.value);
|
||||
}
|
||||
|
||||
updateTitle(title) {
|
||||
const value = title.trim();
|
||||
if (!value) {
|
||||
this.removeTodo(this.props.id);
|
||||
} else {
|
||||
this.env.store.dispatch("editTodo", {
|
||||
id: this.props.id,
|
||||
title: value
|
||||
});
|
||||
this.state.isEditing = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// TodoApp
|
||||
//------------------------------------------------------------------------------
|
||||
function mapStateToProps(state) {
|
||||
return { todos: state.todos };
|
||||
return {
|
||||
todos: state.todos
|
||||
};
|
||||
}
|
||||
|
||||
class TodoApp extends owl.Component {
|
||||
template = "todoapp";
|
||||
widgets = { TodoItem };
|
||||
state = { filter: "all" };
|
||||
template = "todoapp";
|
||||
widgets = { TodoItem };
|
||||
state = { filter: "all" };
|
||||
|
||||
get visibleTodos() {
|
||||
let todos = this.props.todos;
|
||||
if (this.state.filter === "active") {
|
||||
todos = todos.filter(t => !t.completed);
|
||||
get visibleTodos() {
|
||||
let todos = this.props.todos;
|
||||
if (this.state.filter === "active") {
|
||||
todos = todos.filter(t => !t.completed);
|
||||
}
|
||||
if (this.state.filter === "completed") {
|
||||
todos = todos.filter(t => t.completed);
|
||||
}
|
||||
return todos;
|
||||
}
|
||||
if (this.state.filter === "completed") {
|
||||
todos = todos.filter(t => t.completed);
|
||||
|
||||
get allChecked() {
|
||||
return this.props.todos.every(todo => todo.completed);
|
||||
}
|
||||
return todos;
|
||||
}
|
||||
|
||||
get allChecked() {
|
||||
return this.props.todos.every(todo => todo.completed);
|
||||
}
|
||||
|
||||
get remaining() {
|
||||
return this.props.todos.filter(todo => !todo.completed).length;
|
||||
}
|
||||
|
||||
get remainingText() {
|
||||
const items = this.remaining < 2 ? "item" : "items";
|
||||
return \` \${items} left\`;
|
||||
}
|
||||
|
||||
addTodo(ev) {
|
||||
if (ev.keyCode === ENTER_KEY) {
|
||||
const title = ev.target.value;
|
||||
if (title.trim()) {
|
||||
this.env.store.dispatch("addTodo", title);
|
||||
}
|
||||
ev.target.value = "";
|
||||
get remaining() {
|
||||
return this.props.todos.filter(todo => !todo.completed).length;
|
||||
}
|
||||
}
|
||||
|
||||
clearCompleted() {
|
||||
this.env.store.dispatch("clearCompleted");
|
||||
}
|
||||
get remainingText() {
|
||||
const items = this.remaining < 2 ? "item" : "items";
|
||||
return \` \${items} left\`;
|
||||
}
|
||||
|
||||
toggleAll() {
|
||||
this.env.store.dispatch("toggleAll", !this.allChecked);
|
||||
}
|
||||
addTodo(ev) {
|
||||
if (ev.keyCode === ENTER_KEY) {
|
||||
const title = ev.target.value;
|
||||
if (title.trim()) {
|
||||
this.env.store.dispatch("addTodo", title);
|
||||
}
|
||||
ev.target.value = "";
|
||||
}
|
||||
}
|
||||
|
||||
setFilter(filter) {
|
||||
this.state.filter = filter;
|
||||
}
|
||||
clearCompleted() {
|
||||
this.env.store.dispatch("clearCompleted");
|
||||
}
|
||||
|
||||
toggleAll() {
|
||||
this.env.store.dispatch("toggleAll", !this.allChecked);
|
||||
}
|
||||
|
||||
setFilter(filter) {
|
||||
this.state.filter = filter;
|
||||
}
|
||||
}
|
||||
|
||||
const ConnectedTodoApp = owl.connect(mapStateToProps)(TodoApp);
|
||||
@@ -530,8 +594,8 @@ const ConnectedTodoApp = owl.connect(mapStateToProps)(TodoApp);
|
||||
const store = makeStore();
|
||||
const qweb = new owl.QWeb(TEMPLATES);
|
||||
const env = {
|
||||
qweb,
|
||||
store
|
||||
qweb,
|
||||
store
|
||||
};
|
||||
const app = new ConnectedTodoApp(env);
|
||||
app.mount(document.body);
|
||||
@@ -970,43 +1034,43 @@ html .clear-completed:active {
|
||||
}
|
||||
`;
|
||||
|
||||
const RESPONSIVE = `const { Component, QWeb, utils } = owl;
|
||||
|
||||
class SubWidget extends Component {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
this.template = "subwidget";
|
||||
}
|
||||
const RESPONSIVE = `class SubWidget extends owl.Component {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
this.template = "subwidget";
|
||||
}
|
||||
}
|
||||
|
||||
class ResponsiveWidget extends Component {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
this.template = "responsivewidget";
|
||||
this.widgets = { SubWidget };
|
||||
}
|
||||
class ResponsiveWidget extends owl.Component {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
this.template = "responsivewidget";
|
||||
this.widgets = { SubWidget };
|
||||
}
|
||||
}
|
||||
|
||||
function isMobile() {
|
||||
return window.innerWidth <= 768;
|
||||
return window.innerWidth <= 768;
|
||||
}
|
||||
|
||||
const env = {
|
||||
qweb: new QWeb(TEMPLATES),
|
||||
isMobile: isMobile()
|
||||
qweb: new owl.QWeb(TEMPLATES),
|
||||
isMobile: isMobile()
|
||||
};
|
||||
|
||||
const widget = new ResponsiveWidget(env);
|
||||
widget.mount(document.body);
|
||||
|
||||
window.addEventListener(
|
||||
"resize",
|
||||
utils.debounce(function() {
|
||||
const _isMobile = isMobile();
|
||||
if (_isMobile !== env.isMobile) {
|
||||
widget.updateEnv({ isMobile: _isMobile });
|
||||
}
|
||||
}, 20)
|
||||
"resize",
|
||||
owl.utils.debounce(function() {
|
||||
const _isMobile = isMobile();
|
||||
if (_isMobile !== env.isMobile) {
|
||||
widget.updateEnv({
|
||||
isMobile: _isMobile
|
||||
});
|
||||
}
|
||||
}, 20)
|
||||
);
|
||||
`;
|
||||
|
||||
@@ -1039,13 +1103,12 @@ const RESPONSIVE_CSS = `.info {
|
||||
margin: 30px;
|
||||
}`;
|
||||
|
||||
const EMPTY = `const {Component, QWeb} = owl;
|
||||
class Widget extends Component {
|
||||
const EMPTY = `class App extends owl.Component {
|
||||
}
|
||||
|
||||
const qweb = new QWeb(TEMPLATES);
|
||||
const widget = new Widget({qweb});
|
||||
widget.mount(document.body);
|
||||
const qweb = new owl.QWeb(TEMPLATES);
|
||||
const app = new App({qweb});
|
||||
app.mount(document.body);
|
||||
`;
|
||||
|
||||
export const SAMPLES = [
|
||||
@@ -1067,6 +1130,12 @@ export const SAMPLES = [
|
||||
xml: WIDGET_COMPOSITION_XML,
|
||||
css: WIDGET_COMPOSITION_CSS
|
||||
},
|
||||
{
|
||||
description: "Animations",
|
||||
code: ANIMATION,
|
||||
xml: ANIMATION_XML,
|
||||
css: ANIMATION_CSS,
|
||||
},
|
||||
{
|
||||
description: "Lifecycle demo",
|
||||
code: LIFECYCLE_DEMO,
|
||||
|
||||
Reference in New Issue
Block a user