react-templates/playground/fiddle.js

85 lines
2.9 KiB
JavaScript
Raw Normal View History

2014-12-02 17:59:03 +01:00
/**
* Created by avim on 12/2/2014.
*/
/*eslint global-strict:0, no-alert:0*/
2014-12-28 10:47:34 +01:00
/*global alert:true*/
2014-12-08 13:48:12 +01:00
define(['react', 'firebase', 'lodash', './fiddle.rt', 'jquery'], function (React, Firebase, _, fiddleTemplate, $) {
'use strict';
function generateRandomId() {
var uuid = 'xxxxxxxx'.replace(/[xy]/g, function (c) {
var r = _.random(0, 15);
return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
});
return uuid;
}
2014-12-03 17:45:29 +01:00
var Fiddle = React.createClass({
displayName: 'Fiddle',
componentDidMount: function () {
if (window.location.hash) {
var newHash = window.location.hash.replace('#', '');
var firebase = new Firebase('https://reacttemplates.firebaseio-demo.com/');
firebase.child('fiddles').child(newHash).on('value', function (snapshot) {
this.refs.playground.setState(snapshot.val());
Firebase.goOffline();
}.bind(this));
} else {
Firebase.goOffline();
}
},
save: function () {
var newHash = generateRandomId();
window.location.hash = newHash;
Firebase.goOnline();
var playgroundState = this.refs.playground.state;
2014-12-02 17:59:03 +01:00
var firebase = new Firebase('https://reacttemplates.firebaseio-demo.com/');
firebase.child('fiddles').child(newHash).set(playgroundState, function () {
2014-12-02 17:59:03 +01:00
Firebase.goOffline();
alert('saved the fiddle, you can share your url');
2014-12-02 17:59:03 +01:00
}.bind(this));
2014-12-08 13:48:12 +01:00
},
clear: function () {
this.refs.playground.clear();
},
loadSample: function (name) {
//require(['text!./samples/' + name + '.rt', 'text!./samples/' + name + '.code'], function (rt, code) {
// var currentState = {
// templateHTML: rt,
// templateProps: code
// };
// //this.updateSample(currentState);
// this.refs.playground.setState(currentState);
//});
2014-12-02 17:59:03 +01:00
2014-12-08 13:48:12 +01:00
var playground = this.refs.playground;
$.get('playground/samples/' + name + '.rt', null, function (data, textStatus, jqXHR) {
var rt = data;
$.get('playground/samples/' + name + '.code', null, function (data2, textStatus2, jqXHR2) {
var currentState = {
templateHTML: rt,
2014-12-30 10:05:27 +01:00
templateProps: _.template(data2, {name: 'template'})
2014-12-08 13:48:12 +01:00
};
//this.updateSample(currentState);
playground.setState(currentState);
});
});
//this.refs.playground.clear();
},
2014-12-02 17:59:03 +01:00
render: function () {
return fiddleTemplate.apply(this);
}
});
2014-12-02 17:59:03 +01:00
return Fiddle;
2014-12-02 17:59:03 +01:00
});