From 9f82831ccb4fc122e5175e8adc470c149c0ed1a1 Mon Sep 17 00:00:00 2001 From: Seth House Date: Sun, 27 Mar 2016 16:17:16 -0600 Subject: [PATCH] Add Morphdom --- lib/morphdom-umd.min.js | 1 + library-list.js | 1 + morphdom/app.js | 36 ++++++++++++++++++++++++++++++++++++ morphdom/index.html | 18 ++++++++++++++++++ readme.md | 1 + 5 files changed, 57 insertions(+) create mode 100644 lib/morphdom-umd.min.js create mode 100644 morphdom/app.js create mode 100644 morphdom/index.html diff --git a/lib/morphdom-umd.min.js b/lib/morphdom-umd.min.js new file mode 100644 index 00000000..aaed2902 --- /dev/null +++ b/lib/morphdom-umd.min.js @@ -0,0 +1 @@ +(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.morphdom=f()}})(function(){var define,module,exports;module={exports:exports={}};var range;var testEl=typeof document!=="undefined"?document.body||document.createElement("div"):{};var hasAttribute;if(testEl.hasAttribute){hasAttribute=function hasAttribute(el,name){return el.hasAttribute(name)}}else{hasAttribute=function hasAttribute(el,name){return el.getAttributeNode(name)}}function empty(o){for(var k in o){if(o.hasOwnProperty(k)){return false}}return true}function toElement(str){if(!range&&document.createRange){range=document.createRange();range.selectNode(document.body)}var fragment;if(range&&range.createContextualFragment){fragment=range.createContextualFragment(str)}else{fragment=document.createElement("body");fragment.innerHTML=str}return fragment.childNodes[0]}var specialElHandlers={OPTION:function(fromEl,toEl){if(fromEl.selected=toEl.selected){fromEl.setAttribute("selected","")}else{fromEl.removeAttribute("selected","")}},INPUT:function(fromEl,toEl){fromEl.checked=toEl.checked;if(fromEl.value!=toEl.value){fromEl.value=toEl.value}if(!hasAttribute(toEl,"checked")){fromEl.removeAttribute("checked")}if(!hasAttribute(toEl,"value")){fromEl.removeAttribute("value")}},TEXTAREA:function(fromEl,toEl){var newValue=toEl.value;if(fromEl.value!=newValue){fromEl.value=newValue}if(fromEl.firstChild){fromEl.firstChild.nodeValue=newValue}}};function noop(){}function morphAttrs(fromNode,toNode){var attrs=toNode.attributes;var i;var attr;var attrName;var attrValue;var foundAttrs={};for(i=attrs.length-1;i>=0;i--){attr=attrs[i];if(attr.specified!==false){attrName=attr.name;attrValue=attr.value;foundAttrs[attrName]=true;if(fromNode.getAttribute(attrName)!==attrValue){fromNode.setAttribute(attrName,attrValue)}}}attrs=fromNode.attributes;for(i=attrs.length-1;i>=0;i--){attr=attrs[i];if(attr.specified!==false){attrName=attr.name;if(!foundAttrs.hasOwnProperty(attrName)){fromNode.removeAttribute(attrName)}}}}function moveChildren(fromEl,toEl){var curChild=fromEl.firstChild;while(curChild){var nextChild=curChild.nextSibling;toEl.appendChild(curChild);curChild=nextChild}return toEl}function defaultGetNodeKey(node){return node.id}function morphdom(fromNode,toNode,options){if(!options){options={}}if(typeof toNode==="string"){toNode=toElement(toNode)}var savedEls={};var unmatchedEls={};var getNodeKey=options.getNodeKey||defaultGetNodeKey;var onNodeDiscarded=options.onNodeDiscarded||noop;var onBeforeMorphEl=options.onBeforeMorphEl||noop;var onBeforeMorphElChildren=options.onBeforeMorphElChildren||noop;var onBeforeNodeDiscarded=options.onBeforeNodeDiscarded||noop;var childrenOnly=options.childrenOnly===true;var movedEls=[];function removeNodeHelper(node,nestedInSavedEl){var id=getNodeKey(node);if(id){savedEls[id]=node}else if(!nestedInSavedEl){onNodeDiscarded(node)}if(node.nodeType===1){var curChild=node.firstChild;while(curChild){removeNodeHelper(curChild,nestedInSavedEl||id);curChild=curChild.nextSibling}}}function walkDiscardedChildNodes(node){if(node.nodeType===1){var curChild=node.firstChild;while(curChild){if(!getNodeKey(curChild)){onNodeDiscarded(curChild);walkDiscardedChildNodes(curChild)}curChild=curChild.nextSibling}}}function removeNode(node,parentNode,alreadyVisited){if(onBeforeNodeDiscarded(node)===false){return}parentNode.removeChild(node);if(alreadyVisited){if(!getNodeKey(node)){onNodeDiscarded(node);walkDiscardedChildNodes(node)}}else{removeNodeHelper(node)}}function morphEl(fromEl,toEl,alreadyVisited,childrenOnly){var toElKey=getNodeKey(toEl);if(toElKey){delete savedEls[toElKey]}if(!childrenOnly){if(onBeforeMorphEl(fromEl,toEl)===false){return}morphAttrs(fromEl,toEl);if(onBeforeMorphElChildren(fromEl,toEl)===false){return}}if(fromEl.tagName!="TEXTAREA"){var curToNodeChild=toEl.firstChild;var curFromNodeChild=fromEl.firstChild;var curToNodeId;var fromNextSibling;var toNextSibling;var savedEl;var unmatchedEl;outer:while(curToNodeChild){toNextSibling=curToNodeChild.nextSibling;curToNodeId=getNodeKey(curToNodeChild);while(curFromNodeChild){var curFromNodeId=getNodeKey(curFromNodeChild);fromNextSibling=curFromNodeChild.nextSibling;if(!alreadyVisited){if(curFromNodeId&&(unmatchedEl=unmatchedEls[curFromNodeId])){unmatchedEl.parentNode.replaceChild(curFromNodeChild,unmatchedEl);morphEl(curFromNodeChild,unmatchedEl,alreadyVisited);curFromNodeChild=fromNextSibling;continue}}var curFromNodeType=curFromNodeChild.nodeType;if(curFromNodeType===curToNodeChild.nodeType){var isCompatible=false;if(curFromNodeType===1){if(curFromNodeChild.tagName===curToNodeChild.tagName){if(curFromNodeId||curToNodeId){if(curToNodeId===curFromNodeId){isCompatible=true}}else{isCompatible=true}}if(isCompatible){morphEl(curFromNodeChild,curToNodeChild,alreadyVisited)}}else if(curFromNodeType===3){isCompatible=true;curFromNodeChild.nodeValue=curToNodeChild.nodeValue}if(isCompatible){curToNodeChild=toNextSibling;curFromNodeChild=fromNextSibling;continue outer}}removeNode(curFromNodeChild,fromEl,alreadyVisited);curFromNodeChild=fromNextSibling}if(curToNodeId){if(savedEl=savedEls[curToNodeId]){morphEl(savedEl,curToNodeChild,true);curToNodeChild=savedEl}else{unmatchedEls[curToNodeId]=curToNodeChild}}fromEl.appendChild(curToNodeChild);if(curToNodeChild.nodeType===1&&(curToNodeId||curToNodeChild.firstChild)){movedEls.push(curToNodeChild)}curToNodeChild=toNextSibling;curFromNodeChild=fromNextSibling}while(curFromNodeChild){fromNextSibling=curFromNodeChild.nextSibling;removeNode(curFromNodeChild,fromEl,alreadyVisited);curFromNodeChild=fromNextSibling}}var specialElHandler=specialElHandlers[fromEl.tagName];if(specialElHandler){specialElHandler(fromEl,toEl)}}var morphedNode=fromNode;var morphedNodeType=morphedNode.nodeType;var toNodeType=toNode.nodeType;if(!childrenOnly){if(morphedNodeType===1){if(toNodeType===1){if(fromNode.tagName!==toNode.tagName){onNodeDiscarded(fromNode);morphedNode=moveChildren(fromNode,document.createElement(toNode.tagName))}}else{morphedNode=toNode}}else if(morphedNodeType===3){if(toNodeType===3){morphedNode.nodeValue=toNode.nodeValue;return morphedNode}else{morphedNode=toNode}}}if(morphedNode===toNode){onNodeDiscarded(fromNode)}else{morphEl(morphedNode,toNode,false,childrenOnly);var handleMovedEl=function(el){var curChild=el.firstChild;while(curChild){var nextSibling=curChild.nextSibling;var key=getNodeKey(curChild);if(key){var savedEl=savedEls[key];if(savedEl&&curChild.tagName===savedEl.tagName){curChild.parentNode.replaceChild(savedEl,curChild);morphEl(savedEl,curChild,true);curChild=nextSibling;if(empty(savedEls)){return false}continue}}if(curChild.nodeType===1){handleMovedEl(curChild)}curChild=nextSibling}};if(!empty(savedEls)){handleMovedElsLoop:while(movedEls.length){var movedElsTemp=movedEls;movedEls=[];for(var i=0;i'; + html += ''; + html += '' + db.lastSample.nbQueries + ''; + + for (var indexQ = 0; indexQ < db.lastSample.topFiveQueries.length; indexQ++) { + var q = db.lastSample.topFiveQueries[indexQ]; + html += ''; + html += q.formatElapsed || ''; + html += '
'; + html += '
'; + html += q.query || ''; + html += '
'; + html += '
'; + html += '
'; + html += ''; + } + html += ''; + } + + html += ''; + + var el = document.getElementById("app"); + morphdom(el, html, {childrenOnly: true}); + + Monitoring.renderRate.ping(); + setTimeout(render, ENV.timeout); +}; + +render(); diff --git a/morphdom/index.html b/morphdom/index.html new file mode 100644 index 00000000..14f25939 --- /dev/null +++ b/morphdom/index.html @@ -0,0 +1,18 @@ + + + + + + +dbmon + + +
+ + + + + + + + diff --git a/readme.md b/readme.md index 18371459..b469757e 100644 --- a/readme.md +++ b/readme.md @@ -34,6 +34,7 @@ You can test it at http://mathieuancelin.github.io/js-repaint-perfs/ * [domvm](https://github.com/leeoniya/domvm) * [once](https://github.com/utilise/utilise#--once) * [Ripple](https://github.com/pemrouz/ripple) +* [Morphdom](https://github.com/patrick-steele-idem/morphdom) ## Todo