Minz/quicknotes
1
0
Fork 0
mirror of https://github.com/JanGross/quicknotes.git synced 2025-12-01 07:37:18 +01:00
Code Issues Packages Projects Releases Wiki Activity

Improve modal animations..

Browse Source
This commit is contained in:
Matias De lellis
2020-06-08 10:48:38 -03:00
parent 3d5c74c1e0
commit e42a135048
1 changed files with 30 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
js/script.js
View File

@@ -724,6 +724,7 @@ View.prototype = {
}, },
_showEditor: function(id) { _showEditor: function(id) {
var note = $('.notes-grid [data-id=' + id + ']').parent(); var note = $('.notes-grid [data-id=' + id + ']').parent();
var modal = $(".modal-content");
/* Positioning the modal to the original size */ /* Positioning the modal to the original size */
$(".modal-content").css({ $(".modal-content").css({
@@ -739,44 +740,64 @@ View.prototype = {
$('#modal-note-div').addClass("show-modal-note"); $('#modal-note-div').addClass("show-modal-note");
note.css({"opacity": "0.1"}); note.css({"opacity": "0.1"});
modal.css({"opacity": "0.1"});
/* Animate to center */ /* Animate to center */
var windowWidth = $(window).width(); var windowWidth = $(window).width();
var modalWidth = note.width()*2; var modalWidth = note.width()*2;
var modalTop = 150; var modalTop = 150;
if (windowWidth < modalWidth) { if (windowWidth < modalWidth) {
modalWidth = windowWidth; modalWidth = windowWidth;
modalTop = 50; modalTop = 50;
} }
var noteLeft = note.offset().left;
var noteTop = note.offset().top;
var modalLeft = (windowWidth / 2 - modalWidth / 2);
$(".modal-content").animate ( var distance = Math.sqrt(Math.pow(noteLeft - modalLeft , 2) + Math.pow(noteTop - modalTop, 2));
var duration = distance / 3;
modal.animate (
{ {
left: (windowWidth / 2 - modalWidth / 2), left: modalLeft,
width: modalWidth, width: modalWidth,
top: modalTop, top: modalTop,
opacity: 1.0
}, },
250, duration,
function () { function () {
modal.css({"opacity": ""});
$('#modal-note-div #content-editable').focus(); $('#modal-note-div #content-editable').focus();
} }
); );
}, },
_hideEditor: function(id) { _hideEditor: function(id) {
if (id === -1)
return;
var note = $('.notes-grid [data-id=' + id + ']').parent(); var note = $('.notes-grid [data-id=' + id + ']').parent();
$(".modal-content").animate ( var modal = $(".modal-content");
var noteLeft = note.offset().left;
var noteTop = note.offset().top;
var modalLeft = modal.offset().left;
var modalTop = modal.offset().top;
var distance = Math.sqrt(Math.pow(noteLeft - modalLeft , 2) + Math.pow(noteTop - modalTop, 2));
var duration = distance / 3;
modal.animate (
{ {
left: note.offset().left, left: noteLeft,
width: note.width(), width: note.width(),
top: note.offset().top top: noteTop,
opacity: 0.0
}, },
250, duration,
function () { function () {
note.css({"opacity": ""}); note.css({"opacity": ""});
$('#modal-note-div').removeClass("show-modal-note"); $('#modal-note-div').removeClass("show-modal-note");
$('#modal-note-div').addClass("hide-modal-note"); $('#modal-note-div').addClass("hide-modal-note");
modal.css({"opacity": ""});
} }
); );
}, },