Skip to content

Instantly share code, notes, and snippets.

@sfinktah

sfinktah/.domverticies.js

Forked from abernier/.gitignore
Last active April 27, 2018 09:53
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save sfinktah/1153cebdebabff52777f to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save sfinktah/1153cebdebabff52777f to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. sfinktah revised this gist Oct 28, 2015. 3 changed files with 2 additions and 1 deletion.
    Empty file added .domverticies.js
    View file
    Empty file.
    1 change: 0 additions & 1 deletion .gitignore
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +0,0 @@
    node_modules/
    2 changes: 2 additions & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,5 @@
    **This is simply a clone of the original, with the dependency for underscore removed.**

    Compute the 4 vertices `a`,`b`,`c`,`d` absolute coordinates of **any**, deep, `transform`ed, `position`ed DOM element.

    ```
  2. sfinktah revised this gist Oct 28, 2015. 2 changed files with 15 additions and 5 deletions.
    17 changes: 14 additions & 3 deletions domvertices.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,5 @@
    (function () {
    var THREE = this.THREE || require('three');
    var _ = this._ || require('underscore');

    //
    // Normalize 4x4 matrix from string, ie: 'matrix()' or 'matrix3d()' or 'none'
    @@ -53,10 +52,22 @@
    return el.offsetParent;
    }

    // adapted from: http://stackoverflow.com/a/20005615/912236
    function defaults(options, defaultOptions) {
    options = options || {};
    Object.keys(defaultOptions).forEach(copyProperty);
    return options;

    function copyProperty(key) {
    if (options[key] === undefined)
    options[key] = defaultOptions[key];
    }
    }

    function domvertices(el, options) {
    options || (options = {});

    _.defaults(options, {
    defaults(options, {
    root: document.body.parentNode // <html> element by default
    });

    @@ -190,4 +201,4 @@
    if (typeof module !== "undefined" && module !== null) {
    module.exports = this.domvertices;
    }
    }).call(this);
    }).call(this);
    3 changes: 1 addition & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -70,7 +70,6 @@
    </div>
    </div></div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore.js"></script>
    <script src="https://code.jquery.com/jquery-2.1.3.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.js"></script>
    <script src="domvertices.js"></script>
    @@ -91,4 +90,4 @@
    });
    </script>
    </body>
    </html>
    </html>
  3. @abernier abernier revised this gist Apr 25, 2015. 1 changed file with 4 additions and 2 deletions.
    6 changes: 4 additions & 2 deletions domvertices.js
    View file
    Original file line number Diff line number Diff line change
    @@ -34,7 +34,7 @@
    }

    function relAbsOrFixedPositionnedAncestor(el) {
    var parent = el.parentNode;
    /*var parent = el.parentNode;
    var parentComputedStyle;
    while (parent && parent.nodeType === 1) { // walk up
    @@ -48,7 +48,9 @@
    if (parent === document) return document.body; // html is the last element before document
    return parent;
    return parent;*/

    return el.offsetParent;
    }

    function domvertices(el, options) {
  4. @abernier abernier revised this gist Mar 25, 2015. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions domvertices.js
    View file
    Original file line number Diff line number Diff line change
    @@ -35,15 +35,15 @@

    function relAbsOrFixedPositionnedAncestor(el) {
    var parent = el.parentNode;
    var parentComputedStyle = getComputedStyle(parent, null);
    var parentComputedStyle;

    while (parent && parent.nodeType === 1) { // walk up
    parentComputedStyle = getComputedStyle(parent, null);
    if (parentComputedStyle.position === 'relative' || parentComputedStyle.position === 'absolute' || parentComputedStyle.position === 'fixed') {
    break; // stop
    }

    parent = parent.parentNode;
    parentComputedStyle = getComputedStyle(parent, null);
    }

    if (parent === document) return document.body; // html is the last element before document
  5. @abernier abernier revised this gist Feb 23, 2015. 1 changed file with 4 additions and 4 deletions.
    8 changes: 4 additions & 4 deletions domvertices.js
    View file
    Original file line number Diff line number Diff line change
    @@ -175,10 +175,10 @@

    v.matrix = globalMatrix;

    v.a = v.a.applyMatrix4(resultantMatrix);
    v.b = v.b.applyMatrix4(resultantMatrix);
    v.c = v.c.applyMatrix4(resultantMatrix);
    v.d = v.d.applyMatrix4(resultantMatrix);
    v.a = v.a.applyMatrix4(globalMatrix);
    v.b = v.b.applyMatrix4(globalMatrix);
    v.c = v.c.applyMatrix4(globalMatrix);
    v.d = v.d.applyMatrix4(globalMatrix);

    return v;
    }
  6. @abernier abernier revised this gist Feb 23, 2015. 1 changed file with 4 additions and 7 deletions.
    11 changes: 4 additions & 7 deletions domvertices.js
    View file
    Original file line number Diff line number Diff line change
    @@ -164,25 +164,22 @@
    }())}

    //
    // apply changes of basis (in reverse order)
    // Compute the global matrix (reverse order)
    //


    var resultantMatrix = new THREE.Matrix4().identity();
    var globalMatrix = new THREE.Matrix4().identity();
    var l = matrices.length;
    while (l--) {
    resultantMatrix.multiply(matrices[l]);
    globalMatrix.multiply(matrices[l]);
    }

    v.matrix = resultantMatrix;
    v.matrix = globalMatrix;

    v.a = v.a.applyMatrix4(resultantMatrix);
    v.b = v.b.applyMatrix4(resultantMatrix);
    v.c = v.c.applyMatrix4(resultantMatrix);
    v.d = v.d.applyMatrix4(resultantMatrix);

    console.log(v);

    return v;
    }

  7. @abernier abernier revised this gist Feb 23, 2015. 1 changed file with 3 additions and 1 deletion.
    4 changes: 3 additions & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -15,7 +15,9 @@ d c
    ```js
    var el = document.getElementById('foo');

    console.log(domvertices(el));
    var v = domvertices(el);

    console.log(v);
    ```

    outputs:
  8. @abernier abernier revised this gist Feb 23, 2015. 3 changed files with 9 additions and 9 deletions.
    2 changes: 1 addition & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -33,7 +33,7 @@ outputs:

    ```js
    var $el = $('#foo');
    var v = $el.domvertices().data('v');
    var v = $el.domvertices();

    console.log(v);
    ```
    6 changes: 3 additions & 3 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -80,15 +80,15 @@

    $.fn.domvertices.defaults = {append: $('.scene')};

    $els.domvertices().each(function (i, el) {
    $(el).data('v').trace();
    $els.each(function (i, el) {
    $(el).domvertices().trace();
    });
    $(window).resize(function () {
    $.fn.domvertices.v.forEach(function (v) {
    v.update();
    v.trace();
    });
    })
    });
    </script>
    </body>
    </html>
    10 changes: 5 additions & 5 deletions jquery.domvertices.js
    View file
    Original file line number Diff line number Diff line change
    @@ -61,12 +61,12 @@

    var arr = [];
    $.fn.domvertices = function (options) {
    return this.each(function (i, el) {
    var v = new V(el, options);
    arr.push(v);
    var v = new V(this[0], options);
    arr.push(v);

    $(el).data('v', v);
    });
    this.data('v', v);

    return v;
    };
    $.fn.domvertices.v = arr;

  9. @abernier abernier revised this gist Feb 23, 2015. 3 changed files with 25 additions and 15 deletions.
    23 changes: 16 additions & 7 deletions domvertices.js
    View file
    Original file line number Diff line number Diff line change
    @@ -55,7 +55,7 @@
    options || (options = {});

    _.defaults(options, {
    lastParent: document.body.parentNode // <html> element by default
    root: document.body.parentNode // <html> element by default
    });

    //
    @@ -81,7 +81,7 @@
    //

    var matrices = [];
    while (el.nodeType === 1 && el !== options.lastParent) {(function () {
    while (el.nodeType === 1 && el !== options.root) {(function () {
    var nextParent = el.parentNode;

    var computedStyle = getComputedStyle(el, null);
    @@ -167,13 +167,22 @@
    // apply changes of basis (in reverse order)
    //

    for (var i=0; i<matrices.length; i++) {
    v.a = v.a.applyMatrix4(matrices[i]);
    v.b = v.b.applyMatrix4(matrices[i]);
    v.c = v.c.applyMatrix4(matrices[i]);
    v.d = v.d.applyMatrix4(matrices[i]);

    var resultantMatrix = new THREE.Matrix4().identity();
    var l = matrices.length;
    while (l--) {
    resultantMatrix.multiply(matrices[l]);
    }

    v.matrix = resultantMatrix;

    v.a = v.a.applyMatrix4(resultantMatrix);
    v.b = v.b.applyMatrix4(resultantMatrix);
    v.c = v.c.applyMatrix4(resultantMatrix);
    v.d = v.d.applyMatrix4(resultantMatrix);

    console.log(v);

    return v;
    }

    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -78,7 +78,7 @@
    <script>
    var $els = $('#a, #b, #c, #d, #e, #f, #g');

    $.fn.domvertices.defaults = {traceAppendEl: $('.scene')};
    $.fn.domvertices.defaults = {append: $('.scene')};

    $els.domvertices().each(function (i, el) {
    $(el).data('v').trace();
    15 changes: 8 additions & 7 deletions jquery.domvertices.js
    View file
    Original file line number Diff line number Diff line change
    @@ -13,12 +13,13 @@
    this.update();
    }
    V.prototype.update = function () {
    var v = domvertices(this.el, {lastParent: this.options.lastParent});
    var v = domvertices(this.el, {root: this.options.root});

    this.a = v.a;
    this.b = v.b;
    this.c = v.c;
    this.d = v.d;
    this.matrix = v.matrix;

    return this;
    };
    @@ -27,10 +28,10 @@
    display:'block',width:'0px',height:'0px', boxShadow:'0 0 0 3px lime',
    position:'absolute',left:'0px',top:'0px'
    };
    this.$a || (this.$a = $('<div>').appendTo(this.options.traceAppendEl).css(position));
    this.$b || (this.$b = $('<div>').appendTo(this.options.traceAppendEl).css(position));
    this.$c || (this.$c = $('<div>').appendTo(this.options.traceAppendEl).css(position));
    this.$d || (this.$d = $('<div>').appendTo(this.options.traceAppendEl).css(position));
    this.$a || (this.$a = $('<div>').appendTo(this.options.append).css(position));
    this.$b || (this.$b = $('<div>').appendTo(this.options.append).css(position));
    this.$c || (this.$c = $('<div>').appendTo(this.options.append).css(position));
    this.$d || (this.$d = $('<div>').appendTo(this.options.append).css(position));

    var v = {
    a: this.a,
    @@ -71,7 +72,7 @@


    $.fn.domvertices.defaults = {
    traceAppendEl: document.body,
    lastParent: document.body.parentNode
    append: document.body,
    root: document.body.parentNode
    };
    }).call(this);
  10. @abernier abernier revised this gist Feb 6, 2015. 1 changed file with 3 additions and 1 deletion.
    4 changes: 3 additions & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -15,7 +15,9 @@ d c
    ```js
    var el = document.getElementById('foo');

    console.log(domvertices(el));
    var v = domvertices(el);

    console.log(v);
    ```

    outputs:
  11. @abernier abernier revised this gist Feb 5, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion jquery.domvertices.js
    View file
    Original file line number Diff line number Diff line change
    @@ -13,7 +13,7 @@
    this.update();
    }
    V.prototype.update = function () {
    var v = domvertices(this.el, {lastParent: options.lastParent});
    var v = domvertices(this.el, {lastParent: this.options.lastParent});

    this.a = v.a;
    this.b = v.b;
  12. @abernier abernier revised this gist Feb 5, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion jquery.domvertices.js
    View file
    Original file line number Diff line number Diff line change
    @@ -13,7 +13,7 @@
    this.update();
    }
    V.prototype.update = function () {
    var v = domvertices(this.el, {lastParent: $.fn.domvertices.defaults.lastParent});
    var v = domvertices(this.el, {lastParent: options.lastParent});

    this.a = v.a;
    this.b = v.b;
  13. @abernier abernier revised this gist Feb 5, 2015. 1 changed file with 3 additions and 2 deletions.
    5 changes: 3 additions & 2 deletions jquery.domvertices.js
    View file
    Original file line number Diff line number Diff line change
    @@ -13,7 +13,7 @@
    this.update();
    }
    V.prototype.update = function () {
    var v = domvertices(this.el);
    var v = domvertices(this.el, {lastParent: $.fn.domvertices.defaults.lastParent});

    this.a = v.a;
    this.b = v.b;
    @@ -71,6 +71,7 @@


    $.fn.domvertices.defaults = {
    traceAppendEl: document.body
    traceAppendEl: document.body,
    lastParent: document.body.parentNode
    };
    }).call(this);
  14. @abernier abernier revised this gist Feb 5, 2015. 4 changed files with 13 additions and 3 deletions.
    11 changes: 9 additions & 2 deletions domvertices.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,6 @@
    (function () {
    var THREE = this.THREE || require('three');
    var _ = this._ || require('underscore');

    //
    // Normalize 4x4 matrix from string, ie: 'matrix()' or 'matrix3d()' or 'none'
    @@ -50,7 +51,13 @@
    return parent;
    }

    function domvertices(el) {
    function domvertices(el, options) {
    options || (options = {});

    _.defaults(options, {
    lastParent: document.body.parentNode // <html> element by default
    });

    //
    // a b
    //  +--------------+
    @@ -74,7 +81,7 @@
    //

    var matrices = [];
    while (el.nodeType === 1) {(function () {
    while (el.nodeType === 1 && el !== options.lastParent) {(function () {
    var nextParent = el.parentNode;

    var computedStyle = getComputedStyle(el, null);
    1 change: 1 addition & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -70,6 +70,7 @@
    </div>
    </div></div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore.js"></script>
    <script src="https://code.jquery.com/jquery-2.1.3.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.js"></script>
    <script src="domvertices.js"></script>
    3 changes: 2 additions & 1 deletion package.json
    View file
    Original file line number Diff line number Diff line change
    @@ -13,7 +13,8 @@
    "author": "Antoine BERNIER (abernier)",
    "license": "ISC",
    "dependencies": {
    "three": "^0.69.0"
    "three": "^0.69.0",
    "underscore": "^1.7.0"
    },
    "devDependencies": {
    "jquery": "^2.1.3"
    1 change: 1 addition & 0 deletions test.html
    View file
    Original file line number Diff line number Diff line change
    @@ -70,6 +70,7 @@
    </div>
    <!--</div></div>-->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore.js"></script>
    <script src="https://code.jquery.com/jquery-2.1.3.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.js"></script>
    <script src="domvertices.js"></script>
  15. @abernier abernier revised this gist Feb 5, 2015. 3 changed files with 17 additions and 16 deletions.
    8 changes: 4 additions & 4 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -33,19 +33,19 @@ outputs:

    ```js
    var $el = $('#foo');
    var domvertices = $el.domvertices().data('domvertices');
    var v = $el.domvertices().data('v');

    console.log(domvertices);
    console.log(v);
    ```

    you can also `trace` vertices for debug purpose:

    ```js
    domvertices.update().trace();
    v.update().trace();
    ```

    or remove the trace:

    ```js
    domvertices.erase();
    v.erase();
    ```
    8 changes: 4 additions & 4 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -80,12 +80,12 @@
    $.fn.domvertices.defaults = {traceAppendEl: $('.scene')};

    $els.domvertices().each(function (i, el) {
    $(el).data('domvertices').trace();
    $(el).data('v').trace();
    });
    $(window).resize(function () {
    $.fn.domvertices.arr.forEach(function (domvertices) {
    domvertices.update();
    domvertices.trace();
    $.fn.domvertices.v.forEach(function (v) {
    v.update();
    v.trace();
    });
    })
    </script>
    17 changes: 9 additions & 8 deletions jquery.domvertices.js
    View file
    Original file line number Diff line number Diff line change
    @@ -2,7 +2,7 @@
    var $ = this.jQuery || require('jquery');
    var domvertices = this.domvertices || require('domvertices');

    function Domvertices(el, options) {
    function V(el, options) {
    options || (options = {});

    this.options = $.extend({}, $.fn.domvertices.defaults, options);
    @@ -12,7 +12,7 @@

    this.update();
    }
    Domvertices.prototype.update = function () {
    V.prototype.update = function () {
    var v = domvertices(this.el);

    this.a = v.a;
    @@ -22,7 +22,7 @@

    return this;
    };
    Domvertices.prototype.trace = function () {
    V.prototype.trace = function () {
    var position = {
    display:'block',width:'0px',height:'0px', boxShadow:'0 0 0 3px lime',
    position:'absolute',left:'0px',top:'0px'
    @@ -44,7 +44,7 @@

    return this;
    };
    Domvertices.prototype.erase = function () {
    V.prototype.erase = function () {
    this.$a.remove();
    this.$b.remove();
    this.$c.remove();
    @@ -61,13 +61,14 @@
    var arr = [];
    $.fn.domvertices = function (options) {
    return this.each(function (i, el) {
    var domvertices = new Domvertices(el, options);
    arr.push(domvertices);
    var v = new V(el, options);
    arr.push(v);

    $(el).data('domvertices', domvertices);
    $(el).data('v', v);
    });
    };
    $.fn.domvertices.arr = arr;
    $.fn.domvertices.v = arr;


    $.fn.domvertices.defaults = {
    traceAppendEl: document.body
  16. @abernier abernier revised this gist Feb 5, 2015. 2 changed files with 4 additions and 2 deletions.
    3 changes: 1 addition & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -83,8 +83,7 @@
    $(el).data('domvertices').trace();
    });
    $(window).resize(function () {
    $els.each(function (i, el) {
    var domvertices = $(el).data('domvertices');
    $.fn.domvertices.arr.forEach(function (domvertices) {
    domvertices.update();
    domvertices.trace();
    });
    3 changes: 3 additions & 0 deletions jquery.domvertices.js
    View file
    Original file line number Diff line number Diff line change
    @@ -58,13 +58,16 @@
    return this;
    };

    var arr = [];
    $.fn.domvertices = function (options) {
    return this.each(function (i, el) {
    var domvertices = new Domvertices(el, options);
    arr.push(domvertices);

    $(el).data('domvertices', domvertices);
    });
    };
    $.fn.domvertices.arr = arr;

    $.fn.domvertices.defaults = {
    traceAppendEl: document.body
  17. @abernier abernier revised this gist Feb 5, 2015. 2 changed files with 10 additions and 5 deletions.
    5 changes: 4 additions & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -76,7 +76,10 @@
    <script src="jquery.domvertices.js"></script>
    <script>
    var $els = $('#a, #b, #c, #d, #e, #f, #g');
    $els.domvertices({traceAppendEl: $('.scene')}).each(function (i, el) {

    $.fn.domvertices.defaults = {traceAppendEl: $('.scene')};

    $els.domvertices().each(function (i, el) {
    $(el).data('domvertices').trace();
    });
    $(window).resize(function () {
    10 changes: 6 additions & 4 deletions jquery.domvertices.js
    View file
    Original file line number Diff line number Diff line change
    @@ -5,9 +5,7 @@
    function Domvertices(el, options) {
    options || (options = {});

    this.options = $.extend({}, {
    traceAppendEl: document.body
    }, options);
    this.options = $.extend({}, $.fn.domvertices.defaults, options);

    this.$el = $(el);
    this.el = this.$el[0];
    @@ -66,5 +64,9 @@

    $(el).data('domvertices', domvertices);
    });
    }
    };

    $.fn.domvertices.defaults = {
    traceAppendEl: document.body
    };
    }).call(this);
  18. @abernier abernier revised this gist Feb 5, 2015. 1 changed file with 4 additions and 4 deletions.
    8 changes: 4 additions & 4 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -50,15 +50,15 @@
    <div id="a">
    relative;A;(50,100);t(200,150)r(10)tz(50);center
    <div id="b">
    static;B;(100,50);t(100,50)r(-10)tz(50)rx(-20);center
    static;B;(100,0);t(100,50)r(-10)tz(50)rx(-20);center
    <div id="c">
    static;C;(0,0);;center
    <div id="d">
    static;D;(0,0);;center
    static;D;(50,10);;center
    <div id="e">
    static;E;(0,0);;center
    static;E;(0,0);ty(30);center
    <div id="f">
    absolute;F;(100,100);t(-50,50)r(5);right top
    absolute;F;(100,50);t(-50,50)r(5);right top
    <div id="g">
    fixed;G(100,50);s(2)t(-60,30)r(20);right top
    </div>
  19. @abernier abernier revised this gist Feb 5, 2015. 3 changed files with 24 additions and 10 deletions.
    7 changes: 4 additions & 3 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -33,18 +33,19 @@ outputs:

    ```js
    var $el = $('#foo');
    var domvertices = $el.domvertices().data('domvertices');

    console.log($el.domvertices());
    console.log(domvertices);
    ```

    you can also `trace` vertices for debug purpose:

    ```js
    $el.domvertices().update().trace();
    domvertices.update().trace();
    ```

    or remove the trace:

    ```js
    $el.domvertices().erase();
    domvertices.erase();
    ```
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -76,7 +76,7 @@
    <script src="jquery.domvertices.js"></script>
    <script>
    var $els = $('#a, #b, #c, #d, #e, #f, #g');
    $els.domvertices().each(function (i, el) {
    $els.domvertices({traceAppendEl: $('.scene')}).each(function (i, el) {
    $(el).data('domvertices').trace();
    });
    $(window).resize(function () {
    25 changes: 19 additions & 6 deletions jquery.domvertices.js
    View file
    Original file line number Diff line number Diff line change
    @@ -2,7 +2,13 @@
    var $ = this.jQuery || require('jquery');
    var domvertices = this.domvertices || require('domvertices');

    function Domvertices(el) {
    function Domvertices(el, options) {
    options || (options = {});

    this.options = $.extend({}, {
    traceAppendEl: document.body
    }, options);

    this.$el = $(el);
    this.el = this.$el[0];

    @@ -23,10 +29,10 @@
    display:'block',width:'0px',height:'0px', boxShadow:'0 0 0 3px lime',
    position:'absolute',left:'0px',top:'0px'
    };
    this.$a || (this.$a = $('<div>').appendTo('.scene').css(position));
    this.$b || (this.$b = $('<div>').appendTo('.scene').css(position));
    this.$c || (this.$c = $('<div>').appendTo('.scene').css(position));
    this.$d || (this.$d = $('<div>').appendTo('.scene').css(position));
    this.$a || (this.$a = $('<div>').appendTo(this.options.traceAppendEl).css(position));
    this.$b || (this.$b = $('<div>').appendTo(this.options.traceAppendEl).css(position));
    this.$c || (this.$c = $('<div>').appendTo(this.options.traceAppendEl).css(position));
    this.$d || (this.$d = $('<div>').appendTo(this.options.traceAppendEl).css(position));

    var v = {
    a: this.a,
    @@ -45,11 +51,18 @@
    this.$b.remove();
    this.$c.remove();
    this.$d.remove();

    this.$a = undefined;
    this.$b = undefined;
    this.$c = undefined;
    this.$d = undefined;

    return this;
    };

    $.fn.domvertices = function (options) {
    return this.each(function (i, el) {
    var domvertices = new Domvertices(el);
    var domvertices = new Domvertices(el, options);

    $(el).data('domvertices', domvertices);
    });
  20. @abernier abernier revised this gist Feb 5, 2015. 1 changed file with 11 additions and 11 deletions.
    22 changes: 11 additions & 11 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -18,6 +18,17 @@ var el = document.getElementById('foo');
    console.log(domvertices(el));
    ```

    outputs:

    ```js
    {
    a: {x: , y: , z: },
    b: {x: , y: , z: },
    c: {x: , y: , z: },
    d: {x: , y: , z: }
    }
    ```

    ## jQuery plugin

    ```js
    @@ -36,15 +47,4 @@ or remove the trace:

    ```js
    $el.domvertices().erase();
    ```

    outputs:

    ```js
    {
    a: {x: , y: , z: },
    b: {x: , y: , z: },
    c: {x: , y: , z: },
    d: {x: , y: , z: }
    }
    ```
  21. @abernier abernier revised this gist Feb 5, 2015. 2 changed files with 26 additions and 0 deletions.
    20 changes: 20 additions & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -18,6 +18,26 @@ var el = document.getElementById('foo');
    console.log(domvertices(el));
    ```

    ## jQuery plugin

    ```js
    var $el = $('#foo');

    console.log($el.domvertices());
    ```

    you can also `trace` vertices for debug purpose:

    ```js
    $el.domvertices().update().trace();
    ```

    or remove the trace:

    ```js
    $el.domvertices().erase();
    ```

    outputs:

    ```js
    6 changes: 6 additions & 0 deletions jquery.domvertices.js
    View file
    Original file line number Diff line number Diff line change
    @@ -40,6 +40,12 @@

    return this;
    };
    Domvertices.prototype.erase = function () {
    this.$a.remove();
    this.$b.remove();
    this.$c.remove();
    this.$d.remove();
    };

    $.fn.domvertices = function (options) {
    return this.each(function (i, el) {
  22. @abernier abernier revised this gist Feb 5, 2015. 4 changed files with 99 additions and 18 deletions.
    10 changes: 8 additions & 2 deletions domvertices.js
    View file
    Original file line number Diff line number Diff line change
    @@ -105,8 +105,14 @@
    }
    //console.log(offsetLeft, offsetTop);

    x = offsetLeft - el.scrollLeft + el.clientLeft;
    y = offsetTop - el.scrollTop + el.clientTop;
    x = offsetLeft + el.clientLeft;
    y = offsetTop + el.clientTop;

    if (el !== document.body) {
    x -= el.scrollLeft;
    y -= el.scrollTop;
    }


    P01 = new THREE.Matrix4().makeTranslation(x, y, 0);
    }).call(this);
    28 changes: 12 additions & 16 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -73,23 +73,19 @@
    <script src="https://code.jquery.com/jquery-2.1.3.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.js"></script>
    <script src="domvertices.js"></script>
    <script src="jquery.domvertices.js"></script>
    <script>
    function trace(v) {
    for (k in v) { //
    $('<b>').css({
    display:'block',width:'0px',height:'0px', boxShadow:'0 0 0 3px lime',
    position:'absolute',left:'0px',top:'0px', transform:'translate3d(' + v[k].x + 'px,' + v[k].y + 'px, ' + v[k].z + 'px)'
    }).appendTo('.scene'); // !important so <b> is subjected to perspective
    }
    }

    trace(domvertices(document.querySelector('#a')));
    trace(domvertices(document.querySelector('#b')));
    trace(domvertices(document.querySelector('#c')));
    trace(domvertices(document.querySelector('#d')));
    trace(domvertices(document.querySelector('#e')));
    trace(domvertices(document.querySelector('#f')));
    trace(domvertices(document.querySelector('#g')));
    var $els = $('#a, #b, #c, #d, #e, #f, #g');
    $els.domvertices().each(function (i, el) {
    $(el).data('domvertices').trace();
    });
    $(window).resize(function () {
    $els.each(function (i, el) {
    var domvertices = $(el).data('domvertices');
    domvertices.update();
    domvertices.trace();
    });
    })
    </script>
    </body>
    </html>
    51 changes: 51 additions & 0 deletions jquery.domvertices.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,51 @@
    (function () {
    var $ = this.jQuery || require('jquery');
    var domvertices = this.domvertices || require('domvertices');

    function Domvertices(el) {
    this.$el = $(el);
    this.el = this.$el[0];

    this.update();
    }
    Domvertices.prototype.update = function () {
    var v = domvertices(this.el);

    this.a = v.a;
    this.b = v.b;
    this.c = v.c;
    this.d = v.d;

    return this;
    };
    Domvertices.prototype.trace = function () {
    var position = {
    display:'block',width:'0px',height:'0px', boxShadow:'0 0 0 3px lime',
    position:'absolute',left:'0px',top:'0px'
    };
    this.$a || (this.$a = $('<div>').appendTo('.scene').css(position));
    this.$b || (this.$b = $('<div>').appendTo('.scene').css(position));
    this.$c || (this.$c = $('<div>').appendTo('.scene').css(position));
    this.$d || (this.$d = $('<div>').appendTo('.scene').css(position));

    var v = {
    a: this.a,
    b: this.b,
    c: this.c,
    d: this.d
    };
    for (k in v) {
    this['$'+k].css({transform:'translate3d(' + v[k].x + 'px,' + v[k].y + 'px, ' + v[k].z + 'px)'});
    }

    return this;
    };

    $.fn.domvertices = function (options) {
    return this.each(function (i, el) {
    var domvertices = new Domvertices(el);

    $(el).data('domvertices', domvertices);
    });
    }
    }).call(this);
    28 changes: 28 additions & 0 deletions test.html
    View file
    Original file line number Diff line number Diff line change
    @@ -83,6 +83,34 @@
    }
    }

    function normalizeMatrix (matrixString) {
    var c = matrixString.split(/\s*[(),]\s*/).slice(1,-1);
    var matrix;

    if (c.length === 6) {
    // 'matrix()' (3x2)
    matrix = new THREE.Matrix4().set(
    c[0], +c[2], 0, +c[4],
    +c[1], +c[3], 0, +c[5],
    0, 0, 1, 0,
    0, 0, 0, 1
    );
    } else if (c.length === 16) {
    // matrix3d() (4x4)
    matrix = new THREE.Matrix4().set(
    +c[0], +c[4], +c[8], +c[12],
    +c[1], +c[5], +c[9], +c[13],
    +c[2], +c[6], +c[10], +c[14],
    +c[3], +c[7], +c[11], +c[15]
    );
    } else {
    // handle 'none' or invalid values.
    matrix = new THREE.Matrix4().identity();
    }

    return matrix;
    }

    function m(el, o) {
    var computedStyle = getComputedStyle(el, null);
    var transformOrigin = computedStyle.transformOrigin.split(' ').map(function (el) {return parseFloat(el, 10);});
  23. @abernier abernier revised this gist Feb 4, 2015. 1 changed file with 16 additions and 16 deletions.
    32 changes: 16 additions & 16 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -4,11 +4,11 @@
    <meta charset="utf-8">
    <title></title>
    <style>
    /*.scene {perspective:250;}
    .scene, .camera {width:100vw; height:100vh;}*/
    /*.camera, .camera * {transform-style:preserve-3d;}*/
    .scene {perspective:250px;}
    .scene, .camera {width:100vw; height:100vh;}
    .camera, .camera * {transform-style:preserve-3d;}
    .camera {
    /*transform:rotateX(20deg) scale(1.1); background:rgba(255,255,255,.5);*/
    transform:rotateX(15deg) rotateY(5deg) scale(1.1); background:rgba(255,255,255,.5);
    }

    div {
    @@ -30,13 +30,13 @@
    /*transform:translateY(100px);*/
    }
    #d {
    margin-top:10px;
    margin-top:10px; margin-left:50px;
    }
    #e {
    transform:translateY(100px);
    transform:translateY(30px);
    }
    #f {
    position:absolute;left:100px;top:100px;
    position:absolute;left:100px;top:50px;
    transform:translate(-50px, 50px) rotate(5deg); transform-origin:right top;
    }
    #g {
    @@ -46,7 +46,7 @@
    </style>
    </head>
    <body style="margin:0;">
    <!--<div class="scene"><div class="camera">-->
    <div class="scene"><div class="camera">
    <div id="a">
    relative;A;(50,100);t(200,150)r(10)tz(50);center
    <div id="b">
    @@ -68,7 +68,7 @@
    </div>
    </div>
    </div>
    <!--</div></div>-->
    </div></div>

    <script src="https://code.jquery.com/jquery-2.1.3.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.js"></script>
    @@ -79,16 +79,16 @@
    $('<b>').css({
    display:'block',width:'0px',height:'0px', boxShadow:'0 0 0 3px lime',
    position:'absolute',left:'0px',top:'0px', transform:'translate3d(' + v[k].x + 'px,' + v[k].y + 'px, ' + v[k].z + 'px)'
    }).appendTo('body'); // !important so <b> is subjected to perspective
    }).appendTo('.scene'); // !important so <b> is subjected to perspective
    }
    }

    //trace(domvertices(document.querySelector('#a')));
    //trace(domvertices(document.querySelector('#b')));
    //trace(domvertices(document.querySelector('#c')));
    //trace(domvertices(document.querySelector('#d')));
    //trace(domvertices(document.querySelector('#e')));
    //trace(domvertices(document.querySelector('#f')));
    trace(domvertices(document.querySelector('#a')));
    trace(domvertices(document.querySelector('#b')));
    trace(domvertices(document.querySelector('#c')));
    trace(domvertices(document.querySelector('#d')));
    trace(domvertices(document.querySelector('#e')));
    trace(domvertices(document.querySelector('#f')));
    trace(domvertices(document.querySelector('#g')));
    </script>
    </body>
  24. @abernier abernier revised this gist Feb 4, 2015. 3 changed files with 444 additions and 39 deletions.
    56 changes: 42 additions & 14 deletions domvertices.js
    View file
    Original file line number Diff line number Diff line change
    @@ -32,6 +32,24 @@
    return matrix;
    }

    function relAbsOrFixedPositionnedAncestor(el) {
    var parent = el.parentNode;
    var parentComputedStyle = getComputedStyle(parent, null);

    while (parent && parent.nodeType === 1) { // walk up
    if (parentComputedStyle.position === 'relative' || parentComputedStyle.position === 'absolute' || parentComputedStyle.position === 'fixed') {
    break; // stop
    }

    parent = parent.parentNode;
    parentComputedStyle = getComputedStyle(parent, null);
    }

    if (parent === document) return document.body; // html is the last element before document

    return parent;
    }

    function domvertices(el) {
    //
    // a b
    @@ -57,28 +75,38 @@

    var matrices = [];
    while (el.nodeType === 1) {(function () {
    var nextParent = el.parentNode;

    var computedStyle = getComputedStyle(el, null);

    //
    // P(0->1) : relative position (to parent)
    //
    var P01;
    (function () {
    var x = 0;
    var y = 0;
    var parent = el.parentNode;
    if (parent && parent.nodeType === 1) {
    var parentComputedStyle = getComputedStyle(parent, null);

    var offsetLeft = el.offsetLeft;
    var offsetTop = el.offsetTop;
    if (parentComputedStyle.position === 'static') {
    offsetLeft -= parent.offsetLeft;
    offsetTop -= parent.offsetTop;
    var offsetLeft = el.offsetLeft;
    var offsetTop = el.offsetTop;

    var position = computedStyle.position;
    if (position === 'absolute' || position === 'fixed') {
    // nothing
    } else if (position === 'static' || position === 'relative') {
    var closestPositionedParent = relAbsOrFixedPositionnedAncestor(el);

    if (closestPositionedParent === el.parentNode) {
    // nothing
    } else {
    var parent = el.parentNode;
    if (parent && parent.nodeType === 1) {
    offsetLeft -= parent.offsetLeft;
    offsetTop -= parent.offsetTop;
    }
    }
    x = offsetLeft - el.scrollLeft + el.clientLeft;
    y = offsetTop - el.scrollTop + el.clientTop;
    }
    //console.log(offsetLeft, offsetTop);

    x = offsetLeft - el.scrollLeft + el.clientLeft;
    y = offsetTop - el.scrollTop + el.clientTop;

    P01 = new THREE.Matrix4().makeTranslation(x, y, 0);
    }).call(this);
    @@ -119,7 +147,7 @@

    matrices.push(P03);

    el = el.parentNode;
    el = nextParent;
    }())}

    //
    80 changes: 55 additions & 25 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -4,43 +4,71 @@
    <meta charset="utf-8">
    <title></title>
    <style>
    .scene {perspective:250;}
    .scene, .camera {width:100vw; height:100vh;}
    .camera, .camera * {transform-style:preserve-3d;}
    .camera {transform:rotateX(20deg) scale(1.1); background:rgba(255,255,255,.5);}
    /*.scene {perspective:250;}
    .scene, .camera {width:100vw; height:100vh;}*/
    /*.camera, .camera * {transform-style:preserve-3d;}*/
    .camera {
    /*transform:rotateX(20deg) scale(1.1); background:rgba(255,255,255,.5);*/
    }

    div {
    display: inline-block;
    background: rgba(255,0,0,.5);
    width: 100px;
    box-shadow: 0 0 0 1px red;
    width: 100px;height:50px;
    box-shadow: 0 0 0 1px pink inset;
    }

    #a {margin-left:-50px;margin-top:-10px; transform:translate(200px, 150px) rotate(-10deg) translateZ(50px); transform-origin:center;}
    #b {margin-left:100px; transform:translate(100px, 50px) rotate(-10deg) translateZ(50px) rotateX(-20deg); transform-origin:center;}
    #c {position:relative; transform:translateY(100px);}
    #d {position:absolute;left:100px; transform:translate(-50px, 50px) rotate(10deg); transform-origin:right top;}
    #e {position:fixed;left:100px;top:50%; transform:scale(2) translate(-60px, 30px) rotate(20deg); transform-origin:right top;}
    #a {
    position:relative; margin-left:50px;margin-top:100px;
    transform:translate(200px, 150px) rotate(-10deg) translateZ(50px); transform-origin:center;
    }
    #b {
    margin-left:100px;
    transform:translate(100px, 50px) rotate(-10deg) translateZ(50px) rotateX(-20deg); transform-origin:center;
    }
    #c {
    /*transform:translateY(100px);*/
    }
    #d {
    margin-top:10px;
    }
    #e {
    transform:translateY(100px);
    }
    #f {
    position:absolute;left:100px;top:100px;
    transform:translate(-50px, 50px) rotate(5deg); transform-origin:right top;
    }
    #g {
    position:fixed;left:100px;top:50px;
    transform:scale(2) translate(-60px, 30px) rotate(20deg); transform-origin:right top;
    }
    </style>
    </head>
    <body style="margin:0;">
    <div class="scene"><div class="camera">
    <!--<div class="scene"><div class="camera">-->
    <div id="a">
    a
    relative;A;(50,100);t(200,150)r(10)tz(50);center
    <div id="b">
    b
    static;B;(100,50);t(100,50)r(-10)tz(50)rx(-20);center
    <div id="c">
    c
    static;C;(0,0);;center
    <div id="d">
    d
    static;D;(0,0);;center
    <div id="e">
    e
    static;E;(0,0);;center
    <div id="f">
    absolute;F;(100,100);t(-50,50)r(5);right top
    <div id="g">
    fixed;G(100,50);s(2)t(-60,30)r(20);right top
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div></div>
    <!--</div></div>-->

    <script src="https://code.jquery.com/jquery-2.1.3.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.js"></script>
    @@ -49,17 +77,19 @@
    function trace(v) {
    for (k in v) { //
    $('<b>').css({
    display:'block',width:'0px',height:'0px', boxShadow:'0 0 0 1px lime',
    display:'block',width:'0px',height:'0px', boxShadow:'0 0 0 3px lime',
    position:'absolute',left:'0px',top:'0px', transform:'translate3d(' + v[k].x + 'px,' + v[k].y + 'px, ' + v[k].z + 'px)'
    }).appendTo('.scene'); // !important so <b> is subjected to perspective
    }).appendTo('body'); // !important so <b> is subjected to perspective
    }
    }

    trace(domvertices(document.querySelector('#a')));
    trace(domvertices(document.querySelector('#b')));
    trace(domvertices(document.querySelector('#c')));
    trace(domvertices(document.querySelector('#d')));
    trace(domvertices(document.querySelector('#e')));
    //trace(domvertices(document.querySelector('#a')));
    //trace(domvertices(document.querySelector('#b')));
    //trace(domvertices(document.querySelector('#c')));
    //trace(domvertices(document.querySelector('#d')));
    //trace(domvertices(document.querySelector('#e')));
    //trace(domvertices(document.querySelector('#f')));
    trace(domvertices(document.querySelector('#g')));
    </script>
    </body>
    </html>
    347 changes: 347 additions & 0 deletions test.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,347 @@
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <style>
    /*.scene {perspective:250;}
    .scene, .camera {width:100vw; height:100vh;}*/
    /*.camera, .camera * {transform-style:preserve-3d;}*/
    .camera {
    /*transform:rotateX(20deg) scale(1.1); background:rgba(255,255,255,.5);*/
    }

    div {
    display: inline-block;
    background: rgba(255,0,0,.5);
    width: 100px;height:50px;
    box-shadow: 0 0 0 1px pink inset;
    }

    #a {
    position:relative; margin-left:50px;margin-top:100px;
    transform:translate(200px, 150px) rotate(-10deg) translateZ(50px); transform-origin:center;
    }
    #b {
    margin-left:100px;
    transform:translate(100px, 50px) rotate(-10deg) translateZ(50px) rotateX(-20deg); transform-origin:center;
    }
    #c {
    /*transform:translateY(100px);*/
    }
    #d {
    margin-top:10px;
    }
    #e {
    transform:translateY(100px);
    }
    #f {
    position:absolute;left:100px;top:100px;
    transform:translate(-50px, 50px) rotate(5deg); transform-origin:right top;
    }
    #g {
    position:fixed;left:100px;top:50px;
    transform:scale(2) translate(-60px, 30px) rotate(20deg); transform-origin:right top;
    }
    </style>
    </head>
    <body style="margin:0;">
    <!--<div class="scene"><div class="camera">-->
    <div id="a">
    relative;A;(50,100);t(200,150)r(10)tz(50);center
    <div id="b">
    static;B;(100,50);t(100,50)r(-10)tz(50)rx(-20);center
    <div id="c">
    static;C;(0,0);;center
    <div id="d">
    static;D;(0,0);;center
    <div id="e">
    static;E;(0,0);;center
    <div id="f">
    absolute;F;(100,100);t(-50,50)r(5);right top
    <div id="g">
    fixed;G(100,50);s(2)t(-60,30)r(20);right top
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    <!--</div></div>-->

    <script src="https://code.jquery.com/jquery-2.1.3.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.js"></script>
    <script src="domvertices.js"></script>
    <script>
    function trace(v) {
    for (k in v) { //
    $('<b>').css({
    display:'block',width:'0px',height:'0px', boxShadow:'0 0 0 3px lime',
    position:'absolute',left:'0px',top:'0px', transform:'translate3d(' + v[k].x + 'px,' + v[k].y + 'px, ' + v[k].z + 'px)'
    }).appendTo('body'); // !important so <b> is subjected to perspective
    }
    }

    function m(el, o) {
    var computedStyle = getComputedStyle(el, null);
    var transformOrigin = computedStyle.transformOrigin.split(' ').map(function (el) {return parseFloat(el, 10);});

    var P01 = new THREE.Matrix4().makeTranslation(o.offset[0], o.offset[1], 0);
    var P12 = new THREE.Matrix4().makeTranslation(transformOrigin[0], transformOrigin[1], 0);
    var P23 = normalizeMatrix(computedStyle.transform);
    var P21 = new THREE.Matrix4().getInverse(P12);

    var P03 = new THREE.Matrix4().identity()
    .multiply(P01) // (1): translate position
    .multiply(P12) // (2): translate transform-origin
    .multiply(P23) // (3): transform
    .multiply(P21) // (4): inverse of (2)
    ;

    return P03;
    }

    function v(el) {
    var w = el.offsetWidth;
    var h = el.offsetHeight;
    var v = {
    a: new THREE.Vector3().set(0, 0, 0), // top left corner
    b: new THREE.Vector3().set(w, 0, 0), // top right corner
    c: new THREE.Vector3().set(w, h, 0), // bottom right corner
    d: new THREE.Vector3().set(0, h, 0) // bottom left corner
    };

    return v;
    }

    // a

    var a = document.querySelector('#a');
    var ma = m(a, {
    offset: [50, 100]
    });
    var va = v(a);
    //trace(va);

    /*va.a = va.a.applyMatrix4(ma);
    va.b = va.b.applyMatrix4(ma);
    va.c = va.c.applyMatrix4(ma);
    va.d = va.d.applyMatrix4(ma);
    trace(va);*/

    // b

    var b = document.querySelector('#b');
    var mb = m(b, {
    offset: [100, 32]
    });
    var vb = v(b);
    //trace(vb);

    /*vb.a = vb.a.applyMatrix4(mb);
    vb.b = vb.b.applyMatrix4(mb);
    vb.c = vb.c.applyMatrix4(mb);
    vb.d = vb.d.applyMatrix4(mb);
    trace(vb);
    vb.a = vb.a.applyMatrix4(ma);
    vb.b = vb.b.applyMatrix4(ma);
    vb.c = vb.c.applyMatrix4(ma);
    vb.d = vb.d.applyMatrix4(ma);
    trace(vb);*/

    // c

    var c = document.querySelector('#c');
    var mc = m(c, {
    offset: [0, 32]
    });
    var vc = v(c);

    /*vc.a = vc.a.applyMatrix4(mc);
    vc.b = vc.b.applyMatrix4(mc);
    vc.c = vc.c.applyMatrix4(mc);
    vc.d = vc.d.applyMatrix4(mc);
    trace(vc);
    vc.a = vc.a.applyMatrix4(mb);
    vc.b = vc.b.applyMatrix4(mb);
    vc.c = vc.c.applyMatrix4(mb);
    vc.d = vc.d.applyMatrix4(mb);
    trace(vc);
    vc.a = vc.a.applyMatrix4(ma);
    vc.b = vc.b.applyMatrix4(ma);
    vc.c = vc.c.applyMatrix4(ma);
    vc.d = vc.d.applyMatrix4(ma);
    trace(vc);*/

    // d

    var d = document.querySelector('#d');
    var md = m(d, {
    offset: [0, 42]
    });
    var vd = v(d);

    /*vd.a = vd.a.applyMatrix4(md);
    vd.b = vd.b.applyMatrix4(md);
    vd.c = vd.c.applyMatrix4(md);
    vd.d = vd.d.applyMatrix4(md);
    trace(vd);
    vd.a = vd.a.applyMatrix4(mc);
    vd.b = vd.b.applyMatrix4(mc);
    vd.c = vd.c.applyMatrix4(mc);
    vd.d = vd.d.applyMatrix4(mc);
    trace(vd);
    vd.a = vd.a.applyMatrix4(mb);
    vd.b = vd.b.applyMatrix4(mb);
    vd.c = vd.c.applyMatrix4(mb);
    vd.d = vd.d.applyMatrix4(mb);
    trace(vd);
    vd.a = vd.a.applyMatrix4(ma);
    vd.b = vd.b.applyMatrix4(ma);
    vd.c = vd.c.applyMatrix4(ma);
    vd.d = vd.d.applyMatrix4(ma);
    trace(vd);*/

    // e

    var e = document.querySelector('#e');
    var me = m(e, {
    offset: [0, 32]
    });
    var ve = v(e);

    /*ve.a = ve.a.applyMatrix4(me);
    ve.b = ve.b.applyMatrix4(me);
    ve.c = ve.c.applyMatrix4(me);
    ve.d = ve.d.applyMatrix4(me);
    trace(ve);
    ve.a = ve.a.applyMatrix4(md);
    ve.b = ve.b.applyMatrix4(md);
    ve.c = ve.c.applyMatrix4(md);
    ve.d = ve.d.applyMatrix4(md);
    trace(ve);
    ve.a = ve.a.applyMatrix4(mc);
    ve.b = ve.b.applyMatrix4(mc);
    ve.c = ve.c.applyMatrix4(mc);
    ve.d = ve.d.applyMatrix4(mc);
    trace(ve);
    ve.a = ve.a.applyMatrix4(mb);
    ve.b = ve.b.applyMatrix4(mb);
    ve.c = ve.c.applyMatrix4(mb);
    ve.d = ve.d.applyMatrix4(mb);
    trace(ve);
    ve.a = ve.a.applyMatrix4(ma);
    ve.b = ve.b.applyMatrix4(ma);
    ve.c = ve.c.applyMatrix4(ma);
    ve.d = ve.d.applyMatrix4(ma);
    trace(ve);*/

    // f

    var f = document.querySelector('#f');
    var mf = m(f, {
    offset: [100, 100]
    });
    var vf = v(f);

    /*vf.a = vf.a.applyMatrix4(mf);
    vf.b = vf.b.applyMatrix4(mf);
    vf.c = vf.c.applyMatrix4(mf);
    vf.d = vf.d.applyMatrix4(mf);
    trace(vf);
    vf.a = vf.a.applyMatrix4(me);
    vf.b = vf.b.applyMatrix4(me);
    vf.c = vf.c.applyMatrix4(me);
    vf.d = vf.d.applyMatrix4(me);
    trace(vf);
    vf.a = vf.a.applyMatrix4(md);
    vf.b = vf.b.applyMatrix4(md);
    vf.c = vf.c.applyMatrix4(md);
    vf.d = vf.d.applyMatrix4(md);
    trace(vf);
    vf.a = vf.a.applyMatrix4(mc);
    vf.b = vf.b.applyMatrix4(mc);
    vf.c = vf.c.applyMatrix4(mc);
    vf.d = vf.d.applyMatrix4(mc);
    trace(vf);
    vf.a = vf.a.applyMatrix4(mb);
    vf.b = vf.b.applyMatrix4(mb);
    vf.c = vf.c.applyMatrix4(mb);
    vf.d = vf.d.applyMatrix4(mb);
    trace(vf);
    vf.a = vf.a.applyMatrix4(ma);
    vf.b = vf.b.applyMatrix4(ma);
    vf.c = vf.c.applyMatrix4(ma);
    vf.d = vf.d.applyMatrix4(ma);
    trace(vf);*/

    // g

    var g = document.querySelector('#g');
    var mg = m(g, {
    offset: [100, 50]
    });
    var vg = v(g);

    vg.a = vg.a.applyMatrix4(mg);
    vg.b = vg.b.applyMatrix4(mg);
    vg.c = vg.c.applyMatrix4(mg);
    vg.d = vg.d.applyMatrix4(mg);
    trace(vg);

    vg.a = vg.a.applyMatrix4(mf);
    vg.b = vg.b.applyMatrix4(mf);
    vg.c = vg.c.applyMatrix4(mf);
    vg.d = vg.d.applyMatrix4(mf);
    trace(vg);

    vg.a = vg.a.applyMatrix4(me);
    vg.b = vg.b.applyMatrix4(me);
    vg.c = vg.c.applyMatrix4(me);
    vg.d = vg.d.applyMatrix4(me);
    trace(vg);

    vg.a = vg.a.applyMatrix4(md);
    vg.b = vg.b.applyMatrix4(md);
    vg.c = vg.c.applyMatrix4(md);
    vg.d = vg.d.applyMatrix4(md);
    trace(vg);

    vg.a = vg.a.applyMatrix4(mc);
    vg.b = vg.b.applyMatrix4(mc);
    vg.c = vg.c.applyMatrix4(mc);
    vg.d = vg.d.applyMatrix4(mc);
    trace(vg);

    vg.a = vg.a.applyMatrix4(mb);
    vg.b = vg.b.applyMatrix4(mb);
    vg.c = vg.c.applyMatrix4(mb);
    vg.d = vg.d.applyMatrix4(mb);
    trace(vg);

    vg.a = vg.a.applyMatrix4(ma);
    vg.b = vg.b.applyMatrix4(ma);
    vg.c = vg.c.applyMatrix4(ma);
    vg.d = vg.d.applyMatrix4(ma);
    trace(vg);


    </script>
    </body>
    </html>
  25. @abernier abernier revised this gist Jan 31, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    Compute the 4 vertices absolute coordinates of **any**, deep, `transform`ed, `position`ed DOM element.
    Compute the 4 vertices `a`,`b`,`c`,`d` absolute coordinates of **any**, deep, `transform`ed, `position`ed DOM element.

    ```
    a b
  26. @abernier abernier revised this gist Jan 31, 2015. 1 changed file with 1 addition and 3 deletions.
    4 changes: 1 addition & 3 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,3 @@
    # domvertices

    Compute the 4 vertices absolute coordinates of **any**, deep, `transform`ed, `position`ed DOM element.

    ```
    @@ -12,7 +10,7 @@ a b
    d c
    ```

    ## Usage
    # Usage

    ```js
    var el = document.getElementById('foo');
  27. @abernier abernier revised this gist Jan 31, 2015. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -4,9 +4,9 @@
    <meta charset="utf-8">
    <title></title>
    <style>
    .scene {-webkit-perspective:250;}
    .scene {perspective:250;}
    .scene, .camera {width:100vw; height:100vh;}
    .camera, .camera * {-webkit-transform-style:preserve-3d;}
    .camera, .camera * {transform-style:preserve-3d;}
    .camera {transform:rotateX(20deg) scale(1.1); background:rgba(255,255,255,.5);}

    div {
  28. @abernier abernier revised this gist Jan 31, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    # domvertices

    Compute the 4 vertices absolute coordinates of any deep `transform`ed, `position`ed DOM element.
    Compute the 4 vertices absolute coordinates of **any**, deep, `transform`ed, `position`ed DOM element.

    ```
    a b
  29. @abernier abernier revised this gist Jan 31, 2015. 1 changed file with 32 additions and 0 deletions.
    32 changes: 32 additions & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,32 @@
    # domvertices

    Compute the 4 vertices absolute coordinates of any deep `transform`ed, `position`ed DOM element.

    ```
    a b
     +--------------+
     | |
     | el |
     | |
     +--------------+
    d c
    ```

    ## Usage

    ```js
    var el = document.getElementById('foo');

    console.log(domvertices(el));
    ```

    outputs:

    ```js
    {
    a: {x: , y: , z: },
    b: {x: , y: , z: },
    c: {x: , y: , z: },
    d: {x: , y: , z: }
    }
    ```
  30. @abernier abernier revised this gist Jan 31, 2015. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -42,8 +42,8 @@
    </div>
    </div></div>

    <script src="node_modules/dist/jquery.js"></script>
    <script src="node_modules/three/three.js"></script>
    <script src="https://code.jquery.com/jquery-2.1.3.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.js"></script>
    <script src="domvertices.js"></script>
    <script>
    function trace(v) {