Black Material

app_controller.php

<?php
require_once CORE_PATH . 'kumbia/controller.php';

class AppController extends Controller
{
    final protected function initialize()
    {
		$this->limit_params = false;
		$this->url = empty($_SERVER['PATH_INFO']) ? '/' : $_SERVER['PATH_INFO'];
		View::select('', 'default');
		
		if ( ! empty($_POST['model']) ) $_POST = (new $_POST['model'])->$_POST['action']($_POST);
		
		$this->box = (new Boxes)->read($_POST);
		$this->boxes = (new Boxes)->readBoxes($this->url);
    }

    final protected function finalize()
    {
        
    }
}

black_material.phtml

<div class="dialog row" title="Black Material">
    <form method="post" enctype="multipart/form-data">
        <div class="col s12">
            <label>URL:</label>
            <input name="url" placeholder="URL Here" type="text" value="<?=$box->url?>">
        </div>
        <div class="col s4">
            <label>Action:</label>
            <select name="action">
                <option value="create">Create</option>
                <option value="read" selected>Read</option>
                <option value="update">Update</option>
                <option value="delete">Delete</option>
            </select>
        </div>
        <div class="col s4">
            <label>Box:</label>
            <select class="submit" name="id">
                <option value="" selected>New</option>
                <?php foreach ($boxes as $k=>$v) : ?>
                    <option<?php if ($v->id == $box->id) echo ' selected'; ?> value="<?=$v->id?>"><?=$v->name?></option>
                <?php endforeach; ?>
            </select>
        </div>
        <div class="col s4">
            <label>Name:</label>
            <input name="name" placeholder="Name" type="text" value="<?=$box->name?>">
        </div>
        <div class="col s12">
            <ul class="tabs">
                <li class="tab col s4"><a class="active" href="#attrs">ATTRs</a></li>
                <li class="tab col s4"><a href="#html">HTML</a></li>
                <li class="tab col s4"><a href="#css">CSS</a></li>
                <li class="tab col s4"><a href="#js">JS</a></li>
            </ul>
        </div>
        <div id="attrs" class="col s12">
            <div class="col s4">
                <label>Parent:</label>
                <select name="boxes_id">
                    <option value="" selected>I am</option>
                    <?php foreach ($boxes as $k=>$v) : ?>
                        <option<?php if ($v->id == $box->boxes_id) echo ' selected'; ?> value="<?=$v->id?>"><?=$v->name?></option>
                    <?php endforeach; ?>
                </select>
            </div>
            <div class="col s4">
                <label>Hook:</label>
                <input name="hook" placeholder="Hook" type="text" value="<?=$box->hook?>">
            </div>
            <div class="col s4">
                <label>Weight:</label>
                <input name="weight" placeholder="Weight" type="text" value="<?=$box->weight?>">
            </div>
            <div class="col s4">
                <label>Border Size:</label>
                <select name="border_size">
                    <option value="" disabled>Border Size</option>
                    <?php for ($n=0; $n<=4; ++$n) : ?>
                        <option<?php if ($n == $box->border_size) echo ' selected'; ?> value="<?=$n?>"><?=$n?>px</option>
                    <?php endfor; ?>
                </select>
            </div>
            <div class="col s4">
                <label>Border Style:</label>
                <select name="border_style">
                    <option value="" disabled selected>Border Style</option>
                    <?php foreach (['dashed', 'dotted', 'inset', 'solid'] as $v) : ?>
                        <option<?php if ($v == $box->border_style) echo ' selected'; ?> value="<?=$v?>"><?=$v?></option>
                    <?php endforeach; ?>
                </select>
            </div>
            <div class="col s4">
                <label>Border Color:</label>
                <select name="border_color">
                    <option value="" disabled selected>Border Color</option>
                    <?php foreach (['black', 'blue', 'green', 'red'] as $v) : ?>
                        <option<?php if ($v == $box->border_color) echo ' selected'; ?> value="<?=$v?>"><?=$v?></option>
                    <?php endforeach; ?>
                </select>
            </div>
            <div class="col s4">
                <label>Bg Color:</label>
                <select name="bg_color">
                    <option value="" disabled>Bg Color</option>
                    <?php foreach (['red', 'pink', 'purple', 'deep-purple', 'indigo', 'blue', 'light-blue', 'cyan', 'teal', 'green', 'light-green', 'lime', 'yellow', 'amber', 'orange', 'deep-orange', 'brown', 'grey', 'blue-grey', 'black', 'white', 'transparent'] as $v) : ?>
                        <option<?php if ($v == $box->bg_color) echo ' selected'; ?> value="<?=$v?>"><?=$v?></option>
                    <?php endforeach; ?>
                </select>
            </div>
            <div class="col s4">
                <label>Margin Top:</label>
                <input name="margin_top" placeholder="Margin Top" type="text" value="<?=$box->margin_top?>">
            </div>
            <div class="col s4">
                <label>Bg Tone:</label>
                <select name="bg_tone">
                    <option value="" disabled>Bg Tone</option>
                    <?php foreach (['lighten-5', 'lighten-4', 'lighten-3', 'lighten-2', 'lighten-1', 'darken-1', 'darken-2', 'darken-3', 'darken-4', 'accent-1', 'accent-2', 'accent-3', 'accent-4'] as $v) : ?>
                        <option<?php if ($v == $box->bg_tone) echo ' selected'; ?> value="<?=$v?>"><?=$v?></option>
                    <?php endforeach; ?>
                </select>
            </div>
            <div class="col s4">
                <label>Grid Phone:</label>
                <select name="phone">
                    <option value="" disabled>Phone</option>
                    <?php for ($n=12; $n>=1; --$n) : ?>
                        <option<?php if ($n == $box->phone) echo ' selected'; ?> value="<?=$n?>">s<?=$n?></option>
                    <?php endfor; ?>
                </select>
            </div>
            <div class="col s4">
                <label>Grid Tablet:</label>
                <select name="tablet">
                    <option value="" disabled>Tablet</option>
                    <?php for ($n=12; $n>=1; --$n) : ?>
                        <option<?php if ($n == $box->tablet) echo ' selected'; ?> value="<?=$n?>">m<?=$n?></option>
                    <?php endfor; ?>
                </select>
            </div>
            <div class="col s4">
                <label>Grid Computer:</label>
                <select name="computer">
                    <option value="" disabled>Computer</option>
                    <?php for ($n=12; $n>=1; --$n) : ?>
                        <option<?php if ($n == $box->computer) echo ' selected'; ?> value="<?=$n?>">l<?=$n?></option>
                    <?php endfor; ?>
                </select>
            </div>
            <div class="col s4">
                <label>Text Color:</label>
                <select name="text_color">
                    <option value="" disabled>Text Color</option>
                    <?php foreach (['red-text', 'pink-text', 'deep-purple-text', 'indigo-text', 'blue-text', 'light-blue-text', 'cyan-text', 'teal-text', 'green-text', 'light-green-text', 'lime-text', 'yellow-text', 'amber-text', 'orange-text', 'deep-orange-text', 'brown-text', 'grey-text', 'blue-grey-text', 'black-text', 'white-text', 'transparent-text'] as $v) : ?>
                        <option<?php if ($v == $box->text_color) echo ' selected'; ?> value="<?=$v?>"><?=$v?></option>
                    <?php endforeach; ?>
                </select>
            </div>
            <div class="col s4">
                <label>Margin Bottom:</label>
                <input name="margin_bottom" placeholder="Margin Botttom" type="text" value="<?=$box->margin_bottom?>">
            </div>
            <div class="col s4">
                <label>Text Tone:</label>
                <select name="text_tone">
                    <option value="" disabled>Text Tone</option>
                    <?php foreach (['text-lighten-5', 'text-lighten-4', 'text-lighten-3', 'text-lighten-2', 'text-lighten-1', 'text-normal', 'text-darken-1', 'text-darken-2', 'text-darken-3', 'text-darken-4', 'text-accent-1', 'text-accent-2', 'text-accent-3', 'text-accent-4'] as $v) : ?>
                        <option<?php if ($v == $box->bg_tone) echo ' selected'; ?> value="<?=$v?>"><?=$v?></option>
                    <?php endforeach; ?>
                </select>
            </div>
        </div>
        <div id="html" class="col s12">
            <textarea class="materialize-textarea" name="html" placeholder="HTML Code Here"><?=$box->html?></textarea>  
        </div>
        <div id="css" class="col s12">
            <textarea class="materialize-textarea" name="css" placeholder="CSS Code Here"><?=$box->css?></textarea>
        </div>
        <div id="js" class="col s12">
            <textarea class="materialize-textarea" name="js" placeholder="JS Code Here"><?=$box->js?></textarea>
        </div>
        <div class="col s12 file-field input-field">
            <input multiple name="files[]" type="file">
            <input class="file-path" placeholder="Upload one or more files" type="text">
        </div>
        <div class="col s12">
            <button class="btn full grey" name="model" type="submit" value="boxes">Apply</button><br>&nbsp;
        </div>
    </form>
</div>

boxes.php

<?php
/**
 */
class Boxes extends Myar
{
    public $id;
    public $boxes_id = 0;
    public $url;
    public $name = 'New Box';
    public $hook;
    public $weight = 0;
    public $border_size = 0;
    public $border_style;
    public $border_color;
    public $bg_color = 'transparent';
    public $margin_top = 0;
    public $bg_tone;
    public $phone = 12;
    public $tablet = 4;
    public $computer = 3;
    public $text_color = 'black-text';
    public $margin_bottom = 0;
    public $text_tone;
    public $html;
    public $css;
    public $js;
    
    public function __isset($var) 
    { 
        $vars = get_object_vars($this); 
        return array_key_exists($var, $vars); 
    }
    
    public function __construct() 
    {
        if ( empty($this->url) )
            $this->url = empty($_SERVER['PATH_INFO']) ? '/' : $_SERVER['PATH_INFO'];
            
        if ($_FILES)
        {
            $in['image/gif'] = '/img';
            $in['image/jpg'] = '/img';
            $in['image/png'] = '/img';
            foreach ($_FILES['files']['error'] as $k=>$e)
            {
                if ($e == UPLOAD_ERR_OK)
                {
                    $temp = $_FILES['files']['tmp_name'][$k];
                    $name = basename($_FILES['files']['name'][$k]);
                    $type = $_FILES['files']['type'][$k];
                    $into = $_SERVER['DOCUMENT_ROOT'] . $in[$type] . "/$name";
                    move_uploaded_file($temp, $into);
                }
            }
        }
    }
    
    public function install()
    {
        $vars = get_object_vars($this);
        unset($vars['id']);
        $types = ['boolean'=>'bool', 'integer'=>'int', 'double'=>'float'];
        $sql = 'CREATE TABLE dbo.boxes (id int PRIMARY KEY IDENTITY(1,1), ';
        foreach ($vars as $k=>$v)
        {
            $type = empty($types[gettype($v)]) ? 'nvarchar(MAX)' : $types[gettype($v)];
            $sql .= "$k $type, ";
        }
        $sql = rtrim($sql, ', ') . ')';
        $this->query($sql);
    }
    
    public function filter($a)
    {
        $filter['html'] = 'trim';
        foreach ($a as $k=>$v)
        {
            if ( ! $this->__isset($k) ) continue;
            $this->$k = empty($filter[$k]) ? $v : $filter[$k]($v);
        }
    }
    
    public function create($a)
    {
        $this->filter($a);
        extract( (array)$this );
        $vars = get_object_vars($this);
        unset($vars['id']);
        $sql = 'INSERT INTO boxes (';
        foreach ($vars as $k=>$v) $sql .= "$k, ";
        $sql = rtrim($sql, ', ') . ') VALUES (';
        foreach ($vars as $k=>$v) $sql .= "'{$$k}', ";
        $sql = rtrim($sql, ', ') . ')';
        $id = $this->query($sql);
        return ['id'=>$id];
    }
    
    public function read($a)
    {
        if ( empty($a['id']) ) return $this;
        $sql = 'SELECT * FROM boxes WHERE id=?';
        return $this->row($sql, $a['id']);
    }
    
    public function readBoxes($url='/')
    {
        $sql = "SELECT * FROM boxes WHERE url LIKE ? ORDER BY weight";
        $rows = $this->rows($sql, $url);
        return $rows;
    }
    
    public function update($a)
    {
        $this->filter($a);
        extract( (array)$this );
        $vars = get_object_vars($this);
        $id = $vars['id'];
        unset($vars['id']);
        $sql = 'UPDATE boxes SET ';
        foreach ($vars as $k=>$v) $sql .= "$k='{$$k}', ";
        $sql = rtrim($sql, ', ') . ' WHERE id=' . $id;
        $this->query($sql);
        return ['id'=>$id];
    }
    
    public function delete($a)
    {
        $id = (int)$a['id'];
        $sql = "DELETE FROM boxes WHERE id=?";
        $this->query($sql, $id);
    }
}

default.phtml

<!DOCTYPE html>
<html lang="es">
    <head>
        <title>Black Material</title>
        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link href="/css/jquery-ui.css" media="all" rel="stylesheet">
        <link href="/css/materialize.min.css" media="all" rel="stylesheet">
        <link href="/css/style.css" media="all" rel="stylesheet">
        <link href="/css/hacks.css" media="all" rel="stylesheet">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body class="row" id="important">
        <?php
        function boxes($boxes, $boxes_id=0, $s='')
        {
            foreach($boxes as $box)
            {
                if ($box->boxes_id <> $boxes_id) continue;
                unset($boxes[$box->id]);

                $s .= "<div class=\"col s$box->phone m$box->tablet l$box->computer $box->bg_color $box->bg_tone $box->text_color $box->text_tone\" style=\"border: {$box->border_size}px $box->border_style $box->border_color; margin-bottom: {$box->margin_bottom}px; margin-top: {$box->margin_top}px;\">" .
                    str_replace('<?=$children?>', boxes($boxes, $box->id, $s), $box->html) .
                "</div>";
            }
            return $s;
        }
        echo boxes($boxes);
        ?>
        <?php include APP_PATH . 'views/black_material.phtml'; ?>
        <script src="/javascript/jquery/jquery-3.0.0.min.js"></script>
        <script src="/javascript/jquery/jquery-ui.min.js"></script>
        <script src="/javascript/materialize.min.js"></script>
        <script src="/javascript/script.js"></script>
    </body>
</html>

hacks.css

#important .col { line-height: 1.2; }

#important input:not([type]),
#important input[type=text],
#important input[type=password],
#important input[type=email],
#important input[type=url],
#important input[type=time],
#important input[type=date],
#important input[type=datetime],
#important input[type=datetime-local],
#important input[type=tel],
#important input[type=number],
#important input[type=search],
#important .select-wrapper input.select-dropdown,
#important textarea.materialize-textarea
{
    height: 30px;
    margin-bottom: 10px;
}
#important textarea.materialize-textarea { padding: 10px 0; }

#important .btn,
#important .btn-floating { box-shadow: none; }
#important .btn:hover,
#important .btn-floating:hover { box-shadow: 0 5px 11px 0 rgba(0,0,0,0.18),0 4px 15px 0 rgba(0,0,0,0.15) }
#important .row { margin-bottom: 0; }
#important .select-wrapper span.caret { top: 8px; }
#important .tabs,
#important .tab
{
    height: 30px;
    line-height: 30px;
}
#important .ui-dialog-content { padding: 0; }

myar.php

<?php
/**
 */
class Myar
{
	/**
     */  
	public function error($model='')
	{
		if ( $this->query->errorInfo()[0] == '42S02' )
		{
			(new $model)->install();
			return 1;
		}
		else _::d( $this->query->errorInfo() );
		return 0;
	}
	/**
     * STEP 1
	 */
	public function connect()
    {
		$config = require(APP_PATH.'config/databases.php');
		$config = $config['default'];
		$this->pdo = new PDO($config['dsn'], $config['username'], $config['password']);
    }
    /**
     * STEP 2
     */  
	public function query($sql, $values=NULL)
    {
		$this->connect();
        $this->query = $this->pdo->prepare($sql);
        if ( ! is_array($values) ) $values = array_slice(func_get_args(), 1);
		$error = 0;
        $this->query->execute($values) or $error = 1;
		if ($error)
		{
			$try = $this->error( get_called_class() );
			if ($try) $this->query($sql, $values);
		}
		return $this->pdo->lastInsertId();
	}
    /**
     * STEP 3a1
     */
    public function row($sql, $values=NULL, $test=0)
    {
		$this->query($sql, $values);
        $this->rows = $this->query->fetch(PDO::FETCH_OBJ);
		if ($test) _::d($this->rows);
		if ($this->rows) return $this->rows;
	}
    /**
     * STEP 3a2
     */
    public function rowOrCols($sql, $values=NULL, $test=0)
    {
        $this->rows = $this->row($sql, $values, $test);
		if ( ! $this->rows ) $this->rows = $this->cols();
		if ($test) _::d($this->rows);
		return $this->rows;
	}
    /**
     * STEP 3b
     */
    public function rows($sql, $values=NULL, $test=0)
    {
		$this->query($sql, $values);
        $rows = $this->query->fetchAll(PDO::FETCH_OBJ);
		$a = [];
		if ($rows) foreach ($rows as $row) $a[$row->id] = $row;
		if ($test) _::d($a);
		return $a;
	}
    /**
     * STEP 4 ONLY FOR FILL
     */
    public function cols($table='')
    {
		if ( ! $table ) $table = static::table();
		$sql = "SELECT COLUMN_NAME FROM INFORMATION_SCHEMA.COLUMNS WHERE TABLE_NAME=?";
		$this->query($sql, $table);
        $columns = $this->query->fetchAll(PDO::FETCH_OBJ);
		if ( ! $columns) return '';
        $o = new stdClass;
        foreach($columns as $column) $o->{$column->COLUMN_NAME} = '';
		return $o;
	}
    /**
     
    public function combo($field='', $test=0)
    {
		$table = static::table();
		$sql = "SELECT id, $field FROM $table";
		$rows = $this->rows($sql);
		if ($test) _::d($rows);
		return $rows;
	}*/
    /**
     */
	public static function table()
	{
        return strtolower( preg_replace( '/([A-Z])/', "_\\1", lcfirst( get_called_class() ) ) );
    }
}

script.js

$(function()
{
    // JQUERY UI
    $('.dialog').dialog({resizable:false, width:500});
    
    // MATERIALIZE
    $('.tabs').tabs();
    $('select').material_select();
    
    // CUSTOM
    $('body').on('change', '.submit', function()
    {
        $(this).parents('form').submit();
    });
    
    /*$('body').on('change', '.copy', function(e)
    {
        e.stopPropagation();
        var from = $(this).data('from');
        var val = $(this).find(from).text();
        var to = $(this).data('to');
        console.log('from: '+from+' val: '+val+' to: '+to);
        $(to).val(val);
    });*/
});

style.css

.full { width:100%; }