fix samples in playground

playground/CMLint.js

@@ -22,12 +22,12 @@ define(['react', 'lodash', 'jquery', './libs/codemirror-4.8/lib/codemirror'], fu
     var GUTTER_ID = 'rt-annotations';
 
     function annotate(editor, annot) {
-        if (annot.index) {
+        //if (annot.index) {
-            //posFromIndex
+        //    //posFromIndex
-            var pos = editor.findPosH({line: 0, ch: 0}, 25, 'char');
+        //    var pos = editor.findPosH({line: 0, ch: 0}, 25, 'char');
-            var range = editor.findWordAt(pos);
+        //    var range = editor.findWordAt(pos);
-            editor.markText(range.anchor,  range.head, {className: 'editor-error'});
+        //    editor.markText(range.anchor,  range.head, {className: 'editor-error'});
-        }
+        //}
         var tipLabel = /*state.hasGutter &&*/ document.createDocumentFragment();
         var ann = {severity: 'error', message: annot.message};
         tipLabel.appendChild(annotationTooltip(ann));

playground/examples.js

@@ -19,7 +19,7 @@ define(['lodash', 'react', './examples.rt',
     //    return {templateProps: tuple[0], templateHTML: tuple[1]};
     //});
     Object.keys(samples).forEach(function (k) {
-        samples[k] = {name: k, templateProps: samples[k][0], templateHTML: samples[k][1]};
+        samples[k] = {name: k, templateProps: _.template(samples[k][0], {name: k}), templateHTML: samples[k][1]};
     });
 
     var Examples = React.createClass({

playground/fiddle-main.js

@@ -8,7 +8,8 @@ requirejs.config({
         //ace: '../ace-builds-1.1.8/src-min/ace',
         fiddle: './fiddle',
         text: 'libs/requirejs-plugins/text',
-        json: 'libs/requirejs-plugins/json'
+        json: 'libs/requirejs-plugins/json',
+        bootstrap: 'libs/bootstrap/bootstrap.min',
         //codeMirror: 'libs/codemirror-4.8/lib/codemirror',
         //htmlmixed: 'libs/codemirror-4.8/mode/htmlmixed/htmlmixed',
         //javascript: 'libs/codemirror-4.8/mode/javascript/javascript'
@@ -28,7 +29,7 @@ requirejs.config({
     }
 });
 
-requirejs(['jquery', 'react', 'fiddle'], function ($, React, fiddle) {
+requirejs(['jquery', 'react', 'fiddle', 'bootstrap'], function ($, React, fiddle) {
     'use strict';
     window.fiddle = React.render(fiddle(), document.getElementById('container'));
     $(function () {

playground/fiddle.js

@@ -62,7 +62,7 @@ define(['react', 'firebase', 'lodash', './fiddle.rt', 'jquery'], function (React
                 $.get('playground/samples/' + name + '.code', null, function (data2, textStatus2, jqXHR2) {
                     var currentState = {
                         templateHTML: rt,
-                        templateProps: data2
+                        templateProps: _.template(data2, {name: 'template'})
                     };
                     //this.updateSample(currentState);
                     playground.setState(currentState);

playground/fiddle.rt

@@ -31,6 +31,7 @@
             </div>
         </div>
         <ul class="nav-site">
+            <li><a href="index.html">HOME</a></li>
             <li><a href="https://github.com/wix/react-templates">docs</a></li>
             <!--<li><a href="https://github.com/wix/react-templates">support</a></li>-->
             <li><a href="https://github.com/wix/react-templates">download</a></li>

playground/fiddle.rt.js

@@ -90,7 +90,7 @@ define([
             'tabIndex': '-1',
             'href': '#',
             'onClick': onClick7.bind(this)
-        }, 'Weather'))))), React.createElement('ul', { 'className': 'nav-site' }, React.createElement('li', {}, React.createElement('a', { 'href': 'https://github.com/wix/react-templates' }, 'docs'))    /* <li><a href="https://github.com/wix/react-templates">support</a></li> */, React.createElement('li', {}, React.createElement('a', { 'href': 'https://github.com/wix/react-templates' }, 'download'))    /* <li><a href="https://github.com/wix/react-templates/">blog</a></li> */, React.createElement('li', {}, React.createElement('a', { 'href': 'https://github.com/wix/react-templates' }, 'github')))), React.createElement('div', { 'className': 'playground-container' }, React.createElement(playground, {
+        }, 'Weather'))))), React.createElement('ul', { 'className': 'nav-site' }, React.createElement('li', {}, React.createElement('a', { 'href': 'index.html' }, 'HOME')), React.createElement('li', {}, React.createElement('a', { 'href': 'https://github.com/wix/react-templates' }, 'docs'))    /* <li><a href="https://github.com/wix/react-templates">support</a></li> */, React.createElement('li', {}, React.createElement('a', { 'href': 'https://github.com/wix/react-templates' }, 'download'))    /* <li><a href="https://github.com/wix/react-templates/">blog</a></li> */, React.createElement('li', {}, React.createElement('a', { 'href': 'https://github.com/wix/react-templates' }, 'github')))), React.createElement('div', { 'className': 'playground-container' }, React.createElement(playground, {
             'ref': 'playground',
             'direction': 'vertical',
             'fiddle': true

playground/libs/bootstrap/bootstrap.js

@@ -0,0 +1,181 @@
+/*!
+ * Bootstrap v3.3.1 (http://getbootstrap.com)
+ * Copyright 2011-2014 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ */
+
+/*!
+ * Generated using the Bootstrap Customizer (http://getbootstrap.com/customize/?id=b3a553f0244f7a115bca)
+ * Config saved to config.json and https://gist.github.com/b3a553f0244f7a115bca
+ */
+if (typeof jQuery === 'undefined') {
+  throw new Error('Bootstrap\'s JavaScript requires jQuery')
+}
++function ($) {
+  var version = $.fn.jquery.split(' ')[0].split('.')
+  if ((version[0] < 2 && version[1] < 9) || (version[0] == 1 && version[1] == 9 && version[2] < 1)) {
+    throw new Error('Bootstrap\'s JavaScript requires jQuery version 1.9.1 or higher')
+  }
+}(jQuery);
+
+/* ========================================================================
+ * Bootstrap: dropdown.js v3.3.1
+ * http://getbootstrap.com/javascript/#dropdowns
+ * ========================================================================
+ * Copyright 2011-2014 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ * ======================================================================== */
+
+
++function ($) {
+  'use strict';
+
+  // DROPDOWN CLASS DEFINITION
+  // =========================
+
+  var backdrop = '.dropdown-backdrop'
+  var toggle   = '[data-toggle="dropdown"]'
+  var Dropdown = function (element) {
+    $(element).on('click.bs.dropdown', this.toggle)
+  }
+
+  Dropdown.VERSION = '3.3.1'
+
+  Dropdown.prototype.toggle = function (e) {
+    var $this = $(this)
+
+    if ($this.is('.disabled, :disabled')) return
+
+    var $parent  = getParent($this)
+    var isActive = $parent.hasClass('open')
+
+    clearMenus()
+
+    if (!isActive) {
+      if ('ontouchstart' in document.documentElement && !$parent.closest('.navbar-nav').length) {
+        // if mobile we use a backdrop because click events don't delegate
+        $('<div class="dropdown-backdrop"/>').insertAfter($(this)).on('click', clearMenus)
+      }
+
+      var relatedTarget = { relatedTarget: this }
+      $parent.trigger(e = $.Event('show.bs.dropdown', relatedTarget))
+
+      if (e.isDefaultPrevented()) return
+
+      $this
+        .trigger('focus')
+        .attr('aria-expanded', 'true')
+
+      $parent
+        .toggleClass('open')
+        .trigger('shown.bs.dropdown', relatedTarget)
+    }
+
+    return false
+  }
+
+  Dropdown.prototype.keydown = function (e) {
+    if (!/(38|40|27|32)/.test(e.which) || /input|textarea/i.test(e.target.tagName)) return
+
+    var $this = $(this)
+
+    e.preventDefault()
+    e.stopPropagation()
+
+    if ($this.is('.disabled, :disabled')) return
+
+    var $parent  = getParent($this)
+    var isActive = $parent.hasClass('open')
+
+    if ((!isActive && e.which != 27) || (isActive && e.which == 27)) {
+      if (e.which == 27) $parent.find(toggle).trigger('focus')
+      return $this.trigger('click')
+    }
+
+    var desc = ' li:not(.divider):visible a'
+    var $items = $parent.find('[role="menu"]' + desc + ', [role="listbox"]' + desc)
+
+    if (!$items.length) return
+
+    var index = $items.index(e.target)
+
+    if (e.which == 38 && index > 0)                 index--                        // up
+    if (e.which == 40 && index < $items.length - 1) index++                        // down
+    if (!~index)                                      index = 0
+
+    $items.eq(index).trigger('focus')
+  }
+
+  function clearMenus(e) {
+    if (e && e.which === 3) return
+    $(backdrop).remove()
+    $(toggle).each(function () {
+      var $this         = $(this)
+      var $parent       = getParent($this)
+      var relatedTarget = { relatedTarget: this }
+
+      if (!$parent.hasClass('open')) return
+
+      $parent.trigger(e = $.Event('hide.bs.dropdown', relatedTarget))
+
+      if (e.isDefaultPrevented()) return
+
+      $this.attr('aria-expanded', 'false')
+      $parent.removeClass('open').trigger('hidden.bs.dropdown', relatedTarget)
+    })
+  }
+
+  function getParent($this) {
+    var selector = $this.attr('data-target')
+
+    if (!selector) {
+      selector = $this.attr('href')
+      selector = selector && /#[A-Za-z]/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') // strip for ie7
+    }
+
+    var $parent = selector && $(selector)
+
+    return $parent && $parent.length ? $parent : $this.parent()
+  }
+
+
+  // DROPDOWN PLUGIN DEFINITION
+  // ==========================
+
+  function Plugin(option) {
+    return this.each(function () {
+      var $this = $(this)
+      var data  = $this.data('bs.dropdown')
+
+      if (!data) $this.data('bs.dropdown', (data = new Dropdown(this)))
+      if (typeof option == 'string') data[option].call($this)
+    })
+  }
+
+  var old = $.fn.dropdown
+
+  $.fn.dropdown             = Plugin
+  $.fn.dropdown.Constructor = Dropdown
+
+
+  // DROPDOWN NO CONFLICT
+  // ====================
+
+  $.fn.dropdown.noConflict = function () {
+    $.fn.dropdown = old
+    return this
+  }
+
+
+  // APPLY TO STANDARD DROPDOWN ELEMENTS
+  // ===================================
+
+  $(document)
+    .on('click.bs.dropdown.data-api', clearMenus)
+    .on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
+    .on('click.bs.dropdown.data-api', toggle, Dropdown.prototype.toggle)
+    .on('keydown.bs.dropdown.data-api', toggle, Dropdown.prototype.keydown)
+    .on('keydown.bs.dropdown.data-api', '[role="menu"]', Dropdown.prototype.keydown)
+    .on('keydown.bs.dropdown.data-api', '[role="listbox"]', Dropdown.prototype.keydown)
+
+}(jQuery);

playground/libs/bootstrap/bootstrap.min.js

@@ -0,0 +1,11 @@
+/*!
+ * Bootstrap v3.3.1 (http://getbootstrap.com)
+ * Copyright 2011-2014 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ */
+
+/*!
+ * Generated using the Bootstrap Customizer (http://getbootstrap.com/customize/?id=b3a553f0244f7a115bca)
+ * Config saved to config.json and https://gist.github.com/b3a553f0244f7a115bca
+ */
+if("undefined"==typeof jQuery)throw new Error("Bootstrap's JavaScript requires jQuery");+function(t){var o=t.fn.jquery.split(" ")[0].split(".");if(o[0]<2&&o[1]<9||1==o[0]&&9==o[1]&&o[2]<1)throw new Error("Bootstrap's JavaScript requires jQuery version 1.9.1 or higher")}(jQuery),+function(t){"use strict";function o(o){o&&3===o.which||(t(n).remove(),t(a).each(function(){var e=t(this),n=r(e),a={relatedTarget:this};n.hasClass("open")&&(n.trigger(o=t.Event("hide.bs.dropdown",a)),o.isDefaultPrevented()||(e.attr("aria-expanded","false"),n.removeClass("open").trigger("hidden.bs.dropdown",a)))}))}function r(o){var r=o.attr("data-target");r||(r=o.attr("href"),r=r&&/#[A-Za-z]/.test(r)&&r.replace(/.*(?=#[^\s]*$)/,""));var e=r&&t(r);return e&&e.length?e:o.parent()}function e(o){return this.each(function(){var r=t(this),e=r.data("bs.dropdown");e||r.data("bs.dropdown",e=new i(this)),"string"==typeof o&&e[o].call(r)})}var n=".dropdown-backdrop",a='[data-toggle="dropdown"]',i=function(o){t(o).on("click.bs.dropdown",this.toggle)};i.VERSION="3.3.1",i.prototype.toggle=function(e){var n=t(this);if(!n.is(".disabled, :disabled")){var a=r(n),i=a.hasClass("open");if(o(),!i){"ontouchstart"in document.documentElement&&!a.closest(".navbar-nav").length&&t('<div class="dropdown-backdrop"/>').insertAfter(t(this)).on("click",o);var d={relatedTarget:this};if(a.trigger(e=t.Event("show.bs.dropdown",d)),e.isDefaultPrevented())return;n.trigger("focus").attr("aria-expanded","true"),a.toggleClass("open").trigger("shown.bs.dropdown",d)}return!1}},i.prototype.keydown=function(o){if(/(38|40|27|32)/.test(o.which)&&!/input|textarea/i.test(o.target.tagName)){var e=t(this);if(o.preventDefault(),o.stopPropagation(),!e.is(".disabled, :disabled")){var n=r(e),i=n.hasClass("open");if(!i&&27!=o.which||i&&27==o.which)return 27==o.which&&n.find(a).trigger("focus"),e.trigger("click");var d=" li:not(.divider):visible a",s=n.find('[role="menu"]'+d+', [role="listbox"]'+d);if(s.length){var p=s.index(o.target);38==o.which&&p>0&&p--,40==o.which&&p<s.length-1&&p++,~p||(p=0),s.eq(p).trigger("focus")}}}};var d=t.fn.dropdown;t.fn.dropdown=e,t.fn.dropdown.Constructor=i,t.fn.dropdown.noConflict=function(){return t.fn.dropdown=d,this},t(document).on("click.bs.dropdown.data-api",o).on("click.bs.dropdown.data-api",".dropdown form",function(t){t.stopPropagation()}).on("click.bs.dropdown.data-api",a,i.prototype.toggle).on("keydown.bs.dropdown.data-api",a,i.prototype.keydown).on("keydown.bs.dropdown.data-api",'[role="menu"]',i.prototype.keydown).on("keydown.bs.dropdown.data-api",'[role="listbox"]',i.prototype.keydown)}(jQuery);

playground/playground.js

@@ -1,5 +1,5 @@
 /*eslint-env browser*/
-define(['react', 'jquery', 'lodash', './playground-fiddle.rt', './playground.rt', './CMLint'], function (React, $, _, pgFiddleTemplate, playgroundTemplate, CMLint) {
+define(['react', 'jquery', 'lodash', './playground-fiddle.rt', './playground.rt'], function (React, $, _, pgFiddleTemplate, playgroundTemplate) {
     'use strict';
     function emptyFunc() {
         return null;

playground/samples/hello.code

@@ -1,5 +1,5 @@
-var hello = React.createClass({
+var <%= name %> = React.createClass({
     render: function () {
-        return helloRT.apply(this);
+        return <%= name %>RT.apply(this);
     }
 });

playground/samples/rt-if.code

@@ -1,4 +1,4 @@
-var rtIf = React.createClass({
+var <%= name %> = React.createClass({
     getInitialState: function () {
         return {open: false};
     },
@@ -6,6 +6,6 @@ var rtIf = React.createClass({
         this.setState({open: !this.state.open});
     },
     render: function () {
-        return rtIfRT.apply(this);
+        return <%= name %>RT.apply(this);
     }
 });

playground/samples/rt-props.code

@@ -1,4 +1,4 @@
-var props = React.createClass({
+var <%= name %> = React.createClass({
     mixins: [React.addons.LinkedStateMixin],
     getInitialState: function() {
         return { key: 'color', val: 'blue' };
@@ -13,6 +13,6 @@ var props = React.createClass({
         return ret;
     },
     render: function () {
-        return propsRT.apply(this);
+        return <%= name %>RT.apply(this);
     }
 });

playground/samples/rt-repeat.code

@@ -1,10 +1,10 @@
-var repeat = React.createClass({
+var <%= name %> = React.createClass({
     getInitialState: function () {
         return {
             items: ['One', 'Two', 'Three']
         };
     },
     render: function () {
-        return repeatRT.apply(this);
+        return <%= name %>RT.apply(this);
     }
 });

playground/samples/todo.code

@@ -1,4 +1,4 @@
-var todo = React.createClass({
+var <%= name %> = React.createClass({
     mixins: [React.addons.LinkedStateMixin],
     getInitialState: function () {
         return {edited: '', todos: [], counter: 0};
@@ -22,6 +22,6 @@ var todo = React.createClass({
         this.setState({todos: _.filter(this.state.todos, {done: false})});
     },
     render: function () {
-        return todoRT.apply(this);
+        return <%= name %>RT.apply(this);
     }
 });

playground/samples/weather.code

@@ -1,4 +1,4 @@
-var weather = React.createClass({
+var <%= name %> = React.createClass({
     mixins: [React.addons.LinkedStateMixin],
     getInitialState: function() {
         this.cityIds = [5391959,293397,2643743];
@@ -31,6 +31,6 @@ var weather = React.createClass({
         this.setState({ loading:false, info: result.list });
     },
     render: function () {
-        return weatherRT.apply(this);
+        return <%= name %>RT.apply(this);
     }
 });