|~|\/)?\s*[\w-]*([a-z0-9-]|\*|\/\*)(\(|,)?)/),t.context.line.firstWord=ne?ne[0].replace(/^\s*/,""):"",t.context.line.indent=e.indentation(),D=e.peek(),e.match("//"))return e.skipToEnd(),["comment","comment"];if(e.match("/*"))return t.tokenize=v,v(e,t);if('"'==D||"'"==D)return e.next(),t.tokenize=y(D),t.tokenize(e,t);if("@"==D)return e.next(),e.eatWhile(/[\w\\-]/),["def",e.current()];if("#"==D){if(e.next(),e.match(/^[0-9a-f]{6}|[0-9a-f]{3}/i))return["atom","atom"];if(e.match(/^[a-z][\w-]*/i))return["builtin","hash"]}return e.match(te)?["meta","vendor-prefixes"]:e.match(/^-?[0-9]?\.?[0-9]/)?(e.eatWhile(/[a-z%]/i),["number","unit"]):"!"==D?(e.next(),[e.match(/^(important|optional)/i)?"keyword":"operator","important"]):"."==D&&e.match(/^\.[a-z][\w-]*/i)?["qualifier","qualifier"]:e.match(_)?("("==e.peek()&&(t.tokenize=b),["property","word"]):e.match(/^[a-z][\w-]*\(/i)?(e.backUp(1),["keyword","mixin"]):e.match(/^(\+|-)[a-z][\w-]*\(/i)?(e.backUp(1),["keyword","block-mixin"]):e.string.match(/^\s*&/)&&e.match(/^[-_]+[a-z][\w-]*/)?["qualifier","qualifier"]:e.match(/^(\/|&)(-|_|:|\.|#|[a-z])/)?(e.backUp(1),["variable-3","reference"]):e.match(/^&{1}\s*$/)?["variable-3","reference"]:e.match(J)?["operator","operator"]:e.match(/^\$?[-_]*[a-z0-9]+[\w-]*/i)?e.match(/^(\.|\[)[\w-\'\"\]]+/i,!1)&&!M(e.current())?(e.match(/\./),["variable-2","variable-name"]):["variable-2","word"]:e.match(Q)?["operator",e.current()]:/[:;,{}\[\]\(\)]/.test(D)?(e.next(),[null,D]):(e.next(),[null,null])}function v(e,t){for(var r,n=!1;null!=(r=e.next());){if(n&&"/"==r){t.tokenize=null;break}n="*"==r}return["comment","comment"]}function y(e){return function(t,r){for(var n,i=!1;null!=(n=t.next());){if(n==e&&!i){")"==e&&t.backUp(1);break}i=!i&&"\\"==n}return(n==e||!i&&")"!=e)&&(r.tokenize=null),["string","string"]}}function b(e,t){return e.next(),e.match(/\s*[\"\')]/,!1)?t.tokenize=null:t.tokenize=y(")"),[null,"("]}function w(e,t,r,n){this.type=e,this.indent=t,this.prev=r,this.line=n||{firstWord:"",indent:0}}function x(e,t,r,n){return n=n>=0?n:B,e.context=new w(r,t.indentation()+n,e.context),r}function k(e,t){var r=e.context.indent-B;return t=t||!1,e.context=e.context.prev,t&&(e.context.indent=r),e.context.type}function C(e,t,r){return ie[r.context.type](e,t,r)}function S(e,t,r,n){for(var i=n||1;i>0;i--)r.context=r.context.prev;return C(e,t,r)}function M(e){return e.toLowerCase()in R}function L(e){return e=e.toLowerCase(),e in V||e in Z}function T(e){return e.toLowerCase()in ee}function z(e){return e.toLowerCase().match(te)}function A(e){var t=e.toLowerCase(),r="variable-2";return M(e)?r="tag":T(e)?r="block-keyword":L(e)?r="property":t in U||t in re?r="atom":"return"==t||t in K?r="keyword":e.match(/^[A-Z]/)&&(r="string"),r}function O(e,t){return P(t)&&("{"==e||"]"==e||"hash"==e||"qualifier"==e)||"block-mixin"==e}function N(e,t){return"{"==e&&t.match(/^\s*\$?[\w-]+/i,!1)}function W(e,t){return":"==e&&t.match(/^[a-z-]+/,!1)}function E(e){return e.sol()||e.string.match(new RegExp("^\\s*"+n(e.current())))}function P(e){return e.eol()||e.match(/^\s*$/,!1)}function j(e){var t=/^\s*[-_]*[a-z0-9]+[\w-]*/i,r="string"==typeof e?e.match(t):e.string.match(t);return r?r[0].replace(/^\s*/,""):""}var D,I,H,F,B=e.indentUnit,R=r(i),$=/^(a|b|i|s|col|em)$/i,V=r(s),q=r(c),U=r(f),K=r(d),G=r(o),_=t(o),X=r(l),Y=r(a),Z=r(u),Q=/^\s*([.]{2,3}|&&|\|\||\*\*|[?!=:]?=|[-+*\/%<>]=?|\?:|\~)/,J=t(p),ee=r(h),te=new RegExp(/^\-(moz|ms|o|webkit)-/i),re=r(m),ne="",ie={};return ie.block=function(e,t,r){if("comment"==e&&E(t)||","==e&&P(t)||"mixin"==e)return x(r,t,"block",0);if(N(e,t))return x(r,t,"interpolation");if(P(t)&&"]"==e&&!/^\s*(\.|#|:|\[|\*|&)/.test(t.string)&&!M(j(t)))return x(r,t,"block",0);if(O(e,t,r))return x(r,t,"block");if("}"==e&&P(t))return x(r,t,"block",0);if("variable-name"==e)return t.string.match(/^\s?\$[\w-\.\[\]\'\"]+$/)||T(j(t))?x(r,t,"variableName"):x(r,t,"variableName",0);if("="==e)return P(t)||T(j(t))?x(r,t,"block"):x(r,t,"block",0);if("*"==e&&(P(t)||t.match(/\s*(,|\.|#|\[|:|{)/,!1)))return F="tag",x(r,t,"block");if(W(e,t))return x(r,t,"pseudo");if(/@(font-face|media|supports|(-moz-)?document)/.test(e))return x(r,t,P(t)?"block":"atBlock");if(/@(-(moz|ms|o|webkit)-)?keyframes$/.test(e))return x(r,t,"keyframes");if(/@extends?/.test(e))return x(r,t,"extend",0);if(e&&"@"==e.charAt(0))return t.indentation()>0&&L(t.current().slice(1))?(F="variable-2","block"):/(@import|@require|@charset)/.test(e)?x(r,t,"block",0):x(r,t,"block");if("reference"==e&&P(t))return x(r,t,"block");if("("==e)return x(r,t,"parens");if("vendor-prefixes"==e)return x(r,t,"vendorPrefixes");if("word"==e){var n=t.current();if(F=A(n),"property"==F)return E(t)?x(r,t,"block",0):(F="atom","block");if("tag"==F){if(/embed|menu|pre|progress|sub|table/.test(n)&&L(j(t)))return F="atom","block";if(t.string.match(new RegExp("\\[\\s*"+n+"|"+n+"\\s*\\]")))return F="atom","block";if($.test(n)&&(E(t)&&t.string.match(/=/)||!E(t)&&!t.string.match(/^(\s*\.|#|\&|\[|\/|>|\*)/)&&!M(j(t))))return F="variable-2",T(j(t))?"block":x(r,t,"block",0);if(P(t))return x(r,t,"block")}if("block-keyword"==F)return F="keyword",t.current(/(if|unless)/)&&!E(t)?"block":x(r,t,"block");if("return"==n)return x(r,t,"block",0);if("variable-2"==F&&t.string.match(/^\s?\$[\w-\.\[\]\'\"]+$/))return x(r,t,"block")}return r.context.type},ie.parens=function(e,t,r){if("("==e)return x(r,t,"parens");if(")"==e)return"parens"==r.context.prev.type?k(r):t.string.match(/^[a-z][\w-]*\(/i)&&P(t)||T(j(t))||/(\.|#|:|\[|\*|&|>|~|\+|\/)/.test(j(t))||!t.string.match(/^-?[a-z][\w-\.\[\]\'\"]*\s*=/)&&M(j(t))?x(r,t,"block"):t.string.match(/^[\$-]?[a-z][\w-\.\[\]\'\"]*\s*=/)||t.string.match(/^\s*(\(|\)|[0-9])/)||t.string.match(/^\s+[a-z][\w-]*\(/i)||t.string.match(/^\s+[\$-]?[a-z]/i)?x(r,t,"block",0):P(t)?x(r,t,"block"):x(r,t,"block",0);if(e&&"@"==e.charAt(0)&&L(t.current().slice(1))&&(F="variable-2"),"word"==e){var n=t.current();F=A(n),"tag"==F&&$.test(n)&&(F="variable-2"),"property"!=F&&"to"!=n||(F="atom")}return"variable-name"==e?x(r,t,"variableName"):W(e,t)?x(r,t,"pseudo"):r.context.type},ie.vendorPrefixes=function(e,t,r){return"word"==e?(F="property",x(r,t,"block",0)):k(r)},ie.pseudo=function(e,t,r){return L(j(t.string))?S(e,t,r):(t.match(/^[a-z-]+/),F="variable-3",P(t)?x(r,t,"block"):k(r))},ie.atBlock=function(e,t,r){if("("==e)return x(r,t,"atBlock_parens");if(O(e,t,r))return x(r,t,"block");if(N(e,t))return x(r,t,"interpolation");if("word"==e){var n=t.current().toLowerCase();if(F=/^(only|not|and|or)$/.test(n)?"keyword":G.hasOwnProperty(n)?"tag":Y.hasOwnProperty(n)?"attribute":X.hasOwnProperty(n)?"property":q.hasOwnProperty(n)?"string-2":A(t.current()),"tag"==F&&P(t))return x(r,t,"block")}return"operator"==e&&/^(not|and|or)$/.test(t.current())&&(F="keyword"),r.context.type},ie.atBlock_parens=function(e,t,r){if("{"==e||"}"==e)return r.context.type;if(")"==e)return P(t)?x(r,t,"block"):x(r,t,"atBlock");if("word"==e){var n=t.current().toLowerCase();return F=A(n),/^(max|min)/.test(n)&&(F="property"),"tag"==F&&(F=$.test(n)?"variable-2":"atom"),r.context.type}return ie.atBlock(e,t,r)},ie.keyframes=function(e,t,r){return"0"==t.indentation()&&("}"==e&&E(t)||"]"==e||"hash"==e||"qualifier"==e||M(t.current()))?S(e,t,r):"{"==e?x(r,t,"keyframes"):"}"==e?E(t)?k(r,!0):x(r,t,"keyframes"):"unit"==e&&/^[0-9]+\%$/.test(t.current())?x(r,t,"keyframes"):"word"==e&&(F=A(t.current()),"block-keyword"==F)?(F="keyword",x(r,t,"keyframes")):/@(font-face|media|supports|(-moz-)?document)/.test(e)?x(r,t,P(t)?"block":"atBlock"):"mixin"==e?x(r,t,"block",0):r.context.type},ie.interpolation=function(e,t,r){return"{"==e&&k(r)&&x(r,t,"block"),"}"==e?t.string.match(/^\s*(\.|#|:|\[|\*|&|>|~|\+|\/)/i)||t.string.match(/^\s*[a-z]/i)&&M(j(t))?x(r,t,"block"):!t.string.match(/^(\{|\s*\&)/)||t.match(/\s*[\w-]/,!1)?x(r,t,"block",0):x(r,t,"block"):"variable-name"==e?x(r,t,"variableName",0):("word"==e&&(F=A(t.current()),"tag"==F&&(F="atom")),r.context.type)},ie.extend=function(e,t,r){return"["==e||"="==e?"extend":"]"==e?k(r):"word"==e?(F=A(t.current()),"extend"):k(r)},ie.variableName=function(e,t,r){return"string"==e||"["==e||"]"==e||t.current().match(/^(\.|\$)/)?(t.current().match(/^\.[\w-]+/i)&&(F="variable-2"),"variableName"):S(e,t,r)},{startState:function(e){return{tokenize:null,state:"block",context:new w("block",e||0,null)}},token:function(e,t){return!t.tokenize&&e.eatSpace()?null:(I=(t.tokenize||g)(e,t),I&&"object"==typeof I&&(H=I[1],I=I[0]),F=I,t.state=ie[t.state](H,e,t),F)},indent:function(e,t,r){var n=e.context,i=t&&t.charAt(0),o=n.indent,a=j(t),l=r.length-r.replace(/^\s*/,"").length,s=e.context.prev?e.context.prev.line.firstWord:"",c=e.context.prev?e.context.prev.line.indent:l;return n.prev&&("}"==i&&("block"==n.type||"atBlock"==n.type||"keyframes"==n.type)||")"==i&&("parens"==n.type||"atBlock_parens"==n.type)||"{"==i&&"at"==n.type)?(o=n.indent-B,n=n.prev):/(\})/.test(i)||(/@|\$|\d/.test(i)||/^\{/.test(t)||/^\s*\/(\/|\*)/.test(t)||/^\s*\/\*/.test(s)||/^\s*[\w-\.\[\]\'\"]+\s*(\?|:|\+)?=/i.test(t)||/^(\+|-)?[a-z][\w-]*\(/i.test(t)||/^return/.test(t)||T(a)?o=l:/(\.|#|:|\[|\*|&|>|~|\+|\/)/.test(i)||M(a)?o=/\,\s*$/.test(s)?c:/^\s+/.test(r)&&(/(\.|#|:|\[|\*|&|>|~|\+|\/)/.test(s)||M(s))?l<=c?c:c+B:l:/,\s*$/.test(r)||!z(a)&&!L(a)||(o=T(s)?l<=c?c:c+B:/^\{/.test(s)?l<=c?l:c+B:z(s)||L(s)?l>=c?c:l:/^(\.|#|:|\[|\*|&|@|\+|\-|>|~|\/)/.test(s)||/=\s*$/.test(s)||M(s)||/^\$[\w-\.\[\]\'\"]/.test(s)?c+B:l)),o},electricChars:"}",lineComment:"//",fold:"indent"}});var i=["a","abbr","address","area","article","aside","audio","b","base","bdi","bdo","bgsound","blockquote","body","br","button","canvas","caption","cite","code","col","colgroup","data","datalist","dd","del","details","dfn","div","dl","dt","em","embed","fieldset","figcaption","figure","footer","form","h1","h2","h3","h4","h5","h6","head","header","hgroup","hr","html","i","iframe","img","input","ins","kbd","keygen","label","legend","li","link","main","map","mark","marquee","menu","menuitem","meta","meter","nav","nobr","noframes","noscript","object","ol","optgroup","option","output","p","param","pre","progress","q","rp","rt","ruby","s","samp","script","section","select","small","source","span","strong","style","sub","summary","sup","table","tbody","td","textarea","tfoot","th","thead","time","tr","track","u","ul","var","video"],o=["domain","regexp","url","url-prefix"],a=["all","aural","braille","handheld","print","projection","screen","tty","tv","embossed"],l=["width","min-width","max-width","height","min-height","max-height","device-width","min-device-width","max-device-width","device-height","min-device-height","max-device-height","aspect-ratio","min-aspect-ratio","max-aspect-ratio","device-aspect-ratio","min-device-aspect-ratio","max-device-aspect-ratio","color","min-color","max-color","color-index","min-color-index","max-color-index","monochrome","min-monochrome","max-monochrome","resolution","min-resolution","max-resolution","scan","grid"],s=["align-content","align-items","align-self","alignment-adjust","alignment-baseline","anchor-point","animation","animation-delay","animation-direction","animation-duration","animation-fill-mode","animation-iteration-count","animation-name","animation-play-state","animation-timing-function","appearance","azimuth","backface-visibility","background","background-attachment","background-clip","background-color","background-image","background-origin","background-position","background-repeat","background-size","baseline-shift","binding","bleed","bookmark-label","bookmark-level","bookmark-state","bookmark-target","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-decoration-break","box-shadow","box-sizing","break-after","break-before","break-inside","caption-side","clear","clip","color","color-profile","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","crop","cue","cue-after","cue-before","cursor","direction","display","dominant-baseline","drop-initial-after-adjust","drop-initial-after-align","drop-initial-before-adjust","drop-initial-before-align","drop-initial-size","drop-initial-value","elevation","empty-cells","fit","fit-position","flex","flex-basis","flex-direction","flex-flow","flex-grow","flex-shrink","flex-wrap","float","float-offset","flow-from","flow-into","font","font-feature-settings","font-family","font-kerning","font-language-override","font-size","font-size-adjust","font-stretch","font-style","font-synthesis","font-variant","font-variant-alternates","font-variant-caps","font-variant-east-asian","font-variant-ligatures","font-variant-numeric","font-variant-position","font-weight","grid","grid-area","grid-auto-columns","grid-auto-flow","grid-auto-position","grid-auto-rows","grid-column","grid-column-end","grid-column-start","grid-row","grid-row-end","grid-row-start","grid-template","grid-template-areas","grid-template-columns","grid-template-rows","hanging-punctuation","height","hyphens","icon","image-orientation","image-rendering","image-resolution","inline-box-align","justify-content","left","letter-spacing","line-break","line-height","line-stacking","line-stacking-ruby","line-stacking-shift","line-stacking-strategy","list-style","list-style-image","list-style-position","list-style-type","margin","margin-bottom","margin-left","margin-right","margin-top","marker-offset","marks","marquee-direction","marquee-loop","marquee-play-count","marquee-speed","marquee-style","max-height","max-width","min-height","min-width","move-to","nav-down","nav-index","nav-left","nav-right","nav-up","object-fit","object-position","opacity","order","orphans","outline","outline-color","outline-offset","outline-style","outline-width","overflow","overflow-style","overflow-wrap","overflow-x","overflow-y","padding","padding-bottom","padding-left","padding-right","padding-top","page","page-break-after","page-break-before","page-break-inside","page-policy","pause","pause-after","pause-before","perspective","perspective-origin","pitch","pitch-range","play-during","position","presentation-level","punctuation-trim","quotes","region-break-after","region-break-before","region-break-inside","region-fragment","rendering-intent","resize","rest","rest-after","rest-before","richness","right","rotation","rotation-point","ruby-align","ruby-overhang","ruby-position","ruby-span","shape-image-threshold","shape-inside","shape-margin","shape-outside","size","speak","speak-as","speak-header","speak-numeral","speak-punctuation","speech-rate","stress","string-set","tab-size","table-layout","target","target-name","target-new","target-position","text-align","text-align-last","text-decoration","text-decoration-color","text-decoration-line","text-decoration-skip","text-decoration-style","text-emphasis","text-emphasis-color","text-emphasis-position","text-emphasis-style","text-height","text-indent","text-justify","text-outline","text-overflow","text-shadow","text-size-adjust","text-space-collapse","text-transform","text-underline-position","text-wrap","top","transform","transform-origin","transform-style","transition","transition-delay","transition-duration","transition-property","transition-timing-function","unicode-bidi","vertical-align","visibility","voice-balance","voice-duration","voice-family","voice-pitch","voice-range","voice-rate","voice-stress","voice-volume","volume","white-space","widows","width","will-change","word-break","word-spacing","word-wrap","z-index","clip-path","clip-rule","mask","enable-background","filter","flood-color","flood-opacity","lighting-color","stop-color","stop-opacity","pointer-events","color-interpolation","color-interpolation-filters","color-rendering","fill","fill-opacity","fill-rule","image-rendering","marker","marker-end","marker-mid","marker-start","shape-rendering","stroke","stroke-dasharray","stroke-dashoffset","stroke-linecap","stroke-linejoin","stroke-miterlimit","stroke-opacity","stroke-width","text-rendering","baseline-shift","dominant-baseline","glyph-orientation-horizontal","glyph-orientation-vertical","text-anchor","writing-mode","font-smoothing","osx-font-smoothing"],c=["scrollbar-arrow-color","scrollbar-base-color","scrollbar-dark-shadow-color","scrollbar-face-color","scrollbar-highlight-color","scrollbar-shadow-color","scrollbar-3d-light-color","scrollbar-track-color","shape-inside","searchfield-cancel-button","searchfield-decoration","searchfield-results-button","searchfield-results-decoration","zoom"],u=["font-family","src","unicode-range","font-variant","font-feature-settings","font-stretch","font-weight","font-style"],d=["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","darkkhaki","darkmagenta","darkolivegreen","darkorange","darkorchid","darkred","darksalmon","darkseagreen","darkslateblue","darkslategray","darkturquoise","darkviolet","deeppink","deepskyblue","dimgray","dodgerblue","firebrick","floralwhite","forestgreen","fuchsia","gainsboro","ghostwhite","gold","goldenrod","gray","grey","green","greenyellow","honeydew","hotpink","indianred","indigo","ivory","khaki","lavender","lavenderblush","lawngreen","lemonchiffon","lightblue","lightcoral","lightcyan","lightgoldenrodyellow","lightgray","lightgreen","lightpink","lightsalmon","lightseagreen","lightskyblue","lightslategray","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","snow","springgreen","steelblue","tan","teal","thistle","tomato","turquoise","violet","wheat","white","whitesmoke","yellow","yellowgreen"],f=["above","absolute","activeborder","additive","activecaption","afar","after-white-space","ahead","alias","all","all-scroll","alphabetic","alternate","always","amharic","amharic-abegede","antialiased","appworkspace","arabic-indic","armenian","asterisks","attr","auto","avoid","avoid-column","avoid-page","avoid-region","background","backwards","baseline","below","bidi-override","binary","bengali","blink","block","block-axis","bold","bolder","border","border-box","both","bottom","break","break-all","break-word","bullets","button","button-bevel","buttonface","buttonhighlight","buttonshadow","buttontext","calc","cambodian","capitalize","caps-lock-indicator","caption","captiontext","caret","cell","center","checkbox","circle","cjk-decimal","cjk-earthly-branch","cjk-heavenly-stem","cjk-ideographic","clear","clip","close-quote","col-resize","collapse","column","compact","condensed","contain","content","contents","content-box","context-menu","continuous","copy","counter","counters","cover","crop","cross","crosshair","currentcolor","cursive","cyclic","dashed","decimal","decimal-leading-zero","default","default-button","destination-atop","destination-in","destination-out","destination-over","devanagari","disc","discard","disclosure-closed","disclosure-open","document","dot-dash","dot-dot-dash","dotted","double","down","e-resize","ease","ease-in","ease-in-out","ease-out","element","ellipse","ellipsis","embed","end","ethiopic","ethiopic-abegede","ethiopic-abegede-am-et","ethiopic-abegede-gez","ethiopic-abegede-ti-er","ethiopic-abegede-ti-et","ethiopic-halehame-aa-er","ethiopic-halehame-aa-et","ethiopic-halehame-am-et","ethiopic-halehame-gez","ethiopic-halehame-om-et","ethiopic-halehame-sid-et","ethiopic-halehame-so-et","ethiopic-halehame-ti-er","ethiopic-halehame-ti-et","ethiopic-halehame-tig","ethiopic-numeric","ew-resize","expanded","extends","extra-condensed","extra-expanded","fantasy","fast","fill","fixed","flat","flex","footnotes","forwards","from","geometricPrecision","georgian","graytext","groove","gujarati","gurmukhi","hand","hangul","hangul-consonant","hebrew","help","hidden","hide","higher","highlight","highlighttext","hiragana","hiragana-iroha","horizontal","hsl","hsla","icon","ignore","inactiveborder","inactivecaption","inactivecaptiontext","infinite","infobackground","infotext","inherit","initial","inline","inline-axis","inline-block","inline-flex","inline-table","inset","inside","intrinsic","invert","italic","japanese-formal","japanese-informal","justify","kannada","katakana","katakana-iroha","keep-all","khmer","korean-hangul-formal","korean-hanja-formal","korean-hanja-informal","landscape","lao","large","larger","left","level","lighter","line-through","linear","linear-gradient","lines","list-item","listbox","listitem","local","logical","loud","lower","lower-alpha","lower-armenian","lower-greek","lower-hexadecimal","lower-latin","lower-norwegian","lower-roman","lowercase","ltr","malayalam","match","matrix","matrix3d","media-controls-background","media-current-time-display","media-fullscreen-button","media-mute-button","media-play-button","media-return-to-realtime-button","media-rewind-button","media-seek-back-button","media-seek-forward-button","media-slider","media-sliderthumb","media-time-remaining-display","media-volume-slider","media-volume-slider-container","media-volume-sliderthumb","medium","menu","menulist","menulist-button","menulist-text","menulist-textfield","menutext","message-box","middle","min-intrinsic","mix","mongolian","monospace","move","multiple","myanmar","n-resize","narrower","ne-resize","nesw-resize","no-close-quote","no-drop","no-open-quote","no-repeat","none","normal","not-allowed","nowrap","ns-resize","numbers","numeric","nw-resize","nwse-resize","oblique","octal","open-quote","optimizeLegibility","optimizeSpeed","oriya","oromo","outset","outside","outside-shape","overlay","overline","padding","padding-box","painted","page","paused","persian","perspective","plus-darker","plus-lighter","pointer","polygon","portrait","pre","pre-line","pre-wrap","preserve-3d","progress","push-button","radial-gradient","radio","read-only","read-write","read-write-plaintext-only","rectangle","region","relative","repeat","repeating-linear-gradient","repeating-radial-gradient","repeat-x","repeat-y","reset","reverse","rgb","rgba","ridge","right","rotate","rotate3d","rotateX","rotateY","rotateZ","round","row-resize","rtl","run-in","running","s-resize","sans-serif","scale","scale3d","scaleX","scaleY","scaleZ","scroll","scrollbar","scroll-position","se-resize","searchfield","searchfield-cancel-button","searchfield-decoration","searchfield-results-button","searchfield-results-decoration","semi-condensed","semi-expanded","separate","serif","show","sidama","simp-chinese-formal","simp-chinese-informal","single","skew","skewX","skewY","skip-white-space","slide","slider-horizontal","slider-vertical","sliderthumb-horizontal","sliderthumb-vertical","slow","small","small-caps","small-caption","smaller","solid","somali","source-atop","source-in","source-out","source-over","space","spell-out","square","square-button","start","static","status-bar","stretch","stroke","sub","subpixel-antialiased","super","sw-resize","symbolic","symbols","table","table-caption","table-cell","table-column","table-column-group","table-footer-group","table-header-group","table-row","table-row-group","tamil","telugu","text","text-bottom","text-top","textarea","textfield","thai","thick","thin","threeddarkshadow","threedface","threedhighlight","threedlightshadow","threedshadow","tibetan","tigre","tigrinya-er","tigrinya-er-abegede","tigrinya-et","tigrinya-et-abegede","to","top","trad-chinese-formal","trad-chinese-informal","translate","translate3d","translateX","translateY","translateZ","transparent","ultra-condensed","ultra-expanded","underline","up","upper-alpha","upper-armenian","upper-greek","upper-hexadecimal","upper-latin","upper-norwegian","upper-roman","uppercase","urdu","url","var","vertical","vertical-text","visible","visibleFill","visiblePainted","visibleStroke","visual","w-resize","wait","wave","wider","window","windowframe","windowtext","words","x-large","x-small","xor","xx-large","xx-small","bicubic","optimizespeed","grayscale","row","row-reverse","wrap","wrap-reverse","column-reverse","flex-start","flex-end","space-between","space-around","unset"],p=["in","and","or","not","is not","is a","is","isnt","defined","if unless"],h=["for","if","else","unless","from","to"],m=["null","true","false","href","title","type","not-allowed","readonly","disabled"],g=["@font-face","@keyframes","@media","@viewport","@page","@host","@supports","@block","@css"],v=i.concat(o,a,l,s,c,d,f,u,p,h,m,g);e.registerHelper("hintWords","stylus",v),e.defineMIME("text/x-styl","stylus")})}),j=r(function(e,t){!function(r){"object"==typeof t&&"object"==typeof e?r(p,O,z,N):r(CodeMirror)}(function(e){e.defineMode("pug",function(t){function r(){this.javaScriptLine=!1,this.javaScriptLineExcludesColon=!1,this.javaScriptArguments=!1,this.javaScriptArgumentsDepth=0,this.isInterpolating=!1,this.interpolationNesting=0,this.jsState=e.startState(Z),this.restOfLine="",this.isIncludeFiltered=!1,this.isEach=!1,this.lastTag="",this.scriptType="",this.isAttrs=!1,this.attrsNest=[],this.inAttributeName=!0,this.attributeIsType=!1,this.attrValue="",this.indentOf=1/0,this.indentToken="",this.innerMode=null,this.innerState=null,this.innerModeForLine=!1}function n(e,t){if(e.sol()&&(t.javaScriptLine=!1,t.javaScriptLineExcludesColon=!1),t.javaScriptLine){if(t.javaScriptLineExcludesColon&&":"===e.peek())return t.javaScriptLine=!1,void(t.javaScriptLineExcludesColon=!1);var r=Z.token(e,t.jsState);return e.eol()&&(t.javaScriptLine=!1),r||!0}}function i(e,t){if(t.javaScriptArguments){if(0===t.javaScriptArgumentsDepth&&"("!==e.peek())return void(t.javaScriptArguments=!1);if("("===e.peek()?t.javaScriptArgumentsDepth++:")"===e.peek()&&t.javaScriptArgumentsDepth--,0===t.javaScriptArgumentsDepth)return void(t.javaScriptArguments=!1);var r=Z.token(e,t.jsState);return r||!0}}function o(e){if(e.match(/^yield\b/))return"keyword"}function a(e){if(e.match(/^(?:doctype) *([^\n]+)?/))return G}function l(e,t){if(e.match("#{"))return t.isInterpolating=!0,t.interpolationNesting=0,"punctuation"}function s(e,t){if(t.isInterpolating){if("}"===e.peek()){if(t.interpolationNesting--,t.interpolationNesting<0)return e.next(),t.isInterpolating=!1,"punctuation"}else"{"===e.peek()&&t.interpolationNesting++;return Z.token(e,t.jsState)||!0}}function c(e,t){if(e.match(/^case\b/))return t.javaScriptLine=!0,K}function u(e,t){if(e.match(/^when\b/))return t.javaScriptLine=!0,t.javaScriptLineExcludesColon=!0,K}function d(e){if(e.match(/^default\b/))return K}function f(e,t){if(e.match(/^extends?\b/))return t.restOfLine="string",K}function p(e,t){if(e.match(/^append\b/))return t.restOfLine="variable",K}function h(e,t){if(e.match(/^prepend\b/))return t.restOfLine="variable",K}function m(e,t){if(e.match(/^block\b *(?:(prepend|append)\b)?/))return t.restOfLine="variable",K}function g(e,t){if(e.match(/^include\b/))return t.restOfLine="string",K}function v(e,t){if(e.match(/^include:([a-zA-Z0-9\-]+)/,!1)&&e.match("include"))return t.isIncludeFiltered=!0,K}function y(e,t){if(t.isIncludeFiltered){var r=T(e,t);return t.isIncludeFiltered=!1,t.restOfLine="string",r}}function b(e,t){if(e.match(/^mixin\b/))return t.javaScriptLine=!0,K}function w(e,t){return e.match(/^\+([-\w]+)/)?(e.match(/^\( *[-\w]+ *=/,!1)||(t.javaScriptArguments=!0,t.javaScriptArgumentsDepth=0),"variable"):e.match(/^\+#{/,!1)?(e.next(),t.mixinCallAfter=!0,l(e,t)):void 0}function x(e,t){if(t.mixinCallAfter)return t.mixinCallAfter=!1,e.match(/^\( *[-\w]+ *=/,!1)||(t.javaScriptArguments=!0,t.javaScriptArgumentsDepth=0),!0}function k(e,t){if(e.match(/^(if|unless|else if|else)\b/))return t.javaScriptLine=!0,K}function C(e,t){if(e.match(/^(- *)?(each|for)\b/))return t.isEach=!0,K}function S(e,t){if(t.isEach){if(e.match(/^ in\b/))return t.javaScriptLine=!0,t.isEach=!1,K;if(e.sol()||e.eol())t.isEach=!1;else if(e.next()){for(;!e.match(/^ in\b/,!1)&&e.next(););return"variable"}}}function M(e,t){if(e.match(/^while\b/))return t.javaScriptLine=!0,K}function L(e,t){var r;if(r=e.match(/^(\w(?:[-:\w]*\w)?)\/?/))return t.lastTag=r[1].toLowerCase(),"script"===t.lastTag&&(t.scriptType="application/javascript"),"tag"}function T(r,n){if(r.match(/^:([\w\-]+)/)){var i;return t&&t.innerModes&&(i=t.innerModes(r.current().substring(1))),i||(i=r.current().substring(1)),"string"==typeof i&&(i=e.getMode(t,i)),B(r,n,i),"atom"}}function z(e,t){if(e.match(/^(!?=|-)/))return t.javaScriptLine=!0,"punctuation"}function A(e){if(e.match(/^#([\w-]+)/))return _}function O(e){if(e.match(/^\.([\w-]+)/))return X}function N(e,t){if("("==e.peek())return e.next(),t.isAttrs=!0,t.attrsNest=[],t.inAttributeName=!0,t.attrValue="",t.attributeIsType=!1,"punctuation"}function W(t,r){if(r.isAttrs){if(Y[t.peek()]&&r.attrsNest.push(Y[t.peek()]),r.attrsNest[r.attrsNest.length-1]===t.peek())r.attrsNest.pop();else if(t.eat(")"))return r.isAttrs=!1,"punctuation";if(r.inAttributeName&&t.match(/^[^=,\)!]+/))return"="!==t.peek()&&"!"!==t.peek()||(r.inAttributeName=!1,r.jsState=e.startState(Z),"script"===r.lastTag&&"type"===t.current().trim().toLowerCase()?r.attributeIsType=!0:r.attributeIsType=!1),"attribute";var n=Z.token(t,r.jsState);if(r.attributeIsType&&"string"===n&&(r.scriptType=t.current().toString()),0===r.attrsNest.length&&("string"===n||"variable"===n||"keyword"===n))try{return Function("","var x "+r.attrValue.replace(/,\s*$/,"").replace(/^!/,"")),r.inAttributeName=!0,r.attrValue="",t.backUp(t.current().length),W(t,r)}catch(e){}return r.attrValue+=t.current(),n||!0}}function E(e,t){if(e.match(/^&attributes\b/))return t.javaScriptArguments=!0,t.javaScriptArgumentsDepth=0,"keyword"}function P(e){if(e.sol()&&e.eatSpace())return"indent"}function j(e,t){if(e.match(/^ *\/\/(-)?([^\n]*)/))return t.indentOf=e.indentation(),t.indentToken="comment","comment"}function D(e){if(e.match(/^: */))return"colon";
+}function I(e,t){return e.match(/^(?:\| ?| )([^\n]+)/)?"string":e.match(/^(<[^\n]*)/,!1)?(B(e,t,"htmlmixed"),t.innerModeForLine=!0,R(e,t,!0)):void 0}function H(e,t){if(e.eat(".")){var r=null;return"script"===t.lastTag&&t.scriptType.toLowerCase().indexOf("javascript")!=-1?r=t.scriptType.toLowerCase().replace(/"|'/g,""):"style"===t.lastTag&&(r="css"),B(e,t,r),"dot"}}function F(e){return e.next(),null}function B(r,n,i){i=e.mimeModes[i]||i,i=t.innerModes?t.innerModes(i)||i:i,i=e.mimeModes[i]||i,i=e.getMode(t,i),n.indentOf=r.indentation(),i&&"null"!==i.name?n.innerMode=i:n.indentToken="string"}function R(t,r,n){return t.indentation()>r.indentOf||r.innerModeForLine&&!t.sol()||n?r.innerMode?(r.innerState||(r.innerState=r.innerMode.startState?e.startState(r.innerMode,t.indentation()):{}),t.hideFirstChars(r.indentOf+2,function(){return r.innerMode.token(t,r.innerState)||!0})):(t.skipToEnd(),r.indentToken):void(t.sol()&&(r.indentOf=1/0,r.indentToken=null,r.innerMode=null,r.innerState=null))}function $(e,t){if(e.sol()&&(t.restOfLine=""),t.restOfLine){e.skipToEnd();var r=t.restOfLine;return t.restOfLine="",r}}function V(){return new r}function q(e){return e.copy()}function U(e,t){var r=R(e,t)||$(e,t)||s(e,t)||y(e,t)||S(e,t)||W(e,t)||n(e,t)||i(e,t)||x(e,t)||o(e,t)||a(e,t)||l(e,t)||c(e,t)||u(e,t)||d(e,t)||f(e,t)||p(e,t)||h(e,t)||m(e,t)||g(e,t)||v(e,t)||b(e,t)||w(e,t)||k(e,t)||C(e,t)||M(e,t)||L(e,t)||T(e,t)||z(e,t)||A(e,t)||O(e,t)||N(e,t)||E(e,t)||P(e,t)||I(e,t)||j(e,t)||D(e,t)||H(e,t)||F(e,t);return r===!0?null:r}var K="keyword",G="meta",_="builtin",X="qualifier",Y={"{":"}","(":")","[":"]"},Z=e.getMode(t,"javascript");return r.prototype.copy=function(){var t=new r;return t.javaScriptLine=this.javaScriptLine,t.javaScriptLineExcludesColon=this.javaScriptLineExcludesColon,t.javaScriptArguments=this.javaScriptArguments,t.javaScriptArgumentsDepth=this.javaScriptArgumentsDepth,t.isInterpolating=this.isInterpolating,t.interpolationNesting=this.interpolationNesting,t.jsState=e.copyState(Z,this.jsState),t.innerMode=this.innerMode,this.innerMode&&this.innerState&&(t.innerState=e.copyState(this.innerMode,this.innerState)),t.restOfLine=this.restOfLine,t.isIncludeFiltered=this.isIncludeFiltered,t.isEach=this.isEach,t.lastTag=this.lastTag,t.scriptType=this.scriptType,t.isAttrs=this.isAttrs,t.attrsNest=this.attrsNest.slice(),t.inAttributeName=this.inAttributeName,t.attributeIsType=this.attributeIsType,t.attrValue=this.attrValue,t.indentOf=this.indentOf,t.indentToken=this.indentToken,t.innerModeForLine=this.innerModeForLine,t},{startState:V,copyState:q,token:U}},"javascript","css","htmlmixed"),e.defineMIME("text/x-pug","pug"),e.defineMIME("text/x-jade","pug")})}),D=r(function(e,t){!function(r){r("object"==typeof t&&"object"==typeof e?p:CodeMirror)}(function(e){e.multiplexingMode=function(t){function r(e,t,r,n){if("string"==typeof t){var i=e.indexOf(t,r);return n&&i>-1?i+t.length:i}var o=t.exec(r?e.slice(r):e);return o?o.index+r+(n?o[0].length:0):-1}var n=Array.prototype.slice.call(arguments,1);return{startState:function(){return{outer:e.startState(t),innerActive:null,inner:null}},copyState:function(r){return{outer:e.copyState(t,r.outer),innerActive:r.innerActive,inner:r.innerActive&&e.copyState(r.innerActive.mode,r.inner)}},token:function(i,o){if(o.innerActive){var a=o.innerActive,l=i.string;if(!a.close&&i.sol())return o.innerActive=o.inner=null,this.token(i,o);var s=a.close?r(l,a.close,i.pos,a.parseDelimiters):-1;if(s==i.pos&&!a.parseDelimiters)return i.match(a.close),o.innerActive=o.inner=null,a.delimStyle&&a.delimStyle+" "+a.delimStyle+"-close";s>-1&&(i.string=l.slice(0,s));var c=a.mode.token(i,o.inner);return s>-1&&(i.string=l),s==i.pos&&a.parseDelimiters&&(o.innerActive=o.inner=null),a.innerStyle&&(c=c?c+" "+a.innerStyle:a.innerStyle),c}for(var u=1/0,l=i.string,d=0;d |[#\/]([A-Za-z_]\w*)/,token:"keyword"},{regex:/(?:else|this)\b/,token:"keyword"},{regex:/\d+/i,token:"number"},{regex:/=|~|@|true|false/,token:"atom"},{regex:/(?:\.\.\/)*(?:[A-Za-z_][\w\.]*)+/,token:"variable-2"}],dash_comment:[{regex:/--\}\}/,pop:!0,token:"comment"},{regex:/./,token:"comment"}],comment:[{regex:/\}\}/,pop:!0,token:"comment"},{regex:/./,token:"comment"}]}),e.defineMode("handlebars",function(t,r){var n=e.getMode(t,"handlebars-tags");return r&&r.base?e.multiplexingMode(e.getMode(t,r.base),{open:"{{",close:"}}",mode:n,parseDelimiters:!0}):n}),e.defineMIME("text/x-handlebars-template","handlebars")})});r(function(e,t){!function(r){"object"==typeof t&&"object"==typeof e?r(p,L,A,O,W,z,E,P,j,I):r(CodeMirror)}(function(e){var t={script:[["lang",/coffee(script)?/,"coffeescript"],["type",/^(?:text|application)\/(?:x-)?coffee(?:script)?$/,"coffeescript"]],style:[["lang",/^stylus$/i,"stylus"],["lang",/^sass$/i,"sass"],["type",/^(text\/)?(x-)?styl(us)?$/i,"stylus"],["type",/^text\/sass/i,"sass"]],template:[["lang",/^vue-template$/i,"vue"],["lang",/^pug$/i,"pug"],["lang",/^handlebars$/i,"handlebars"],["type",/^(text\/)?(x-)?pug$/i,"pug"],["type",/^text\/x-handlebars-template$/i,"handlebars"],[null,null,"vue-template"]]};e.defineMode("vue-template",function(t,r){var n={token:function(e){if(e.match(/^\{\{.*?\}\}/))return"meta mustache";for(;e.next()&&!e.match("{{",!1););return null}};return e.overlayMode(e.getMode(t,r.backdrop||"text/html"),n)}),e.defineMode("vue",function(r){return e.getMode(r,{name:"htmlmixed",tags:t})},"htmlmixed","xml","javascript","coffeescript","css","sass","stylus","pug","handlebars"),e.defineMIME("script/x-vue","vue"),e.defineMIME("text/x-vue","vue")})}),r(function(e,t){!function(r){"object"==typeof t&&"object"==typeof e?r(p,A,O):r(CodeMirror)}(function(e){function t(e,t,r,n){this.state=e,this.mode=t,this.depth=r,this.prev=n}function r(n){return new t(e.copyState(n.mode,n.state),n.mode,n.depth,n.prev&&r(n.prev))}e.defineMode("jsx",function(n,i){function o(e){var t=e.tagName;e.tagName=null;var r=c.indent(e,"");return e.tagName=t,r}function a(e,t){return t.context.mode==c?l(e,t,t.context):s(e,t,t.context)}function l(r,i,l){if(2==l.depth)return r.match(/^.*?\*\//)?l.depth=1:r.skipToEnd(),"comment";if("{"==r.peek()){c.skipAttribute(l.state);var s=o(l.state),d=l.state.context;if(d&&r.match(/^[^>]*>\s*$/,!1)){for(;d.prev&&!d.startOfLine;)d=d.prev;d.startOfLine?s-=n.indentUnit:l.prev.state.lexical&&(s=l.prev.state.lexical.indented)}else 1==l.depth&&(s+=n.indentUnit);return i.context=new t(e.startState(u,s),u,0,i.context),null}if(1==l.depth){if("<"==r.peek())return c.skipAttribute(l.state),i.context=new t(e.startState(c,o(l.state)),c,0,i.context),null;if(r.match("//"))return r.skipToEnd(),"comment";if(r.match("/*"))return l.depth=2,a(r,i)}var f,p=c.token(r,l.state),h=r.current();return/\btag\b/.test(p)?/>$/.test(h)?l.state.context?l.depth=0:i.context=i.context.prev:/^-1&&r.backUp(h.length-f),p}function s(r,n,i){if("<"==r.peek()&&u.expressionAllowed(r,i.state))return u.skipExpression(i.state),n.context=new t(e.startState(c,u.indent(i.state,"")),c,0,n.context),null;var o=u.token(r,i.state);if(!o&&null!=i.depth){var a=r.current();"{"==a?i.depth++:"}"==a&&0==--i.depth&&(n.context=n.context.prev)}return o}var c=e.getMode(n,{name:"xml",allowMissing:!0,multilineTagIndentPastTag:!1}),u=e.getMode(n,i&&i.base||"javascript");return{startState:function(){return{context:new t(e.startState(u),u)}},copyState:function(e){return{context:r(e.context)}},token:a,indent:function(e,t,r){return e.context.mode.indent(e.context.state,t,r)},innerMode:function(e){return e.context}}},"xml","javascript"),e.defineMIME("text/jsx","jsx"),e.defineMIME("text/typescript-jsx",{name:"jsx",base:{name:"javascript",typescript:!0}})})});Object.defineProperty(e,"__esModule",{value:!0})});
diff --git a/src/components/playground.js b/src/components/playground.js
index b62a861..131209a 100644
--- a/src/components/playground.js
+++ b/src/components/playground.js
@@ -12,7 +12,12 @@ export default {
keepData: Boolean,
value: String,
scope: Object,
- iframe: Boolean
+ iframe: Boolean,
+ fitIframe: Boolean,
+ iframeClass: {
+ type: String,
+ default: 'vuep-iframe-preview'
+ }
},
data () {
@@ -39,7 +44,9 @@ export default {
value: this.preview,
styles: this.styles,
keepData: this.keepData,
- iframe: this.iframe
+ iframe: this.iframe,
+ fitIframe: this.fitIframe,
+ iframeClass: this.iframeClass
},
on: {
error: this.handleError
@@ -47,19 +54,31 @@ export default {
})
}
- return h('div', { class: 'vuep' }, [
- h(Editor, {
- class: 'vuep-editor',
- props: {
- value: this.content,
- options: this.options
+ const editor = h(Editor, {
+ class: 'vuep-editor',
+ props: {
+ value: this.content,
+ options: this.options
+ },
+ on: {
+ change: [this.executeCode, val => this.$emit('input', val)]
+ }
+ })
+
+ let children = [editor, win]
+ if (this.$slots.default) {
+ children = this.addSlots(h, this.$slots.default, [
+ {
+ name: 'vuep-preview',
+ child: win
},
- on: {
- change: [this.executeCode, val => this.$emit('input', val)]
+ {
+ name: 'vuep-editor',
+ child: editor
}
- }),
- win
- ])
+ ])
+ }
+ return h('div', { class: 'vuep' }, children)
},
watch: {
@@ -91,6 +110,21 @@ export default {
},
methods: {
+ addSlots (h, vnodes, slots) {
+ return vnodes.map(vnode => {
+ let children = []
+ slots.forEach(({ name, child }) => {
+ if (vnode.data && vnode.data.attrs && vnode.data.attrs[name] !== undefined) {
+ children = [child]
+ }
+ })
+ if (!children.length && vnode.children && vnode.children.length) {
+ children = this.addSlots(h, vnode.children, slots)
+ }
+ return h(vnode.tag, vnode.data, children)
+ })
+ },
+
handleError (err) {
/* istanbul ignore next */
this.error = err
diff --git a/src/components/preview.js b/src/components/preview.js
index 8822051..beabd73 100644
--- a/src/components/preview.js
+++ b/src/components/preview.js
@@ -1,10 +1,12 @@
import Vue from 'vue/dist/vue.common'
import assign from '../utils/assign' // eslint-disable-line
+import IframeResizer from '../utils/iframe-resizer'
+import IframeStyler from '../utils/iframe-styler'
export default {
name: 'preview',
- props: ['value', 'styles', 'keepData', 'iframe'],
+ props: ['value', 'styles', 'keepData', 'iframe', 'fitIframe', 'iframeClass'],
render (h) {
this.className = 'vuep-scoped-' + this._uid
@@ -16,6 +18,13 @@ export default {
])
},
+ data () {
+ return {
+ resizer: null,
+ styler: null
+ }
+ },
+
computed: {
scopedStyle () {
return this.styles
@@ -27,15 +36,55 @@ export default {
mounted () {
this.$watch('value', this.renderCode, { immediate: true })
if (this.iframe) {
- this.$el.addEventListener('load', this.renderCode)
+ // Firefox needs the iframe to be loaded
+ if (this.$el.contentDocument.readyState === 'complete') {
+ this.initIframe()
+ } else {
+ this.$el.addEventListener('load', this.initIframe)
+ }
+ this.$watch('fitIframe', (fitIframe) => {
+ fitIframe ? this.startResizer() : this.stopResizer()
+ }, { immediate: true })
}
},
beforeDestroy () {
if (this.iframe) {
- this.$el.removeEventListener('load', this.renderCode)
+ this.$el.removeEventListener('load', this.initIframe)
+ this.cleanupIframe()
}
},
methods: {
+ initIframe () {
+ this.resizer = new IframeResizer(this.$el)
+ this.styler = new IframeStyler(this.$el)
+ this.renderCode()
+ this.startStyler()
+ },
+ cleanupIframe () {
+ this.stopResizer()
+ this.stopStyler()
+ },
+ startResizer () {
+ if (this.resizer) {
+ this.resizer.start()
+ }
+ },
+ stopResizer () {
+ if (this.resizer) {
+ this.resizer.stop()
+ }
+ },
+ startStyler () {
+ if (this.styler) {
+ this.styler.start()
+ this.styler.setStyles(this.styles)
+ }
+ },
+ stopStyler () {
+ if (this.styler) {
+ this.styler.stop()
+ }
+ },
renderCode () {
// Firefox needs the iframe to be loaded
if (this.iframe && this.$el.contentDocument.readyState !== 'complete') {
@@ -55,22 +104,10 @@ export default {
container.appendChild(this.codeEl)
if (this.iframe) {
- const head = this.$el.contentDocument.head
- if (this.styleEl) {
- head.removeChild(this.styleEl)
- for (const key in this.styleNodes) {
- head.removeChild(this.styleNodes[key])
- }
+ container.classList.add(this.iframeClass)
+ if (this.styler) {
+ this.styler.setStyles(this.styles)
}
- this.styleEl = document.createElement('style')
- this.styleEl.appendChild(document.createTextNode(this.styles))
- this.styleNodes = []
- const documentStyles = getDocumentStyle()
- for (const key in documentStyles) {
- this.styleNodes[key] = documentStyles[key].cloneNode(true)
- head.appendChild(this.styleNodes[key])
- }
- head.appendChild(this.styleEl)
}
try {
@@ -96,9 +133,3 @@ function insertScope (style, scope) {
return g1 ? `${g1} ${scope} ${g2}` : `${scope} ${g2}`
})
}
-
-function getDocumentStyle () {
- const links = document.querySelectorAll('link[rel="stylesheet"]')
- const styles = document.querySelectorAll('style')
- return Array.from(links).concat(Array.from(styles))
-}
diff --git a/src/utils/iframe-resizer.js b/src/utils/iframe-resizer.js
new file mode 100644
index 0000000..2c1053c
--- /dev/null
+++ b/src/utils/iframe-resizer.js
@@ -0,0 +1,119 @@
+export default class IframeResizer {
+ constructor ($el) {
+ this.$el = $el
+ this.observer = null
+ this.resize = this.resizeIframe.bind(this)
+ }
+
+ start () {
+ this.resize()
+ }
+
+ stop () {
+ this.stopObserve()
+ }
+
+ observe () {
+ this.bindResizeObserver()
+ this.bindLoadObserver()
+ this.bindContentObserver()
+ }
+
+ stopObserve () {
+ this.unbindResizeObserver()
+ this.unbindLoadObserver()
+ this.unbindContentObserver()
+ }
+
+ resizeIframe () {
+ if (!this.$el || !this.$el.contentWindow) {
+ return
+ }
+ this.stopObserve()
+ const body = this.$el.contentWindow.document.body
+ // Add element for height calculation
+ const heightEl = document.createElement('div')
+ body.appendChild(heightEl)
+ const padding = getPadding(this.$el)
+ const bodyOffset = getPadding(body) + getMargin(body)
+ this.$el.style.height = `${heightEl.offsetTop + padding + bodyOffset}px`
+ body.removeChild(heightEl)
+ setTimeout(this.observe.bind(this), 100)
+ }
+
+ bindResizeObserver () {
+ if (this.$el && this.$el.contentWindow) {
+ this.$el.contentWindow.addEventListener(
+ 'resize',
+ this.resize
+ )
+ }
+ }
+
+ unbindResizeObserver () {
+ if (this.$el && this.$el.contentWindow) {
+ this.$el.contentWindow.removeEventListener(
+ 'resize',
+ this.resize
+ )
+ }
+ }
+
+ // Listen for async loaded content (images)
+ bindLoadObserver () {
+ if (this.$el && this.$el.contentWindow) {
+ this.$el.contentWindow.document.body.addEventListener(
+ 'load',
+ this.resize,
+ true
+ )
+ }
+ }
+
+ unbindLoadObserver () {
+ if (this.$el && this.$el.contentWindow) {
+ this.$el.contentWindow.document.body.removeEventListener(
+ 'load',
+ this.resize
+ )
+ }
+ }
+
+ bindContentObserver () {
+ if (!this.$el || !this.$el.contentWindow) {
+ return
+ }
+ const MutationObserver = window.MutationObserver || window.WebKitMutationObserver
+ if (MutationObserver) {
+ const target = this.$el.contentWindow.document.body
+ const config = {
+ attributes: true,
+ attributeOldValue: false,
+ characterData: true,
+ characterDataOldValue: false,
+ childList: true,
+ subtree: true
+ }
+ this.observer = new MutationObserver(this.resize)
+ this.observer.observe(target, config)
+ }
+ }
+
+ unbindContentObserver () {
+ if (this.observer) {
+ this.observer.disconnect()
+ }
+ }
+}
+
+function getPadding (e) {
+ return getProperty(e, 'padding-top') + getProperty(e, 'padding-bottom')
+}
+
+function getMargin (e) {
+ return getProperty(e, 'margin-top') + getProperty(e, 'margin-bottom')
+}
+
+function getProperty (e, p) {
+ return parseInt(window.getComputedStyle(e, null).getPropertyValue(p))
+}
diff --git a/src/utils/iframe-styler.js b/src/utils/iframe-styler.js
new file mode 100644
index 0000000..a79bd92
--- /dev/null
+++ b/src/utils/iframe-styler.js
@@ -0,0 +1,70 @@
+export default class IframeStyler {
+ constructor ($el) {
+ this.$el = $el
+ this.observer = null
+ this.style = this.styleIframe.bind(this)
+ this.styleEl = null
+ this.styleNodes = []
+ this.styles = null
+ }
+
+ start () {
+ this.observe()
+ this.style()
+ }
+
+ stop () {
+ this.stopObserve()
+ }
+
+ setStyles (styles) {
+ this.styles = styles
+ this.style()
+ }
+
+ observe () {
+ const MutationObserver = window.MutationObserver || window.WebKitMutationObserver
+ if (MutationObserver) {
+ const head = document.querySelector('head')
+ const config = { attributes: true, childList: true, subtree: true }
+ this.observer = new MutationObserver(this.style)
+ this.observer.observe(head, config)
+ }
+ }
+
+ stopObserve () {
+ if (this.observer) {
+ this.observer.disconnect()
+ }
+ }
+
+ styleIframe () {
+ if (!this.$el || !this.$el.contentDocument) {
+ return
+ }
+ const head = this.$el.contentDocument.head
+ // Remove old styles
+ if (this.styleEl) {
+ head.removeChild(this.styleEl)
+ }
+ for (const key in this.styleNodes) {
+ head.removeChild(this.styleNodes[key])
+ }
+ // Set new styles
+ this.styleEl = document.createElement('style')
+ this.styleEl.appendChild(document.createTextNode(this.styles))
+ this.styleNodes = []
+ const documentStyles = getDocumentStyle()
+ for (const key in documentStyles) {
+ this.styleNodes[key] = documentStyles[key].cloneNode(true)
+ head.appendChild(this.styleNodes[key])
+ }
+ head.appendChild(this.styleEl)
+ }
+}
+
+function getDocumentStyle () {
+ const links = document.querySelectorAll('link[rel="stylesheet"]')
+ const styles = document.querySelectorAll('style')
+ return Array.from(links).concat(Array.from(styles))
+}
diff --git a/test.html b/test.html
index 9259cb9..71792ec 100644
--- a/test.html
+++ b/test.html
@@ -29,8 +29,37 @@ Single File Component with <features> from scope
Single File Component displayed in iframe
-
+
+
Single File Component displayed in iframe with fit-iframe
+
+
+
+
+
Single File Component with custom layout
+
toggle editor
+
+
+
+
+
+
+
+
+
+