Source

Omlet / list.html

Full commit
<!DOCTYPE html>
<!--
Features:
    - Same char for both arabic and us layouts
    - same workflow for both languages
    - prepend js
        can be used to tailor scriptlets (but use as last resort) the whole point of scriptlets is that they should be simple and intutive
        withargs:if (typeof(a)=="undefined") a="No args"; alert(a);
    - easy managment, editing and backup
    - add bookmarklets easely
        + [name]
        Adding it at the help page
    
settings/help page:
    - if arabic is jumbled up, resize your text then revert
    - include pics
    - adding
        + [name]
        user page
    - information
        ? (or ؟)
    - prepending js
        can be used as input, but if you're a bkmrklt writer, don't
        
    - if there is a keywork conflict between two extensions; both use =, usinstalling one is not enough. you must reinstall the plugin you want the keyword with to work 


-->
<html>
    <head>
        <meta charset="utf-8">
        <link rel="icon" type="image/png" href="icon-16.png">
        <title>Omlet Bookmarklet Dictionary</title>
        <script type="text/javascript">
            function init(){
                for (var i in localStorage) if(i[0] != "-") document.getElementById("list").value += i+":"+localStorage[i]+"\n";
            }
            function save(){
                localStorage.clear();
                localStorage["-oriented"] = "true";
                var list = document.getElementById("list").value.split("\n");
                for (var i = 0; i < list.length; ++i) {
                    sep = list[i].indexOf(":");
                    if(sep >= 0) {localStorage[list[i].substring(0, list[i].indexOf(":"))]=list[i].substring(list[i].indexOf(":")+1);
                        console.log(list[i].substring(0, list[i].indexOf(":")), list[i].substring(list[i].indexOf(":")+1));
                    }
                }
                
            }
            localStorage["-oriented"] = "true";
            window.onbeforeunload=save;
        </script>
        <style type="text/css">
            ::-webkit-scrollbar {
                width: 5px;
            }
             
            /* Track */
            ::-webkit-scrollbar-track {
                border-radius: 3px;
                border: 1px solid #ccc;
                background: #ccc;
            }
             
            /* Handle */
            ::-webkit-scrollbar-thumb {
                border-radius: 3px;
                background: #aaa;
            }
            #list{
                position:fixed; top:2em; bottom:1.2em; border:none;
                left:52%; right:0px; white-space: nowrap; outline:none;
                line-height: 1.5em; resize: none; direction:ltr; 
                text-align:left; overflow-y: auto; overflow-x: hidden;
                padding-top:3em;
            }
            #content{
                position:fixed; top:2em; bottom:1.2em;
                right:50%; left:0px; overflow: auto;
            }

            .char { 
                border-radius: 3px; background-color: rgb(255, 224, 0); 
                padding: .4em; padding-bottom: 0px; padding-top: 0px; 
                font-size: 0.8em;
                
            }
            .key {
                border-radius: 3px; border: 1px solid rgb(204, 204, 204);
                background-color: whiteSmoke; padding: .5em;
                padding-bottom: 0px; padding-top: 0px; font-size: 0.7em;
                color: rgb(102, 102, 102); border-bottom-width: 2px;
                font-family:sans-serif; 
            }
            #text {
                width: 90%; margin-right: auto; margin-left: auto;
                -webkit-column-count: 2; -webkit-column-gap: 2em;
                column-count: 2; column-gap: 2em;
            }
            #links{
                position:fixed; bottom:1em; right:50%; left:0px;
                background-color:white; padding-left:1em; text-align:left;
                margin-right:5px; font-size:.8em;/*for the scrollbar*/
            }
            section{
                display:inline-block; width:100%;
            }
            #message{
                width: 60%; margin-left: auto; margin-right: auto;
                text-align: center;
            }
        </style>
    </head>
    <body onload="init()" dir="RTL" lang="ar">
        <textarea id="list" oncharup="save()" onblur="save()" dir="ltr" lang="en" spellcheck="false"></textarea>
        <div id="content">
            <img src="icon-128.png" alt="" style="display:block;width:128px;margin-left:auto;margin-right:auto">
            <div id="message">السلام عليكم. الإضافة جاهزة للإستخدام. احرص على <a href="https://bitbucket.org/seininn/omlet/issues/new">التبلغ</a> عن أي علة تواجهها حتى يتم إصلاحها. هذه الإضافة <a href="https://bitbucket.org/seininn/omlet">حرة المصدر</a>.</div>
            <div id="text">
                <section>
                    <h3>استِخدامُها</h3>
                    <p>
                        إدخل الرمز <span class="char">=</span> في شريط العناوين أعلى 
                        المتصفح، ثم اضغط على المفتاح <span class="key">Tab</span>. 
                        ستجد أن أيقونة الشريط تبدلت إلى شعار هذه الإضافة أو ستجد 
                        الشعار ضمن قائمة الإقتراحات الظاهرة أسفل الشريط.
                    </p>
                </section>
                <section>
                    <h3>مُدْخَلاتُها</h3>
                    <p>
                        مرر اسم المرجعية (Bookmarklet) كي تنفذها، 
                        والرمز <span class="char">+</span> لإضافة مرجعية جديدة، 
                        و <span class="char">?</span> للاطلاع على هذه الصفحة. 
                    </p>
                    <p>
                        يمكنك إضافة جافاسكربت لتنفذ قبل أن تنفيذ المرجعية، وذلك 
                        بوضعها بعد اسم المرجع: 
                    </p>
                        <pre style="overflow:auto; font-size:10px; direction:ltr; text-align:left;">shorten alert("Shortening page!");</pre>
                    
                </section>
                <section>
                    <h3>سَجِلُها</h3>
                    <p>
                        أيمن الصفحة سجل يضم جميع المرجعيات هذه الإضافة، وأي تغيير يحدث 
                        فيها يغيّر بالمرجعية المخزنة <b>مباشرة</b>. كل مرجعية تقع على
                        سطر واحد وتنفرد به، ويبدأ السطر بإسم المرجعية ويليه العلامة 
                        ":" ثم المرجعية نفسها.
                    </p>
                    <p>
                        للإحتفاظ بجميع المرجعيات، ولنقلها إلى حاسب او متصفح آخر، أنقل 
                        محتوى هذا السجل وضعه في السجل الآخر.
                    </p>
                </section>
                <section>
                    <h3>حُدودُها</h3>
                    <p>
                        الإضافة تعمل على الصفحات الموفرة من خلال <code>http</code> 
                        و <code>file</code> و <code>https</code> <b>فقط</b>. إفتح 
                        تقرير لدى موقع تطوير المشروع لإضافة المزيد.
                        
                    </p>
                </section>
            </div>
            <div id="links">
                <a href="http://people.sigh.asia/~sulaiman/software/browsers/omlet">صفحة المشروع</a> |
                <a href="https://bitbucket.org/seininn/omlet/issues/new">بلع عن علة</a>  |
                <a href="http://people.sigh.asia/~sulaiman/software/browsers/omlet/bookmarklets.html">مرجعيات مفيدة</a> 
            </div>
        </div>
    </body>
</html>