javascript – Pupli

Detect DOM changes with Mutation Observers

Posted on June 29, 2017 by Mahmood

            let target = document.getElementById(Post.ViewModel.postURLId);
            let observer = new MutationObserver(function (mutations) {
                mutations.forEach(function (mutation) {
                    console.log(mutation);
                });
            });
            let config = {
                attributes: true, childList: true, characterData: true, subtree: true,
                attributeOldValue: true, characterDataOldValue: true
            };
            observer.observe(target, config);
            // later, you can stop observing
            observer.disconnect();

let target = document.getElementById(Post.ViewModel.postURLId);

let observer = new MutationObserver(function (mutations) {

mutations.forEach(function (mutation) {

console.log(mutation);

});

let config = {

attributes: true, childList: true, characterData: true, subtree: true,

attributeOldValue: true, characterDataOldValue: true

};

observer.observe(target, config);

// later, you can stop observing

observer.disconnect();

if (target.addEventListener) {
                target.addEventListener('input', function(e) {
                    console.log(e);
                }, false);
            }

if (target.addEventListener) {

target.addEventListener('input', function(e) {

console.log(e);

}, false);

}

So with the help of above two tricks and browser breakpoints and stacktrace we can detect exact source of error. References https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

Uncategorized

Insert an Item at a Specific Index in Array with JavaScript

Posted on May 29, 2017 by Mahmood

// The original array
var array = ["one", "two", "four"];
// splice(position, numberOfItemsToRemove, item)
array.splice(2, 0, "three");

array;  // ["one", "two", "three", "four"]

// The original array

var array = ["one", "two", "four"];

// splice(position, numberOfItemsToRemove, item)

array.splice(2, 0, "three");

array; // ["one", "two", "three", "four"]

Array.prototype.insert = function (index, item) {
  this.splice(index, 0, item);
};

Array.prototype.insert = function (index, item) {

this.splice(index, 0, item);

};

References https://davidwalsh.name/array-insert-index

Uncategorized

Clone Object by Value in Typescript

Posted on April 30, 2017 by Mahmood

let oldItem: any = ViewModels.adminUsers.users()[index];
let newItem: any = {...oldItem}; // shallowcopy

1 2	let oldItem: any = ViewModels.adminUsers.users()[index]; let newItem: any = {...oldItem}; // shallowcopy

Uncategorized

Install React Bootstrap

Posted on March 18, 2017 by Mahmood

npm install --save react react-dom @types/react @types/react-dom

1	npm install --save react react-dom @types/react @types/react-dom

npm install --save react-bootstrap @types/react-bootstrap

1	npm install --save react-bootstrap @types/react-bootstrap

References https://react-bootstrap.github.io/getting-started.html

Uncategorized

React Passing Data with Props

Posted on March 16, 2017 by Mahmood

/components/Header.js

import React, {Component} from 'react';
import "./Header.css"

export class Header extends Component {

    render() {

        var classNames = "";

        if (this.props.isBold) {
            classNames += " bold";
        }

        return (
            <div className={classNames}>
                App
            </div>
        );
    }
}

Header.propTypes = {
    isBold: React.PropTypes.bool
};

import React, {Component} from 'react';

import "./Header.css"

export class Header extends Component {

render() {

var classNames = "";

if (this.props.isBold) {

classNames += " bold";

}

return (

App

</div>

);

}

Header.propTypes = {

isBold: React.PropTypes.bool

};

/components/Content.js

import React, {Component} from 'react';
import "./Content.css"

export class Content extends Component {

    render() {

        var classNames = "";

        if (this.props.size === "small") {
            classNames += " small";
        }
        else if (this.props.size === "medium") {
            classNames += " medium";
        }
        else if (this.props.size === "large") {
            classNames += " large";
        }

        return (
            <div className={classNames}>
                {this.props.children}
            </div>
        );
    }
}

Content.propTypes = {
    size: React.PropTypes.string,
    children: React.PropTypes.array
};

import React, {Component} from 'react';

import "./Content.css"

export class Content extends Component {

render() {

var classNames = "";

if (this.props.size === "small") {

classNames += " small";

}

else if (this.props.size === "medium") {

classNames += " medium";

}

else if (this.props.size === "large") {

classNames += " large";

}

return (

{this.props.children}

</div>

);

}

Content.propTypes = {

size: React.PropTypes.string,

children: React.PropTypes.array

};

App.js

import React, { Component } from 'react';
import {Header} from "./components/Header"
import {Content} from "./components/Content"


export default class App extends Component {
  render() {
    return (
      <div>
        <Header isBold={true} />
        <Content size={"large"}>
          Hello <i>World</i>
        </Content>
      </div>
    );
  }
}

import React, { Component } from 'react';

import {Header} from "./components/Header"

import {Content} from "./components/Content"

export default class App extends Component {

render() {

return (

<div>

Hello <i>World</i>

</Content>

</div>

);

}

References https://github.com/mhdr/ReactJSSamples/tree/master/005

Uncategorized

ReactJS Multiple Components

Posted on March 14, 2017 by Mahmood

/components/Header.js

import React, { Component } from 'react';

class Header extends Component {
    render() {
        return (
            <div>
                <h1>Header</h1>
            </div>
        );
    }
}

export default Header;

import React, { Component } from 'react';

class Header extends Component {

render() {

return (

<div>

<h1>Header</h1>

</div>

);

}

export default Header;

/components/Content.js

import React, { Component } from 'react';

class Content extends Component {
    render() {
        return (
            <div>
                <p>Content</p>
            </div>
        );
    }
}

export default Content;

import React, { Component } from 'react';

class Content extends Component {

render() {

return (

<div>

<p>Content</p>

</div>

);

}

export default Content;

App.js

import React, { Component } from 'react';
import Header from "./components/Header"
import Content from "./components/Content"

class App extends Component {
  render() {
    return (
      <div>
        <Header/>
        <Content/>
      </div>
    );
  }
}

export default App;

import React, { Component } from 'react';

import Header from "./components/Header"

import Content from "./components/Content"

class App extends Component {

render() {

return (

<div>

</div>

);

}

export default App;

References https://github.com/mhdr/ReactJSSamples/tree/master/002

Uncategorized

Install ReactJS

Posted on March 8, 2017 by Mahmood

npm install -g create-react-app
create-react-app hello-world
cd hello-world
npm start

npm install -g create-react-app

create-react-app hello-world

cd hello-world

npm start

References https://facebook.github.io/react/docs/installation.html

Uncategorized

Calling JavaScript Methods from Crosswalk with Java

Posted on January 19, 2017 by Mahmood

xwalkView.load("javascript:" + jsCode, null)

1	xwalkView.load("javascript:" + jsCode, null)

References http://stackoverflow.com/questions/24601087/crosswalk-call-js-function-from-java-on-android

Uncategorized

TypeScript Usefull Compiler Options

Posted on January 19, 2017 by Mahmood

--declaration
--removeComments

1 2	--declaration --removeComments

https://www.typescriptlang.org/docs/handbook/compiler-options.html

Uncategorized

Force clients to refresh JavaScript files

Posted on November 20, 2016 by Mahmood

<script type="text/javascript" src="myfile.js?1500"></script>

1	<script type="text/javascript" src="myfile.js?1500"></script>

References http://stackoverflow.com/questions/32414/how-can-i-force-clients-to-refresh-javascript-files http://www.thymeleaf.org/doc/articles/springmvcaccessdata.html

Uncategorized

1 2 »