Untitled

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="//rawgit.com/magnumjs/mag.js/master/mag.min.js"></script>
  <meta charset="utf-8">
  <title>Mag.JS</title>
</head>

<body>
  <h1>Hello Mag.JS!</h1>
  <a href="https://github.com/magnumjs/mag.js">GitHub</a>
  <hr/>

  <div id="app">
    <div>
      <div class="tabs">
        <ul>
          <li class="tab"><a class=" ">list</a>
          </li>
        </ul>
      </div>

      <div class="content"></div>

    </div>
  </div>

  <div class="hide">
    <div id="list">
      <ul class="itemlist">
        <li></li>
      </ul>
    </div>

    <div id="settings">
      <div class="settings">
        <div>
          <input type="checkbox"/>big fonts
        </div>
        <div>
          <button class="random">random color</button>
        </div>
        <div>
          <button class="reset">reset</button>
        </div>
      </div>
    </div>

    <div id="about">
      <div class="about">This is a sample demo
        <hr/>
        <textarea></textarea>
      </div>
    </div>
  </div>
  
  <script src="app.js"></script>

</body>

</html>

var app = {
  //model
  data: {
    "tabs": ["list", "settings", "about"],
    "settings": {
      "bigFonts": false,
      "color": ''
    },
    "selectedItem": "list",
    "items": [{
      "text": "Would I rather be feared or loved? Easy, both. I want people to be afraid of how much they love me. - Michael Scott"
    }, {
      "text": "Sorry I annoyed you with my friendship. -Andy "
    }, {
      "text": "I am not a security threat. And, my middle name is Kurt, not Fart. - Dwight Schrute"
    }]
  },
  randomizeColor: function() {
    this.onchange("color", "rgb(0, " + (Math.random() * 125 | 0) + ", 0)")
  },
  reset: function() {
    this.onchange("bigFonts", false)
    this.onchange("color", null)
  },
  //controller
  controller: function() {
    this.data = app.data

    this.changeTab = function(name) {
      this.data.selectedItem = name
    }.bind(this)

    this.changeSetting = function(name, value) {
      this.data.settings[name] = value
    }.bind(this)
  },
  //view
  view: function(ctrl) {
    ctrl.div = {
      _class: "app " + (ctrl.data.settings.bigFonts ? "big" : ""),
      _style: 'background-color:' + ctrl.data.settings.color
    }

    ctrl.tab = tabs({
      tabs: ctrl.data.tabs,
      selectedItem: ctrl.data.selectedItem,
      onchange: ctrl.changeTab
    })

    var tabComps = {
      "list": list.bind({}, {
        items: ctrl.data.items
      }),
      "settings": settings.bind({}, {
        settings: ctrl.data.settings,
        onchange: ctrl.changeSetting
      }),
      "about": about.bind({}, ctrl)
    }

    // inner components
    ctrl.content = app.choose(ctrl.data.selectedItem, tabComps)
  }
}

var tabs = function(ctrl) {
  return ctrl.tabs.map(function(tabName) {
    return tab(ctrl, tabName)
  })
}

var tab = function(ctrl, name) {
  return {
    "a": {
      _class: ctrl.selectedItem == name ? "selected" : "",
      _onclick: ctrl.onchange.bind(ctrl, name),
      _text: name
    }
  }
}

var about = function(ctrl) {
  return mag.module('about', {
    view: function(state, props) {
      state.textarea = {
        _text: JSON.stringify(props.data),
        _onchange: function() {
          ctrl.data = JSON.parse(this.value);
        }
      }
    }
  }, {
    data: ctrl.data
  }, true)
}

var list = function(ctrl) {
  return mag.module('list', {
    view: function(state, props) {
      state.li = props.items.map(function(item) {
        return item.text
      })
    }
  }, {
    items: ctrl.items
  }, true)
}

var settings = function(ctrl) {

  return mag.module('settings', {
    view: function(state, props) {
      state.input = {
        _checked: props.bigFonts ? 'true' : null,
        _onclick: props.onchange.bind(ctrl, "bigFonts", !ctrl.settings.bigFonts)
      }
      state.random = {
        _onclick: app.randomizeColor.bind(ctrl)
      }
      state.reset = {
        _onclick: app.reset.bind(ctrl)
      }
    }
  }, {
    bigFonts: ctrl.settings.bigFonts,
    onchange: ctrl.onchange
  }, true)
}

app.choose = function(name, options) {
  return options[name]()
}


mag.module("app", app)

.hide {
  display: none;
}


body {
    background-color: #466a5c;
    color: white;
}

a, a:visited, a:active {
    color: white;
    text-decoration: none;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.app {
    margin: 1.5em;
}

.app.big {
    font-size: 2em;
}

.sidebar, .itemlist {
    color: black;
    min-height: 300px;
}

.tabs {
    background-color: #222222;
    margin-bottom: 1em;
    overflow: hidden;
}

.tabs li {
    float: left;
    margin: 0 .25em;
    padding-top: 4px;
    border-bottom: 4px solid #BEAA8E;
}

.tabs a {
    padding: .5em;
    display: block;
}

.tabs a.selected {
    background-color: #BEAA8E;
}

.tabs a:hover {
    background-color: #BEAA8E;
}

.itemlist {
    color: white;
}

ul.itemlist li {
    padding: 1em;
    margin-bottom: 1em;
    background-color: #222222;
}

#Mag.JS

## plunk boilerplate

Take from: 
http://jsfiddle.net/kHaRa/1/

and from:
http://jlongster.com/Removing-User-Interface-Complexity,-or-Why-React-is-Awesome