From c1ba6ae4ecea39c325cc6444f7ddcead6cfb60c8 Mon Sep 17 00:00:00 2001 From: Tony Tkacik Date: Sat, 15 Jul 2017 12:11:32 +0200 Subject: [PATCH] nuweb: Added mdlio app helpers. Signed-off-by: Tony Tkacik --- bin/nuweb-run | 10 +- bin/nweb-run | 7 +- inc/nuweb/html.inc.sh | 143 +++++++++++++++++++ inc/nuweb/mdl.io.app.inc.sh | 268 ++++++++++++++++++++++++++++++++++++ inc/nuweb/mdl.io.inc.sh | 25 ++++ inc/nuweb/router.inc.sh | 11 +- inc/nuweb/utils.inc.sh | 58 ++++++++ 7 files changed, 509 insertions(+), 13 deletions(-) mode change 100755 => 120000 bin/nweb-run create mode 100644 inc/nuweb/html.inc.sh create mode 100644 inc/nuweb/mdl.io.app.inc.sh create mode 100644 inc/nuweb/mdl.io.inc.sh create mode 100644 inc/nuweb/utils.inc.sh diff --git a/bin/nuweb-run b/bin/nuweb-run index 5d374d3..35ed7bd 100755 --- a/bin/nuweb-run +++ b/bin/nuweb-run @@ -4,4 +4,12 @@ readonly NUWEB_BIN_DIR=$(dirname $(realpath ${BASH_SOURCE[0]})) source $NUWEB_BIN_DIR/../inc/nux-base.inc.sh nux.use nuweb -source "$1" + +dirty.url.decode() { + sed -e "s/%20/ /gi" <<< "$@" +} +nux.log.level debug +NUWEB_SCRIPT_URI="${SCRIPT_FILENAME#$DOCUMENT_ROOT}" \ +NUWEB_MAYBE_PWD="$DOCUMENT_ROOT$(dirty.url.decode "${REQUEST_URI%%\?*}")" \ +NUWEB_REQUEST_PATH="${REQUEST_URI%%\?*}" \ + source "$1" diff --git a/bin/nweb-run b/bin/nweb-run deleted file mode 100755 index f7f7756..0000000 --- a/bin/nweb-run +++ /dev/null @@ -1,6 +0,0 @@ -#!/usr/bin/env bash - -readonly NUWEB_BIN_DIR=$(dirname $(realpath ${BASH_SOURCE[0]})) -source $NUWEB_BIN_DIR/../inc/nux-base.inc.sh - -source "$1" diff --git a/bin/nweb-run b/bin/nweb-run new file mode 120000 index 0000000..acf4251 --- /dev/null +++ b/bin/nweb-run @@ -0,0 +1 @@ +nuweb-run \ No newline at end of file diff --git a/inc/nuweb/html.inc.sh b/inc/nuweb/html.inc.sh new file mode 100644 index 0000000..b93d912 --- /dev/null +++ b/inc/nuweb/html.inc.sh @@ -0,0 +1,143 @@ +function nuweb.html.get { + echo ${NUWEB_HTML_ARRAY[${#NUWEB_HTML_ARRAY[@]}-1]} +} + +function nuweb.html.offset { + echo "${NUWEB_HTML_OFFSET[@]}" +} + +function nuweb.html.pop { + unset NUWEB_HTML_ARRAY[${#NUWEB_HTML_ARRAY[@]}-1] + unset NUWEB_HTML_OFFSET[${#NUWEB_HTML_OFFSET[@]}-1] +} + +function nuweb.html.push { + local value="$1" + NUWEB_HTML_OFFSET[${#NUWEB_HTML_OFFSET[@]}]=" " + NUWEB_HTML_ARRAY[${#NUWEB_HTML_ARRAY[@]}]="$value" +} + +function e { + nuweb.html.element --close "$@" +} + +function e+ { + nuweb.html.element "$@" +} + +function +e { + nuweb.html.element "$@" +} + +function -e { + nuweb.html.element.end "$@" +} + + +function e- { + nuweb.html.element.end "$@" +} + +nw.head() { + : +} + +function e.link() { + nuweb.html.element --single link @rel "$1" @href "$2" +} + +function h.a() { + : +} + +nw.script() { + : +} + +nuweb.html.element.spec() { + local content_as_args=""; + if [ "$1" = "--content-as-args" ]; then + content_as_args="yes"; + shift; + fi + local target="$1"; shift; + local element="$1"; shift; + local classes=""; + local attrs=""; + local attr=""; + local content=""; + for arg in "$@" ; do + if [ -n "$attr" ] ; then + attrs="$attrs $attr=\"$arg\"" + attr=""; + else + case "$arg" in + @*) attr="${arg#@}";; + .*) classes="${classes}${arg//./ }";; + *) content="$content $arg";; + esac + fi + done + if [ -n "$classes" ] ; then + classes=" class=\"$classes\" "; + fi + if [ -n "$content_as_args" ]; then + $target $content; + else + $target; + fi +} + +nuweb.html.element() { + local type="pair"; + case "$1" in + --single) type="single" ; shift;; + --close) type="close" ; shift;; + esac + + nuweb.html.element.spec nuweb.html.element.$type "$@" + +} + +nuweb.html.element.single() { + #offset=$(nuweb.html.offset) + echo "<${element}${classes}${attrs} />" +} + +nuweb.html.element.pair() { + #local offset=$(nuweb.html.offset) + echo "<${element}${classes}${attrs}>" + if [ -n "$content" ]; then + echo " $content"; + fi +} + +nuweb.html.element.close() { + #local offset=$(nuweb.html.offset) + echo "<${element}${classes}${attrs}>" + if [ -n "$content" ]; then + echo " $content"; + fi + echo ""; +} + + +nuweb.html.element.end() { + local element=$1 + #local offset=$(nuweb.html.offset) + echo "" +} + +e.alias() { + local name="$1"; shift; + local elem="$1"; shift; + eval """ + +$name() { + +e $elem "$@" \"\$@\" + } + + -$name() { + -e $elem + } + """ +} diff --git a/inc/nuweb/mdl.io.app.inc.sh b/inc/nuweb/mdl.io.app.inc.sh new file mode 100644 index 0000000..edff8f5 --- /dev/null +++ b/inc/nuweb/mdl.io.app.inc.sh @@ -0,0 +1,268 @@ +nux.use nuweb/mdl.io +nux.use nuweb/router +nux.use nux.mime + +mdlio.app() { + mdlio.app.html "$@" +} + +app.header() { + : +} + +mdlio.app.custom() { + local func=$1; shift; + nux.exec.or $func app.$func "$@"; +} + +mdlio.app.html() { + nuweb.content_type text/html + echo + local spec="$1"; shift; + $spec "$@"; + + local appName=$(nux.exec.optional app.name); + local title="$(nux.exec.optional title)"; + echo "" + +e html + +e head + e meta @charset utf-8 + e meta @http-equiv x-ua-compatible @content ie=edge + e meta @name "viewport" @content "width=device-width, initial-scale=1.0, minimum-scale=1.0" + mdlio.css $(mdlio.app.custom color.primary) $(mdlio.app.custom color.accent) + e link @rel stylesheet @href "$NUWEB_SCRIPT_URI/action:asset/mdlio-app.css" + e link @rel stylesheet @href "https://unpkg.com/simplelightbox@1.11.0/dist/simplelightbox.css" + + nux.exec.optional app.custom.head + e title "$title - $appName" + -e head + +e body .mdl-base + +mdlio.layout .mdl-layout--fixed-header + e.mdlio.header++ "$appName" + mdlio.app.custom header + -e div + -e header + if nux.check.function app.drawer ; then + +e div .mdl-layout__drawer + app.drawer + nux.exec.optional drawer + -e div + fi + +mdlio.main + nux.exec.optional app.main.start + main "$@" + + + +e div @id scooter + +e div .mdl-grid @id sizer + e div @id gutter .gutter .mdl-cell .mdl-cell--1-col .mdl-cell--1-col-phone .mdl_cell--1-col-tablet + -e div + -e div + + nux.exec.optional app.main.end + -e main + -e div + mdlio.app.photoswipe.html + + e script @src https://code.jquery.com/jquery-3.2.1.min.js + e script @src https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js + #e script @src https://unpkg.com/simplelightbox@1.11.0/dist/simple-lightbox.js + e script @src https://unpkg.com/photoswipe@4.1.2/dist/photoswipe.js + e script @src https://unpkg.com/photoswipe@4.1.2/dist/photoswipe-ui-default.js + e link @rel stylesheet @href https://unpkg.com/photoswipe@4.1.2/dist/photoswipe.css + e link @rel stylesheet @href https://unpkg.com/photoswipe@4.1.2/dist/default-skin/default-skin.css + e script @src https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.js + e script @src "$NUWEB_SCRIPT_URI/action:asset/mdlio-app.js" + e script @src "https://code.getmdl.io/1.3.0/material.min.js" + nux.exec.optional scripts + + -e body + -e html +} + +app.color.primary() { + echo teal +} + +app.color.accent() { + echo cyan +} + +mdlio.app.infinity() { + # outlayer: msnry, + local container=$1; + local item=$2; + local nextPage=$3; + local outlayer=""; + e script """ + var grid = document.querySelector('$container'); + var infScroll = new InfiniteScroll( grid, { + path: '$nextPage', + append: '$item', + $outlayer + status: '.page-load-status', + elementScroll: '.mdl-layout__content', + }); + """ + +} + +function mdlio.app.masonry() { + local grid="$1" + local gridItem="$2" + local lightBoxItem="$3" + local gutter="$4" + local nextPage="$5"; + e script """ + var gallery = new mdlio.cardsGallery(document.querySelector('$grid'), '$gridItem', '$lightBoxItem'); +""" + +} + + +function mdlio.app.thumb.uri() { + local filename="$1"; + local mimetype="$2"; + + #if [ -d "$filename" ] ; then + # nux.log info "File $filename is folder." + # filename=$(find "$1" -maxdepth 1 -iname "*.jpg" -or -iname "*.png" | head -n1) + # nux.log info "Using $filename for thumbnail." + #fi + + local thumb_name="$(thumby.name.shared "$filename")" + local dirname=$(dirname "$filename") + local thumb_path="$dirname/.sh_thumbnails/large/$thumb_name" + if [ -e "$thumb_path" ] ; then + nux.dirty.urlencode $thumb_path + elif thumby.thumb.can.generate "$filename" "$mimetype"; then + echo "$NUWEB_SCRIPT_URI/action:thumb/$NUWEB_REQUEST_PATH/$filename" + fi +} + +function mdlio.app.thumb.get() { + img_path="${@##/}" + nux.log info "Generating thumb for" $(pwd) "$img_path" + thumb_path=$(thumby.thumb.get "${DOCUMENT_ROOT}/$img_path"); + if [ -n "$thumb_path" ]; then + nux.dirty.urlencode ${thumb_path#$DOCUMENT_ROOT}; + fi +} + + +mdlio.app.run() { + nuweb.router.exec mdlio.app.routes +} + +mdlio.app.routes() { + get() { + local uri_spec="$1"; shift; + nuweb.get "$uri_spec" mdlio.app "$@" + } + + get.paginate() { + main() { + #nux.exec.optional before "$@"; + before=before after=after nuweb.paginate div .gallery .mdl-grid items per-item next-page 20; + #nux.exec.optional after "$@"; + } + next-page() { + +e div .mdl-grid + e div .mdl-cell .mdl-cell--11-col .mdl-cell--col-3-phone .mdl-cell--col-7-tablet + +e div .mdl-cell .mdl-cell--1-col + e a .next-page .mdl-button.mdl-button--colored @href "${REQUEST_URI%%?*}?page=$1&per_page=$2" Next + -e div + -e div + } + get "$@" + } + + #nuweb.get "/action:zip:serve/@+" mdlio.action.zip.serve + nuweb.get "/action:thumb/@+" nuweb.redirect.exec mdlio.app.thumb.get + nuweb.get "/action:asset/@" mdlio.app.asset + nux.exec.optional app.routes; +} + + +mdlio.app.asset() { + file="$NUX_ENV_DIR/assets/nuweb/$1"; + if [ -e "$file" ]; then + mime=$(nux.mime "$file"); + echo Content-Type: $mime + echo + cat "$file" + fi +} + + +mdlio.app.photoswipe.html() { + cat < + + +EOF +} diff --git a/inc/nuweb/mdl.io.inc.sh b/inc/nuweb/mdl.io.inc.sh new file mode 100644 index 0000000..84663e0 --- /dev/null +++ b/inc/nuweb/mdl.io.inc.sh @@ -0,0 +1,25 @@ + +nux.use nuweb/html + +mdlio.css() { + e.link stylesheet "https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en" + e.link stylesheet "https://fonts.googleapis.com/icon?family=Material+Icons" + e.link stylesheet "https://code.getmdl.io/1.3.0/material.${1}-${2}.min.css" + +} + +e.mdlio.header++() { + +e header .mdl-layout__header .mdl-color--primary + +e div .mdl-layout__header-row + e span .mdl-layout-title $1 + e div .mdl-layout-spacer +} + + +e.alias mdlio.layout "div" ".mdl-layout .mdl-js-layout" +e.alias mdlio.main "main" ".mdl-layout__content" +e.alias mdlio.card "div" ".mdl-card.mdl-shadow--2dp" + +.mdl_cell() { + echo .mdl-cell.mdl-cell--"$1"-col.mdl-cell--"$2"-col-tablet.mdl-cell--"$2"-col-phone +} diff --git a/inc/nuweb/router.inc.sh b/inc/nuweb/router.inc.sh index fd63d26..133614e 100644 --- a/inc/nuweb/router.inc.sh +++ b/inc/nuweb/router.inc.sh @@ -27,12 +27,10 @@ nuweb.router.tryexec.concrete() { func=$2; shift; shift; - echo "Checking Path Spec: '$path_spec', Query Spec: '$query_spec' Function:$func Additional Args:$@" >&2 + nux.log trace "Checking Path Spec: '$path_spec', Query Spec: '$query_spec' Function:$func Additional Args:$@" >&2 IFS='/' read -ra spec_components <<< "$path_spec" - i=0 - path_args="" - path_c=""; + i=0;path_args="";path_c=""; for path in "${PATH_COMPONENTS[@]}" ; do spec=${spec_components[$i]} if [ "$spec" == "@+" ]; then @@ -71,7 +69,8 @@ nuweb.router.tryexec.concrete() { fi done fi - $func $@ $path_args $path_c $query_args + path_c=$(dirty.url.decode "$path_c") + $func "$@" $path_args "$path_c" $query_args exit 0 } @@ -99,7 +98,7 @@ nuweb.router.exec() { if [ -z "$path" ] ; then path="/" fi - + IFS='/' read -ra PATH_COMPONENTS <<< "$path" $definition diff --git a/inc/nuweb/utils.inc.sh b/inc/nuweb/utils.inc.sh new file mode 100644 index 0000000..a911eca --- /dev/null +++ b/inc/nuweb/utils.inc.sh @@ -0,0 +1,58 @@ +function nuweb.paginate() { + nuweb.html.element.spec --content-as-args nuweb.paginate0 "$@"; +} + + +function nuweb.paginate00() { + echo "<${element}${classes}{$attrs}>" + while IFS= read -r f; do + if [ $current -ge $stop_when ]; then + let next_page=page+1; + break; + elif [ $current -ge $skip_till ]; then + $processItem "$f" + fi + let current=$current+1; + done + echo "" + if [ -n "$next_page" ]; then + $nextPage "$next_page" "$per_page" + fi +} + +function nuweb.paginate0() { + local getItem=$1; + local processItem=$2; + local nextPage=$3; + local perPageDefault=${4:-20}; + local current=0; + local local items="$($getItem)" + local page=$(nuweb.http.query.var page 0); + local per_page=$(nuweb.http.query.var per_page $perPageDefault); + local total_items="$(wc -l <<< "$items")" + + + if [ "$total_items" -eq 1 -a -z "$items" ]; then + total_items=0; + fi + + let skip_till=$page*$per_page; + let stop_when=($page+1)*$per_page; + + + nux.log info "Functions: $getItem $processItem $nextPage"; + nux.log info "Displaying: $skip_till-$stop_when Total: $total_items (Page: $page Per page: $per_page)" + + + + if [ -n "$before" ]; then + nux.exec.optional $before + fi + if [ "$total_items" -gt 0 ]; then + nuweb.paginate00 <<< "$items" + fi + if [ -n "$after" ]; then + nux.exec.optional $after $total_items + fi + +}