mirror of
https://gitlab.winehq.org/wine/wine-gecko.git
synced 2024-09-13 09:24:08 -07:00
+ Created "revision-a" candy, mostly based on original, but with some additions from ian1
--HG-- rename : content/candies/original/index.html => content/candies/revision-a/index.html
This commit is contained in:
Ian Gilman
parent
8f40cdbd50
commit
0a3cdaf54d
@ -89,6 +89,11 @@ var Page = {
|
||||
});
|
||||
|
||||
$("<div class='close'>x</div>").appendTo($div);
|
||||
|
||||
if(Arrange.initialized) {
|
||||
var p = Page.findOpenSpaceFor($div);
|
||||
$div.css({left: p.x, top: p.y});
|
||||
}
|
||||
|
||||
// TODO: Figure out this really weird bug?
|
||||
// Why is that:
|
||||
@ -204,10 +209,97 @@ var Page = {
|
||||
$(window).blur(function(){
|
||||
Navbar.show();
|
||||
})
|
||||
},
|
||||
|
||||
findOpenSpaceFor: function($div) {
|
||||
var w = window.innerWidth;
|
||||
var h = 0;
|
||||
var startX = 30;
|
||||
var startY = 100;
|
||||
var bufferX = 30;
|
||||
var bufferY = 30;
|
||||
var rects = [];
|
||||
var r;
|
||||
var $el;
|
||||
$(".tab:visible").each(function(i) {
|
||||
if(this == $div.get(0))
|
||||
return;
|
||||
|
||||
$el = $(this);
|
||||
r = {x: parseInt($el.css('left')),
|
||||
y: parseInt($el.css('top')),
|
||||
w: parseInt($el.css('width')) + bufferX,
|
||||
h: parseInt($el.css('height')) + bufferY};
|
||||
|
||||
if(r.x + r.w > w)
|
||||
w = r.x + r.w;
|
||||
|
||||
if(r.y + r.h > h)
|
||||
h = r.y + r.h;
|
||||
|
||||
rects.push(r);
|
||||
});
|
||||
|
||||
if(!h)
|
||||
return { 'x': startX, 'y': startY };
|
||||
|
||||
var canvas = document.createElement('canvas');
|
||||
$(canvas).attr({width:w,height:h});
|
||||
|
||||
var ctx = canvas.getContext('2d');
|
||||
ctx.fillStyle = 'rgb(255, 255, 255)';
|
||||
ctx.fillRect(0, 0, w, h);
|
||||
ctx.fillStyle = 'rgb(0, 0, 0)';
|
||||
var count = rects.length;
|
||||
var a;
|
||||
for(a = 0; a < count; a++) {
|
||||
r = rects[a];
|
||||
ctx.fillRect(r.x, r.y, r.w, r.h);
|
||||
}
|
||||
|
||||
var divWidth = parseInt($div.css('width')) + bufferX;
|
||||
var divHeight = parseInt($div.css('height')) + bufferY;
|
||||
var strideX = divWidth / 4;
|
||||
var strideY = divHeight / 4;
|
||||
var data = ctx.getImageData(0, 0, w, h).data;
|
||||
|
||||
function isEmpty(x1, y1) {
|
||||
return (x1 >= 0 && y1 >= 0
|
||||
&& x1 < w && y1 < h
|
||||
&& data[(y1 * w + x1) * 4]);
|
||||
}
|
||||
|
||||
function isEmptyBox(x1, y1) {
|
||||
return (isEmpty(x1, y1)
|
||||
&& isEmpty(x1 + (divWidth - 1), y1)
|
||||
&& isEmpty(x1, y1 + (divHeight - 1))
|
||||
&& isEmpty(x1 + (divWidth - 1), y1 + (divHeight - 1)));
|
||||
}
|
||||
|
||||
for(var y = startY; y < h; y += strideY) {
|
||||
for(var x = startX; x < w; x += strideX) {
|
||||
if(isEmptyBox(x, y)) {
|
||||
for(; y > startY + 1; y--) {
|
||||
if(!isEmptyBox(x, y - 1))
|
||||
break;
|
||||
}
|
||||
|
||||
for(; x > startX + 1; x--) {
|
||||
if(!isEmptyBox(x - 1, y))
|
||||
break;
|
||||
}
|
||||
|
||||
return { 'x': x, 'y': y };
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return { 'x': startX, 'y': h };
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//----------------------------------------------------------
|
||||
function ArrangeClass(name, func){ this.init(name, func); };
|
||||
ArrangeClass.prototype = {
|
||||
init: function(name, func){
|
||||
@ -217,40 +309,96 @@ ArrangeClass.prototype = {
|
||||
},
|
||||
|
||||
_create: function(name){
|
||||
return $("<a href='#'/>").text(name).appendTo("#actions");
|
||||
return $("<a class='action' href='#'/>").text(name).appendTo("#actions");
|
||||
}
|
||||
}
|
||||
|
||||
var grid = new ArrangeClass("Grid", function(){
|
||||
var x = 10;
|
||||
|
||||
//----------------------------------------------------------
|
||||
var grid = new ArrangeClass("Grid", function(value) {
|
||||
var immediately = false;
|
||||
if(typeof(value) == 'boolean')
|
||||
immediately = value;
|
||||
|
||||
var startX = 30;
|
||||
var x = startX;
|
||||
var y = 100;
|
||||
$(".tab:visible").each(function(i){
|
||||
$el = $(this);
|
||||
|
||||
var oldPos = $el.find("canvas").data("link").tab.raw.pos;
|
||||
if( oldPos ){
|
||||
$el.css({top:oldPos.top, left:oldPos.left});
|
||||
return;
|
||||
if(immediately)
|
||||
$el.css({top: y,left: x});
|
||||
else {
|
||||
TabMirror.pausePainting();
|
||||
$el.animate({top: y,left: x}, 500, null, function() {
|
||||
TabMirror.resumePainting();
|
||||
});
|
||||
}
|
||||
|
||||
$el.css({top: y,left: x});
|
||||
x += $el.width() + 10;
|
||||
if( x > window.innerWidth - $el.width() ){
|
||||
x = 10;
|
||||
x += $el.width() + 30;
|
||||
if( x > window.innerWidth - ($el.width() + startX)){ // includes allowance for the box shadow
|
||||
x = startX;
|
||||
y += $el.height() + 30;
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
//----------------------------------------------------------
|
||||
var site = new ArrangeClass("Site", function() {
|
||||
var startX = 30;
|
||||
var startY = 100;
|
||||
var x = startX;
|
||||
var y = startY;
|
||||
var x2;
|
||||
var y2;
|
||||
var groups = [];
|
||||
$(".tab:visible").each(function(i) {
|
||||
$el = $(this);
|
||||
var tab = Tabs.tab(this);
|
||||
|
||||
var group = $el.data('group');
|
||||
if(group)
|
||||
group.remove(this);
|
||||
|
||||
var url = tab.url;
|
||||
var domain = url.split('/')[2];
|
||||
var domainParts = domain.split('.');
|
||||
var mainDomain = domainParts[domainParts.length - 2];
|
||||
if(groups[mainDomain])
|
||||
groups[mainDomain].push(this);
|
||||
else
|
||||
groups[mainDomain] = [this];
|
||||
});
|
||||
|
||||
var leftovers = [];
|
||||
for(key in groups) {
|
||||
var set = groups[key];
|
||||
if(set.length > 1) {
|
||||
group = new Groups.Group();
|
||||
group.create(set);
|
||||
} else
|
||||
leftovers.push(set[0]);
|
||||
}
|
||||
|
||||
if(leftovers.length > 1) {
|
||||
group = new Groups.Group();
|
||||
group.create(leftovers);
|
||||
}
|
||||
|
||||
Groups.arrange();
|
||||
});
|
||||
|
||||
|
||||
//----------------------------------------------------------
|
||||
var Arrange = {
|
||||
initialized: false,
|
||||
|
||||
init: function(){
|
||||
grid.arrange();
|
||||
this.initialized = true;
|
||||
grid.arrange(true);
|
||||
}
|
||||
}
|
||||
|
||||
//----------------------------------------------------------
|
||||
function UIClass(){ this.init(); };
|
||||
UIClass.prototype = {
|
||||
navbar: Navbar,
|
||||
@ -258,13 +406,12 @@ UIClass.prototype = {
|
||||
init: function(){
|
||||
Page.init();
|
||||
Arrange.init();
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
//----------------------------------------------------------
|
||||
var UI = new UIClass();
|
||||
window.UI = UI;
|
||||
|
||||
|
||||
})();
|
||||
|
||||
|
||||
175
content/candies/revision-a/index.html
Normal file
175
content/candies/revision-a/index.html
Normal file
@ -0,0 +1,175 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!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="en-US">
|
||||
<head>
|
||||
<title>Switch</title>
|
||||
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
|
||||
<link rel="icon" href="chrome://tabcandy/content/tabcandy.png"/>
|
||||
<link rel="stylesheet" href="../../css/shared/groups.css" type="text/css">
|
||||
<style media="screen" type="text/css">
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: Geneva;
|
||||
}
|
||||
|
||||
.tab{
|
||||
position: absolute;
|
||||
display: block;
|
||||
float:left;
|
||||
margin: 10px;
|
||||
padding: 0;
|
||||
background-color: rgba(255,255,255,.8);
|
||||
z-index: 0;
|
||||
width: 160px;
|
||||
height: 137px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.fav{
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-color: rgba(255,255,255,.8);
|
||||
-moz-border-radius: 0 0 5px 0;
|
||||
padding: 3px;
|
||||
-moz-box-shadow: 1px 1px 3px rgba(0,0,0,.2);
|
||||
}
|
||||
|
||||
.thumb{
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
background-color: #ccc;
|
||||
-moz-box-shadow: 1px 1px 10px rgba(0,0,0,.3);
|
||||
}
|
||||
|
||||
.thumb:hover{
|
||||
-moz-box-shadow: 1px 1px 10px rgba(0,0,0,.5);
|
||||
}
|
||||
|
||||
.name{
|
||||
font-size: 9px;
|
||||
display:block;
|
||||
width:160px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.name:before{
|
||||
display:inline-block;
|
||||
height:12px;
|
||||
width:20px;
|
||||
content:" ";
|
||||
position: absolute;
|
||||
right:0px;
|
||||
background: -moz-linear-gradient(0deg, rgba(255,255,255,0), white);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.close{
|
||||
position: absolute;
|
||||
top:12px; right:0;
|
||||
margin: 1px;
|
||||
width:12px; height:12px;
|
||||
background-color: rgba(0,0,0,.6);
|
||||
font-size: 10px;
|
||||
text-align: center;
|
||||
line-height:13px;
|
||||
color: #DDD;
|
||||
cursor: pointer;
|
||||
-moz-border-radius: 10px;
|
||||
-moz-box-shadow: inset 1px 1px 0px rgba(0,0,0,.5), inset -1px -1px 0px rgba(255,255,255,.5);
|
||||
text-shadow: 1px 1px 1px rgba(0,0,0,.5);
|
||||
font-family: Helvetica;
|
||||
}
|
||||
|
||||
.titlebar .close {
|
||||
top: 2px;
|
||||
right: 2px;
|
||||
}
|
||||
|
||||
.search{width:100%; margin-top: 30px; text-align: center; margin-bottom: 30px;}
|
||||
.search input{ width: 300px; font-size: 16pt;}
|
||||
|
||||
#actions{
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.action {
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.unhighlight{
|
||||
opacity: .1;
|
||||
z-index: -100;
|
||||
}
|
||||
|
||||
.lasso-menu{
|
||||
background-color: white;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border: 1px solid #DDD;
|
||||
-moz-box-shadow: 2px 2px 4px rgba(0,0,0,.5);
|
||||
line-height: 100px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.scale-animate{
|
||||
-moz-transition-property: height, width, left, top;
|
||||
-moz-transition-duration: .17s;
|
||||
-moz-transition-timing-function: cubic-bezier(1.0, 0.0, 1.0, 1.0);
|
||||
}
|
||||
|
||||
/* In Firefox 3.7, this relative url doesn't seem to work if stored in groups.css */
|
||||
.resizer{
|
||||
background-image: url(../../candies/zoomgroups/gfx/resizer.png);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="nav">
|
||||
<div class="search">
|
||||
<input type="text"/>
|
||||
</div>
|
||||
<div id="actions">
|
||||
<a id="tabbar" class="action" href="#">Toggle Tab Bar</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript;version=1.8">
|
||||
</script>
|
||||
|
||||
<script type="text/javascript;version=1.8" src="../../js/optional/stacktrace.js"></script>
|
||||
<script type="text/javascript;version=1.8" src="../../js/core/jquery.js"></script>
|
||||
<script type="text/javascript;version=1.8" src="../../js/optional/jquery-ui.js"></script>
|
||||
<script type="text/javascript;version=1.8" src="../../js/core/utils.js"></script>
|
||||
<script type="text/javascript;version=1.8">
|
||||
Utils.log('it begins');
|
||||
/* Utils.testLogging(); */
|
||||
</script>
|
||||
<script type="text/javascript;version=1.8" src="../../js/core/tabs.js"></script>
|
||||
<script type="text/javascript;version=1.8" src="../../js/core/mirror.js"></script>
|
||||
<script type="text/javascript;version=1.8" src="js/ui.js"></script>
|
||||
|
||||
<script type="text/javascript;version=1.8" src="../zoomgroups/js/groups.js"></script>
|
||||
|
||||
<!-- BEGIN Switch Control -->
|
||||
<script type="text/javascript;version=1.8" src="../../js/optional/switch.js"></script>
|
||||
<script type="text/javascript;version=1.8">
|
||||
Switch.insert('#nav', '');
|
||||
</script>
|
||||
<!-- END Switch Control -->
|
||||
|
||||
<script type="text/javascript;version=1.8">
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user