Skip to content

Instantly share code, notes, and snippets.

@netsi1964

netsi1964/BleauConversationCSS.html

Created May 1, 2012 14:53
Show Gist options
  • Save netsi1964/2568519 to your computer and use it in GitHub Desktop.
Save netsi1964/2568519 to your computer and use it in GitHub Desktop.
Download ZIP
Dialogue
Raw
BleauConversationCSS.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<base href="http://sth.ecom.dev01.bleaudev.dk/files/html/bleau/" />
<title>Bleau Conversation Editor</title>
</head>
<body>
<style type="text/css">
body
{
width: 800px;
text-align: left;
font-family: arial;
font-size: 12px;
-moz-hyphens:auto;
-ms-hyphens:auto;
-webkit-hyphens:auto;
hyphens:auto;
word-wrap:break-word;
margin: 0px auto;
}
* { outline: none;}
.Conversation
{
width: 700px;
}
.Conversation .dialogue
{
padding: 17px;
border: solid 1px black;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
position: relative;
top: 0px;
margin: 45px 0px 20px 0px;
left: 55px;
behavior: url(PIE.htc);
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}
.Conversation .dialogue.selected {
-webkit-box-shadow: 0 0 15px rgba(0, 115, 199,0.5);
-moz-box-shadow: 0 0 15px rgba(0, 115, 199,0.5);
box-shadow: 0 0 15px rgba(0, 115, 199,0.5);
outline: none;
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
-ms-transform: scale(1.2);
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
M11=1.2, M12=-0, M21=1.0, M22=1.2);
}
.Conversation .dialogue.personA
{
background-color: #e1f0fb;
}
.Conversation .dialogue.personB
{
background-color: #f9f9fc;
}
.Conversation .person
{
height: 57px;
width: 51px;
background: url(men.png) no-repeat 0px 0px;
bottom: -18px;
position: absolute;
}
.settings {
height: 100px;
}
.Conversation .person .name, .settings .name
{
position: relative;
top: 64px;
font-size: 80%;
width: 150px;
left: 0px;
text-align: left;
}
.Conversation .right .person .name
{
left: -100px;
text-align: right;
}
.Conversation .dialogue.left
{
width: 80%;
}
.Conversation .dialogue.right
{
width: 80%;
margin-left: 20%;
}
.Conversation .dialogue.left .person
{
left: -48px;
}
.Conversation .dialogue.right .person
{
right: -48px;
}
.Conversation .dialogue.personA.left .person, .settings .personA.left
{
background: url(men.png) no-repeat 0px 0px;
}
.Conversation .dialogue.personA.right .person, .settings .personA.right
{
background: url(men.png) no-repeat 0px -118px;
}
.Conversation .dialogue.personB.left .person, .settings .personB.left
{
background: url(men.png) no-repeat 0px -176px;
}
.Conversation .dialogue.personB.right .person, .settings .personB.right
{
background: url(men.png) no-repeat 0px -59px;
}
.settings .personA, .settings .personB {
width: 50px;
height: 50px;
float: left;
margin-right: 5px;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
opacity: .5;
}
.settings div:hover, .settings div.selected {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
#speech-bubble {
width: 120px;
height: 80px;
background: purple;
position: absolute;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#speech-bubble:before {
content:"";
position: absolute;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid purple;
border-bottom: 13px solid transparent;
margin: 13px 0 0 -25px;
}
h2
{
font-size: .9em;
}
h2 code
{
margin-left: 10px;
}
.gravatar
{
float: left;
margin-right: 10px;
}
.gravatar img
{
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
.gravatar a img
{
border: 0px solid black;
}
.gravatar small
{
}
.gravatar small:after, .clear
{
clear: both;
}
#result {display: none;}
#log {position: absolute; left: 0px; top: 0px; height: 50px; background-color: #DDD; width: 300px; padding: 10px; overflow: auto; font-family: monospace; font-size: 90%;}
</style>
<section id="controls">
<h1>Bleau dialogue editor</h1>
<div class="settings">
<div class="personA left"><span class="name" contenteditable="true">Venstre A</span></div>
<div class="personB left"><span class="name">Venstre B</span></div>
<small style="float: left; width: 50px; display: block;">&nbsp;</small>
<div class="personA right"><span class="name">H&oslash;jre A</span></div>
<div class="personB right"><span class="name">H&oslash;jre B</span></div>
</div>
<textarea id="sayWhat" style="display: none" cols="80" rows="5">
Klik p&aring; en af "m&aelig;ndene" ovenfor for at tilf&oslash;je et nyt dialogindl&aelig;g.
</textarea>
<div class="clear"></div>
<br />
<button id="insert" style="display: none">Tilf&oslash;j</button>
<button class="delete">Slet valgte</button>
<button class="deleteAll">Slet alt</button>
<button class="copy">Kopier til blog</button>
</section>
<div class="Conversation"></div>
<div id="log"></div>
<div id="testGravatar"></div>
<script type="sth/template" id="dialog">
<div class="dialogue {{persontype}} {{align}}">
<div class="person" contenteditable="false"><div class="name" contenteditable="true">{{name}}</div></div>
<div class="text" contenteditable="true">{{sayWhat}}</div>
</div>
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script type="text/javascript">
(function ($) {
var $dialog = $('#dialog');
var $conversation = $('.Conversation');
var $insert = $('#insert');
var $sayWhat = $('#sayWhat');
$insert.on('click', function () {
var personType = (Math.random() > .5) ? 'A' : 'B';
var align = (Math.random() > .5) ? 'left' : 'right';
$conversation.append($dialog.html().replace(/{{personType}}/ig, personType).replace(/{{align}}/ig, align).replace(/{{sayWhat}}/ig, $sayWhat.val()));
})
$('.Conversation div').live('focus', function(e) {
jQuery(this).siblings().removeClass('selected');
jQuery(this).toggleClass('selected');
});
$('.settings div').on('click', function(e) {
var $this = jQuery(this);
$this.siblings().removeClass('selected')// .toggleClass('selected');
var name = $this.find('.name').text();
var setting = $this.attr('class').split(' ');
log('append '+setting[0]+' '+name);
$conversation.append($dialog.html().replace(/{{name}}/ig, name).replace(/{{personType}}/ig, setting[0]).replace(/{{align}}/ig, setting[1]).replace(/{{sayWhat}}/ig, $sayWhat.val()));
});
jQuery('.dialogue').attr('contenteditable', true);
jQuery('.dialogue .person').attr('contenteditable', false);
jQuery('.copy').on('click', function() {
if (jQuery('.Conversation div').length===0) {
alert('Dialog er tom');
return false;
}
var s = '<div class="Conversation">'+jQuery('.Conversation').html().replace(/contenteditable="true"/ig, '').replace(/contenteditable="false"/ig, '').replace(/ >/ig, '>')+'</div>';
s = s.replace(/</g, '&lt;').replace(/>/g, '&gt;')
v = window.open('', 'kode');
v.document.write('<pre>'+s+'</pre>');
})
jQuery('.delete').on('click', function(e) {
jQuery('.Conversation .dialogue.selected').find('+div').addClass('selected').end().remove();
})
jQuery('.deleteAll').on('click', function(e) {
if (confirm('Vil du virkelig slette hele dialogen?')) {
jQuery('.Conversation .dialogue').find('+div').addClass('selected').end().remove();
}
})
jQuery('#sayWhat').on('focus', function() {
jQuery('.Conversation .dialogue').removeClass('selected');
});
jQuery('.settings .personA.left').trigger('click');
jQuery('html').on('click', function(e) {
if (e.target.nodeName==='HTML') {
jQuery('.selected').removeClass('selected');
};
});
jQuery('.settings .name').on('click', function(e) {
e.preventDefault();
return false;
});
})(jQuery);
var $log, initTime = new Date();
function log(sMessage) {
$log = ($log||$('#log'));
$log.prepend(jQuery('<div class="item"><span class="time">'+((new Date())-initTime)+' </span>'+sMessage+'</div>'));
if (!!console) console.log(sMessage);
}
</script>
<div class="Conversation ny"></div>
<style type="text/css">
.Conversation.ny .dialogue.right:after {
content:"";
position: absolute;
width: 0;
height: 0;
border-top: 5px solid transparent;
border-left: 10px solid #F9F9FC;
border-bottom: 5px solid transparent;
margin: -2% 10px 0 0px;
left: 100%;
}
</style>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment