+
+ Examples
+
+
+
\ No newline at end of file
diff --git a/tests/demo.js b/tests/demo.js
new file mode 100644
index 0000000..e4899a1
--- /dev/null
+++ b/tests/demo.js
@@ -0,0 +1,135 @@
+$(document).ready(function () {
+ console.log('ready');
+
+ // $("textarea.html").each(function(idx, textarea) {
+ // CodeMirror.fromTextArea(textarea, {
+ // lineNumbers: true,
+ // mode: "htmlmixed",
+ // readOnly: true
+ // });
+ // });
+ //
+ // $("textarea.css").each(function(idx, textarea) {
+ // CodeMirror.fromTextArea(textarea, {
+ // lineNumbers: true,
+ // mode: "css",
+ // readOnly: true
+ // });
+ // });
+ //
+ // $("textarea.javascript").each(function(idx, textarea) {
+ // CodeMirror.fromTextArea(textarea, {
+ // lineNumbers: true,
+ // mode: "javascript",
+ // readOnly: true
+ // });
+ // });
+});
+
+function ResizerDemo(element) {
+ element = $(element);
+ var handler = $('');
+ var info = $('');
+
+ element.append(handler);
+ element.append(info);
+
+ var hammer = new Hammer(element[0], {recognizers: [
+ [Hammer.Pan, { threshold: 0}]
+ ]});
+
+ var startWidth;
+ element.on('mousedown', function(e){
+ e.preventDefault();
+ });
+ hammer.on('panstart', function(e) {
+ startWidth = element[0].clientWidth;
+ });
+
+ hammer.on('panmove', function(e) {
+ element[0].style.width = (startWidth + e.deltaX) + 'px';
+ info.html(element[0].clientWidth + 'px x ' + element[0].clientHeight + 'px');
+ })
+}
+
+$( document ).ready(function(){
+ $('.examplesResizerDemos').each(function(idx, element){
+ new ResizerDemo(element);
+ });
+
+ perfTest();
+ example3();
+ example4();
+ example5();
+});
+
+function perfTest(){
+ var container = $('#dynamicContainer');
+ var dynamicCount = $('#dynamicCount');
+ var dynamicCounter = $('#dynamicCounter');
+
+ window.detachDynamic = function() {
+ container.children().each(function(idx, element) {
+ ResizeSensor.detach(element);
+ });
+ };
+
+ window.removeDynamic = function() {
+ container.html('');
+ };
+
+ window.addDynamic = function() {
+ container.html('');
+ var i = 0, to = dynamicCount.val(), div, counter = 0;
+ for (; i < to; i++) {
+ div = $('Examples
+
+ Drag the gray line at the right to see it in action.
+
+
+
+
+
+
+
+
+ Responsive Text
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Responsive Image
+
+
+
+
+
+ ![]()
+ ![]()
+ ![]()
+
+
+ The image above has a default of 700px. Shrink or expend the container too see responsive image
+ working.
+ Thanks @placehold.it
+
+
+
+
+
+
+
+ Responsive Widget
+
+
+
+
+
+ Demo 1
+ This is content from the first responsive demo without media queries. It uses the element + queries + provided by this library. +
+
+
+
+
+
+
+
+
+ Responsive Layout
+
+
+
+
+ Demo 2
+
+ Box
+
+
+ First 1/2 box
+
+
+ Second 1/2 box
+
+
+
+
+
+
+
+
+
+
+
+
+ Responsive Animation
+
+
+
+
+ Demo 3 - width + +
+
+ This box is animated through css transitions.
+ We attached a resize-listener to this box. See below.
+
+
+ No changes.
+
+
+
+
+
+ Demo 4 - height + +
+
+ This box is animated through css transitions.
+ We attached a resize-listener to this box. See below.
+
+
+ No changes.
+
+
+
+
+ ResizeSensor Demo
+
+
+
+
+
+ 0 changes
+
+
+ CSS-Element-Queries comes with a Javascript ResizeSensor class you can use in Javascript directly.
+
+
+
+
+
+
+ Performance Demo
+
+
+
+ Performance Test:
+
+
+
+
+
+
+
+
+
+
+ #'+i+'
');
+ container.append(div);
+
+ new ResizeSensor(div, function(){
+ counter++;
+ dynamicCounter.html(counter + ' changes.');
+ });
+ }
+ }
+}
+
+function example3(){
+ var logger = $('#example-3-log');
+ var box = $('#example-3-box');
+
+ $('#startStop3').on('click', function(){
+ if (box.hasClass('example-3-box-start')) {
+ box.removeClass('example-3-box-start');
+ } else {
+ box.addClass('example-3-box-start');
+ }
+ });
+ new ResizeSensor(box, function(el){
+ logger.html('Changed to ' + box[0].clientWidth+'px width.');
+ });
+
+}
+
+function example4(){
+ var logger = $('#example-4-log');
+ var box = $('#example-4-box');
+
+ $('#startStop4').on('click', function(){
+ if (box.hasClass('example-4-box-start')) {
+ box.removeClass('example-4-box-start');
+ } else {
+ box.addClass('example-4-box-start');
+ }
+ });
+ new ResizeSensor(box, function(){
+ logger.html('Changed to ' + box[0].clientHeight+'px height.');
+ });
+}
+
+function example5(){
+ var box = $('#example-5');
+ var changed = 0;
+ new ResizeSensor(box.parent(), function(){
+ box[0].innerHTML = (++changed) + ' changes. ' + box.parent()[0].clientWidth+'px/'+box.parent()[0].clientHeight+'px';
+ });
+}
\ No newline at end of file
From 2d677ef1a6638583cc4de714b4721aec30d6ca9d Mon Sep 17 00:00:00 2001
From: "Marc J. Schmidt"
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..7b56f0e
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,7 @@
+{
+ "compilerOptions": {
+ "target": "es5",
+ "downlevelIteration": true,
+ "lib" : ["dom","es6","dom.iterable","scripthost", "es2015.iterable", "es2015.collection"]
+ }
+}
\ No newline at end of file
From 8bc290cceb2dec934a0081c5e33d124eef7042e8 Mon Sep 17 00:00:00 2001
From: "Marc J. Schmidt" ' +
- '' +
- '
';
+
+ var style = {
+ pointerEvents: 'none',
+ position: 'absolute',
+ left: '0px',
+ top: '0px',
+ right: '0px',
+ bottom: '0px',
+ overflow: 'hidden',
+ zIndex: '-1',
+ visibility: 'hidden',
+ maxWidth: '100%'
+ };
+ var styleChild = {
+ position: 'absolute',
+ left: '0px',
+ top: '0px',
+ transition: '0s',
+ };
+
+ setStyle(element.resizeSensor, style);
+
+ var expand = document.createElement('div');
+ expand.className = 'resize-sensor-expand';
+ setStyle(expand, style);
+
+ var expandChild = document.createElement('div');
+ setStyle(expandChild, styleChild);
+ expand.appendChild(expandChild);
+
+ var shrink = document.createElement('div');
+ shrink.className = 'resize-sensor-shrink';
+ setStyle(shrink, style);
+
+ var shrinkChild = document.createElement('div');
+ setStyle(shrinkChild, styleChild);
+ setStyle(shrinkChild, { width: '200%', height: '200%' });
+ shrink.appendChild(shrinkChild);
+
+ element.resizeSensor.appendChild(expand);
+ element.resizeSensor.appendChild(shrink);
element.appendChild(element.resizeSensor);
var computedStyle = window.getComputedStyle(element);
@@ -158,9 +199,6 @@
element.style.position = 'relative';
}
- var expand = element.resizeSensor.childNodes[0];
- var expandChild = expand.childNodes[0];
- var shrink = element.resizeSensor.childNodes[1];
var dirty, rafId;
var size = getElementSize(element);
var lastWidth = size.width;
From eab5e1b51904d2570f979c941fded6b86dd3e7b0 Mon Sep 17 00:00:00 2001
From: "Marc J. Schmidt" Performance Demo
@@ -393,4 +422,4 @@