Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
​
<head>
  <link href="//cdn.jsdelivr.net/picnicss/4.1.1/picnic.min.css" rel="stylesheet">
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
​
<body>
  <h1>Hello Mag.JS!</h1>
  <a target="_top" href="https://github.com/magnumjs/mag.js">GitHub</a>
  <hr/>
​
  <!-- TABS -->
  <div id="reactExampleGoesHere">
    <div class="countryList"></div>
    <div class="cityList"></div>
  </div>
​
  <div class="template hide">
    <div id="TabList">
      <div class="list">
        <a></a>
      </div>
    </div>
  </div>
  <!-- TABS -->
  <hr/>
​
​
  <script src="//rawgit.com/magnumjs/mag.js/master/mag-latest.min.js"></script>
  <script src="//rawgit.com/magnumjs/mag.js/master/dist/mag.addons.0.22.min.js"></script>
</body>
​
</html>
 
.hide {
  display: none;
}
​
.show {
  display: inline-block;
}
​
.done, [completed="true"] {
  text-decoration: line-through;
  color: grey;
}
​
.simple-alert {
  height: 70px;
  padding: 20px;
  border: solid 1px #ebebeb;
  color: white;
  vertical-align: middle;
}
​
.simple-alert i {
  display: inline-block;
  font-style: normal;
  cursor: pointer;
}
​
.simple-alert i:before {
  content: '✖';
}
​
.simple-alert.default {
  background-color: blue;
}
​
.simple-alert.success {
  background-color: green;
}
​
.simple-alert.error {
  background-color: red;
}
​
#reactExampleGoesHere a,
#reactExampleGoesHere a {
  border: 1px solid;
  margin-right: 10px;
  text-decoration: none;
  background-color: #2bbb5b;
  color: white;
  padding: 10px;
}
​
#reactExampleGoesHere a.excited,
#reactExampleGoesHere a.excited {
  background-color: #2bbb5b;
}
​
#reactExampleGoesHere a.neutral,
#reactExampleGoesHere a.neutral {
  background-color: #39a5de;
}
​
#reactExampleGoesHere div.list,
#reactExampleGoesHere div.list {
  height: 70px;
}
​
div#message {
  display: none;
}
​
​
/* modal */
​
.modal {
  position: fixed;
  top: 10px;
  left: 50%;
  width: 80%;
  z-index: 100;
  background-color: transparent;
}
​
hr {
  border: dashed 1px blue;
  padding-left: 4px;
}
​
.modal .wrapper {
  position: relative;
  left: -50%;
  background-color: #fff;
  padding: 10px;
  border: solid 2px #444;
  border-radius: 10px;
}
​
.modal .content {
  margin-bottom: 0;
  margin-bottom: 0;
  overflow-x: hidden;
  overflow-y: scroll;
}
​
.modal .close-modal {
  /* float: right; */
  position: relative;
  right: -7px;
  bottom: 35px;
}
​
​
/* STARRED */
​
.hide {
  display:none;
}
 div[id^=star] {
      line-height: 1.6em;
      font-size: 50px;
      float:left;
 }
​
    .favorite-star-character {
      color: #ccd6dd;
      font-weight: 300;
      cursor: pointer;
      display: inline-block;
      transform: scale3d(1.0, 1.0, 1.0);
      -webkit-transform: scale3d(1.0, 1.0, 1.0);
      -moz-transform: scale3d(1.0, 1.0, 1.0);
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
    @-webkit-keyframes favorite-star-bounce {
      0% {
        -webkit-transform: scale3d(1.0, 1.0, 1.0);
      }
      50% {
        -webkit-transform: scale3d(1.4, 1.4, 1.0);
      }
      to {
        -webkit-transform: scale3d(1.0, 1.0, 1.0);
      }
    }
    @-moz-keyframes favorite-star-bounce {
      0% {
        -moz-transform: scale3d(1.0, 1.0, 1.0);
      }
      50% {
        -moz-transform: scale3d(1.4, 1.4, 1.0);
      }
      to {
        -moz-transform: scale3d(1.0, 1.0, 1.0);
      }
    }
    @keyframes favorite-star-bounce {
      0% {
        transform: scale3d(1.0, 1.0, 1.0);
      }
      50% {
        transform: scale3d(1.4, 1.4, 1.0);
      }
      100% {
        transform: scale3d(1.0, 1.0, 1.0);
      }
    }
    .favorite-star-character.active {
      color: #ffac33;
      -webkit-animation: favorite-star-bounce 0.3s ease-in-out;
      -moz-animation: favorite-star-bounce 0.3s ease-in-out;
      animation: favorite-star-bounce 0.3s ease-in-out;
    }
    .favorite-star-character.hover {
      color: #ffac33;
    }
 
// http://blog.arkency.com/2014/10/react-dot-js-and-dynamic-children-why-the-keys-are-important/
​
var TabList = {}
​
TabList.controller = function(props) {
  this.active = 0
}
​
TabList.view = function(state, props) {
​
  state.list = {
    a: props.items.map(function(item, i) {
      return {
        _className: {
          "excited": i == state.active,
          "neutral": i != state.active
        },
        _href: "#",
        _text: item,
        _onclick: function(a, event) {
          state.active = a
          props.clickHandler(item, a, event);
        }.bind(state, i)
      }
    })
  }
}
​
​
var CountriesComponent = {}
​
​
CountriesComponent.controller = function(props) {
​
  this['active-country'] = 0
  this['active-city'] = 0
​
  this.selectedCountry = props.countries[0]
​
  this.handleClick = function(type, item, index, event) {
    if (type == 'country') this.selectedCountry = item
    this['active-' + type] = index
    event.preventDefault();
  }.bind(this)
​
}
​
CountriesComponent.view = function(state, props) {
​
  state.countryList = mag.module("TabList", TabList, {
    key: "countryList",
    items: props.countries,
    clickHandler: state.handleClick.bind(state, 'country')
  })
​
​
  state.cityList = mag.module("TabList", TabList, {
    key: state.selectedCountry,
    items: props.citiesPerCountry[state['active-country']],
    clickHandler: state.handleClick.bind(state, 'city')
  })
​
}
​
var citiesPerCountry = [
  ['New York', 'Detroit'],
  ['Ontario', 'Toronto']
]
​
var countries = ['USA', 'CAN']
​
var props = {
  citiesPerCountry: citiesPerCountry,
  countries: countries
}
​
mag.module("reactExampleGoesHere", CountriesComponent, props)
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers