Skip to content

Instantly share code, notes, and snippets.

View benkeen's full-sized avatar

Ben Keen benkeen

View GitHub Profile
@benkeen
benkeen / gist:5ff326a3bc6dd945519f
Last active August 29, 2015 14:19
Solution 2: Overriding Tooltip
// our superior dash tooltip, introducing the not-at-all-deprecated <blink> tag
var DashTooltip = React.createClass({
render: function () {
return (
<div className="tt"><blink>{this.props.text}</blink></div>
);
}
});
FauxtonAPI.updateComponent('Tooltip', DashTooltip);
@benkeen
benkeen / gist:818b6c8e4d91c2ff440f
Created April 23, 2015 18:30
Solution 2: Fauxton allowing Tooltip to be overridden
var Table = React.createClass({
getRows: function () {
return _.map(this.props.rows, function (row, i) {
return <TableRow key={i} row={row} />
});
},
render: function () {
return (
<table>
<thead>
@benkeen
benkeen / gist:f4c37ac5b7b2340ad433
Last active August 29, 2015 14:19
Solution 2: FauxtonAPI functions
var registeredComponents = {};
// registers a new component. Requires the component name to be unique
FauxtonAPI.registerComponent = function (name, component) {
if (_.has(registeredComponents, name)) {
console.error("Error: a component with the name " + name + " has already been registered.");
return;
}
registeredComponents[name] = component;
};
@benkeen
benkeen / gist:2a6706ac08088ec925c2
Last active August 29, 2015 14:19
Solution 1: props
// the order of this file has to go lowest level elements first because they're referenced immediately
// as the JS first executes
var Tooltip = React.createClass({
render: function () {
return (
<div className="tt">{this.props.text}</div>
);
}
});
@benkeen
benkeen / gist:c68c0635d3be672482ef
Last active August 29, 2015 14:19
Overriding React Components
var Table = React.createClass({
getRows: function () {
return _.map(this.props.rows, function (row, i) {
return <TableRow key={i} row={row} />
});
},
render: function () {
return (
<table>
<thead>
@benkeen
benkeen / test
Created February 23, 2015 21:28
test
// Licensed under the Apache License, Version 2.0 (the "License"); you may not
// use this file except in compliance with the License. You may obtain a copy of
// the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
// License for the specific language governing permissions and limitations under
var AddFilterForm = React.createClass({
getDefaultProps: function () {
return {
tooltip: ''
};
},
componentDidMount: function () {
this.focusFilterField();
},
{
"deps": [
{
"name": "fauxton"
},
{
"name": "databases"
},
{
"name": "documents"
Views.ConfigHeader = FauxtonAPI.View.extend({
template: 'addons/config/templates/header',
className: 'header-right',
initialize: function () {
this.rightHeader = this.setView('#add-section-button', new Views.AddConfigOptionsButton({
toggleTrayBtnSelector: '#add-new-section',
collection: this.collection
@benkeen
benkeen / gist:4242808
Created December 9, 2012 00:57
A requireJS module for simplifying intensive DOM-insertion code. It lets you add a list of actions to perform on the DOM, each with a test to confirm when the DOM insertion is complete. The code then sequentially executes each action one by one, only performing the next action when the previous is compete. This ensures that the DOM will reliably…
/*global console:false,setTimeout:false,setInterval:false,clearInterval:false*/
define([], function() {
"use strict";
/**
* @name Queue
* @description A requireJS module for simplifying intensive DOM-insertion code. It lets you add a list of actions
* to perform on the DOM, each with a test to confirm when the DOM insertion is complete. The code then sequentially
* executes each action one by one, only performing the next action when the previous is compete. This ensures that