<commit_before><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>〇 - A Lightweight Framework</title>
    <script type="application/javascript" src="o.min.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-1.19.0.css">
    <link rel="stylesheet" href="index.css">
</head>
<body class="body">
    <aside class="sidebar">
        <nav id="navigation"></nav>
    </aside>
    <article class="content">
        <header class="page-header">
            <h1 class="page-header-title">〇.js <span class="version js-version"></span></h1>
            <div class="page-header-subtitle">A light framework. Because everyone should have one.</div>
        </header>
        <section>
            <h2>Basics</h2>
            <div>
                〇 was written with three things in mind -
                <ol type="i">
                    <li>Learning by experience, which I encourage anyone to do</li>
                    <li>Having a framework doing exactly what I need, and I know how it's being done</li>
                    <li>finally, having a framework's design as I believe it should</li>
                </ol>
            </div><p>
                I believe in clear separation between code (Javascript), structure (HTML) and style (CSS).
                Having this distinction means the code can easily be replaced with having minimum change in the structure and the style, and vice versa.
                This means the code shouldn't dictate which tag is being used and all relevant style alternation are via classes that have a "js-" prefix.
            </p><p>
                I tried to be compatible with <a href="https://github.com/airbnb/javascript" target="_blank" title="Read the code styling guide">AirBNB code styling guide</a> as I agree most notes will result with better, more readable code that is less likely to contain bugs.
            </p><p>
                When possible, methods will return the called object in order to allow chaining, for example: <pre>〇.CSS.add(〇.ELM.myButton,'green').add(〇.ELM.button2,'red')</pre>
            </p>
        </section>
        <section>
            <h2>Download</h2>
            <ul class="downloads">
                <li><a href="o.js">Uncompressed</a> - (19KB)</li>
                <li><a href="o.js">Compressed</a> - (7KB)</li>
            </ul>
        </section>
        <section>
            <h2>Unit Tests</h2>
            <div id="qunit" class="unit-tests"></div>
            <div id="qunit-fixture"></div>
        </section>
        <section>
            <h2>EVT</h2>
            <i>EVT</i> can be used to listen and to dispatch events. <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event" target="_blank" title="Read more about events at mozilla website">Event</a>-dispatching is a great way to tell other components that something happened.
            <ul class="methods">
                <li>
                    <h4>subscribe<span class="parameters">(sEventName,fHandler)</span></h4>
                    <pre>〇.EVT.subscribe("anEvent",foo)</pre>
                    <div>Whenever <i>anEvent</i> is dispatched, the function <i>foo</i> will be called with event as an input.</div>
                </li>
                <li>
                    <h4>unsubscribe<span class="parameters">(sEventName,fHandler)</span></h4>
                    <pre>〇.EVT.unsubscribe("anEvent",foo)</pre>
                    <div>Stop calling <i>foo</i> when <i>anEvent</i> is dispatched.</div>
                </li>
                <li>
                    <h4>dispatch<span class="parameters">(sEventName)</span></h4>
                    <pre>〇.EVT.dispatch("anEvent")</pre>
                    <div>Calls an event.</div>
                </li>
                <li>
                    <h4>getDispatcher<span class="parameters">(sEventName[, fHandler])</span></h4>
                    <pre>dButton.onclick = 〇.EVT.getDispatcher("anEvent")</pre>
                    <div>Returns a function that when triggered, will dispatch an event. if <i>fHandler</i> is provided, it will be subscribed to the event.</div>
                </li>
            </ul>
        </section>
        <section>
            <h2>DOM</h2>
            <div>
                <i>DOM</i> is use to make changes in the <a href="http://www.w3.org/DOM/" target="_blank" title="Read more about the DOM at w3">Document Object Model</a>, which is how the browser keep the page's information.
                It is important to emphasize that ideally HTML code should not be written within the code. The use of templates is encouraged.
            </div>
            <ul class="methods">
                <li>
                    <h4>create<span class="parameters">(sTag,oAttribtues,sInnerText)</span></h4>
                    <pre>〇.DOM.create('a',{href:'#top'},'back to top')</pre>
                    <div>Return a DOM element with the provided attributes.</div>
                </li>
                <li>
                    <h4>parse<span class="parameters">(sHTML)</span></h4>
                    <pre>〇.DOM.parse('&lt;a href="#top"&gt;back to top&lt;/a&gt;')</pre>
                    <div>Converts the provided string to a DOM element.</div>
                </li>
                <li>
                    <h4>insertBefore<span class="parameters">(dElement,dNewElement)</span></h4>
                    <pre>〇.DOM.insertBefore(〇.ELM.homeLink,contactLink)</pre>
                    <div>Inserts a new DOM element before a given as a <i>sibling</i>.</div>
                </li>
                <li>
                    <h4>insertAfter<span class="parameters">(dElement,dNewElement)</span></h4>
                    <pre>〇.DOM.insertAfter(〇.ELM.homeLink,contactLink)</pre>
                    <div>Inserts a new DOM element after a given as a <i>sibling</i>.</div>
                </li>
                <li>
                    <h4>prepend<span class="parameters">(dElement,dNewElement)</span></h4>
                    <pre>〇.DOM.prepend(〇.ELM.menu,contactLink)</pre>
                    <div>Inserts a new DOM element to another DOM element as its <i>first child</i>.</div>
                </li>
                <li>
                    <h4>append<span class="parameters">(dElement,dNewElement)</span></h4>
                    <pre>〇.DOM.append(〇.ELM.menu,contactLink)</pre>
                    <div>Inserts a new DOM element to another DOM element as its <i>last child</i>.</div>
                </li>
                <li>
                    <h4>remove<span class="parameters">(dElement)</span></h4>
                    <pre>〇.DOM.remove(〇.ELM.homeLink)</pre>
                    <div>Removes a DOM element.</div>
                </li>
            </ul>
        </section>
        <section>
            <h2>ELM</h2>
            <div>
                <i>ELM</i> provides a list of all DOM elements that has an ID, thus providing a quick-list to anything that can be found using <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById" target="_blank" title="Read more about getElementById at mozilla website">document.getElementById()</a>.<br/>
                It also provides a function to query several DOM elements and perform bulk actions on them.
            </div>
            <ul class="methods">
                <li>
                    <h4>refresh<span class="parameters">()</span></h4>
                    <pre>〇.ELM.refresh</pre>
                    <div>Updates the DOM elements list.</div>
                </li>
                <li>
                    <h4>observe<span class="parameters">(isEnabled)</span></h4>
                    <pre>〇.ELM.observe(true)</pre>
                    <div><i>Observe</i> is an event-listening to changes in the DOM which automatically refreshes the <i>〇.ELM</i> list. As it might influence performance, it is possible to disable and enable it.</div>
                </li>
                <li>
                    <h4>per<span class="parameters">()</span></h4>
                    <pre>〇.ELM.per('.button').add('enabled');</pre>
                    <div><i>Per</i> returns a list of elements that corresponds to a provided query.
                        Additionally, this returned list has the following methods:
                        <ul class="methods">
                            <li>
                                <h4>each<span class="parameters">(fPerItem)</span></h4>
                                <pre>〇.ELM.per('.user').each(function (dElement) {...});</pre>
                                <div>Iterates the DOM elements using a forEach function.</div>
                            </li>
                            <li>
                                <h4>remove<span class="parameters">()</span></h4>
                                <pre>〇.ELM.per('.user').remove();</pre>
                                <div>Removes all the DOM elements in the list from the page.</div>
                            </li>
                            <li>
                                <h4>html<span class="parameters">(sNewInnerHTML)</span></h4>
                                <pre>〇.ELM.per('.js-version').html(〇.VER.framework);</pre>
                                <div>updates all DOM elements' innerHTML.</div>
                            </li>
                            <li>
                                <h4>useAsTemplate<span class="parameters">()</span></h4><commit_msg>Small fix in "per" documentation<commit_after><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>〇 - A Lightweight Framework</title>
    <script type="application/javascript" src="o.min.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-1.19.0.css">
    <link rel="stylesheet" href="index.css">
</head>
<body class="body">
    <aside class="sidebar">
        <nav id="navigation"></nav>
    </aside>
    <article class="content">
        <header class="page-header">
            <h1 class="page-header-title">〇.js <span class="version js-version"></span></h1>
            <div class="page-header-subtitle">A light framework. Because everyone should have one.</div>
        </header>
        <section>
            <h2>Basics</h2>
            <div>
                〇 was written with three things in mind -
                <ol type="i">
                    <li>Learning by experience, which I encourage anyone to do</li>
                    <li>Having a framework doing exactly what I need, and I know how it's being done</li>
                    <li>finally, having a framework's design as I believe it should</li>
                </ol>
            </div><p>
                I believe in clear separation between code (Javascript), structure (HTML) and style (CSS).
                Having this distinction means the code can easily be replaced with having minimum change in the structure and the style, and vice versa.
                This means the code shouldn't dictate which tag is being used and all relevant style alternation are via classes that have a "js-" prefix.
            </p><p>
                I tried to be compatible with <a href="https://github.com/airbnb/javascript" target="_blank" title="Read the code styling guide">AirBNB code styling guide</a> as I agree most notes will result with better, more readable code that is less likely to contain bugs.
            </p><p>
                When possible, methods will return the called object in order to allow chaining, for example: <pre>〇.CSS.add(〇.ELM.myButton,'green').add(〇.ELM.button2,'red')</pre>
            </p>
        </section>
        <section>
            <h2>Download</h2>
            <ul class="downloads">
                <li><a href="o.js">Uncompressed</a> - (19KB)</li>
                <li><a href="o.js">Compressed</a> - (7KB)</li>
            </ul>
        </section>
        <section>
            <h2>Unit Tests</h2>
            <div id="qunit" class="unit-tests"></div>
            <div id="qunit-fixture"></div>
        </section>
        <section>
            <h2>EVT</h2>
            <i>EVT</i> can be used to listen and to dispatch events. <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event" target="_blank" title="Read more about events at mozilla website">Event</a>-dispatching is a great way to tell other components that something happened.
            <ul class="methods">
                <li>
                    <h4>subscribe<span class="parameters">(sEventName,fHandler)</span></h4>
                    <pre>〇.EVT.subscribe("anEvent",foo)</pre>
                    <div>Whenever <i>anEvent</i> is dispatched, the function <i>foo</i> will be called with event as an input.</div>
                </li>
                <li>
                    <h4>unsubscribe<span class="parameters">(sEventName,fHandler)</span></h4>
                    <pre>〇.EVT.unsubscribe("anEvent",foo)</pre>
                    <div>Stop calling <i>foo</i> when <i>anEvent</i> is dispatched.</div>
                </li>
                <li>
                    <h4>dispatch<span class="parameters">(sEventName)</span></h4>
                    <pre>〇.EVT.dispatch("anEvent")</pre>
                    <div>Calls an event.</div>
                </li>
                <li>
                    <h4>getDispatcher<span class="parameters">(sEventName[, fHandler])</span></h4>
                    <pre>dButton.onclick = 〇.EVT.getDispatcher("anEvent")</pre>
                    <div>Returns a function that when triggered, will dispatch an event. if <i>fHandler</i> is provided, it will be subscribed to the event.</div>
                </li>
            </ul>
        </section>
        <section>
            <h2>DOM</h2>
            <div>
                <i>DOM</i> is use to make changes in the <a href="http://www.w3.org/DOM/" target="_blank" title="Read more about the DOM at w3">Document Object Model</a>, which is how the browser keep the page's information.
                It is important to emphasize that ideally HTML code should not be written within the code. The use of templates is encouraged.
            </div>
            <ul class="methods">
                <li>
                    <h4>create<span class="parameters">(sTag,oAttribtues,sInnerText)</span></h4>
                    <pre>〇.DOM.create('a',{href:'#top'},'back to top')</pre>
                    <div>Return a DOM element with the provided attributes.</div>
                </li>
                <li>
                    <h4>parse<span class="parameters">(sHTML)</span></h4>
                    <pre>〇.DOM.parse('&lt;a href="#top"&gt;back to top&lt;/a&gt;')</pre>
                    <div>Converts the provided string to a DOM element.</div>
                </li>
                <li>
                    <h4>insertBefore<span class="parameters">(dElement,dNewElement)</span></h4>
                    <pre>〇.DOM.insertBefore(〇.ELM.homeLink,contactLink)</pre>
                    <div>Inserts a new DOM element before a given as a <i>sibling</i>.</div>
                </li>
                <li>
                    <h4>insertAfter<span class="parameters">(dElement,dNewElement)</span></h4>
                    <pre>〇.DOM.insertAfter(〇.ELM.homeLink,contactLink)</pre>
                    <div>Inserts a new DOM element after a given as a <i>sibling</i>.</div>
                </li>
                <li>
                    <h4>prepend<span class="parameters">(dElement,dNewElement)</span></h4>
                    <pre>〇.DOM.prepend(〇.ELM.menu,contactLink)</pre>
                    <div>Inserts a new DOM element to another DOM element as its <i>first child</i>.</div>
                </li>
                <li>
                    <h4>append<span class="parameters">(dElement,dNewElement)</span></h4>
                    <pre>〇.DOM.append(〇.ELM.menu,contactLink)</pre>
                    <div>Inserts a new DOM element to another DOM element as its <i>last child</i>.</div>
                </li>
                <li>
                    <h4>remove<span class="parameters">(dElement)</span></h4>
                    <pre>〇.DOM.remove(〇.ELM.homeLink)</pre>
                    <div>Removes a DOM element.</div>
                </li>
            </ul>
        </section>
        <section>
            <h2>ELM</h2>
            <div>
                <i>ELM</i> provides a list of all DOM elements that has an ID, thus providing a quick-list to anything that can be found using <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById" target="_blank" title="Read more about getElementById at mozilla website">document.getElementById()</a>.<br/>
                It also provides a function to query several DOM elements and perform bulk actions on them.
            </div>
            <ul class="methods">
                <li>
                    <h4>refresh<span class="parameters">()</span></h4>
                    <pre>〇.ELM.refresh</pre>
                    <div>Updates the DOM elements list.</div>
                </li>
                <li>
                    <h4>observe<span class="parameters">(isEnabled)</span></h4>
                    <pre>〇.ELM.observe(true)</pre>
                    <div><i>Observe</i> is an event-listening to changes in the DOM which automatically refreshes the <i>〇.ELM</i> list. As it might influence performance, it is possible to disable and enable it.</div>
                </li>
                <li>
                    <h4>per<span class="parameters">()</span></h4>
                    <pre>var elements = 〇.ELM.per('.button');</pre>
                    <div><i>Per</i> returns a list of elements that corresponds to a provided query.
                        Additionally, this returned list has the following methods:
                        <ul class="methods">
                            <li>
                                <h4>each<span class="parameters">(fPerItem)</span></h4>
                                <pre>〇.ELM.per('.user').each(function (dElement) {...});</pre>
                                <div>Iterates the DOM elements using a forEach function.</div>
                            </li>
                            <li>
                                <h4>remove<span class="parameters">()</span></h4>
                                <pre>〇.ELM.per('.user').remove();</pre>
                                <div>Removes all the DOM elements in the list from the page.</div>
                            </li>
                            <li>
                                <h4>html<span class="parameters">(sNewInnerHTML)</span></h4>
                                <pre>〇.ELM.per('.js-version').html(〇.VER.framework);</pre>
                                <div>updates all DOM elements' innerHTML.</div>
                            </li>
                            <li>
                                <h4>useAsTemplate<span class="parameters">()</span></h4>
{'fraction_non_alphanumeric': 0.1361976824170591, 'fraction_numerical': 0.006455368008889359, 'mean_word_length': 1.6392961876832846, 'pattern_counts': {'":': 0, '<': 607, '<?xml version=': 0, '>': 607, 'https://': 6, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 4, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1290853', 'n_tokens_mistral': 5494, 'n_tokens_neox': 5153, 'n_words': 1351}