Skip to content

Commit

Permalink
update
Browse files Browse the repository at this point in the history
  • Loading branch information
@stopsopa
stopsopa committed Dec 11, 2024
1 parent c9947c5 commit d8cafea
Show file tree
Hide file tree
Showing 3 changed files with 188 additions and 72 deletions.
184 changes: 151 additions & 33 deletions js/github.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,39 +53,157 @@ function trim(string, charlist, direction) {
}

(function () {
var cache = {};

window.tmpl = function (str, data) {
// Figure out if we're getting a template, or if we need to
// load the template - and be sure to cache the result.
var fn = !/\W/.test(str)
? (cache[str] = cache[str] || tmpl(document.getElementById(str).innerHTML))
: // Generate a reusable function that will serve as a template
// generator (and which will be cached).
new Function(
"obj",
"var p=[],print=function(){p.push.apply(p,arguments);};" +
// Introduce the data as local variables using with(){}
"with(obj){p.push('" +
// Convert the template into pure JavaScript
str
.replace(/[\r\t\n]/g, " ")
.split("<%")
.join("\t")
.replace(/((^|%>)[^\t]*)'/g, "$1\r")
.replace(/\t=(.*?)%>/g, "',$1,'")
.split("\t")
.join("');")
.split("%>")
.join("p.push('")
.split("\r")
.join("\\'") +
"');}return p.join('');"
);

// Provide some basic currying to the user
return data ? fn(data) : fn;
};
/**
* from: https://github.com/stopsopa/nlab/blob/master/src/template.js
*/
function getGlobal() {
try {
if (typeof window !== "undefined") {
return window;
}
} catch (e) {
e;
}
try {
if (typeof global !== "undefined") {
return global;
}
} catch (e) {
e;
}
throw new Error(`getGlobal error: can't find global`);
}

var template = (function (t, delimiters) {
// implementation from Underscore.js 1.8.3
var escapeMap = {
"&": "&amp;",
"<": "&lt;",
">": "&gt;",
'"': "&quot;",
"'": "&#x27;",
"`": "&#x60;",
};
var escapes = {
"'": "'",
"\\": "\\",
"\r": "r",
"\n": "n",
"\u2028": "u2028",
"\u2029": "u2029",
};
var noMatch = /(.)^/;
var escaper = /\\|'|\r|\n|\u2028|\u2029/g;
var createEscaper = function (map) {
var escaper = function (match) {
return map[match];
};
var l = [];
for (var i in map) {
l.push(i);
}
// Regexes for identifying a key that needs to be escaped
var source = "(?:" + l.join("|") + ")";
var testRegexp = RegExp(source);
var replaceRegexp = RegExp(source, "g");
return function (string) {
string = string == null ? "" : "" + string;
return testRegexp.test(string) ? string.replace(replaceRegexp, escaper) : string;
};
};
t._esc = createEscaper(escapeMap);
var escapeChar = function (match) {
return "\\" + escapes[match];
};
function isObject(obj) {
var type = typeof obj;
return type === "function" || (type === "object" && !!obj);
}
function defaults(obj) {
if (!isObject(obj)) return obj;
for (var i = 1, length = arguments.length; i < length; i++) {
var source = arguments[i];
for (var prop in source) {
if (obj[prop] === void 0) obj[prop] = source[prop];
}
}
return obj;
}

// JavaScript micro-templating, similar to John Resig's implementation.
// Underscore templating handles arbitrary delimiters, preserves whitespace,
// and correctly escapes quotes within interpolated code.
// NB: `oldSettings` only exists for backwards compatibility.
return function (text, settings, oldSettings) {
if (!settings && oldSettings) settings = oldSettings;
settings = defaults({}, settings, delimiters);

// Combine delimiters into one regular expression via alternation.
var matcher = RegExp(
[
(settings.escape || noMatch).source,
(settings.interpolate || noMatch).source,
(settings.evaluate || noMatch).source,
].join("|") + "|$",
"g"
);

// Compile the template source, escaping string literals appropriately.
var index = 0;
var source = "__p+='";
text.replace(matcher, function (match, escape, interpolate, evaluate, offset) {
source += text.slice(index, offset).replace(escaper, escapeChar);
index = offset + match.length;

if (escape) {
source += "'+\n((__t=(" + escape + "))==null?'':_esc(__t))+\n'";
} else if (interpolate) {
source += "'+\n((__t=(" + interpolate + "))==null?'':__t)+\n'";
} else if (evaluate) {
source += "';\n" + evaluate + "\n__p+='";
}

// Adobe VMs need the match returned to produce the correct offest.
return match;
});
source += "';\n";

// If a variable is not specified, place data values in local scope.
if (!settings.variable) source = "with(obj||{}){\n" + source + "}\n";

source =
"var __t,__p='',__j=Array.prototype.join," +
"print=function(){__p+=__j.call(arguments,'');};\n" +
source +
"return __p;\n";

try {
var render = new Function(settings.variable || "obj", "_", source);
} catch (e) {
e.source = source;
throw e;
}

var template = function (data) {
return render.call(this, data);
};

// Provide the compiled source as a convenience for precompilation.
var argument = settings.variable || "obj";
template.source = "function(" + argument + "){\n" + source + "}";

return template;
};
})(getGlobal(), {
evaluate: /<%([\s\S]+?)%>/g,
interpolate: /<%=([\s\S]+?)%>/g,
escape: /<%-([\s\S]+?)%>/g,
// evaluate: /<#([\s\S]+?)#>/g,
// interpolate: /<#=([\s\S]+?)#>/g,
// escape: /<#-([\s\S]+?)#>/g,
});

window.template = template;
})();

window.log = log;
Expand Down
32 changes: 26 additions & 6 deletions pages/js/popper/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,18 +96,38 @@ <h2>Simple example</h2>
}
}



// .tooltip-on-hover
document.body.addEventListener('mouseover', eventBuilder('mouseover', '.tooltip-on-hover', ({instance, show}) => {
show();
instance.update();
document.body.addEventListener('mouseover', eventBuilder('mouseover', '.tooltip-on-hover', (basket) => {
const {instance, show, tooltip} = basket;

let delay = parseInt(tooltip.getAttribute('data-tooltip-delay'), 10);

if (! (delay > 0)) {
delay = 1000;
}

basket.tooltipTimeout = setTimeout(() => {
show();
instance.update();
}, delay);
}));
document.body.addEventListener('mouseout', eventBuilder('mouseout', '.tooltip-on-hover', (basket) => {
const {instance, hide} = basket;
clearTimeout(basket.tooltipTimeout);
hide();
}));
document.body.addEventListener('focusin', eventBuilder('focusin', '.tooltip-on-hover', ({instance, show}) => {
show();
instance.update();
}));
document.body.addEventListener('mouseout', eventBuilder('mouseout', '.tooltip-on-hover', ({hide}) => hide()));
document.body.addEventListener('focusout', eventBuilder('focusout', '.tooltip-on-hover', ({hide}) => hide()));





// .tooltip-toggle-click
document.body.addEventListener('click', eventBuilder('click', `[${dataSelector}].tooltip-toggle-click`, ({tooltip, instance, show, hide}) => {
if (tooltip.classList.contains('show')) {
Expand Down Expand Up @@ -260,14 +280,14 @@ <h2>Simple example</h2>

const attachButton = parent.querySelector('.attach');

const tmp = tmpl(html);
const tmp = template(html);

let i = 0;
function add() {
const newDiv = document.createElement('div');
newDiv.innerHTML = tmp({i});
parent.appendChild(newDiv);
i += 5;
i += 4;
}

add();
Expand Down
44 changes: 11 additions & 33 deletions pages/js/popper/template.html
View file
Original file line number Diff line number Diff line change
@@ -1,50 +1,28 @@


<button data-tooltipselector=".tooltip<%= i %>">no class - no event</button>
<div class="tooltipstyle tooltip<%= i %>">
Let's try: <%= i %>
<button>test</button>
<br />
test
.tooltip: <%= i %>
<div class="arrow" data-popper-arrow></div>
</div>

<button data-tooltipselector=".tooltip<%= i+1 %>" class="tooltip-on-hover">.tooltip-on-hover</button>
<div class="tooltipstyle tooltip<%= i+1 %>">
Let's try: <%= i+1 %>
<button>test</button>
<br />
test
<div class="arrow" data-popper-arrow></div>
</div>

<button data-tooltipselector=".tooltip<%= i+2 %>" class="tooltip-toggle-click">.tooltip-toggle-click</button>
<div class="tooltipstyle tooltip<%= i+2 %>">
Let's try: <%= i+2 %>
<img src="https://i.imgur.com/CBcGC9X.png" style="width: 100px" />
<div class="tooltipstyle tooltip<%= i+1 %>" data-tooltip-delay="500">
.tooltip-on-hover: <%= i+1 %>
<div class="arrow" data-popper-arrow></div>
</div>

<button data-tooltipselector=".tooltip<%= i+3 %>" class="tooltip-toggle-click">.tooltip-toggle-click.show</button>
<div class="tooltipstyle tooltip<%= i+3 %> show">
Let's try: <%= i+3 %>
My tooltip
<button>test</button>
<br />
test
<button data-tooltipselector=".tooltip<%= i+2 %>" class="tooltip-toggle-click">.tooltip-toggle-click.show</button>
<div class="tooltipstyle tooltip<%= i+2 %> show">
.tooltip-toggle-click.show: <%= i+2 %>
<div class="arrow" data-popper-arrow></div>
</div>

<button data-tooltipselector=".tooltip<%= i+4 %>" class="tooltip-hide-on-click-outside">
<button data-tooltipselector=".tooltip<%= i+3 %>" class="tooltip-hide-on-click-outside">
.tooltip-hide-on-click-outside
</button>
<div class="tooltipstyle tooltip<%= i+4 %>">
Let's try: <%= i+4 %>
<br />
<button>test</button>
<br />
test
<div class="tooltipstyle tooltip<%= i+3 %>">
.tooltip-hide-on-click-outside: <%= i+3 %>
<button onclick="alert('action')">run</button>
<div class="arrow" data-popper-arrow></div>
</div>
<br />
<br />
<br />

0 comments on commit d8cafea

Please sign in to comment.