Skip to content

Instantly share code, notes, and snippets.

@bigslycat

bigslycat/controls.jsx

Last active March 14, 2017 09:43
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save bigslycat/b1200a8f792656ce15d6c649d5fc1ae5 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save bigslycat/b1200a8f792656ce15d6c649d5fc1ae5 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. bigslycat revised this gist Mar 14, 2017. 1 changed file with 4 additions and 0 deletions.
    4 changes: 4 additions & 0 deletions modules.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -16,6 +16,10 @@ class Modules extends React.Component {
    swapModules(module, direction) {
    const moduleId = module.module_id;
    const swapModuleId = direction == 'left' ? module.left_module_id : module.right_module_id;

    // А вот так нельзя делать. Компонент — это просто вьюха. Он не знает, откуда ему приходят данные и каким образом.
    // Никаких обращений к данным. У его есть только пропсы и стейт. Если нужно внешнее действие, передавай ему колбэк
    // с соответствующими параметрами.
    axios.post('/ajax/swap-modules', {
    selectedModule: moduleId,
    swapModule: swapModuleId
  2. bigslycat revised this gist Mar 14, 2017. 1 changed file with 0 additions and 9 deletions.
    9 changes: 0 additions & 9 deletions modules.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -26,15 +26,6 @@ class Modules extends React.Component {
    });
    }

    componentWillMount() {
    }

    componentDidMount() {
    }

    componentDidUpdate() {
    }

    render() {
    return <ModulesRow modules={this.state.modules} slug={this.data.section_slug}
    swapModules={this.swapModules}></ModulesRow>;
  3. bigslycat revised this gist Mar 14, 2017. 1 changed file with 2 additions and 10 deletions.
    12 changes: 2 additions & 10 deletions controls.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -5,18 +5,10 @@ class Controls extends React.Component {
    constructor(props) {
    super(props);
    this.controlsStyle = {position: 'absolute'};

    this.moveLeft = this.moveLeft.bind(this);
    this.moveRight = this.moveRight.bind(this);
    }

    moveLeft() {
    this.props.swapModules(this.props.module, 'left')
    }

    moveRight() {
    this.props.swapModules(this.props.module, 'right')
    }
    moveLeft = () => this.props.swapModules(this.props.module, 'left');
    moveRight = () => this.props.swapModules(this.props.module, 'right');

    render() {
    if (!this.props.show) return null;
  4. bigslycat revised this gist Mar 14, 2017. 1 changed file with 2 additions and 6 deletions.
    8 changes: 2 additions & 6 deletions controls.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -23,12 +23,8 @@ class Controls extends React.Component {

    return (
    <div style={this.controlsStyle}>
    {this.props.module.left_module && (
    <i className="fa fa-arrow-left pointer left" onClick={this.moveLeft} />
    )}
    {this.props.module.right_module && (
    <i className="fa fa-arrow-right pointer right" onClick={this.moveRight} />
    )}
    {this.props.module.left_module && <i className="fa fa-arrow-left pointer left" onClick={this.moveLeft} />}
    {this.props.module.right_module && <i className="fa fa-arrow-right pointer right" onClick={this.moveRight} />}
    </div>
    );
    }
  5. bigslycat revised this gist Mar 14, 2017. 1 changed file with 11 additions and 13 deletions.
    24 changes: 11 additions & 13 deletions controls.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -19,20 +19,18 @@ class Controls extends React.Component {
    }

    render() {
    if (this.props.show) {
    return (
    <div style={this.controlsStyle}>
    {this.props.module.left_module && (
    <i className="fa fa-arrow-left pointer left" onClick={this.moveLeft} />
    )}
    {this.props.module.right_module && (
    <i className="fa fa-arrow-right pointer right" onClick={this.moveRight} />
    )}
    </div>
    );
    }
    if (!this.props.show) return null;

    return null;
    return (
    <div style={this.controlsStyle}>
    {this.props.module.left_module && (
    <i className="fa fa-arrow-left pointer left" onClick={this.moveLeft} />
    )}
    {this.props.module.right_module && (
    <i className="fa fa-arrow-right pointer right" onClick={this.moveRight} />
    )}
    </div>
    );
    }
    }

  6. bigslycat revised this gist Mar 14, 2017. 1 changed file with 12 additions and 12 deletions.
    24 changes: 12 additions & 12 deletions controls.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -20,19 +20,19 @@ class Controls extends React.Component {

    render() {
    if (this.props.show) {
    const leftArrow = this.props.module.left_module != null
    ? <i className="fa fa-arrow-left pointer left" onClick={this.moveLeft}></i>
    : null;
    const rightArrow = this.props.module.right_module != null
    ? <i className="fa fa-arrow-right pointer right" onClick={this.moveRight}></i>
    : null;
    return <div style={this.controlsStyle}>
    {leftArrow}
    {rightArrow}
    </div>
    } else {
    return null;
    return (
    <div style={this.controlsStyle}>
    {this.props.module.left_module && (
    <i className="fa fa-arrow-left pointer left" onClick={this.moveLeft} />
    )}
    {this.props.module.right_module && (
    <i className="fa fa-arrow-right pointer right" onClick={this.moveRight} />
    )}
    </div>
    );
    }

    return null;
    }
    }

  7. @DreddyI DreddyI revised this gist Mar 14, 2017. No changes.
  8. @DreddyI DreddyI created this gist Mar 14, 2017.
    39 changes: 39 additions & 0 deletions controls.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,39 @@
    'use strict';
    import React from 'react';

    class Controls extends React.Component {
    constructor(props) {
    super(props);
    this.controlsStyle = {position: 'absolute'};

    this.moveLeft = this.moveLeft.bind(this);
    this.moveRight = this.moveRight.bind(this);
    }

    moveLeft() {
    this.props.swapModules(this.props.module, 'left')
    }

    moveRight() {
    this.props.swapModules(this.props.module, 'right')
    }

    render() {
    if (this.props.show) {
    const leftArrow = this.props.module.left_module != null
    ? <i className="fa fa-arrow-left pointer left" onClick={this.moveLeft}></i>
    : null;
    const rightArrow = this.props.module.right_module != null
    ? <i className="fa fa-arrow-right pointer right" onClick={this.moveRight}></i>
    : null;
    return <div style={this.controlsStyle}>
    {leftArrow}
    {rightArrow}
    </div>
    } else {
    return null;
    }
    }
    }

    export default Controls;
    41 changes: 41 additions & 0 deletions module.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,41 @@
    'use strict';
    import React from 'react';
    import Controls from './controls';

    class Module extends React.Component {
    constructor(props) {
    super(props);
    this.state = {
    showControl: false
    };
    this.toggleControl = this.toggleControl.bind(this);
    this.imageStyle = {maxWidth: '100%', maxHeight: 'auto'};
    this.moduleStyle = {float: 'left', position: 'relative', maxWidth: '20vw'};
    }


    toggleControl() {
    this.setState(prevState => {
    return {showControl: !prevState.showControl}
    });
    }

    render() {
    const module = this.props.module;
    return (
    <div className="continuous-module"
    style={this.moduleStyle}
    >
    <Controls module={module}
    show={this.state.showControl}
    swapModules={this.props.swapModules}
    />
    <img src={module.photo.photo_link}
    style={this.imageStyle}
    onClick={this.toggleControl}
    />
    </div>
    );
    }
    }
    export default Module;
    44 changes: 44 additions & 0 deletions modules.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,44 @@
    'use strict';
    import React from 'react';
    import ReactDOM from 'react-dom';
    import ModulesRow from './modulesRow';
    import axios from 'axios';

    class Modules extends React.Component {
    constructor() {
    super();
    this.data = JSON.parse(document.getElementById('data').value);
    this.state = {
    modules: this.data.modules
    };
    }

    swapModules(module, direction) {
    const moduleId = module.module_id;
    const swapModuleId = direction == 'left' ? module.left_module_id : module.right_module_id;
    axios.post('/ajax/swap-modules', {
    selectedModule: moduleId,
    swapModule: swapModuleId
    }).then(response => {
    console.log(response.data);
    }).catch(err => {
    console.log(err)
    });
    }

    componentWillMount() {
    }

    componentDidMount() {
    }

    componentDidUpdate() {
    }

    render() {
    return <ModulesRow modules={this.state.modules} slug={this.data.section_slug}
    swapModules={this.swapModules}></ModulesRow>;
    }
    }

    ReactDOM.render(<Modules />, document.getElementById('continuous-modules'));
    34 changes: 34 additions & 0 deletions modulesRow.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,34 @@
    'use strict';
    import React from 'react';
    import Module from './module';

    class ModulesRow extends React.Component {
    constructor(props) {
    super(props);
    }

    componentDidMount() {
    }

    render() {
    let modules = [];
    for (let key in this.props.modules) {
    if (this.props.modules.hasOwnProperty(key)) {
    const section = this.props.modules[key];
    let sort = 0;
    section.forEach((module) => {
    modules.push(<Module swapModules={this.props.swapModules} sort={sort} module={module} key={this.props.slug + '_' + module.module_id}/>);
    sort++;
    });
    }
    }
    return (
    <div className="row expanded collapse">
    <div className="column">
    {modules}
    </div>
    </div>
    );
    }
    }
    export default ModulesRow;