Commit 1d6cc2e9 authored by julien's avatar julien
Browse files

update examples

parent b95472a5
Pipeline #893 failed with stages
in 1 second
......@@ -40,7 +40,7 @@ span.footnote {
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="stylesheet" type="text/css" href="../css/styles.css" />
</head>
<body>
......
......@@ -8,6 +8,7 @@
<title>Document</title>
<link rel="stylesheet" href="../css/interface.css">
<script src="https://unpkg.com/pagedjs@0.2.0/dist/paged.polyfill.js"></script>
<script src="https://unpkg.com/interactjs/dist/interact.min.js"></script>
<style>
.img-wrap {
background-size: var(--objectFit, 130px);
......@@ -29,6 +30,38 @@
padding: 1em;
font-size: 0.8em;
}
.controls .preview {
max-width: 100px;
position: relative;
}
.controls .preview img {
width: 100%;
height: auto;
}
/* one day we’ll get a working minimap, when i’ll get to think about it */
.minimap {
position: absolute;
width: var(--imgWidth);
height: var(--imgHeight);
left: var(--imgX);
top: var(--imgY);
display: block;
border: 1px solid red;
z-index: 2000;
}
.move {
position: absolute;
top: 2px;
right: 2px;
width: 30px;
}
</style>
<style data-pagedjs-inserted-styles="true">
.controls {
......@@ -68,11 +101,24 @@
--imgY: -388px;
--objectFit: 224%
}
#wrap-imag-1 {
--imgX: -500px;
--imgY: -221px;
--objectFit: 405%
}
</style>
<script>
let controls = `<aside style="display:none;" class="controls">
let controls = `<aside style="display:none;" class="controls drag">
<div class="move"> <svg class="svg-icon" viewBox="0 0 20 20">
<path d="M17.592,8.936l-6.531-6.534c-0.593-0.631-0.751-0.245-0.751,0.056l0.002,2.999L5.427,9.075H2.491c-0.839,0-0.162,0.901-0.311,0.752l3.683,3.678l-3.081,3.108c-0.17,0.171-0.17,0.449,0,0.62c0.169,0.17,0.448,0.17,0.618,0l3.098-3.093l3.675,3.685c-0.099-0.099,0.773,0.474,0.773-0.296v-2.965l3.601-4.872l2.734-0.005C17.73,9.688,18.326,9.669,17.592,8.936 M3.534,9.904h1.906l4.659,4.66v1.906L3.534,9.904z M10.522,13.717L6.287,9.48l4.325-3.124l3.088,3.124L10.522,13.717z M14.335,8.845l-3.177-3.177V3.762l5.083,5.083H14.335z"></path>
</svg></div>
<div class="preview">
<div class="minimap"></div>
<img />
</div>
<label for="objectFit">object-fit</label>
<select id="objectFit" name="objectFit">
......@@ -87,13 +133,13 @@
<label for="imgY">vertical</label>
<input id="imgY" type="range" name="imgY" max="800" min="-800" step="1">
<label for="scale">scale</label>
<input id="scale" type="range" name="scale" min="0" max="300" step="1">
<input id="scale" type="range" name="scale" min="0" max="500" step="1">
</div>
<button class="reset">reset</button>
<button class="reset">Center</button>
<pre id="cssoutput">css will appear here</pre>
......@@ -181,8 +227,6 @@
imgX = `${translatePercentageToValue(styles.getPropertyValue('--imgX'))}`
imgY = `${translatePercentageToValue(styles.getPropertyValue('--imgY'))}`
console.log(`imgX`, imgX)
console.log(`imgY`, imgY)
//find positions
......@@ -204,16 +248,23 @@
// console.log(`scale`, scale)
}
return { imgID: img.id, imgX: imgX, imgY: imgY, objectFit: objectFit, imgScale: scale }
let imgSrc = img.querySelector('img').src;
return { imgID: img.id, imgX: imgX, imgY: imgY, objectFit: objectFit, imgScale: scale, imgSrc: imgSrc }
}
function fillControls(data) {
document.querySelector('.controls .preview').style.setProperty('--imgX', `${data.imgX}px;`);
document.querySelector('.controls .preview').style.setProperty('--imgY', `${data.imgY}px;`);
document.querySelector('.controls .preview img').src = data.imgSrc;
document.querySelector('.controls').dataset.imgid = data.imgID;
document.querySelector('#imgX').value = data.imgX;
document.querySelector('#imgY').value = data.imgY;
document.querySelector('#objectFit').value = data.objectFit;
document.querySelector('#scale').value = data.imgScale;
}
function resultCalc(partialValue, totalValue) {
......@@ -298,6 +349,8 @@
document.querySelector(".reset").addEventListener('click', function () {
imgToChange.style.setProperty('--imgX', `unset`)
imgToChange.style.setProperty('--imgY', `unset`)
imgToChange.style.setProperty('--scale', `150%`)
updateCSS(imgid, imgX.value, imgY.value, objectFit.value, scale.value)
fillControls(getImageData(imgToChange))
})
......@@ -321,6 +374,33 @@ ${positions != undefined ? positions : ""}
}
function move() {
interact('.drag').draggable({
inertia: false,
onmove: function (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the position attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
},
onend: function (event) {
console.log(event);
}
}).allowFrom('.move');
}
class MyHandler extends Paged.Handler {
constructor(chunker, polisher, caller) {
super(chunker, polisher, caller);
......@@ -337,10 +417,12 @@ ${positions != undefined ? positions : ""}
})
}
afterRendered(pages) {
createControls();
move();
document.querySelectorAll('.img-wrap').forEach((imgWrap, num) => {
let styles = window.getComputedStyle(imgWrap.querySelector('img'));
imgWrap.style.width = styles.width;
......@@ -374,8 +456,8 @@ ${positions != undefined ? positions : ""}
<p>image can be either cover (all the image space is used), contains (all the image is shown, creating white space) or auto-size:width is chosen and image is height is homotéttique</p>
<p>you can still change its position</p>
<img id='img1' src="/images/hamid-tajik-FY-um1rfLOA-unsplash.jpg" alt="" class="changes">
<img id='img2' src="https://source.unsplash.com/random" alt="" class="changes">
<img id='img1' src="../images/hamid-tajik-FY-um1rfLOA-unsplash.jpg" alt="" class="changes">
<img id='img2' src="../images/photo-1633007400080-f37dfabbf2e3.jpeg" alt="" class="changes">
......
......@@ -208,7 +208,7 @@
</head>
<body>
<img id='img1' src="/images/hamid-tajik-FY-um1rfLOA-unsplash.jpg" alt="" class="changes">
<img id='img1' src="../images/hamid-tajik-FY-um1rfLOA-unsplash.jpg" alt="" class="changes">
<img id='img2' src="https://source.unsplash.com/random" alt="" class="changes">
......
......@@ -7,7 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../css/interface.css">
<!-- <script src="https://unpkg.com/pagedjs@0.2.0/dist/paged.polyfill.js"></script> -->
<script src="https://unpkg.com/pagedjs@0.2.0/dist/paged.polyfill.js"></script>
<style>
.fixed {
position: fixed;
......
......@@ -14,10 +14,10 @@
<p>use is as a cook book</p>
<ul>
<li>how to use <a href="./examples/position-fixed.html">position: fixed</a></li>
<li>how to use <a href="./examples/footnotes.html">footnotes</a></li>
<li>how to create <a href="./examples/imgTools.html">designer tools</a></li>
<li>how to create <a href="./examples/img-to-background-and-Tools.html">designer tools with background stuff</a></li>
<li>how to repeat an element on everypage at the same location <a href="examples/position-fixed.html">position: fixed</a></li>
<li>how to use <a href="examples/footnotes.html">footnotes</a></li>
<li>how to create an interface with tools <a href="examples/imgTools.html">designer tools</a></li>
<li>how to create an interface to modify image/background-image crop and size <a href="examples/img-to-background-and-Tools.html">image/background-image</a></li>
</ul>
</body>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment