aerogel-pages 1.4.12

data/assets/javascripts/admin-pages-edit/datetime-picker-field.js.coffee

@@ -0,0 +1,36 @@
+class @DatetimePickerField
+    constructor: (@widget) ->
+        @data_field = @widget.find('input').first()
+        @field_id = @data_field.attr 'id'
+        @helper_field = @data_field.clone()
+        @helper_field.attr 'id', "#{@field_id}-helper"
+        @helper_field.attr 'name', ''
+        @helper_field.val ''
+        @helper_field.removeClass 'datetimepicker'
+        @helper_field.addClass 'datetimepicker-helper'
+        @data_field.before @helper_field
+        @data_field.attr 'type', 'hidden'
+        @widget.before @data_field
+        @widget.datetimepicker(
+            language: I18n.locale()
+        )
+        console.log "setting date"
+        # initial_date = "2013-10-11T12:00Z" # @data_field.val()
+        initial_date = @data_field.val()
+        # @datetimepicker().setDate "2013-10-11T12:00Z" #@data_field.val()
+        @datetimepicker().setDate initial_date
+        console.log "setting date to: '#{initial_date}', result: '#{@datetimepicker().getDate()?.format('L')}'"
+        @widget.on "change.dp", (e) =>
+            date = @datetimepicker().getDate()
+            if date?
+                console.log "date selected: #{date.format('L')}"
+                @data_field.val date.toISOString()
+            else
+                console.log "setting date to empty string"
+                @data_field.val ''
+        console.log "DateTimePickerField created"
+        # copy data field
+        # ...
+    datetimepicker: ->
+        @widget.data("DateTimePicker")
+

data/assets/javascripts/admin-pages-edit/page-blocks.js.coffee

@@ -0,0 +1,71 @@
+# page blocks functionality
+#
+#
+
+page_block_lang = (el) ->
+    el.closest('.page').attr 'data-lang'
+
+page_blocks = (lang) ->
+    $(".page-#{lang} .page-blocks fieldset.page_block")
+
+page_block_delete = (el) ->
+    marked_for_removal = el.closest('.page_block').find('.marked-for-removal')
+    marked_for_removal.val 'true'
+    console.log "page_block_delete():#{marked_for_removal.size()}", marked_for_removal
+
+page_block_create = (el) ->
+    lang = el.attr 'data-lang'
+    opts =
+        page_block:
+            lang: el.attr 'data-lang'
+            type: el.attr 'data-type'
+            position: page_block_get_new_position( lang )
+            page_node_id: el.attr 'data-page-node-id'
+            page_id: el.attr 'data-page-id'
+
+    console?.log "** creating new page block:", opts
+    $.get "edit/page_block", opts, (data) =>
+        $(".page-"+lang+" .page-blocks").append( data );
+
+page_block_sort_start = (e, ui) ->
+    console?.log "** page block sortable start"
+
+page_block_sort_stop = (e, ui) ->
+    position = 0
+    $('.page-blocks fieldset.page_block').each ->
+        $(@).find('.page-block-position').val position
+        position += 1
+    console?.log "** page block sortable stop"
+
+page_block_get_max_position = (lang) ->
+    max_position = 0
+    page_blocks( lang ).each ->
+        position = $(@).find('.page-block-position').val()
+        position = parseInt( position )
+        if !isNaN(position) && position > max_position
+            max_position = position
+    return max_position
+
+page_block_get_new_position = (lang) ->
+    if page_blocks( lang ).length > 0
+        page_block_get_max_position( lang ) + 1
+    else
+        0
+
+$ ->
+    $('body').on 'click', '.btn-block-delete', ->
+        page_block_delete $(@)
+
+    $('body').on 'click', '.btn-block-create', ->
+        page_block_create $(@)
+
+    $('.page-blocks').sortable
+        placeholder: 'page-block-sortable-placeholder'
+        handle: '.page-block .header'
+        start: page_block_sort_start
+        stop: page_block_sort_stop
+        delay: 150
+        distance: 5
+
+
+

data/assets/javascripts/admin-pages-edit/page-content-tabs.js.coffee

@@ -0,0 +1,40 @@
+#
+#
+log = (msg) ->
+    console?.log "** admin/pages/edit:tabs: #{msg}"
+
+current_lang = ->
+    $('.page-tabs .tab-pane.active').attr 'id'
+
+page_fields = (lang) ->
+    $("input,textarea,select", ".page-#{lang} .field")
+
+@page_clear = (lang) ->
+    $(".page-#{lang}").find('input.marked-for-removal').val true
+    $(".page-#{lang}").hide()
+    page_fields(lang).prop 'disabled', true
+    $(".page-empty-#{lang}").show()
+
+@page_add = (lang) ->
+    $(".page-#{lang}").find('input.marked-for-removal').val ''
+    $(".page-#{lang}").show()
+    page_fields(lang).prop 'disabled', false
+    $(".page-empty-#{lang}").hide()
+
+bind_event_listeners = ->
+    $('.clear-page-content-link').on 'click', (e) ->
+        e.preventDefault()
+        page_clear current_lang()
+        log "remove page content: #{current_lang()}"
+
+    $('.add-page-content-link').on 'click', (e) ->
+        e.preventDefault()
+        lang = $(e.currentTarget).attr 'data-lang'
+        page_add lang
+        log "add page content: #{lang}"
+
+
+
+$ ->
+    bind_event_listeners()
+    log "initialized"

data/assets/javascripts/admin-pages-utils/attached-footer.js.coffee

@@ -0,0 +1,62 @@
+class @AttachedFooter
+    float_footer: ->
+        return if @is_floating
+        @placeholder = $ "<div>"
+        @placeholder.css 'display', 'block'
+        @placeholder.height @footer.outerHeight()
+        @element.after @placeholder
+        @footer.css "position", @opts.position
+        @footer.css "bottom", "0"
+        @footer.addClass "floating"
+        @footer.hide()
+        # console?.log "fadeing IN"
+        @footer.fadeIn()
+        @is_floating = true
+        # console?.log "** footer is floating"
+
+    unfloat_footer: ->
+        return unless @is_floating
+        @is_floating = false
+        # console?.log "fadeing OUT"
+        # @footer.fadeOut done: =>
+        @footer.show()
+        @footer.css "position", "static"
+        @footer.css "bottom", "auto"
+        @placeholder.remove()
+        @footer.removeClass "floating"
+        # console?.log "** footer is unfloated"
+
+    update_footer: ->
+        # t_start = $.now()
+        view_y = $(window).scrollTop()
+        view_b = view_y + $(window).height()
+        el_y = @element.offset().top
+        el_b = el_y + @element.height()
+        ft_h = @footer.outerHeight()
+        # console?.log "view_y:#{view_y}, view_b:#{view_b} el_b:#{el_b} "
+        if view_b - ft_h  > el_b
+            # element's bottom is on screen?
+            @unfloat_footer()
+        else
+            @float_footer()
+        # t_end = $.now()
+        # console?.log "update_footer: elapsed:#{t_end-t_start}, view_y:#{view_y} view_b:#{view_b}"
+
+    constructor: ( @opts ) ->
+        @element = opts.target
+        @footer = opts.footer
+        @observer = opts.observe
+        @opts.position ||= 'absolute'
+        @is_floating = false
+        @update_footer()
+        @observer.scroll =>
+            @update_footer()
+        # @element.scroll =>
+        #    @update_footer()
+
+
+
+
+@attach_floating_footer = (element, footer, observer) ->
+    new AttachedFooter $(element), $(footer), observer
+    # console?.log "floating footer attached"

data/assets/javascripts/admin-pages-utils/autofixed-height.js.coffee

@@ -0,0 +1,15 @@
+class @AutofixedHeight
+    constructor: (@element, @max_height_delta, @min_height_delta = @max_height_delta) ->
+        @resize()
+        $(window).on 'resize', @resize
+
+    resize: =>
+        wh = $(window).height()
+        h = wh - @max_height_delta + 1
+        @element.css 'max-height', h # outerHeight h
+        h = wh - @min_height_delta + 1
+        @element.css 'min-height', h # outerHeight h
+        @element.height h # outerHeight h
+        # console?.log "** FixedHeightWatcher: element resized to #{h} (#{wh} - #{@max_height_delta})"
+
+

data/assets/javascripts/admin-pages-utils/two-pane-widget.js.coffee

@@ -0,0 +1,78 @@
+
+debug = false
+log = (msg) ->
+    console?.log "** two-pane-widget: #{msg}" if debug
+error = (msg) ->
+    console?.error "** two-pane-widget: #{msg}" if debug
+    throw new Error msg
+
+class @TwoPaneWidget
+    constructor: (@widget, @left_selector, @right_selector) ->
+        @widget = $(@widget)
+        @left_pane = @widget.find( @left_selector ).first()
+        @right_pane = @widget.find( @right_selector ).first()
+        @btn_open_left = @left_pane.find('.btn-open').first()
+        @btn_open_right = @right_pane.find('.btn-open').first()
+        @state = null
+        @bind_event_listeners()
+        @open_middle( false )
+        log "widget created, left:#{@left_selector} right:#{@right_selector}"
+
+    bind_event_listeners: ->
+        @btn_open_left.on 'click', @on_open_left_clicked
+        @btn_open_right.on 'click', @on_open_right_clicked
+
+    on_open_left_clicked: =>
+        log "open left clicked"
+        if @state == 'middle'
+            @open_left()
+        else
+            @open_middle()
+
+    on_open_right_clicked: =>
+        log "open right clicked"
+
+        if @state == 'middle'
+            @open_right()
+        else
+            @open_middle()
+
+    open_left: ( trigger_event = true ) ->
+        return if @state == 'left'
+        log "open left pane to full width"
+        @open_pane @left_pane
+        @close_pane @right_pane
+        @state = 'left'
+        @trigger() if trigger_event
+
+    open_right: ( trigger_event = true ) ->
+        return if @state == 'right'
+        log "open right pane to full width"
+        @open_pane @right_pane
+        @close_pane @left_pane
+        @state = 'right'
+        @trigger() if trigger_event
+
+    open_middle: ( trigger_event = true ) ->
+        return if @state == 'middle'
+        log "open panes to middle width"
+        @half_open_pane @right_pane
+        @half_open_pane @left_pane
+        @state = 'middle'
+        @trigger() if trigger_event
+
+    open_pane: (pane) ->
+        pane.removeClass 'closed half-open'
+        pane.addClass 'open'
+
+    half_open_pane: (pane) ->
+        pane.removeClass 'closed open half-open'
+        pane.addClass 'half-open'
+
+    close_pane: (pane) ->
+        pane.removeClass 'closed open half-open'
+        pane.addClass 'closed'
+
+    trigger: ->
+        @widget.trigger 'changed.two-pane', @state
+

data/assets/javascripts/aerogel-pages.js.coffee

@@ -0,0 +1,3 @@
+#= require bootstrap
+#= require aerogel-media
+#= require smart-links

data/assets/javascripts/controllers/admin-pages-edit.js.coffee

@@ -0,0 +1,33 @@
+#= require moment
+#= require bootstrap-datetimepicker
+#= require smart-tree-table
+#= require smart-list-table
+#= require smart-links
+#= require aerogel-media
+#= require_tree ../admin-pages-edit
+#= require admin-pages-utils/attached-footer
+
+@select_page_dialog = (field) ->
+    field = $("##{field}")
+    console?.log "select page: from field #{field.val()}"
+    $("#adminModal").modal
+        remote: 'edit/select_page'
+
+
+@select_template_dialog = (field) ->
+    field = $("##{field}")
+    console?.log "select template: from field #{field.val()}"
+    $("#adminModal").modal
+        remote: 'edit/select_template'
+
+
+$ ->
+    $('.datetimepicker').each ->
+       new DatetimePickerField $(@)
+
+    @attached_footer = new AttachedFooter
+        target: $(".page-tabs")
+        footer: $(".form-buttons")
+        observe: $(window)
+        position: 'fixed'
+

data/assets/javascripts/controllers/admin-pages.js.coffee

@@ -0,0 +1,17 @@
+#= require smart-tree-table
+#= require jquery.history
+#= require aerogel-media
+#= require_tree ../admin-pages-utils
+#= require_tree ../admin-pages
+
+
+@pages_widget = null
+@pane_tree = null
+@pane_preview = null
+
+$ =>
+    @pages_widget = new PagesWidget $(".pages-widget"), $(".pane-tree"), $(".pane-preview")
+    @pane_tree = new PaneTree $(".pane-tree").first()
+    @pane_preview = new PanePreview $(".pane-preview").first()
+
+

data/assets/stylesheets/admin-pages/_admin-pages-alert.css.scss

@@ -0,0 +1,14 @@
+@import "admin/global";
+
+$alert-width: 70%;
+
+#page-content .admin-alerts {
+    position: fixed;
+    top: $header-height + 15px;
+    z-index: 100;
+    width: $alert-width;
+    left: (100%-$alert-width)/2;
+    .alert {
+        margin-bottom: 15px;
+    }
+}

data/assets/stylesheets/admin-pages/_pages-widget.css.scss

@@ -0,0 +1,113 @@
+@import "admin/global";
+@import "two-pane-widget";
+@import "admin/utils/center-absolutely";
+
+
+#page-content {
+    width: 100%;
+    margin: 0;
+    padding: 0;
+
+}
+
+$pane-btn-radius: 6px;
+$pane-btn-hover-bg: $item-hover-bg; // #eee;
+$pane-border: 1px solid #ccc;
+
+//
+//
+//
+.pages-widget {
+    @include two-pane-widget;
+
+    // stylize panes
+    .pane.left:hover {
+        box-shadow: 5px 0px 10px -5px rgba( 0,0,0, 0.3 );
+        .btn-open {
+            box-shadow: 5px 0px 10px -3px rgba( 0,0,0, 0.3 );
+        }
+    }
+    .pane.right:hover {
+        box-shadow: -5px 0px 10px -5px rgba( 0,0,0, 0.3 );
+        .btn-open {
+            box-shadow: -5px 0px 10px -3px rgba( 0,0,0, 0.3 );
+        }
+    }
+    .pane.right.half-open {
+        border-left: $pane-border;
+    }
+
+    // stylize buttons
+    .pane .btn-open {
+        background: white;
+        border: $pane-border;
+        &:hover {
+            background: $pane-btn-hover-bg;
+        }
+    }
+    .pane.left .btn-open {
+        border-left: none;
+        border-radius: 0 $pane-btn-radius $pane-btn-radius 0;
+    }
+    .pane.right .btn-open {
+        border-right: none;
+        border-radius: $pane-btn-radius 0 0 $pane-btn-radius;
+    }
+
+
+    // stylize pane content
+    .pane-preview {
+        // border-left: 1px solid #ccc;
+
+        #preview { padding: 15px; }
+        #preview-empty {
+            @extend .center-absolutely;
+            width: 50%;
+            line-height: 100px;
+            height: 100px;
+            text-align: center;
+            vertical-align: middle;
+            color: $text-disabled-color;
+        }
+    }
+
+    // stylize pane toolbars
+    .pane {
+        &:not(.open) {
+            #preview, .bottom-toolbar .container {
+                width: 100%;
+            }
+        }
+
+        .bottom-toolbar:not(.floating) {
+            .container {
+                padding-top: 15px;
+                padding-bottom: 15px;
+            }
+        }
+        .bottom-toolbar.floating {
+            width: 100%;
+            height: 60px;
+            background: rgba( 0,0,0, 0.3 );
+
+            .container {
+            }
+
+            // vertically centering container of unknown height:
+            &:before, .container {
+                display: inline-block;
+                vertical-align: middle;
+            }
+            &:before {
+                content: '';
+                display: inline-block;
+                width: 0;
+                height: 100%;
+                vertical-align: middle;
+                margin-left: -0.35em;
+            }
+        }
+
+    }
+
+}

data/assets/stylesheets/admin-pages/_pane-tree.css.scss

@@ -0,0 +1,15 @@
+.pane-tree {
+    .nav-tabs {
+        padding: 5px 5px 0 5px;
+        a {
+            padding: 5px 10px;
+        }
+    }
+
+    table tbody {
+        tr td:nth-child(1), tr td:nth-child(2) {
+            width: 16px;
+            text-align: center;
+        }
+    }
+}

data/assets/stylesheets/admin-pages/_preview.css.scss

@@ -0,0 +1,35 @@
+.page-preview-body {
+    .breadcrumb {
+        margin-bottom: 15px;
+    }
+    .title {
+        margin: 0 0 7px;
+        padding: 0;
+    }
+
+    .headers {
+        margin: 0 0 15px 0;
+        padding-bottom: 7px;
+        color: $item-disabled-fg;
+        border-bottom: 1px solid #eee;
+    }
+
+    .image {
+        &.left {
+            float: left;
+            margin: 5px 5px 5px 0;
+        }
+        &.middle {
+            margin: 5px;
+            text-align: center;
+            img {
+                margin-left: auto;
+                margin-right: auto;
+            }
+        }
+        &.right {
+            float: right;
+            margin: 5px 0px 5px 5px;
+        }
+    }
+}

data/assets/stylesheets/admin-pages/_two-pane-widget.css.scss

@@ -0,0 +1,103 @@
+
+//
+// TwoPaneWidget styles mixin for a widget
+//
+@mixin two-pane-widget {
+    width: 100%;
+    height: 100px;
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+
+    .pane.left {
+        @include two-pane-widget-pane( -1 );
+    }
+    .pane.right {
+        @include two-pane-widget-pane( 1 );
+    }
+}
+
+//
+// TwoPaneWidget styles mixin for a pane
+// $left_or_right: -1 for left, 1 for right
+//
+@mixin two-pane-widget-pane( $left_or_right ) {
+
+    display: inline-block;
+    box-sizing: border-box;
+    width: 50%;
+    height: 100%;
+    vertical-align: top;
+
+    position: relative;
+
+    &.closed {
+        width: 0;
+        .btn-open {
+            display: inline-block;
+        }
+        .content {
+            display: none;
+        }
+    }
+    &.half-open{
+        width: 50%;
+        &:not(:hover) .btn-open { display: none }
+    }
+    &.open {
+        width: 100%;
+        .btn-open { display: none }
+    }
+
+    // scrollable content of a pane
+    .content {
+        overflow-y: scroll;
+        height: 100%;
+    }
+
+    // opening button/tab
+    .btn-open {
+        @include two-pane-widget-button( $left_or_right );
+    }
+    &.closed {
+        .btn-open:not(:hover) {
+            opacity: 0.5;
+        }
+    }
+}
+
+
+// Opening button/tab mixin.
+// $left_or_right: -1 for left, 1 for right
+//
+@mixin two-pane-widget-button( $left_or_right ) {
+    $btn-size: 45px;
+
+    width: $btn-size;
+    height: $btn-size;
+    position: absolute;
+    z-index: 50;
+    top: 45%;
+
+    @if $left_or_right > 0 {
+        right: 100%;
+    } @else {
+        left: 100%;
+    }
+
+    cursor: pointer;
+
+    i {
+        display: inline-block;
+        margin: auto;
+        position: absolute;
+        height: 16px;
+        width: 16px;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+    }
+}
+
+

data/assets/stylesheets/admin-pages-common/_admin-modals-select.css.scss

@@ -0,0 +1,34 @@
+.tree-select-page-widget {
+    // border: 1px solid $input-border-color;
+    max-height: 300px;
+    overflow-y: scroll;
+
+    .smart-tree-table {
+        thead {
+            display: none;
+        }
+        tbody {
+            tr td:nth-child(1) {
+                width: 30px;
+            }
+        }
+    }
+}
+
+
+.list-select-template-widget {
+    // border: 1px solid $input-border-color;
+    max-height: 300px;
+    overflow-y: scroll;
+
+    .smart-list-table {
+        thead {
+            display: none;
+        }
+        tbody {
+            tr td:nth-child(1) {
+                // width: 30px;
+            }
+        }
+    }
+}

data/assets/stylesheets/admin-pages-common/_form-details.css.scss

@@ -0,0 +1,11 @@
+@mixin form-details {
+    div.form-row {
+        margin-bottom: 5px;
+    }
+    div.form-row:last-child {
+        margin-bottom: 0;
+    }
+    input[readonly="readonly"] {
+        background: $body-bg;
+    }
+}