aguila.art

#!/usr/bin/env arturo
;==========================================
; Aguila
;
; Modern cross-platform 
; WebView-based Desktop apps
; without HTML/CSS/JS
;
; file: aguila.art
; author: drkameleon
; copyright: 2021
; license: MIT
;==========================================

Aguila: # [
    version: "0.0.1"
] 

;==============================
; The main library
;==============================

app: function [ui].exportable [

    ;------------------------
    ; private helpers
    ;------------------------

    let {_methods} # []
    let {_runMethod} function [method].exportable [
            do.import get var "_methods" method\0
        ]
    let {_getTag} function [id][
            read.json eval ~"document.getElementById('|id|').tagName"
        ]

    ;------------------------
    ; public methods
    ;------------------------

    fetch: function [id][
        result: read.json eval ~"document.getElementById('|id|').value"
        if? attr? 'int  -> return to :integer result
        else            -> return result
    ]

    put: function [id,val][
        if? "INPUT" = call {_getTag} @[id] ->
            return read.json eval ~"document.getElementById('|id|').value = '|val|'"
        else ->
            return read.json eval ~"document.getElementById('|id|').innerHTML = '|val|'"
    ]

    ;------------------------
    ; ui components
    ;------------------------

    ;; constants

    sizeAttributes: [
        ; width
        'threeQuarters 'twoThirds 'half
        'oneThird 'oneQuarter 'full
        'fourFifths 'threeFifths 'twoFifths 'oneFifth
    ]

    styleAttributes: [
        ; color
        'white 'light 'dark 'black 
        'text 'ghost 'primary 'link
        'info 'success 'warning 'danger

        ; size
        'small 'normal 'medium 'large

        ; shape
        'rounded
    ]

    alignmentAttributes: [
        'centered 'justified 'left 'right
    ]

    foregroundAttributes: [
        'whitefg 'lightfg 'darkfg 'blackfg
        'textfg 'ghostfg 'primaryfg 'linkfg
        'infofg 'successfg 'warningfg 'dangerfg
    ]

    fontsizeAttributes: [
        "1" "2" "3" "4" "5" "6"
    ]

    ;; generic helpers

    setwidth: function [][
        widths: new []
        loop sizeAttributes 'at [
            if attr at [
                clean: replace replace replace to :string at "Q" "-q" "T" "-t" "F" "-f"
                return ~"is-|clean|"
            ]
        ]
        return ""
    ]

    setstyle: function [][
        styles: new []
        loop styleAttributes 'at [
            if attr at -> 'styles ++ ~"is-|at|"
        ]

        loop alignmentAttributes 'at [
            if attr at -> 'styles ++ ~"has-text-|at|"
        ]

        loop foregroundAttributes 'at [
            if attr at [
                item: replace to :string at "fg" ""
                'styles ++  ~"has-text-|item|"
            ]
        ]

        return join.with:" " styles
    ]

    setfontsize: function [][
        loop fontsizeAttributes 'at [
            if attr at -> return ~"is-|at|"
        ]
        return ""
    ]

    wrapcol: function [content] -> render {!html
        <div class="column |setwidth|">|content|</div>
    }

    ;; containers

    vbox: function [contents][
        contents: join map @contents 'c -> render.template {!html
            <div class="columns is-mobile"><||=c||></div>
        }
        render.template {!html
            <div class="column">
                <||=contents||>
            </div>
        }
    ]

    hbox: function [contents] ->
        join @contents
    
    box: function [contents][
        wrapcol render.template {!html
            <div class="box">
                <||=join @contents||>
            </div>
        }
    ]

    ;; elements

    header: function [text] -> wrapcol render {!html
        <span class="title |setfontsize|">|text|</span>
    }

    subheader: function [text] -> wrapcol render {!html
        <span class="subtitle |setfontsize|">|text|</span>
    }

    label: function [id,text] -> wrapcol render {!html
        <p id="|id|" class="|setstyle|">|text|</p>
    }

    textinput: function [id,placeholder] -> wrapcol render {!html
        <input id="|id|" class="input |setstyle|" type="text" placeholder="|placeholder|">
    }

    textarea: function [id,rows,placeholder] -> wrapcol render {!html
        <textarea id="|id|" class="textarea |setstyle|" rows="|rows|" placeholder="|placeholder|"></textarea>
    }

    icon: function [name] -> render {!html
        <span class="icon">
            <ion-icon name="|name|"></ion-icon>
        </span>
    }

    button: function [ttl,action] [ 
        if? not? literal? action [
            randId: ~"funcid|random 1 100||random 1 100|"
            set var "_methods" randId action
            action: randId
            wrapcol render {!html
                <button class="button is-fullwidth |setstyle|" onclick="arturo.call('_runMethod',['|action|'])">|ttl|</button>
            }
        ]
        else [
            wrapcol render {!html
                <button class="button is-fullwidth |setstyle|" onclick="arturo.call('|action|',[])">|ttl|</button>
            }
        ]
    ]

    dropdown: function [id,items] -> wrapcol render {!html
        <div class="select is-link">
            <select>
                |map as.agnostic items 'item ->
                    "<option>" ++ (to :string item) ++ "</option>"|
            </select>
        </div>
    }

    tabs: function [items][
        items: as.agnostic items
        items: join map items 'item [
            active: ""
            if item = first items -> active: "class='is-active'"
            ~"<li |active| ><a>|item|</a></li>"
        ]
        wrapcol render {!html
            <div class="tabs |setstyle|">
                <ul>
                    |items|
                </ul>
            </div>
        }
    ]

    ;------------------------
    ; main renderer
    ;------------------------

    page: function [inner][ render.template {!html
            <!DOCTYPE html>
                <html style = 'overflow-y:hidden'>
                <head>
                    <meta charset="utf-8">
                    <meta name="viewport" content="width=device-width, initial-scale=1">
                    <title>Hello Bulma!</title>
                    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
                    <style type="text/css" media="screen">
                        </style>
                </head>
                <body>
                    <div id="wrapper" style="padding: <||=attr 'padding||>px;">
                        <!--<section class="section">-->
                            <div class="container">
                                <div class="columns is-mobile">
                                    <||=inner||>
                                </div>
                            </div>
                        <!--</section>-->
                    </div>
                    <!--<footer class="footer" style="display: flex; justify-content: center; padding: 1.5em">
                        <div class="columns is-vcentered">
                            <div class="content has-text-centered has-text-grey-light">
                                <p>Created with <span style="color:#30668B; font-family: Futura;">águila</span>. Written in Arturo.</p>
                            </div>
                        </div>
                    </footer>-->
                    <script src="https://unpkg.com/ionicons@5.0.0/dist/ionicons.js"></script>
                </body>
            </html>
        }
    ]

    main: page vbox ui

    write "tmp.html" main
    print execute "tidy -i tmp.html"

    webview .title: attr 'title main
]

;==========================================
; This is the end,
; my only friend, the end...
;==========================================