Skip to content

Instantly share code, notes, and snippets.

@primaryobjects

primaryobjects/index.html

Last active July 10, 2023 16:24
Show Gist options
  • Save primaryobjects/64734b8fe3f54aa637f444c95f061eed to your computer and use it in GitHub Desktop.
Save primaryobjects/64734b8fe3f54aa637f444c95f061eed to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. primaryobjects revised this gist Jun 15, 2017. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion translator.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -27,7 +27,7 @@ class Translator extends React.Component {

    render() {
    return (
    <div className={ 'translator-component ' + (this.state.isVisible ? '' : 'hidden-xs-down') } >
    <div className={ 'translator-component ' + (this.state.isVisible ? '' : 'hidden-xs-up') } >
    <div className="card">
    <div className="card-header">
    Translator
  2. primaryobjects revised this gist Jun 14, 2017. No changes.
  3. primaryobjects created this gist Jun 14, 2017.
    27 changes: 27 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,27 @@
    <!DOCTYPE html>
    <html>

    <head>
    <script data-require="[email protected]" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script data-require="tether@*" data-semver="1.4.0" src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
    <link data-require="[email protected]" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
    <script data-require="[email protected]" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
    <script data-require="react@*" data-semver="15.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.0/react.min.js"></script>
    <script data-require="react@*" data-semver="15.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.0/react-dom.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    </head>

    <body>
    <div class='container'>
    <h1>Hello World!</h1>
    <button id='btnShow' type="button" class="btn btn-primary">Show</button>
    <button id='btnHide' type="button" class="btn btn-primary">Hide</button>
    <div id="translator" class='mt-5'></div>
    <div id="output"></div>
    </div>

    <script src="translator.js"></script>
    <script src="script.js"></script>
    </body>

    </html>
    15 changes: 15 additions & 0 deletions script.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,15 @@
    var translator = ReactDOM.render(React.createElement(Translator), document.getElementById('translator'));

    $(function() {
    $('#btnShow').click(function() {
    $('#output').text('');

    translator.show('Hola Mundo! Este es el control de Translator.', 'en', 'es', function(text) {
    $('#output').text(text);
    });
    });

    $('#btnHide').click(function() {
    translator.hide();
    });
    });
    46 changes: 46 additions & 0 deletions translator.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,46 @@
    class Translator extends React.Component {
    constructor(props) {
    super(props);

    this.state = {
    sourceLang: 'es',
    destLang: 'en',
    text: '',
    isVisible: false
    };

    this.onTranslate = this.onTranslate.bind(this);
    };

    show(text, sourceLang, destLang, callback) {
    this.setState({ isVisible: true, text: text, sourceLang: sourceLang, destLang: destLang, callback: callback });
    }

    hide() {
    this.setState({ isVisible: false });
    }

    onTranslate() {
    this.state.callback('Hello world! This is the Translator control.');
    this.hide();
    }

    render() {
    return (
    <div className={ 'translator-component ' + (this.state.isVisible ? '' : 'hidden-xs-down') } >
    <div className="card">
    <div className="card-header">
    Translator
    </div>
    <div className="card-block">
    <h4 className="card-title"></h4>
    <p className="card-text">
    { this.state.text }
    </p>
    <a href="#" className="btn btn-primary" onClick={ this.onTranslate }>Translate</a>
    </div>
    </div>
    </div>
    );
    }
    };