JSFiddle - React, Tailwind, and code Playground

by ramnathv

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://public.opencpu.org/js/archive/opencpu-0.4.js"></script>
<script src="http://slidify.github.io/ile/libraries/widgets/interactive/js/ace/js/ace.js"></script>
<script src="http://angular-ui.github.io/ui-ace/build/ui-ace.js"></script>
<body ng-app="myApp">
  <div class='container' ng-controller='MainCtrl'>
  <div class='row' id='main'>
     <div class='col-lg-12'>
      <h2>Try rCharts Online</h2>
    <p>
      <span class='label label-default'>OpenCPU</span>
      <span class='label label-success'>AngularJS</span>
      <span class='label label-danger'>rCharts</span>
    </p>
         <div class='alert alert-success'>
             <button class="close" data-dismiss="alert" href="#" aria-hidden="true">&times;</button>
         <p>This is an interactive playground to try <a href='http://rcharts.io'>rCharts</a> online. You can select different examples, play with the code, or even type in your own before hitting the submit button to render the chart.
This application uses <a href='http://opencpu.org'>OpenCPU</a> to call R, <a href='http://angularjs.org'>AngularJS</a> for reactive bindings and the  the <a href='ace.c9.io'>Ace Editor</a> along with the <a href='http://angular-ui.github.io/ui-ace/'>Angular Ace module</a> for editing code.</p>
         </div>
      </div>
    </div>
  <div class='col-lg-4'>
     <div class='control-group'>
         <label>Select Example</label>
          <select ng-model='example' ng-options='example.title for example in examples'
           class='form-control'>
          </select><br/><br/>
     </div>
     <div ng-model='exampleCode' ui-ace="aceOptions">{{ exampleCode }}
      </div><br/>
    <input type='submit' value='Submit' 
     ...

CSS

@import url(http://fonts.googleapis.com/css?family=Lora|Lato);
h2 {
   font-family: Lato;   
}
p {
  font-family: "Lora";
  text-align: justify;
  line-height: 22px;
}
.ace_editor  {
  height : 200px;
}
#output {
  width: 100%;
  height: 500px;
}

JavaScript

ocpu.seturl("//public.opencpu.org/ocpu/github/rcharts/rCharts/R")

var myApp = angular.module('myApp', [
  'ui.ace',
  'AppControllers'
])


var AppControllers = angular.module('AppControllers', [])

AppControllers.controller('MainCtrl', 
  function($scope, $http){
    $scope.notloading = true
    $scope.gistId = 8063480
    $http.jsonp('https://api.github.com/gists/' + $scope.gistId + 
      '?callback=JSON_CALLBACK'
    ).success(function(result){
      $scope.files = result.data.files
      $scope.examples = JSON.parse($scope.files['examples.json'].content)
      $scope.example = $scope.examples[0]
      $scope.exampleNo = 0
      console.log($scope.example)
    })
    
    $scope.nextExample = function(){
      if ($scope.exampleNo < $scope.examples.length - 1){
        $scope.exampleNo = $scope.exampleNo + 1
        $scope.example = $scope.examples[$scope.exampleNo]
      }
    }
    
  
   
    $scope.$watch('example', function(newExample){
      $scope.example = newExample
      if (typeof newExample != 'undefined'){
        $scope.exampleNo = $scope.examples.indexOf(newExample)
        $scope.exampleCode = $scope.files[newExample.file].content
        $("#output").attr('src', "")
        $("#download").hide()
      }
    })
  
  
   $scope.makeChart = function(){
        $("#output").attr('src', '')
        $scope.notloading = false 
        var req = ocpu.call("make_chart", {
        text: $scope.exampleCode   
     }, function(session){
       $("#loading").hide()
       $("#output").attr('src', session.getLoc() + "files/output.html");  
       $("#download").show()
       $scope.$apply(function(){
         $scope.dnlink = session.getLoc() + "files/output.html"
       })
     }).fail(function(text){
      alert("Error: " + req.responseText);
     });  
   }
   
   $scope.aceOptions = {
     theme: 'solarized_dark',
     mode: 'r',
     useWrapMode : true
   }
 
})