use strict;
my $str = '/**
* Created by jetbrains web development IDE ( Web/PhpStorm ).
* Project: web-component - spineNav
* User: Pascal Gaudin
* Mail: pascal.gaudin@zimmerbiomet.com
* Date: 14/01/2023
* Time: 14:00
*/
/**
*
* @type {Window.HTMLElementExtd}
*/
window.HTMLElementExtd = class HTMLElementExtd extends HTMLElement {
shadowRoot;
style;
elementCustomName;
/**
*
* @param props
*/
constructor(props) {
super(props);
this.shadowRoot = this.attachShadow({mode: \'open\'});
this.host=this.shadowRoot.host;
this.style= document.createElement(\'style\');
this.elementCustomName = this.host.tagName.toLowerCase()
let css = Tools.fetchSync(`web-component/${this.elementCustomName}/default.css`);
const iJson=new Css(css)
const jsonCss= iJson.toJson();
console.log(\'logg : \', jsonCss);
css += Tools.fetchSync(`web-component/${this.elementCustomName}/custom-element.css`);
this.style.textContent = css;
this.shadowRoot.appendChild(this.style);
}
/**
*
* @param objVar
*/
setVarInCtx(objVar){
for(name in objVar ) this[name] = objVar[name];
}
/**
*
* @param className
* @returns {string}
*/
getStyle(className) {
var cssText = "";
var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules;
for (var x = 0; x < classes.length; x++) {
if (classes[x].selectorText == className) {
cssText += classes[x].cssText || classes[x].style.cssText;
}
}
return cssText;
}
/**
*
* @returns {boolean}
*/
get firstTime(){
return this.host.ownerDocument.getElementsByTagName(this.elementCustomName).length===1;
}
/**
*
* @returns {*[]}
*/
static get observedAttributes() {
return [];
}
/**
* document.adoptNode(el)
*/
adoptedCallback()
{
console.log(`Custom-Element ${this.host.nodeName.toLowerCase()} adopt Node !`);
}
/**
* each el.setAttribute
*
* @param attrName
* @param oldVal
* @param newVal
*/
attributeChangedCallback(attrName, oldVal, newVal){
console.log(`Custom-Element ${this.host.nodeName.toLowerCase()} attribute \'${attrName}\' Changed with value \'${newVal}\' !`);
}
/**
* el.remove()
*
*/
disconnectedCallback(){
console.log(`Custom-Element ${this.host.nodeName.toLowerCase()} Element remove !` );
}
/**
*
*/
connectedCallback(){
console.log(`Custom-Element ${this.host.nodeName.toLowerCase()} was inserted in DOM!`);
}
}
/**
* Created by jetbrains WebStorm .
* Project: web-component - MyProject
* User: Pascal Gaudin
* Mail:
* Date: 23/01/2023
* Time: 10:58
*/
/**
*
* @param attributes
*/
HTMLElement.prototype.setAttributes=function (attributes) {
for (const name in attributes) {
if(name==\'textContent\') this.textContent= attributes[name];
if(attributes[name]&&attributes[name]!==\'\')this.setAttribute(name,attributes[name]);
if( attributes[name]===\'\')this.setAttribute(name,\'\');
}
}
/**
*
* @returns {*[]}
*/
document.createElements =function (){
const args= [];
[...arguments].forEach((arg)=>{
args.push(document.createElement(arg));
})
return args;
}
/**
*
*/
document.toggleFullScreen=function() {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen();
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
}
}
}
/**
*
* @returns {*[]}
*/
HTMLElement.prototype.appendChilds =function ( ) {
const args= [];
[...arguments].forEach((arg)=>{
args.push(this.appendChild(arg));
})
return args;
}
/**
*
* @type {function(): *[]}
*/
ShadowRoot.prototype.appendChilds= HTMLElement.prototype.appendChilds ;
/**
*
* @returns {*[]}
*/
HTMLElement.prototype.removeChilds=function( ){
const args= [];
[...arguments].forEach((arg)=>{
args.push(this.removeChild(arg));
})
return args;
}
/**
*
* @param txt
*/
HTMLInputElement.prototype.setFocusBack =function( txt){
}
/**
*
* @param kill
*/
HTMLElement.prototype.disconnect=function(kill){
const numObserved = this.dataset.observed;
const infoElmt=`of the element \'${this.tagName.toLowerCase()}\' (with name:\'${this.getAttribute(\'name\')??\'\'}\')`
if(this.dataset.hasObserverConnected && this.observer[numObserved] ) {
this.observer[numObserved].disconnect();
console.log( `The observer ${infoElmt} n° ${ numObserved } has been disconnected.`);
if(kill) {
delete this.observer[numObserved] ;
console.log( `The observer ${infoElmt} n° ${ numObserved } has been destroy.`);
}
delete this.dataset.hasObserverConnected;
} else {
console.log( `The observer ${infoElmt} is not connected.`)
};
}
/**
*
* @param type
* @param oldValue
* @param subtree
* @param log
*/
HTMLElement.prototype.observe =function( type,oldValue=true, subtree=true,log=true){
let numObserved=this.dataset.observed;
const infoElmt=`of the element \'${this.tagName.toLowerCase()}\' (with name:\'${this.getAttribute(\'name\')??\'\'}\')`
if(arguments && !numObserved) {
this.config = {...type, subtree};//attributeFilter
const callback = {}, propertieAllowed = {};
[\'childList\', \'attributes\', \'characterData\'].forEach(_type => {
this.config[_type] = type.hasOwnProperty(_type);
callback[_type] = type[_type] ?? undefined;
})
if (this.config.attributes) this.config.attributeOldValue = oldValue;
if (this.config.characterData) this.config.characterDataOldValue = oldValue;
propertieAllowed.attributes = ((mut) => { //attributes target newValue attributeName oldValue
return {
target : mut.target, newValue: mut.target.getAttribute(mut.attributeName),
attributeName: mut.attributeName, oldValue: mut.oldValue
}
});
propertieAllowed.childList = ((mut) => {//childList : target addedNodes removedNodes
return {target: mut.target, addedNodes: [...mut.addedNodes], removedNodes: [...mut.removedNodes]}
});
propertieAllowed.characterData = ((mut) => { //characterData oldText newText target
return {oldText: mut.oldValue, newText: mut.target.data, target: mut.target}
});
const cbk = (mutationsList) => {
for (var mutation of mutationsList) {
if (callback[mutation.type]) callback[mutation.type].call(this, propertieAllowed[mutation.type](mutation));
}
}
numObserved= \'obs-\'+new Date().getTime();
this.dataset.observed=numObserved;
this.observer={[numObserved] : new MutationObserver(cbk)};
if(log)console.log( `The observer ${infoElmt} n° ${ numObserved } is now created.`)
}
this.observer[numObserved].observe(this, this.config);
this.dataset.hasObserverConnected= true;
if(log)console.log( `The observer ${infoElmt} n° ${ numObserved } is connected.\\n\\n`)
}
/**
*
* @param regexs
* @param strs
* @param callbacs
*/
String.prototype.replaceWithArray=function ( regexs, strs,callbacs) {
let str=this;
regexs.forEach((regex,idx)=>{
str = String.prototype.replace.call(str,regex,strs.at(idx),callbacs?.at(idx));
});
return str;
}
';
my $regex = qr/((((\b(#|\w)+\b\.)?(\bprototype\b\.)?(\b(#|\w)+\b)(\s*\=\s*)?)?(\b(#|\w)+\b\s*)\([\s\w,=]*\s*\))|(\bclass\b\s+\b\w+\b\s*(extends\s*\b\w+\b))(?=\s*\{[\s\S]+\}))(?=\s*\{[\s\S]+\})/mp;
if ( $str =~ /$regex/g ) {
print "Whole match is ${^MATCH} and its start/end positions can be obtained via \$-[0] and \$+[0]\n";
# print "Capture Group 1 is $1 and its start/end positions can be obtained via \$-[1] and \$+[1]\n";
# print "Capture Group 2 is $2 ... and so on\n";
}
# ${^POSTMATCH} and ${^PREMATCH} are also available with the use of '/p'
# Named capture groups can be called via $+{name}
Please keep in mind that these code samples are automatically generated and are not guaranteed to work. If you find any syntax errors, feel free to submit a bug report. For a full regex reference for Perl, please visit: http://perldoc.perl.org/perlre.html