Une expérience de la blogosphère,...
</div>
</div>
</a>
<div class="article_footer">
<div class="article_footer_info">
Posté par adjaya à 08:49 - <a href="http://solomio.canalblog.com/archives/2006/07/04/2228386.html#ob-comments"><span>Commentaires [<span id="comment-count-1145177">…</span><script>
ob.commentCount(document.querySelector("#comment-count-1145177"), {
resource: "http://solomio.canalblog.com/api/comment-count/1145177",
format: (count) => {
const string = count === 0
? "0"
: count === 1
? "%c"
: "%c"
return string.replace("%c", count)
}
})
</script>]</span></a> - Permalien [<a href="http://solomio.canalblog.com/archives/2006/07/04/2228386.html">#</a>]
</div>
<div class="rating-wrapper">
<div class="rating-wording">Vous aimez ?</div>
<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-star" viewBox="0 0 26 28">
<path d="M26 10.109c0 0.281-0.203 0.547-0.406 0.75l-5.672 5.531 1.344 7.812c0.016 0.109 0.016 0.203 0.016 0.313 0 0.406-0.187 0.781-0.641 0.781-0.219 0-0.438-0.078-0.625-0.187l-7.016-3.687-7.016 3.687c-0.203 0.109-0.406 0.187-0.625 0.187-0.453 0-0.656-0.375-0.656-0.781 0-0.109 0.016-0.203 0.031-0.313l1.344-7.812-5.688-5.531c-0.187-0.203-0.391-0.469-0.391-0.75 0-0.469 0.484-0.656 0.875-0.719l7.844-1.141 3.516-7.109c0.141-0.297 0.406-0.641 0.766-0.641s0.625 0.344 0.766 0.641l3.516 7.109 7.844 1.141c0.375 0.063 0.875 0.25 0.875 0.719z"></path>
</symbol>
<linearGradient id="grad">
<stop offset="50%" stop-color="#ffc41f"/>
<stop offset="50%" stop-color="#9f9f9f"/>
</linearGradient>
</defs>
</svg>
<form class="stars">
<input class="stars-input" type="radio" name="rating" value="5" id="rating-5-1145177" >
<label class="stars-view stars-view-5-1145177 " for="rating-5-1145177" onclick="handleRate(1145177, 5, 0, 'stars-view-5-1145177', this)">
<svg class="icon icon-star">
<use xlink:href="#icon-star"></use>
</svg>
</label>
<input class="stars-input" type="radio" name="rating" value="4" id="rating-4-1145177" >
<label class="stars-view stars-view-4-1145177 " for="rating-4-1145177" onclick="handleRate(1145177, 4, 0, 'stars-view-4-1145177', this)">
<svg class="icon icon-star">
<use xlink:href="#icon-star"></use>
</svg>
</label>
<input class="stars-input" type="radio" name="rating" value="3" id="rating-3-1145177" >
<label class="stars-view stars-view-3-1145177 " for="rating-3-1145177" onclick="handleRate(1145177, 3, 0, 'stars-view-3-1145177', this)">
<svg class="icon icon-star">
<use xlink:href="#icon-star"></use>
</svg>
</label>
<input class="stars-input" type="radio" name="rating" value="2" id="rating-2-1145177" >
<label class="stars-view stars-view-2-1145177 " for="rating-2-1145177" onclick="handleRate(1145177, 2, 0, 'stars-view-2-1145177', this)">
<svg class="icon icon-star">
<use xlink:href="#icon-star"></use>
</svg>
</label>
<input class="stars-input" type="radio" name="rating" value="1" id="rating-1-1145177" >
<label class="stars-view stars-view-1-1145177 " for="rating-1-1145177" onclick="handleRate(1145177, 1, 0, 'stars-view-1-1145177', this)">
<svg class="icon icon-star">
<use xlink:href="#icon-star"></use>
</svg>
</label>
</form>
<div class="rating-raters-1145177">
0 vote
</div>
</div>
<script defer async>
function setFullStar(halfStarElement) {
halfStarElement.classList.add('star-chosen')
}
function setRaters(ratersElement, raters) {
ratersElement.textContent = raters > 1 ? `${raters} votes` : `${raters} vote`
}
function createToaster() {
const toaster = document.createElement('div')
toaster.classList.add('rating-toaster')
document.body.appendChild(toaster)
return toaster
}
function showToast(message, status) {
const toaster = createToaster()
toaster.textContent = message
toaster.classList.add('show-rating-toaster')
if (status === "success") {
toaster.style.backgroundColor = "#E5F4EF"
toaster.style.color = "#1D8C65"
} else {
toaster.style.backgroundColor = "#FFB5B5"
toaster.style.color = "#6F0000"
}
setTimeout(() => {
toaster.classList.remove('show-rating-toaster')
}, 3000)
}
async function rate(postID, value, halfStarClass, node) {
const res = await fetch(`/api/section-container/rate/${postID}/${value}`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
credentials: 'include',
})
if (res.ok) {
const data = await res.json()
const ratersNumber = document.querySelector(`.rating-raters-${postID}`)
setRaters(ratersNumber, data.raters)
showToast("Votre vote est pris en compte","success")
if (node.classList.contains("half-star")) {
const halfStarElement = document.querySelector(`.${halfStarClass}`)
setFullStar(halfStarElement)
}
}
return res
}
function handleUserLogin() {
return window.open(
`${window.location.origin}/comments/fr/fetch/user`,
"loginob",
"width=400,height=450,location=0,menubar=0,resizable=0,scrollbars=0,status=0,toolbar=0,titlebar=0"
)
}
async function handleRate(postID, value, halfStar, halfStarClass, node) {
const isPreview = /\/preview\/|\.preview\./.test(window.location.href)
if (isPreview) {
showToast("Vous ne pouvez pas votez sur une preview de votre blog.","error")
return
}
try {
const rateResponse = await rate(postID, value, halfStarClass, node)
if (rateResponse.status === 401) {
const loginWindow = handleUserLogin()
const checkWindowClosed = setInterval(() => {
if (loginWindow && loginWindow.closed) {
clearInterval(checkWindowClosed)
const res = rate(postID, value, halfStarClass)
if (res.status !== 200) {
showToast("Une erreur est survenue lors du vote","error")
}
}
}, 1000)
}
} catch (e) {
showToast("Une erreur est survenue lors du vote","error")
}
}
</script>
</div>
</div>
<div class="ads_container-atf">
<div class="ads-container half_page">
<div class="ads-placeholder">
<span>Publicité</span>
</div>
<div id="_e4856db"></div>
</div>
</div>
<div class="article article_1145178">
<div class="date-header">4 juillet 2006</div>
<a class="article_link" href="http://solomio.canalblog.com/archives/2006/07/04/2228410.html">
<h2 class="article_title title">page d'accueil + css</h2>
<div class="article_content">
<div class="article_snippet">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" > <head> <title>Une expérience de la blogosphère, Personnaliser sonBlog.
