Skip to content

Commit

Permalink
Added support for "add row" and "add column"
Browse files Browse the repository at this point in the history
Added buttons to modify the current element
  • Loading branch information
BrianOtto committed Mar 15, 2019
1 parent 44347e1 commit bbb9948
Show file tree
Hide file tree
Showing 3 changed files with 152 additions and 22 deletions.
68 changes: 68 additions & 0 deletions app/ui-builder/index.js
@@ -0,0 +1,68 @@
var allElementIds = []
var currentToggle = { id: '', border: '' }

newId = function(type) {
let max = allElementIds.length

for (var i = 0; i <= max; i++) {
var id = type + parseInt(i + 1)

if (allElementIds.indexOf(id) == -1) {
allElementIds.push(id)
break
}
}

return id
}

addElement = function(add) {
var current = document.querySelector('#currentId')
var element = document.querySelector('#' + current.innerHTML)
element.appendChild(add)

// resolves a bug in UIkit where margin-left is set
// to -40px when there is nothing inside the grid
if (element.hasAttribute('uk-grid') && add.hasAttribute('uk-grid')) {
add.style.marginLeft = '0px'
}

// TODO: add support for /more (e.g. add column/more)
// so you can continue to add to the current parent

document.querySelector('#currentId').innerHTML = add.id
document.querySelector('#currentNode').innerHTML = add.nodeName
toggleCurrent()
}

toggleCurrent = function(hideOnly) {
var current = document.querySelector('#currentId')
var element = document.querySelector('#' + current.innerHTML)

if (currentToggle.id == element.id) {
if (currentToggle.border != '') {
element.style.border = currentToggle.border
} else {
element.style.border = ''
}

document.querySelector('#currentShowHide').innerHTML = 'Show'
currentToggle = { id: '', border: '' }
} else if (hideOnly !== true) {
var border = (element.style.border) ? element.style.border : ''
currentToggle = { id: element.id, border: border }
document.querySelector('#currentShowHide').innerHTML = 'Hide'

element.style.border = '1px solid #FF0000'
}
}

document.addEventListener('click', function(e) {
if (e.target) {
switch (e.target.id) {
case 'currentShowHide' :
toggleCurrent()
break
}
}
})
101 changes: 79 additions & 22 deletions app/ui-builder/index.reb
Expand Up @@ -43,7 +43,7 @@ ui-clear: js-native [] {
ui-start: js-awaiter [] {
if (window.ui_builder !== true) {
var assetCount = 0
var assetTotal = 4
var assetTotal = 5
var styles = document.createElement('link')
styles.href = 'https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/css/uikit.min.css'
Expand Down Expand Up @@ -71,6 +71,14 @@ ui-start: js-awaiter [] {
if (assetCount == assetTotal) { createUI() }
}
var scriptCustom = document.createElement('script')
scriptCustom.src = 'app/ui-builder/index.js'
scriptCustom.onload = function() {
assetCount++
if (assetCount == assetTotal) { createUI() }
}
var fa = document.createElement('link')
fa.href = 'https://use.fontawesome.com/releases/v5.7.2/css/all.css'
fa.rel = 'stylesheet'
Expand All @@ -83,6 +91,7 @@ ui-start: js-awaiter [] {
document.body.appendChild(styles)
document.body.appendChild(stylesCustom)
document.body.appendChild(script)
document.body.appendChild(scriptCustom)
document.body.appendChild(fa)
var createUI = function() {
Expand All @@ -95,34 +104,52 @@ ui-start: js-awaiter [] {
var body = document.createElement('div')
body.setAttribute('uk-grid', '')
body.style.marginLeft = '0px'
body.style.paddingTop = '40px'
body.className = 'uk-grid-divider uk-width-1-1'
body.id = 'body'
// resolves a bug in UIkit where margin-left is set
// to -40px when there is nothing inside the grid
// I then add 20px to accomodate for the divider
body.style.marginLeft = '20px'
var draw = document.createElement('div')
draw.style.paddingLeft = '0px'
draw.className = 'uk-width-expand'
draw.id = 'draw'
var info = document.createElement('div')
info.className = 'uk-width-1-3'
info.innerHTML += '<h4><i class="fas fa-shapes uk-margin-small-right"></i>Current Element</h4><hr class="margin-remove">'
info.innerHTML += '<div id="info-id"><i>None Selected</i></span></div>'
info.innerHTML += '<div id="info-element"></div>'
info.innerHTML += '<h4><i class="fas fa-keyboard uk-margin-small-right"></i>Commands</h4><hr class="margin-remove">'
info.innerHTML += '<div class="uk-width-1-1" uk-grid>'
info.innerHTML += '<div><div class="uk-grid-small" uk-grid><div class="uk-width-1-5 uk-text-right"><strong>add</strong></div><div class="uk-width-expand">row | column | button | text | icon | video</div></div></div>'
info.innerHTML += '<div><div class="uk-grid-small" uk-grid><div class="uk-width-1-5 uk-text-right"><strong>bigger</strong></div><div class="uk-width-expand">[<span class="uk-text-primary">&lt;percent&gt;</span>% | default <span class="uk-text-primary">&lt;percent&gt;</span>%]</div></div></div>'
info.innerHTML += '<div><div class="uk-grid-small" uk-grid><div class="uk-width-1-5 uk-text-right"><strong>smaller</strong></div><div class="uk-width-expand">[<span class="uk-text-primary">&lt;percent&gt;</span>% | default <span class="uk-text-primary">&lt;percent&gt;</span>%]</div></div></div>'
info.innerHTML += '<div><div class="uk-grid-small" uk-grid><div class="uk-width-1-5 uk-text-right"><strong>get</strong></div><div class="uk-width-expand"><span class="uk-text-primary">&lt;id&gt;</span></div></div></div>'
info.innerHTML += '<div><div class="uk-grid-small" uk-grid><div class="uk-width-1-5 uk-text-right"><strong>set</strong></div><div class="uk-width-expand">color <span class="uk-text-primary">&lt;color&gt;</span> | id <span class="uk-text-primary">&lt;id&gt;</span></div></div></div>'
info.innerHTML += '<div><div class="uk-grid-small" uk-grid><div class="uk-width-1-5 uk-text-right"><strong>hide</strong></div><div class="uk-width-expand">layout | ids</div></div></div>'
info.innerHTML += '<div><div class="uk-grid-small" uk-grid><div class="uk-width-1-5 uk-text-right"><strong>show</strong></div><div class="uk-width-expand">layout | ids</div></div></div>'
info.innerHTML += '<div><div class="uk-grid-small" uk-grid><div class="uk-width-1-5 uk-text-right"><strong>exit</strong></div><div class="uk-width-expand"></div></div></div>'
info.innerHTML += '</div>'
info.insertAdjacentHTML('beforeend', '<h4><i class="fas fa-shapes uk-margin-small-right"></i>Current Element</h4><hr class="margin-remove">')
info.insertAdjacentHTML('beforeend', '<div class="uk-width-1-1" uk-grid>')
info.insertAdjacentHTML('beforeend', '<div><div class="uk-grid-small" uk-grid><div class="uk-width-1-5 uk-text-right"><strong>ID</strong></div><div class="uk-width-expand" id="currentId">draw</div></div></div>')
info.insertAdjacentHTML('beforeend', '<div><div class="uk-grid-small" uk-grid><div class="uk-width-1-5 uk-text-right"><strong>Node</strong></div><div class="uk-width-expand" id="currentNode">DIV</div></div></div>')
var buttonHTML = ''
buttonHTML += '<div class="uk-text-center">'
buttonHTML += '<button class="uk-button uk-button-small uk-button-secondary uk-margin-top" id="currentShowHide">Show</button>'
buttonHTML += '<button class="uk-button uk-button-small uk-button-secondary uk-margin-top uk-margin-small-left">Styles</button>'
buttonHTML += '<button class="uk-button uk-button-small uk-button-secondary uk-margin-top uk-margin-small-left">Classes</button>'
buttonHTML += '<button class="uk-button uk-button-small uk-button-secondary uk-margin-top uk-margin-small-left"><i class="fas fa-trash"></i></button>'
buttonHTML += '</div>'
// the DOM gets inserted incorrectly when I don't insert the entire row all at once
info.insertAdjacentHTML('beforeend', buttonHTML)
info.insertAdjacentHTML('beforeend', '</div>')
info.insertAdjacentHTML('beforeend', '<h4 class="uk-margin-top"><i class="fas fa-keyboard uk-margin-small-right"></i>Commands</h4><hr class="margin-remove">')
info.insertAdjacentHTML('beforeend', '<div class="uk-width-1-1" uk-grid>')
info.insertAdjacentHTML('beforeend', '<div><div class="uk-grid-small" uk-grid><div class="uk-width-1-5 uk-text-right"><strong>add</strong></div><div class="uk-width-expand">row | column | button | text | icon | video</div></div></div>')
info.insertAdjacentHTML('beforeend', '<div><div class="uk-grid-small" uk-grid><div class="uk-width-1-5 uk-text-right"><strong>bigger</strong></div><div class="uk-width-expand">[<span class="uk-text-primary">&lt;percent&gt;</span>% | default <span class="uk-text-primary">&lt;percent&gt;</span>%]</div></div></div>')
info.insertAdjacentHTML('beforeend', '<div><div class="uk-grid-small" uk-grid><div class="uk-width-1-5 uk-text-right"><strong>smaller</strong></div><div class="uk-width-expand">[<span class="uk-text-primary">&lt;percent&gt;</span>% | default <span class="uk-text-primary">&lt;percent&gt;</span>%]</div></div></div>')
info.insertAdjacentHTML('beforeend', '<div><div class="uk-grid-small" uk-grid><div class="uk-width-1-5 uk-text-right"><strong>get</strong></div><div class="uk-width-expand"><span class="uk-text-primary">&lt;id&gt;</span></div></div></div>')
info.insertAdjacentHTML('beforeend', '<div><div class="uk-grid-small" uk-grid><div class="uk-width-1-5 uk-text-right"><strong>set</strong></div><div class="uk-width-expand">color <span class="uk-text-primary">&lt;color&gt;</span> | id <span class="uk-text-primary">&lt;id&gt;</span></div></div></div>')
info.insertAdjacentHTML('beforeend', '<div><div class="uk-grid-small" uk-grid><div class="uk-width-1-5 uk-text-right"><strong>hide</strong></div><div class="uk-width-expand">layout | ids</div></div></div>')
info.insertAdjacentHTML('beforeend', '<div><div class="uk-grid-small" uk-grid><div class="uk-width-1-5 uk-text-right"><strong>show</strong></div><div class="uk-width-expand">layout | ids</div></div></div>')
info.insertAdjacentHTML('beforeend', '<div><div class="uk-grid-small" uk-grid><div class="uk-width-1-5 uk-text-right"><strong>export</strong></div><div class="uk-width-expand"></div></div></div>')
info.insertAdjacentHTML('beforeend', '<div><div class="uk-grid-small" uk-grid><div class="uk-width-1-5 uk-text-right"><strong>exit</strong></div><div class="uk-width-expand"></div></div></div>')
info.insertAdjacentHTML('beforeend', '</div>')
info.id = 'info'
Expand All @@ -135,6 +162,8 @@ ui-start: js-awaiter [] {
window.ui_builder = true
window.dsl_parser = 'ui-parse'
clear() // prevents the screen from flickering after the first command is entered
resolve()
}
} else {
Expand Down Expand Up @@ -186,7 +215,7 @@ ui-parse: function [

; js-native will return a void
(if not void? attempt [
do rejoin ["ui-" element "/add ^"" id "^""]
do rejoin ["ui-" element "/add ^"" trim id "^""]
][
ui-error rejoin ["You have entered an invalid element (" element ")"]
])
Expand Down Expand Up @@ -222,17 +251,45 @@ ui-row: js-native [
/add
/get
]{
let id = reb.Spell(reb.ArgR('id'))
var id = reb.Spell(reb.ArgR('id'))
let add = reb.Did(reb.ArgR('add'))
let get = reb.Did(reb.ArgR('get'))
if (id == '') {
id = newId('row')
}
var row = document.createElement('div')
row.setAttribute('uk-grid', '')
row.style.border = '1px solid #000000'
row.className = 'uk-width-1-1'
row.style.padding = '10px'
row.id = id
if (add == 1) {
document.querySelector('#draw').appendChild(row)
addElement(row)
}
}

ui-column: js-native [
id [text!]
/add
/get
]{
var id = reb.Spell(reb.ArgR('id'))
let add = reb.Did(reb.ArgR('add'))
let get = reb.Did(reb.ArgR('get'))
if (id == '') {
id = newId('column')
}
var col = document.createElement('div')
col.className = 'uk-width-expand'
col.style.padding = '10px'
col.id = id
if (add == 1) {
addElement(col)
}
}

Expand Down
5 changes: 5 additions & 0 deletions index.html
Expand Up @@ -3,6 +3,11 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

<title>Ren Garden</title>

<!-- Comments shouldn't come before DOCTYPE/charset -->
Expand Down

0 comments on commit bbb9948

Please sign in to comment.