|
~~~php
echo toHtml(beautify(document(
html(lang('en'))(
head()(
meta(charset('utf8')),
title()(text('Hello World!'))
),
body()(
h1()(text('Hello World!'))
)
)
)));
~~~
|
~~~html
Hello World!</titel>
</head>
<body>
<h3>Hello World!</h3>
</body>
</html>
~~~
</td>
</tr>
</table>
<p>Hopefully, the example reminds you of ordinary HTML5.</p>
<p>Let's see how Teein/Html syntax is similar to HTML5:</p>
<ul>
<li>We have tagnames: <code>html</code>, <code>head</code>, <code>body</code>, <code>h1</code>, ...</li>
<li>We have attributes: <code>lang</code>, <code>charset</code>, ...</li>
</ul>
<p>Notice, what is different from HTML5:</p>
<ul>
<li>We use parenthesis not angle-brackets and they're placed in different positions. We use one pair of parenthesis to wrap attributes and another pair of parenthesis to wrap the children of an element.</li>
<li>We don't have closing-tags.</li>
<li>We can use PHP-expressions inside our templates and they will be evaluated.</li>
<li>We need to import our dependencies at the top of our PHP-file. We've collapsed the top section from the above example, this is an excellent moment to expand the hidden contents and discover what's inside.</li>
</ul>
<p>There is more to spot in our example:</p>
<ul>
<li>Templates are minified by default, we use the <code>beautify</code>-function to indent our output.</li>
<li>We use the <code>toHtml</code>-function to get a string-representation from our Virtual DOM. </li>
</ul>
<h3>Composable Templates</h3>
<p>The "Hello World"-example looks managable, but for real world application templates tend to be much more involved. To cope with the growing complexity of your application we make use of an earth-old concept: composability. The idea is to group simple templates together to get bigger but equally simple templates. For instance, many things in our example look like typical HTML5-boilerplate. Let's see how we could refactor the example so that we can reuse most of the template and adapt the flexible parts to other scenarios.</p>
<p>The primary ingredient for composable templates is the <code>function</code>. Here is the roadmap of what we are going to do for refactoring: We will separate the hello-world-template into two functions: Let's call 'em <code>boilerplate</code> and <code>content</code>. The <code>boilerplate</code>-function takes one arguement <code>$content</code> and wraps it into a HTML5-skeleton exactly like the one above. The <code>content</code>-function does not take any arguements but simply returns the headline. Finally, we're going to glue the two functions together to get the same output as in our orignal example.</p>
<details>
<summary><i>Show me the head section of this script</i></summary>
~~~php
<?php
declare(strict_types = 1);
namespace Teein\Html\Example;
use Teein\Html\VirtualDom\{Node,Document};
use function Teein\Html\{Beautifier\beautify, Document\document};
use function Teein\Html\Elements\{html,head,meta,title,body};
use function Teein\Html\Attributes\{lang,charset};
~~~
</details>
<pre><code class="language-php">function boilerplate (Node $content) : Document
{
return beautify(
document(
html(lang('en'))(
head()(
meta(charset('utf8')),
title()(
text('Hello World!')
)
),
body()($content)
)
);
}</code></pre>
<p>Let's have a small look at the new things that are packed in this snippet before we continue with the <code>content</code>-function. You probably noticed the type-annotations or type-hints like they're often called in PHP. They're another great feature of Teein/Html. The signature of the function makes clear that it will only accept a single <code>Node</code> as its input and it will return a <code>Document</code>. A <code>Node</code> is either an <code>Element</code>, like <code>h1</code> or <code>span</code>, a <code>Text</code> or a <code>Comment</code>. All factory functions in our library are type-annotated and they ensure that you don't compose incompatible functions together. This should suffice for the moment. Let's return to our running example. So far we have written the <code>boilerplate</code>-function, time to turn to the <code>content</code>-function, which should be easy now:</p>
<details>
<summary><i>Show me the head section of this script</i></summary>
~~~php
<?php
declare(strict_types = 1);
namespace Teein\Html\Example;
use Teein\Html\VirtualDom\Element;
use function Teein\Html\Text\text;
use function Teein\Html\Elements\h1;
~~~
</details>
<pre><code class="language-php">function content () : Element
{
return h1()(text("Hello World!"));
}</code></pre>
<p>By the way, we sometimes call functions like <code>boilerplate</code> and <code>content</code> view-helpers. Notice how simple view-helpers are: They're just functions. Mappings from inputs to outputs. There is no abstract base class that we need to inherit or an interface that we must implement. It's just that simple: functions. Now, it should be clear how we can compose <code>boilerplate</code> and <code>content</code> together to get the same output as from our original "Hello World"-exmaple. Just to be sure, here it is, our new-born hello-world:</p>
<details>
<summary><i>Show me the head section of this script</i></summary>
~~~php
<?php
declare(strict_types = 1);
namespace Teein\Html\Example;
use function Teein\Html\ToHtml\toHtml;
~~~
</details>
<pre><code class="language-php">echo toHtml(
boilerplate(
content()
)
);</code></pre>
<p>... functions. Hope you appreciate them right now :)</p>
<h3>Conditional Branches</h3>
<p>Unlike other templating-engines Teein/Html does not introduce special syntax for conditional branches or loops. Instead, we use PHPs built-in language features for these kind of things. However, the functional interface of Teein/Html wants <em>expressions</em> not <em>statements</em>. For example PHPs <code>if () {} else {}</code>-construct is a statement, but the ternary-operator <code>$cond ? $foo : $bar</code> is an expression (if you don't like the flaky syntax of the ternary operator, here is a reminder that you can always define your own view-helpers and give them expressive names).</p>
<p>Let's see how this works in practice. Here is how we would add a personalized greeting to our template. For brevity we're going to modify our existing <code>content</code>-function.</p>
<details>
<summary><i>Show me the head section of this script</i></summary>
~~~php
<?php
declare(strict_types = 1);
namespace Teein\Html\Example;
use Teein\Html\VirtualDom\Element;
use function Teein\Html\Text\text;
use function Teein\Html\Elements\h1;
~~~
</details>
<pre><code class="language-php">function content () : Element
{
return h1() (
text(
isset($_GET['name'])
? "Hello {$_GET['name']}"
: "Hello World!"
)
);
}</code></pre>
<p>Notice, that we didn't put <code>htmlspecialchars</code> around <code>$_GET['name']</code>. This would be a security issue in most other templating-engines. Teein/Html however automatically escapes any special character and defuses the bomb when the template is rendered. Also, this saves you some typing and let's you focus on the content.</p>
<h3>Loops</h3>
<p>The restriction for <code>if</code>-statements also holds for <code>for</code>- and <code>while</code>-loops. We use the cooler <code>map</code>/<code>reduce</code>-functions to loop. Again, let's have a look at some code. The "Hello World"-example, however, got me bored. So let's think of something fancier, let's make a list view of some of my favorite comics. For this sake, assume we have a model
of a comic that implements the following interface:</p>
<details>
<summary><i>Show me the head section of this script</i></summary>
~~~php
<?php
declare(strict_types = 1);
namespace Teein\Html\Example;
~~~
</details>
<pre><code class="language-php">interface Comic
{
public function getTitle() : string;
public function getSuperhero() : string;
public function getVillain() : string;
}</code></pre>
<p>Furthermore, let's assume that an array of such comics is provided in the variable <code>$comics</code>. Here is how such a template could look like:</p>
<details>
<summary><i>Show me the head section of this script</i></summary>
~~~php
<?php
declare(strict_types = 1);
namespace Teein\Html\Example;
use Teein\Html\VirtualDom\Element;
use function Teein\Html\Text\text;
use function Teein\Html\Elements\{ul,li,span};
use function Teein\Html\Attributes\{class_};
~~~
</details>
<pre><code class="language-php">function comics (array $comics) : Element
{
return ul () (
...array_map(function (Comic $comic) : Element {
return li () (
span(class_('title'))(text($comic->getTitle())),
span(class_('superhero'))(text($comic->getSuperhero())),
span(class_('villlain'))(text($comic->getVillain()))
);
}, $comics)
)
}</code></pre>
<p>The <a target="_blank" href="http://php.net/manual/en/migration56.new-features.php#migration56.new-features.splat">splat-operator</a> (<code>...</code>) is mandatory here beacaue the function returned from <code>ul()</code> does not accept an array but a variadic parameter-sequence where each parameter must be of type <code>Node</code>. The splat-operator takes an array and produces the desired parameter-sequence.</p>
<p>Protip: Nesting anonymous functions can become cumbersome. On the positive site the anonymous function offers us a hint where we could split our template into separate view-helpers. Here is a refactored version:</p>
<details>
<summary><i>Show me the head section of this script</i></summary>
~~~php
<?php
declare(strict_types = 1);
namespace Teein\Html\Example;
use Teein\Html\VirtualDom\Element;
use function Teein\Html\Text\text;
use function Teein\Html\Elements\{li,span};
use function Teein\Html\Attributes\{class_};
~~~
</details>
<pre><code class="language-php">function comic (Comic $comic) : Element
{
return li () (
span(class_('title'))(text($comic->getTitle())),
span(class_('superhero'))(text($comic->getSuperhero())),
span(class_('villlain'))(text($comic->getVillain()))
);
}</code></pre>
<details>
<summary><i>Show me the head section of this script</i></summary>
~~~php
<?php
declare(strict_types = 1);
namespace Teein\Html\Example;
use Teein\Html\VirtualDom\Element;
use function Teein\Html\Elements\ul;
~~~
</details>
<pre><code class="language-php">function comics (array $comics) : Element
{
return ul () (
...array_map('comic', $comics)
);
}</code></pre>
<h3>Namespaces</h3>
<p>Teein/Html does not register any global definitions, that means that you have to import everything you are going to use in your template explicitly at the beginning of your script. Most editors today offer automatic tools to simplify this process. However, some tools find it hard detect functions inside your namespaces. If you are on coffein and cannot wait for better tooling you can always include a complete list of imports at the beginning of your file. Here it is:</p>
<pre><code class="language-php"><?php
use Teein\Html\VirtualDom\{Attribute,Comment,Document,Element,Node,Text};
use function Teein\Html\{Beautifier\beautify,ToHtml\toHtml,Document\document,Text\text};
use function Teein\Html\Elements\{a,abbr,address,area,article,aside,audio,b,base,bdi,bdo,blockquote,body,br,button,canvas,caption,cite,code,col,colgroup,data,datalist,dd,del,details,dfn,dialog,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,label,legend,li,link,main,map,mark,math,menu,meta,meter,nav,noscript,object_,ol,optgroup,option,output,p,param,picture,pre,progress,q,rp,rt,ruby,s,samp,script,section,select,slot,small,source,span,strong,style,sub,summary,sup,svg,table,tbody,td,template,textarea,tfoot,th,thead,time,title,tr,track,u,ul,var_,video,wbr};
use function Teein\Html\Attributes\{abbr_,accept,accept_charset,accesskey,action,allowfullscreen,allowpaymentrequest,allowusermedia,alt,as_,async,autocomplete,autofocus,autoplay,charset,checked,cite_,class_,color,cols,colspan,content,contenteditable,controls,coords,crossorigin,data_,datetime,default_,defer,dir,dirname,disabled,download,draggable,enctype,for_,form_,formaction,formenctype,formmethod,formnovalidate,formtarget,headers,height,hidden,high,href,hreflang,http_equiv,id,inputmode,integrity,is,ismap,itemid,itemprop,itemref,itemscope,itemtype,kind,label_,lang,list_,loop,low,manifest,max,maxlength,media,method,min,minlength,multiple,muted,name,nomodule,nonce,novalidate,objectData,open,optimum,pattern,ping,placeholder,playsinline,poster,preload,readonly,referrerpolicy,rel,required,reversed,rows,rowspan,sandbox,scope,selected,shape,size,sizes,slot_,span_,spellcheck,src,srcdoc,srclang,srcset,start,step,style_,tabindex,target,title_,translate,type,typemustmatch,updateviacache,usemap,value,width,workertype,wrap};</code></pre>
<h3>Naming Deviations</h3>
<p>We tried to give every HTML5 element and attribute a factory with the same name. However, there are some cases where this is not possible. PHP reserves some words, which means we cannot use them as a name for a factory. Furthermore, HTML5 sometimes uses the same name for an attribute and an element. Here is a complete list of factories with unconventional names and their output.</p>
<table>
<tr>
<th>Teein/Html</th>
<th>HTML5</th>
</tr>
<tr>
<td>
~~~php
object_()()
var_()()
th(abbr_('anyalternativelabel'))()
form(accecptcharset('utf8'))()
link(as_('fetch'))
q(cite_('https://example.com'))()
div(class_('anyclass'))()
object_(odata('https://example.com'))()
div(data('custom', 'anyvalue'))()
track(default_('default'))
output(for_('anyid'))()
button(form_('anyid'))()
option(label_('anylabel'))()
input(list_('anyid'))
div(slot_('anyslot'))()
col(span_('42'))
div(style_('color: pink'))()
div(title_('anytitle'))()
meta(httpequiv('anyhttpheader'))
~~~
</td>
<td>
~~~html
<object></object>
<var></var>
<th abbr="anyalternativelabel"></th>
<form accept-charset="utf8">
<link as="fetch">
<q cite="https://example.com"></q>
<div class="anyclass">
<object data="https://example.com"></object>
<div data-custom="anyvalue">
<track default="default"></track>
<output for="anyid"></output>
<button form="anyid"></button>
<option label="anylabel"></option>
<input list="anyid">
<div slot="anyslot"></div>
<col span="42">
<div style="color: pink"></div>
<div title="anytitle"></div>
<meta http-equiv="anyhttpheader">
~~~
</td>
</tr>
</table>
<h3>Further Reading & Getting Help</h3>
<p>This guide is a very early draft and will be extended in the future. The goal is to document every single feature and some best-practices related to Teein/Html. This is, however, not a one-day job. In the meantime, feel free to discover the code-base which is carefully documented itself. If you have a specific question we're eager to answer it, just <a target="_blank" href="https://github.com/Teein/Html/issues/new">open an issue</a>.</p>
<h3>Contribution</h3>
<p>In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation. Please read our full Code of Coduct.</p></div><hr/> <h2 id="all-versions">All versions of html with dependencies</h2>
<div id="select-php-version" class="input-group" title="PHP version which will be used to build the Composer package.">
<span class="input-group-addon">PHP Build Version</span>
<select name="phpVersion" autocomplete="off" class="custom-select form-control">
<option value='8.0.21'>8.0.21</option><option value='7.3.33'>7.3.33</option> </select>
</div>
<div id="select-package-version" class="input-group" title="Which version of the package should be downloaded.">
<span class="input-group-addon" id="select-package-version-label">Package Version</span>
<select
class="custom-select form-control"
aria-describedby="select-package-version-label"
autocomplete="off"
data-package="html"
data-vendor="teein"
data-latest-version="1.0.1.0"
>
<option
value="1.0.1.0"
selected="selected" >
v1.0.1 </option>
<option
value="1.0.0.0"
>
v1.0.0 </option>
</select>
</div>
<div id="accordion" role="tablist" aria-multiselectable="true">
<div class="card">
<div class="card-header" role="tab" id="heading">
<h3 class="mb-0">
<a data-toggle="collapse" data-parent="#accordion"
href="#collapse" aria-expanded='true'
aria-controls="collapse">
Version v1.0.1 <span
class="date">Release 10. Nov 2017</span>
</a>
<p class="hidden-md-up"></p>
<label class="float-right"> <button class="btn btn-phplibs btn-sm difference-btn"><i class="fa fa-question-circle"></i></button>
</label>
<label class="radio-inline float-right">
<input type="radio" name="download_type"
value="CREATE_PROJECT" >
create-project</label>
<label class="radio-inline float-right">
<input type="radio" name="download_type"
value="REQUIRE" > require</label>
<label class="float-right option-advice">
0 people choosed <em>require</em> and<br/>0 people choosed <em>create-project</em>.
</label>
<div class="float-right">
<button type="button"
class="btn btn-phplibs float-right add-to-project-btn"
data-name="teein/html" data-version="1.0.1.0"
data-vendor="teein">
<i class="fa fa-plus-circle"></i> Add to Project
</button>
<div class="clearfix" ></div>
<a href rel="nofolow"
data-package="html" data-vendor="teein"
data-version="1.0.1.0"
class="btn btn-phplibs float-right download-btn"><i class="fa fa-download"></i> Download
</a>
</div>
</h3>
<img class="latest-version" src="/img/latest_version.jpg" alt="Download latest version of html from vendor teein">
</div>
<div id="collapse" class="collapse"
role="tabpanel" aria-labelledby="heading">
<div class="card-block">
<strong>Requires</strong>
<strong>php</strong> Version
<em>^7.1</em><br/>
</div>
</div>
</div>
</div>
<span onclick="ga('send', 'event', 'Client Download detail page', 'Client Download detail page')" >Composer command for our command line client (<a target="_blank" href="/php-composer-cloud-build-server">download client</a>)</span>
<input type="text" class="form-control copy-to-clipboard" value="php-download require teein/html">
<em class="mb-2 d-block">This client runs in each environment. You don't need a specific PHP version etc. The first 20 API calls are free.</em>
<span>Standard composer command</span>
<input type="text" class="form-control copy-to-clipboard" value="composer require teein/html">
<p></p>
<p></p><h2 id='files'>The package teein/html contains the following files</h2><input id='packageSearch' name='packageSearch' type='text' placeholder='Search files' class='form-control' style='display:none;' /><div class='file-wrapper'><span><i class='fa fa-spinner fa-pulse fa-2x fa-fw'></i> Loading the files please wait ....</span></div><div class='clearfix' ></div><p></p> <script>
function initVersionSpecificActions() {
$(".difference-btn").click(function (e) {
showDialog("<em>require</em>" +
"<br/>If this library should be a part of your project, then choose require. " +
"It results in a zip file, which contains a vendor folder. In this vendor folder will be the library you downloaded. " +
"There is a dummy index.php as a example to integrate the library." +
"<br/><br/>" +
"<em>create-project</em>" +
"<br/>This option should be choosed, if you want to create a project at top of this code. " +
"This option should be choosed if you download a PHP framework like Laravel, CakePHP, ...");
});
var downloadButton;
var chosenDownloadType;
var chosenPhpVersion;
var loadingModal;
var fileCheckInterval;
var isFileCheckRequestRunning = false;
$(".download-btn").click(function (e) {
e.preventDefault();
downloadButton = $(e.target).closest("a");
chosenDownloadType = downloadButton.closest('.card').find("input[name^=download_type]:checked").val();
chosenPhpVersion = $("select[name='phpVersion']").val();
if (!chosenDownloadType) {
showDialog("Please choose a download type require or create-project");
return;
}
loadingModal = $('#download-loading-dialog');
setLoadingModalContent(
'<i class="fa fa-spinner fa-pulse fa-2x fa-fw"></i> Loading, please wait ...',
'Before you can download the PHP files, the dependencies should be resolved. <strong>This can take a few minutes.</strong> Please be patient.'
);
loadingModal.modal('show');
checkIfFileIsReady();
fileCheckInterval = setInterval(checkIfFileIsReady, 3000);
});
var checkIfFileIsReady = function () {
if (isFileCheckRequestRunning) {
return;
}
if (!apiKey) {
window.location.href = "/users/register?rel=" + encodeURIComponent(window.location.href);
return;
}
$.ajax(downloadDomain + '/api/v1/packages/start-download', {
data: {
version: downloadButton.data("version"),
package: downloadButton.data("package"),
vendor: downloadButton.data("vendor"),
downloadType: chosenDownloadType,
phpVersion: chosenPhpVersion
},
headers: {
"API-Key": apiKey
},
type: 'GET',
beforeSend: function () {
isFileCheckRequestRunning = true;
},
complete: function (xhr) {
isFileCheckRequestRunning = false;
var isError = true;
var response = null;
if (xhr.status === 200) {
response = JSON.parse(xhr.responseText);
if (typeof response.status === 'string') {
if (response.status === 'complete' && typeof response.url === 'string') {
clearFileCheckInterval();
location.href = response.url;
return;
} else if (response.status === 'pending') {
isError = false;
}
}
} else if (xhr.status === 403) {
response = JSON.parse(xhr.responseText);
switch (response.code) {
case "no_subscription":
window.location.href = "/billing?no_subscription=1";
break;
}
return;
}
if (isError) {
clearFileCheckInterval();
setLoadingModalContent('<i class="fa fa-exclamation-triangle"></i> Internal error', 'Please try again later or <a href="mailto:jwwi2013@gmail.com">contact us</a>.', true);
loadingModal.find('.close').removeClass('hidden');
setTimeout(function () {
loadingModal.modal('hide');
}, 10 * 1000);
}
}
});
};
function clearFileCheckInterval() {
clearInterval(fileCheckInterval);
fileCheckInterval = null;
}
function setLoadingModalContent(titleHtml, bodyHtml, isError) {
var modalTitle = loadingModal.find('.modal-title');
var modalBody = loadingModal.find('.modal-body');
var errorClass = 'danger';
modalTitle.html(titleHtml);
modalBody.html(bodyHtml);
if (isError) {
modalTitle.addClass(errorClass);
} else {
modalTitle.removeClass(errorClass);
}
}
$(".add-to-project-btn").click(function (e) {
let buttonElement = $(e.target).closest("button");
$.ajax("/project-positions/add", {
data:
"version=" + buttonElement.data("version") +
'&name=' + buttonElement.data("name") +
'&vendor=' + buttonElement.data("vendor") +
'&add_type=REQUIRE',
type: "POST",
success: function (response) {
response = JSON.parse(response);
if (!response.success) {
switch (response.errorCode) {
case "no_active_project":
showDialog("There is no active project.");
break;
case "already_added":
showDialog("This item is already added to your project.");
break;
default:
showDialog("There was an error. Please contact the support.");
break;
}
} else {
showSuccessToast("Item was added to the project.");
}
},
error: function (xhr, status) {
if (xhr.status == 403) {
window.location.href = "/users/register";
} else {
showDialog("There was an error. Please contact the support.");
}
}
});
});
}
initVersionSpecificActions();
$(function () {
$.get(downloadDomain + "/files-list/package-ajax/teein/html", function (data) {
$(".file-wrapper").html(data);
if ($('.file-entry').length) {
$("#packageSearch").show();
}
// toggle folder on click
//TODO: code is repeated
$('.dir-entry').each(function (i, e) {
$(e).click(function () {
$(this).next().toggle();
$(this).find('.fa').toggleClass('fa-caret-down').toggleClass('fa-caret-right');
});
});
$('.collapse-all-folders').click(function () {
$('.dir-entry').each(function (i, e) {
$(e).next().hide();
$(this).find('.fa').removeClass('fa-caret-down').addClass('fa-caret-right');
});
$(this).hide();
$('.expand-all-folders').show();
});
$('.expand-all-folders').click(function () {
$('.dir-entry').each(function (i, e) {
$(e).next().show();
$(this).find('.fa').addClass('fa-caret-down').removeClass('fa-caret-right');
});
$(this).hide();
$('.collapse-all-folders').show();
});
});
});
$(".copy-to-clipboard").focus(function () {
$(this).select();
copyTextToClipboard($(this).val());
showSuccessToast("Copied to clipboard!");
ga('send', 'event', 'Copied require cmd', 'Copied require cmd');
});
$("#packageSearch").keyup(function (event) {
var indentLevels = [2, 4, 6, 8, 10, 12];
var files = $('.file-entry');
var dirs = $('.dir-entry');
var expandDirs = $('.expand-all-folders');
var collapseDirs = $('.collapse-all-folders');
files.hide();
expandDirs.click().hide();
collapseDirs.hide();
var txt = $(this).val();
files.each(function () {
if ($(this).text().toUpperCase().indexOf(txt.toUpperCase()) !== -1) {
$(this).show();
dirs.hide();
for (var i = 0; i < indentLevels.length; i++) {
if (countInstances($(this).html(), 'nbsp') === indentLevels[i]) {
$(this).addClass(indentLevels[i].toString());
break;
}
}
$(this).html($(this).html().replace(/ /g, ''));
}
});
if ($(this).val() == '') {
//TODO: simplify
$('.dir-entry').show();
$('.2').prepend(' ');
$('.4').prepend(' ');
$('.6').prepend(' ');
$('.8').prepend(' ');
$('.10').prepend(' ');
$('.12').prepend(' ');
}
if ($(this).val() === '') {
dirs.show();
expandDirs.hide();
collapseDirs.show().click();
for (var i = 0; i < indentLevels.length; i++) {
$('.' + indentLevels[i].toString()).prepend(' '.repeat(indentLevels[i]));
}
}
});
function countInstances(string, word) {
return string.split(word).length - 1;
}
$("#select-package-version select").change(function () {
const select = $(this);
const version = select.val();
$.get(
'/details/version/' + select.data('vendor') + '/' + select.data('package') + '/' + version,
function (data) {
if (typeof data === 'string' && data.length > 0) {
$("#accordion").html(data);
initVersionSpecificActions();
var latestVersionImage = $('img.latest-version');
if (version !== select.data('latest-version')) {
latestVersionImage.hide();
} else {
latestVersionImage.show();
}
}
}
);
});
</script>
</main>
<footer>
<p></p>
<div class="text-center">© 2017 - 2024 Weber Informatics LLC</div>
</footer>
<!-- ************************** DIALOGS ************************** -->
<div class="modal" id="download-loading-dialog" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel"><i class="fa fa-spinner fa-pulse fa-2x fa-fw"></i> Loading please wait ...</h5>
<button type="button" class="close hidden" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Before you can download the PHP files, the dependencies should be resolved. <strong>This can take some minutes.</strong> Please be patient.
</div>
</div>
</div>
</div>
<div class="modal fade" id="general-dialog" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
CONTENT
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-phplibs btn-sm">OK</button>
</div>
</div>
</div>
</div>
<!-- ************************** DIALOGS ************************** -->
</body>
</html>
|
