fancytree & customize status icon

[xgqfrms]

fancytree & customize status icon

https://github.com/mar10/fancytree/

docs

https://github.com/mar10/fancytree/wiki#configure-options

http://www.wwwendt.de/tech/fancytree/doc/jsdoc/Fancytree_Static.html

http://wwwendt.de/tech/fancytree/doc/jsdoc/global.html#FancytreeOptions http://www.wwwendt.de/tech/fancytree/doc/jsdoc/global.html#FancytreeOptions

external

span.external span.fancytree-title:after {
    content: "";
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAMAAAC67D+PAAAAFVBMV…EcVB8kmrwFyni0bOeyyDpy9JTLEaOhQq7Ongf5FeMhHS/4AVnsAZubxDVmAAAAAElFTkSuQmCC) 100% 50% no-repeat;
    padding-right: 13px;
}

OK

how to add customize css class to the box span?

https://github.com/mar10/fancytree/issues/867

http://wwwendt.de/tech/fancytree/demo/sample.js http://wwwendt.de/tech/fancytree/demo/sample.css

[xgqfrms]

how checkboxes

normal tree

http://wwwendt.de/tech/fancytree/demo/sample-configurator.html

[xgqfrms]

http://wwwendt.de/tech/fancytree/demo/sample-default.html

http://api.jqueryui.com/tooltip/#option-content

http://wwwendt.de/tech/fancytree/demo/sample-configurator.html

http://www.wwwendt.de/tech/fancytree/doc/jsdoc/global.html#FancytreeOptions

[xgqfrms]

titlle

View source code

http://wwwendt.de/tech/fancytree/demo/sample-theming.html

https://stackoverflow.com/questions/tagged/fancytree

[xgqfrms]

className ???

no way, it just a customize key.

[xgqfrms]

classList & dataset

https://www.w3schools.com/jsref/prop_element_classlist.asp

https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

        tooltip: function(event, data) {
            var node = data.node;
            // console.log(`tooltip data`, data);
            // console.log(`tooltip data.node`,  data.node);
            // set customize class
            if (data.node.data.changed) {
                data.node.span.dataset.testTootip = ("test-tooltip");
                // data.node.span.classList.add("666");
                return `已修改结点: ${data.node.title}`;
            } else {
                // no need
                // return data.node.title;
                return false;
            }
            // return data.node.title + "test-tooltip";
        },

[xgqfrms]

window.scrollTo(0, scollBox.scrollHeight);

scollBox

https://stackoverflow.com/questions/11715646/scroll-automatically-to-the-bottom-of-the-page

    // js auto scroll to page bottom
    // window.scrollTo(0, sectionContent.scrollHeight);
    sectionContent.scrollTo(0, sectionContent.scrollHeight);
    // sectionContent.scrollTo(0, progressTbody.scrollHeight);
    // console.log(`progressTbody.scrollHeight =`, progressTbody.scrollHeight);
    // window.scrollTo(0, document.body.scrollHeight);
    // window.scrollTo(0, document.querySelector(".scrollingContainer").scrollHeight);

[xgqfrms]

KBD & code

KBD

https://stackoverflow.com/questions/30140595/show-whitespace-characters-in-visual-studio-code/40081253#

code

https://www.robinwieruch.de/react-ref-attribute-dom-node/

[xgqfrms]

KBD

https://stackoverflow.com/questions/30037808/multiline-editing-in-vscode/40964440#40964440

[xgqfrms]

react refs

https://egghead.io/lessons/react-use-react-ref-to-get-a-reference-to-specific-components

REPL

https://jscomplete.com/repl/

class SayHello extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            message: 'Hello!'
        };
        // constructor bind(this)
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick() {
        alert(this.state.message);
    }
    // WARNING: this syntax is experimental! Using an arrow here binds the method:
    // ES7 bind(this)
    ES7_handleClick = () => {
        alert(this.state.message);
    };
    render() {
        return (
            <div>
                <button onClick={this.handleClick}>
                    ES6 constructor
                </button>
                {/*ES6 bind(this) onClick={(e) => this.handleClick(e)} */}
                <button onClick={() => this.handleClick()}>
                    ES6 Arrow Function
                </button>
                <button onClick={this.ES7_handleClick}>
                    ES7 class properties
                </button>
                <section data-box="section">...Todo</section>
            </div>
        );
    }
}

const app = `mountNode`;

// ReactDOM.render(component, app_container[, callback])
const callback_func = (e) => {
    // console.log(`e = `, e);
    // let box = document.querySelector(`[data-box="section"]`);
    // box.innerHTML = `e.target.dataset: ${e.target.dataset}`;
};

ReactDOM.render(<SayHello />, mountNode, callback_func);

[xgqfrms]

http://www.runoob.com/vue2/vue-tutorial.html

[xgqfrms]

DocumentFragment

element.appendChild(fragment);

https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment https://developer.mozilla.org/en-US/docs/Web/API/Document/createDocumentFragment

// <ul id="ul"></ul>

var element  = document.getElementById('ul'); // assuming ul exists
var fragment = document.createDocumentFragment();
var browsers = ['Firefox', 'Chrome', 'Opera', 
    'Safari', 'Internet Explorer'];

browsers.forEach(function(browser) {
    var li = document.createElement('li');
    li.textContent = browser;
    fragment.appendChild(li);
});

element.appendChild(fragment);

[xgqfrms]

Apollo

https://github.com/ctripcorp/apollo/wiki/%E5%85%B6%E5%AE%83%E8%AF%AD%E8%A8%80%E5%AE%A2%E6%88%B7%E7%AB%AF%E6%8E%A5%E5%85%A5%E6%8C%87%E5%8D%97

https://github.com/ctripcorp/apollo

https://github.com/ctripcorp/apollo/wiki/Apollo%E4%BD%BF%E7%94%A8%E6%8C%87%E5%8D%97

https://github.com/Quinton/node-apollo

---

https://github.com/xgqfrms/app/issues/5