Skip to content

Instantly share code, notes, and snippets.

@2947721120

2947721120/index.html

Created November 20, 2015 23:48
Show Gist options
  • Save 2947721120/99df5b03760cc6886a09 to your computer and use it in GitHub Desktop.
Save 2947721120/99df5b03760cc6886a09 to your computer and use it in GitHub Desktop.
Download ZIP
Untitled benchmark (http://jsbench.github.io/#99df5b03760cc6886a09) #jsbench #jsperf
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Untitled benchmark</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/1.0.0/benchmark.min.js"></script>
<script src="./suite.js"></script>
</head>
<body>
<h1>Open the console to view the results</h1>
<h2><code>cmd + alt + j</code> or <code>ctrl + alt + j</code></h2>
</body>
</html>
Raw
suite.js
"use strict";
(function (factory) {
if (typeof Benchmark !== "undefined") {
factory(Benchmark);
} else {
factory(require("benchmark"));
}
})(function (Benchmark) {
var suite = new Benchmark.Suite;
suite.add("<!DOCTYPE html>", function () {
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Drag and Drop Interaction Ideas | Bottom Slide</title>
<meta name="description" content="Inspiration for drag and drop interactions for the modern UI" />
<meta name="keywords" content="drag and drop, interaction, inspiration, web design, ui" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="http://cdn.635050.com/dan-chajian/%E6%8B%96%E6%8B%BD%E4%BA%92%E5%8A%A8/DragDropInteractions/css/normalize.css" />
<link rel="stylesheet" type="text/css" href="//dn-c2cmall.qbox.me/font-awesome/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="http://cdn.635050.com/dan-chajian/%E6%8B%96%E6%8B%BD%E4%BA%92%E5%8A%A8/DragDropInteractions/css/demo.css" />
<link rel="stylesheet" type="text/css" href="http://cdn.635050.com/dan-chajian/%E6%8B%96%E6%8B%BD%E4%BA%92%E5%8A%A8/DragDropInteractions/css/bottom-slide.css" />
<script src="http://cdn.635050.com/dan-chajian/%E6%8B%96%E6%8B%BD%E4%BA%92%E5%8A%A8/DragDropInteractions/js/modernizr.custom.js"></script>
</head>
<body class="skin-5">
<div class="container">
<!-- Top Navigation -->
<div class="codrops-top clearfix">
<a class="codrops-icon codrops-icon-prev" href="http://tympanus.net/Development/MorphingSearch/"><span>Previous Demo</span></a>
<span class="right"><a class="codrops-icon codrops-icon-drop" href="http://tympanus.net/codrops/?p=21275"><span>Back to the Codrops Article</span></a></span>
</div>
<div class="content">
<header class="codrops-header">
<h1>Drag and Drop Interaction Ideas <span>Inspiration for drag and drop interactions for the modern UI</span></h1>
<nav class="codrops-demos">
<a href="index.html">Bottom Area</a>
<a href="sidebar.html">Sidebar</a>
<a href="page-scale.html">Page Scale</a>
<a href="modal.html">Modal</a>
<a href="icons.html">Icons</a>
<a class="current-demo" href="bottom-slide.html">Bottom Slide</a>
<a href="reveal.html">Reveal</a>
</nav>
</header>
<div id="grid" class="grid clearfix">
<div class="grid__item"><i class="fa fa-fw fa-code"></i></div>
<div class="grid__item"><i class="fa fa-fw fa-code"></i></div>
<div class="grid__item"><i class="fa fa-fw fa-code"></i></div>
<div class="grid__item"><i class="fa fa-fw fa-code"></i></div>
<div class="grid__item"><i class="fa fa-fw fa-code"></i></div>
<div class="grid__item"><i class="fa fa-fw fa-code"></i></div>
<div class="grid__item"><i class="fa fa-fw fa-code"></i></div>
<div class="grid__item"><i class="fa fa-fw fa-code"></i></div>
<div class="grid__item"><i class="fa fa-fw fa-code"></i></div>
<div class="grid__item"><i class="fa fa-fw fa-code"></i></div>
<div class="grid__item"><i class="fa fa-fw fa-code"></i></div>
<div class="grid__item"><i class="fa fa-fw fa-code"></i></div>
</div>
<!-- Related demos -->
<section class="related">
<p>If you enjoyed this demo you might also like:</p>
<a href="http://tympanus.net/Development/DraggableDualViewSlideshow/">
<img src="http://cdn.635050.com/dan-chajian/%E6%8B%96%E6%8B%BD%E4%BA%92%E5%8A%A8/DragDropInteractions/img/related/DualViewSlideshow.png" alt="Dual-View Slideshow Image"/>
<h3>Draggable Dual-View Slideshow</h3>
</a>
<a href="http://tympanus.net/Development/ButtonComponentMorph/">
<img src="http://cdn.635050.com/dan-chajian/%E6%8B%96%E6%8B%BD%E4%BA%92%E5%8A%A8/DragDropInteractions/img/related/MorphingButtons.png" alt="Morphing Buttons Image" />
<h3>Morphing Buttons Concept</h3>
</a>
</section>
</div><!-- /content -->
</div><!-- /container -->
<div id="drop-area" class="drop-area">
<div>
<div class="dummy"></div>
<div class="drop-area__item"><i class="fa fa-fw fa-file-excel-o"></i></div>
<div class="drop-area__item"><i class="fa fa-fw fa-file-pdf-o"></i></div>
<div class="drop-area__item"><i class="fa fa-fw fa-file-sound-o"></i></div>
<div class="drop-area__item"><i class="fa fa-fw fa-file-word-o"></i></div>
<div class="drop-area__item"><i class="fa fa-fw fa-file-archive-o"></i></div>
<div class="drop-area__item"><i class="fa fa-fw fa-file-text-o"></i></div>
<div class="drop-area__item"><i class="fa fa-fw fa-file-archive-o"></i></div>
<div class="drop-area__item"><i class="fa fa-fw fa-file-image-o"></i></div>
<div class="drop-area__item"><i class="fa fa-fw fa-file-o"></i></div>
<div class="drop-area__item"><i class="fa fa-fw fa-file-powerpoint-o"></i></div>
<div class="drop-area__item"><i class="fa fa-fw fa-file-code-o"></i></div>
</div>
</div>
<div class="drop-overlay"></div>
<script src="http://cdn.635050.com/dan-chajian/%E6%8B%96%E6%8B%BD%E4%BA%92%E5%8A%A8/DragDropInteractions/js/draggabilly.pkgd.min.js"></script>
<script src="http://cdn.635050.com/dan-chajian/%E6%8B%96%E6%8B%BD%E4%BA%92%E5%8A%A8/DragDropInteractions/js/dragdrop.js"></script>
<script>
(function() {
var body = document.body,
dropArea = document.getElementById( 'drop-area' ),
droppableArr = [], dropAreaTimeout;
// initialize droppables
[].slice.call( document.querySelectorAll( '#drop-area .drop-area__item' )).forEach( function( el ) {
droppableArr.push( new Droppable( el, {
onDrop : function( instance, draggableEl ) {
// show checkmark inside the droppabe element
classie.add( instance.el, 'drop-feedback' );
clearTimeout( instance.checkmarkTimeout );
instance.checkmarkTimeout = setTimeout( function() {
classie.remove( instance.el, 'drop-feedback' );
}, 800 );
// ...
}
} ) );
} );
// initialize draggable(s)
[].slice.call(document.querySelectorAll( '#grid .grid__item' )).forEach( function( el ) {
new Draggable( el, droppableArr, {
draggabilly : { containment: document.body },
scroll : true,
scrollable : '#drop-area',
scrollSpeed : 20,
scrollSensitivity : 10,
onStart : function() {
// add class 'drag-active' to body
classie.add( body, 'drag-active' );
// clear timeout: dropAreaTimeout (toggle drop area)
clearTimeout( dropAreaTimeout );
// show dropArea
classie.add( dropArea, 'show' );
},
onEnd : function( wasDropped ) {
var afterDropFn = function() {
// hide dropArea
classie.remove( dropArea, 'show' );
// remove class 'drag-active' from body
classie.remove( body, 'drag-active' );
};
if( !wasDropped ) {
afterDropFn();
}
else {
// after some time hide drop area and remove class 'drag-active' from body
clearTimeout( dropAreaTimeout );
dropAreaTimeout = setTimeout( afterDropFn, 400 );
}
}
} );
} );
})();
</script>
</body>
</html>
});
suite.on("cycle", function (evt) {
console.log(" " + evt);
});
suite.on("complete", function (evt) {
var results = evt.currentTarget.sort(function (a, b) {
return b.hz - a.hz;
});
results.forEach(function (item) {
console.log(" " + item);
});
});
console.log("Untitled benchmark");
console.log(new Array(30).join("-"));
suite.run();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment