Skip to content

Commit

Permalink
updated
Browse files Browse the repository at this point in the history
  • Loading branch information
Martin Chaov committed May 15, 2019
1 parent fe3985e commit 1d390e2
Show file tree
Hide file tree
Showing 217 changed files with 11,022 additions and 0 deletions.
13 changes: 13 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
# Public Speaking

As the title suggest these are all different topics I did.

I am speaking mainly about software in English.

Feel free to use whatever you find usefull in this repository.

Feel free to contact me for participation in events.

---

List is not exhaustive but I lost some files over the years :)
Binary file added talks/2013/November.30 - jQueryBulgaria - TouchAnimations/jQueryBG-30Nov2013-MartinChaov.pdf
View file
Binary file not shown.
6 changes: 6 additions & 0 deletions talks/2013/November.30 - jQueryBulgaria - TouchAnimations/sample-swipe/jq-1-10-2.js
View file

Large diffs are not rendered by default.

172 changes: 172 additions & 0 deletions talks/2013/November.30 - jQueryBulgaria - TouchAnimations/sample-swipe/script.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,172 @@
//set vars
var parent;
var items;
var selectedPage = 0;
var pages = 4;
var scrollStep = 800;
var log;

var X = 0 //starting point X
var Y = 0 //starting point Y
var dX = 0 //distance traveled X
var dY = 0 //distance traveled Y

var pxDeviation = 4; //multiplied returns deviations from which we decide what and if to scroll

//set starting points
function touchStart(e)
{
e.stopPropagation();
X = parseInt(e.changedTouches[0].clientX);
Y = parseInt(e.changedTouches[0].clientY);
}

//track movement
function touchMove(e)
{
dX = parseInt(e.changedTouches[0].clientX) - X;
dY = parseInt(e.changedTouches[0].clientY) - Y;
//if scroll occurs in vertical direction
if (Math.abs(dY) > (pxDeviation * 4))
{
//is this diagonal scroll? -> more X-ish or Y-ish the user tries to scroll?
if(Math.abs(dX) > Math.abs(dY)) //if X-ish -> it's a swipe
{
e.preventDefault(); //no vertical scroll
callScroll();
logMe(false, '<strong>X-ish Diagonal Swipe!</strong>');

return false;
}
logMe(false, '<em>Vertical Triggered!</em>');
}
//if user inits horizontal scroll
else if(Math.abs(dX) > pxDeviation)
{
e.preventDefault();
//if user scrolls a long range in horizontal direction -> bypass touchEnd
if(Math.abs(dX) > (pxDeviation * 25))
{
callScroll();
}
logMe(false, 'Pure horizontal <strong>Swipe</strong>!');
}
//always return false!!!
return false;
}

function generateTranslateString(x)
{
if (!x) var x = 0;
return '-moz-transform: translate3d(' + x + 'px, 0, 0);-ms-transform: translate3d(' + x + 'px, 0, 0);-o-transform: translate3d(' + x + 'px, 0, 0);-webkit-transform: translate3d(' + x + 'px, 0, 0);transform: translate3d(' + x + 'px, 0, 0)';
}

//determine swipe direction
function callScroll()
{
(dX > 0) ? slideRight() : slideLeft();
}

function slideLeft()
{
reset();

var w;
selectedPage += 1;
if(selectedPage < pages)
{
console.log('scroll <-');
logMe(false, '------------------------------');
logMe(false, '>');
w = scrollStep * selectedPage * (-1);
}
else
{
selectedPage = pages - 1;
console.log('END OF LIST, NO SCROLL');
logMe(false, '>');
logMe(false, '<strong>No more pages to scroll that way!</strong>');
return false;
}


$(items).attr('style', generateTranslateString(w));
return false;
}

function slideRight()
{
reset();

var w;
selectedPage = selectedPage - 1;
if(selectedPage > 0)
{
console.log('scroll ->');
logMe(false, '------------------------------');
logMe(false, '<');
w = scrollStep * selectedPage * (-1);
}
else
{
w = 0;
selectedPage = 0;
console.log('START OF LIST, NO SCROLL');
logMe(false, '------------------------------');
logMe(false, '<');
logMe(false, '<strong>No more pages to scroll that way!</strong>');

$(items).attr('style', generateTranslateString(w));
return false;
}

$(items).attr('style', generateTranslateString(w));
return false;
}

function reset()
{
logMe(true, '<em>Restart Called</em>');
kill();
setTimeout(function(){
init();
}, 500);
}

function kill()
{
console.log('Detached');
logMe(false, '<em>Detached</em>');
parent.removeEventListener('touchstart', touchStart, false);
parent.removeEventListener('touchmove', touchMove, false);
}

function init()
{
console.log('Attached');
logMe(false, '------------------------------');
logMe(false, '<strong>Attached</strong>');
parent.addEventListener('touchstart', touchStart, false);
parent.addEventListener('touchmove', touchMove, false);
}

function logMe(clearMe, updateMe)
{
if(clearMe === false)
{
log.innerHTML = updateMe + '<br/>' + log.innerHTML;
}
else
{
log.innerHTML = updateMe;
}
}

$(document).ready(function(){
//get our HTML elements
parent = document.getElementById('content');
items = document.getElementById('scroller');
log = document.getElementById('log');

init();
});
112 changes: 112 additions & 0 deletions talks/2013/November.30 - jQueryBulgaria - TouchAnimations/sample-swipe/swipe-gesture.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@
<!DOCTYPE >
<html>
<head>
<title>Single Finger Swipe</title>
<style type="text/css">
#content,
#scroller
{
display: block;
position: relative;
height: 300px;
}
#content
{
overflow: hidden;
width: 800px;

background: #fff;
border: 10px solid #cecece;
margin: 10% auto 0 auto;
}
#scroller
{
white-space: nowrap;
font-size: 0;
text-align: left;
vertical-align: middle;

-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;

-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);

/*if you edit timings here, be sure to check the JS file*/
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
-ms-transition: all .5s ease-out;
-o-transition: all .5s ease-out;
transition: all .5s ease-out;
}
#scroller > div
{
display: inline-block;
position: relative;
vertical-align: middle;
height: 200px;
width: 190px;
padding: 90px 0 0 0;
margin: 5px;
opacity: 0.5;
text-align: center;
font-size: 72px;
font-weight: bold;
text-shadow: 2px 2px #000;

color: #fff;
background: #00c200;
}
#scroller > div:nth-child(3n + 1) {background: #00c2c2 !important;}
#scroller > div:nth-child(2n + 1) {background: #c200c2;}

#log
{
position: relative;
padding: 20px;
font-size: 13px;
color: #333;
background: #f0f0f0;
}
#log em
{
color: #666;
}
#log strong
{
color: #000;
}
</style>
<script type="text/javascript" src="jq-1-10-2.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<section id="content">
<div id="scroller">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
<div>16</div>
</div>
</section>
<hr/>
Log:
<hr/>
<div id="log"></div>
</body>
</html>
Binary file added ...ne.07 - Uxify - DesignAndDevelopmentForBetterUX/Design and Development for better UX_.pdf
View file
Binary file not shown.
Binary file added ...2015/April.05 - Mobcon - UXInMobileWebAppDevelopment/UX-in-Mobile-Web-App-Development.pdf
View file
Binary file not shown.
50 changes: 50 additions & 0 deletions talks/2015/December.13 - TechTalks - JSEvents/demoFiles/1- attach-events.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
<!DOCTYPE html>
<html>
<head>
<style>
body, div {padding: 10px 20px; margin: 0;}
</style>
</head>
<body>

<pre>
function handler(){
console.log(this);
}
</pre>

<strong>Onclick attribute</strong>
<pre>
onclick = " handler() ";
</pre>
<button type="button" onclick="handler()" id="d1">HTML handler</button>
<br/><br/>
<pre>
onclick = " console.log(this) ";
</pre>
<button type="button" onclick="console.log(this)" id="d2">HTML handler - 2</button>
<br/><br/><br/>
<strong>addEventListener</strong>
<pre>
btnRef.addEventListener('click', handler);
</pre>
<button type="button" id="d3">Event Listener</button>

<script src="events.js"></script>
<script>

var d3 = document.getElementById('d3');

function handler(){
//console.log(event);
console.log(this);
}

d3.addEventListener('click', handler);

var customEvt = new Event('click');
//d1.dispatchEvent(customEvt);

</script>
</body>
</html>
35 changes: 35 additions & 0 deletions talks/2015/December.13 - TechTalks - JSEvents/demoFiles/2-EventDelegation.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<!DOCTYPE html>
<html>
<head>
<style>
body, div {padding: 20px 10px; margin: 20px 0;}
</style>
</head>
<body>

<button data-action="a1" type="button">My btn - 1</button>
<button data-action="a2" type="button">My btn - 2</button>
<button data-action="a3" type="button">My btn - 3</button>
<button data-action="a4" type="button">My btn - 4</button>
<button data-action="a5" type="button">My btn - 5</button>

<script>

var actions = {
a1: function(){console.log(1)},
a2: function(){console.log(2)},
a3: function(){console.log(3)},
a4: function(){console.log(4)},
a5: function(){console.log(5)}
}

function handler(e){
actions[e.target.dataset.action]();
}

document.body.addEventListener('click', handler);


</script>
</body>
</html>
Loading

0 comments on commit 1d390e2

Please sign in to comment.