213 lines
7.1 KiB
JavaScript
213 lines
7.1 KiB
JavaScript
var activeRequests = 0;
|
|
$(function() {
|
|
$('#change').text('I changed it');
|
|
$('#drag, #drag_scroll, #drag_link').draggable();
|
|
$('#drop, #drop_scroll').droppable({
|
|
tolerance: 'touch',
|
|
drop: function(event, ui) {
|
|
ui.draggable.remove();
|
|
$(this).html('Dropped!');
|
|
}
|
|
});
|
|
$('#drag_html5, #drag_html5_scroll').on('dragstart', function(ev){
|
|
ev.originalEvent.dataTransfer.setData("text", ev.target.id);
|
|
});
|
|
$('#drop_html5, #drop_html5_scroll').on('dragover', function(ev){
|
|
$(this).after('<div class="log">DragOver with client position: ' + ev.clientX + ',' + ev.clientY)
|
|
if ($(this).hasClass('drop')) { ev.preventDefault(); }
|
|
});
|
|
$('#drop_html5, #drop_html5_scroll').on('drop', function(ev){
|
|
ev.preventDefault();
|
|
var oev = ev.originalEvent;
|
|
if (oev.dataTransfer.items) {
|
|
for (var i = 0; i < oev.dataTransfer.items.length; i++){
|
|
var item = oev.dataTransfer.items[i];
|
|
if (item.kind === 'file'){
|
|
var file = item.getAsFile();
|
|
$(this).append('HTML5 Dropped file: ' + file.name);
|
|
} else {
|
|
var _this = this;
|
|
var callback = (function(type){
|
|
return function(s){
|
|
$(_this).append('HTML5 Dropped string: ' + type + ' ' + s)
|
|
}
|
|
})(item.type);
|
|
item.getAsString(callback);
|
|
}
|
|
}
|
|
} else {
|
|
$(this).html('HTML5 Dropped ' + oev.dataTransfer.getData("text"));
|
|
for (var i = 0; i < oev.dataTransfer.files.length; i++) {
|
|
$(this).append('HTML5 Dropped file: ' + oev.dataTransfer.files[i].name);
|
|
}
|
|
for (var i = 0; i < oev.dataTransfer.types.length; i++) {
|
|
var type = oev.dataTransfer.types[i];
|
|
$(this).append('HTML5 Dropped string: ' + type + ' ' + oev.dataTransfer.getData(type));
|
|
}
|
|
}
|
|
});
|
|
$('#clickable').click(function(e) {
|
|
var link = $(this);
|
|
setTimeout(function() {
|
|
$(link).after('<a id="has-been-clicked" href="#">Has been clicked</a>');
|
|
$(link).after('<input type="submit" value="New Here">');
|
|
$(link).after('<input type="text" id="new_field">');
|
|
$('#change').remove();
|
|
}, 1000);
|
|
return false;
|
|
});
|
|
$('#slow-click').click(function() {
|
|
var link = $(this);
|
|
setTimeout(function() {
|
|
$(link).after('<a id="slow-clicked" href="#">Slow link clicked</a>');
|
|
}, 4000);
|
|
return false;
|
|
});
|
|
$('#waiter').change(function() {
|
|
activeRequests = 1;
|
|
setTimeout(function() {
|
|
activeRequests = 0;
|
|
}, 500);
|
|
});
|
|
$('#with_focus_event').focus(function() {
|
|
$('body').append('<p id="focus_event_triggered">Focus Event triggered</p>');
|
|
});
|
|
$('#with_change_event').change(function() {
|
|
$('body').append($('<p class="change_event_triggered"></p>').text(this.value));
|
|
});
|
|
$('#with_change_event').on('input', function() {
|
|
$('body').append($('<p class="input_event_triggered"></p>').text(this.value));
|
|
});
|
|
$('#checkbox_with_event').click(function() {
|
|
$('body').append('<p id="checkbox_event_triggered">Checkbox event triggered</p>');
|
|
});
|
|
$('#fire_ajax_request').click(function() {
|
|
$.ajax({url: "/slow_response", context: document.body, success: function() {
|
|
$('body').append('<p id="ajax_request_done">Ajax request done</p>');
|
|
}});
|
|
});
|
|
$('#reload-link').click(function() {
|
|
setTimeout(function() {
|
|
$('#reload-me').replaceWith('<div id="reload-me"><em><a>has been reloaded</a></em></div>');
|
|
}, 250)
|
|
});
|
|
$('#reload-list').click(function() {
|
|
setTimeout(function() {
|
|
$('#the-list').html('<li>Foo</li><li>Bar</li>');
|
|
}, 550)
|
|
});
|
|
$('#change-title').click(function() {
|
|
setTimeout(function() {
|
|
$('title').text('changed title')
|
|
}, 400)
|
|
});
|
|
$('#change-size').click(function() {
|
|
setTimeout(function() {
|
|
document.getElementById('change').style.fontSize = '50px';
|
|
}, 500)
|
|
});
|
|
$('#click-test').on({
|
|
click: function(e) {
|
|
var desc = "";
|
|
if (e.altKey) desc += 'alt ';
|
|
if (e.ctrlKey) desc += 'control ';
|
|
if (e.metaKey) desc += 'meta ';
|
|
if (e.shiftKey) desc += 'shift ';
|
|
var pos = this.getBoundingClientRect();
|
|
$(this).after('<a id="has-been-clicked" href="#">Has been ' + desc + 'clicked at ' + (e.clientX - pos.left) + ',' + (e.clientY - pos.top) + '</a>');
|
|
},
|
|
dblclick: function(e) {
|
|
var desc = "";
|
|
if (e.altKey) desc += 'alt ';
|
|
if (e.ctrlKey) desc += 'control ';
|
|
if (e.metaKey) desc += 'meta ';
|
|
if (e.shiftKey) desc += 'shift ';
|
|
var pos = this.getBoundingClientRect();
|
|
$(this).after('<a id="has-been-double-clicked" href="#">Has been ' + desc + 'double clicked at ' + (e.clientX - pos.left) + ',' + (e.clientY - pos.top) + '</a>');
|
|
},
|
|
contextmenu: function(e) {
|
|
e.preventDefault();
|
|
var desc = "";
|
|
if (e.altKey) desc += 'alt ';
|
|
if (e.ctrlKey) desc += 'control ';
|
|
if (e.metaKey) desc += 'meta ';
|
|
if (e.shiftKey) desc += 'shift ';
|
|
var pos = this.getBoundingClientRect();
|
|
$(this).after('<a id="has-been-right-clicked" href="#">Has been ' + desc + 'right clicked at ' + (e.clientX - pos.left) + ',' + (e.clientY - pos.top) + '</a>');
|
|
}
|
|
});
|
|
$('#open-alert').click(function() {
|
|
alert('Alert opened [*Yay?*]');
|
|
$(this).attr('opened', 'true');
|
|
});
|
|
$('#open-delayed-alert').click(function() {
|
|
var link = this;
|
|
setTimeout(function() {
|
|
alert('Delayed alert opened');
|
|
$(link).attr('opened', 'true');
|
|
}, 250);
|
|
});
|
|
$('#open-slow-alert').click(function() {
|
|
var link = this;
|
|
setTimeout(function() {
|
|
alert('Delayed alert opened');
|
|
$(link).attr('opened', 'true');
|
|
}, 3000);
|
|
});
|
|
$('#alert-page-change').click(function() {
|
|
alert('Page is changing');
|
|
return true;
|
|
});
|
|
$('#open-confirm').click(function() {
|
|
if(confirm('Confirm opened')) {
|
|
$(this).attr('confirmed', 'true');
|
|
} else {
|
|
$(this).attr('confirmed', 'false');
|
|
}
|
|
});
|
|
$('#open-prompt').click(function() {
|
|
var response = prompt('Prompt opened');
|
|
if(response === null) {
|
|
$(this).attr('response', 'dismissed');
|
|
} else {
|
|
$(this).attr('response', response);
|
|
}
|
|
});
|
|
$('#open-prompt-with-default').click(function() {
|
|
var response = prompt('Prompt opened', 'Default value!');
|
|
if(response === null) {
|
|
$(this).attr('response', 'dismissed');
|
|
} else {
|
|
$(this).attr('response', response);
|
|
}
|
|
});
|
|
$('#open-twice').click(function() {
|
|
if (confirm('Are you sure?')) {
|
|
if (!confirm('Are you really sure?')) {
|
|
$(this).attr('confirmed', 'false');
|
|
}
|
|
}
|
|
});
|
|
$('#delayed-page-change').click(function() {
|
|
setTimeout(function() {
|
|
window.location.pathname = '/with_html'
|
|
}, 500)
|
|
});
|
|
$('#with-key-events').keydown(function(e){
|
|
$('#key-events-output').append('keydown:'+e.which+' ')
|
|
});
|
|
$('#disable-on-click').click(function(e){
|
|
var input = this;
|
|
setTimeout(function() {
|
|
input.disabled = true;
|
|
}, 500)
|
|
});
|
|
$('#set-storage').click(function(e){
|
|
sessionStorage.setItem('session', 'session_value');
|
|
localStorage.setItem('local', 'local value');
|
|
});
|
|
$('#multiple-file, #hidden_file').change(function(e){
|
|
$('body').append($('<p class="file_change">File input changed</p>'));
|
|
})
|
|
});
|