witten
/
luminotes
Archived
1
0
Fork 0

Got toolbar resizing working again.

This commit is contained in:
Dan Helfman 2009-04-23 17:46:06 -07:00
parent 410af8f011
commit 0c9c3844bd
3 changed files with 154 additions and 63 deletions

View File

@ -67,6 +67,10 @@ h1 {
position: relative;
}
#toolbar .image_button_small {
background: transparent url(/static/images/toolbar/small/buttons.png);
}
#toolbar .button_background {
background: transparent url(/static/themes/default/images/toolbar/buttons.png);
background-position: 40px 0;
@ -77,50 +81,98 @@ h1 {
margin-bottom: 0.25em;
}
#toolbar #newNote {
#toolbar .button_background_small {
background: transparent url(/static/themes/default/images/toolbar/small/buttons.png);
}
#toolbar .newNote_large {
background-position: 200px 0;
}
#toolbar #createLink {
#toolbar .newNote_small {
background-position: 100px -1px;
}
#toolbar .createLink_large {
background-position: 240px 0;
}
#toolbar #attachFile {
#toolbar .createLink_small {
background-position: 120px -1px;
}
#toolbar .attachFile_large {
background-position: 0 0;
}
#toolbar #bold {
#toolbar .attachFile_small {
background-position: 0 -1px;
}
#toolbar .bold_large {
background-position: 440px 0;
}
#toolbar #italic {
#toolbar .bold_small {
background-position: 220px -1px;
}
#toolbar .italic_large {
background-position: 280px 0;
}
#toolbar #underline {
#toolbar .italic_small {
background-position: 140px -1px;
}
#toolbar .underline_large {
background-position: 40px 0;
}
#toolbar #strikethrough {
#toolbar .underline_small {
background-position: 20px -1px;
}
#toolbar .strikethrough_large {
background-position: 120px 0;
}
#toolbar #font {
#toolbar .strikethrough_small {
background-position: 60px -1px;
}
#toolbar .font_large {
background-position: 360px 0;
}
#toolbar #title {
#toolbar .font_small {
background-position: 180px -1px;
}
#toolbar .title_large {
background-position: 80px 0;
}
#toolbar #insertUnorderedList {
#toolbar .title_small {
background-position: 40px -1px;
}
#toolbar .insertUnorderedList_large {
background-position: 400px 0;
}
#toolbar #insertOrderedList {
#toolbar .insertUnorderedList_small {
background-position: 200px -1px;
}
#toolbar .insertOrderedList_large {
background-position: 160px 0;
}
#toolbar .insertOrderedList_small {
background-position: 80px -1px;
}
#buttons_preload {
height: 0;
overflow: hidden;

View File

@ -1268,14 +1268,24 @@ Wiki.prototype.resize_toolbar_button = function ( button ) {
var LARGE_BUTTON_SIZE = 40;
var button_size = getElementDimensions( button );
var offsets = this.button_offsets();
return false; // TODO!!!
if ( this.small_toolbar || button.always_small ) {
if ( button_size.w == SMALL_BUTTON_SIZE ) return false;
setElementDimensions( button.parentNode, { "w": SMALL_BUTTON_SIZE, "h": SMALL_BUTTON_SIZE } );
setElementDimensions( button, { "w": SMALL_BUTTON_SIZE, "h": SMALL_BUTTON_SIZE } );
addElementClass( button.parentNode, "button_background_small" );
addElementClass( button, "image_button_small" );
addElementClass( button, button.name + "_small" );
removeElementClass( button, button.name + "_large" );
} else {
if ( button_size.w == LARGE_BUTTON_SIZE ) return false;
setElementDimensions( button.parentNode, { "w": LARGE_BUTTON_SIZE, "h": LARGE_BUTTON_SIZE } );
setElementDimensions( button, { "w": LARGE_BUTTON_SIZE, "h": LARGE_BUTTON_SIZE } );
removeElementClass( button.parentNode, "button_background_small" );
removeElementClass( button, "image_button_small" );
addElementClass( button, button.name + "_large" );
removeElementClass( button, button.name + "_small" );
}
return true;
@ -1291,33 +1301,51 @@ Wiki.prototype.make_image_button = function ( name, always_small ) {
this.connect_image_button( button );
}
var BUTTON_UP = "40px 0px";
var BUTTON_HOVER_UP = "80px 0px";
var BUTTON_DOWN = "120px 0px";
var BUTTON_HOVER_DOWN = "160px 0px";
var BUTTON_DOWN_OFFSET = 2;
var LARGE_BUTTON_OFFSETS = {
"UP": "40px 0px",
"HOVER_UP": "80px 0px",
"DOWN": "120px 0px",
"HOVER_DOWN": "160px 0px",
"DOWN_FG_OFFSET": 2
};
var SMALL_BUTTON_OFFSETS = {
"UP": "20px 0px",
"HOVER_UP": "40px 0px",
"DOWN": "60px 0px",
"HOVER_DOWN": "80px 0px",
"DOWN_FG_OFFSET": 1
};
Wiki.prototype.button_offsets = function () {
return this.small_toolbar ? SMALL_BUTTON_OFFSETS : LARGE_BUTTON_OFFSETS;
}
Wiki.prototype.connect_image_button = function ( button ) {
var self = this;
connect( button, "onmouseover", function ( event ) {
var offsets = self.button_offsets();
var bg_pos = getStyle( button.parentNode, "background-position" );
if ( bg_pos == BUTTON_DOWN || bg_pos == BUTTON_HOVER_DOWN ) {
setStyle( button.parentNode, { "background-position": BUTTON_HOVER_DOWN } );
setElementPosition( button, { "x": BUTTON_DOWN_OFFSET, "y": BUTTON_DOWN_OFFSET } );
if ( bg_pos == offsets.DOWN || bg_pos == offsets.HOVER_DOWN ) {
setStyle( button.parentNode, { "background-position": offsets.HOVER_DOWN } );
setElementPosition( button, { "x": offsets.DOWN_FG_OFFSET, "y": offsets.DOWN_FG_OFFSET } );
} else {
setStyle( button.parentNode, { "background-position": BUTTON_HOVER_UP } );
setStyle( button.parentNode, { "background-position": offsets.HOVER_UP } );
setElementPosition( button, { "x": 0, "y": 0 } );
}
} );
connect( button, "onmouseout", function ( event ) {
var offsets = self.button_offsets();
var bg_pos = getStyle( button.parentNode, "background-position" );
if ( bg_pos == BUTTON_DOWN || bg_pos == BUTTON_HOVER_DOWN ) {
setStyle( button.parentNode, { "background-position": BUTTON_DOWN } );
setElementPosition( button, { "x": BUTTON_DOWN_OFFSET, "y": BUTTON_DOWN_OFFSET } );
if ( bg_pos == offsets.DOWN || bg_pos == offsets.HOVER_DOWN ) {
setStyle( button.parentNode, { "background-position": offsets.DOWN } );
setElementPosition( button, { "x": offsets.DOWN_FG_OFFSET, "y": offsets.DOWN_FG_OFFSET } );
} else {
setStyle( button.parentNode, { "background-position": BUTTON_UP } );
setStyle( button.parentNode, { "background-position": offsets.UP } );
setElementPosition( button, { "x": 0, "y": 0 } );
}
} );
@ -1334,24 +1362,28 @@ Wiki.prototype.connect_image_button = function ( button ) {
if ( !self.focused_editor && !stateless_button( button ) )
return;
var offsets = self.button_offsets();
var bg_pos = getStyle( button.parentNode, "background-position" );
if ( bg_pos == BUTTON_HOVER_UP || bg_pos == BUTTON_HOVER_DOWN ) {
setStyle( button.parentNode, { "background-position": BUTTON_HOVER_DOWN } );
setElementPosition( button, { "x": BUTTON_DOWN_OFFSET, "y": BUTTON_DOWN_OFFSET } );
if ( bg_pos == offsets.HOVER_UP || bg_pos == offsets.HOVER_DOWN ) {
setStyle( button.parentNode, { "background-position": offsets.HOVER_DOWN } );
setElementPosition( button, { "x": offsets.DOWN_FG_OFFSET, "y": offsets.DOWN_FG_OFFSET } );
} else {
setStyle( button.parentNode, { "background-position": BUTTON_DOWN } );
setElementPosition( button, { "x": BUTTON_DOWN_OFFSET, "y": BUTTON_DOWN_OFFSET } );
setStyle( button.parentNode, { "background-position": offsets.DOWN } );
setElementPosition( button, { "x": offsets.DOWN_FG_OFFSET, "y": offsets.DOWN_FG_OFFSET } );
}
} );
if ( stateless_button( button ) ) {
connect( button, "onmouseup", function ( event ) {
var offsets = self.button_offsets();
var bg_pos = getStyle( button.parentNode, "background-position" );
if ( bg_pos == BUTTON_HOVER_UP || bg_pos == BUTTON_HOVER_DOWN ) {
setStyle( button.parentNode, { "background-position": BUTTON_HOVER_UP } );
if ( bg_pos == offsets.HOVER_UP || bg_pos == offsets.HOVER_DOWN ) {
setStyle( button.parentNode, { "background-position": offsets.HOVER_UP } );
setElementPosition( button, { "x": 0, "y": 0 } );
} else {
setStyle( button.parentNode, { "background-position": BUTTON_UP } );
setStyle( button.parentNode, { "background-position": offsets.UP } );
setElementPosition( button, { "x": 0, "y": 0 } );
}
} );
@ -1363,17 +1395,20 @@ Wiki.prototype.down_image_button = function ( name ) {
if ( !button )
return;
var offsets = this.button_offsets();
var bg_pos = getStyle( button.parentNode, "background-position" );
var resized = this.resize_toolbar_button( button );
if ( !this.resize_toolbar_button( button ) && ( bg_pos == BUTTON_DOWN || bg_pos == BUTTON_HOVER_DOWN ) )
if ( !resized && ( bg_pos == offsets.DOWN || bg_pos == offsets.HOVER_DOWN ) )
return;
offsets = this.button_offsets();
if ( bg_pos == BUTTON_HOVER_UP || bg_pos == BUTTON_HOVER_DOWN ) {
setStyle( button.parentNode, { "background-position": BUTTON_HOVER_DOWN } );
setElementPosition( button, { "x": BUTTON_DOWN_OFFSET, "y": BUTTON_DOWN_OFFSET } );
if ( !resized && ( bg_pos == offsets.HOVER_UP || bg_pos == offsets.HOVER_DOWN ) ) {
setStyle( button.parentNode, { "background-position": offsets.HOVER_DOWN } );
setElementPosition( button, { "x": offsets.DOWN_FG_OFFSET, "y": offsets.DOWN_FG_OFFSET } );
} else {
setStyle( button.parentNode, { "background-position": BUTTON_DOWN } );
setElementPosition( button, { "x": BUTTON_DOWN_OFFSET, "y": BUTTON_DOWN_OFFSET } );
setStyle( button.parentNode, { "background-position": offsets.DOWN } );
setElementPosition( button, { "x": offsets.DOWN_FG_OFFSET, "y": offsets.DOWN_FG_OFFSET } );
}
}
@ -1382,16 +1417,19 @@ Wiki.prototype.up_image_button = function ( name ) {
if ( !button )
return;
var offsets = this.button_offsets();
var bg_pos = getStyle( button.parentNode, "background-position" );
var resized = this.resize_toolbar_button( button );
if ( !this.resize_toolbar_button( button ) && ( bg_pos == BUTTON_UP || bg_pos == BUTTON_HOVER_UP ) )
if ( !resized && ( bg_pos == offsets.UP || bg_pos == offsets.HOVER_UP ) )
return;
offsets = this.button_offsets();
if ( bg_pos == BUTTON_HOVER_UP || bg_pos == BUTTON_HOVER_DOWN ) {
setStyle( button.parentNode, { "background-position": BUTTON_HOVER_UP } );
if ( !resized && ( bg_pos == offsets.HOVER_UP || bg_pos == offsets.HOVER_DOWN ) ) {
setStyle( button.parentNode, { "background-position": offsets.HOVER_UP } );
setElementPosition( button, { "x": 0, "y": 0 } );
} else {
setStyle( button.parentNode, { "background-position": BUTTON_UP } );
setStyle( button.parentNode, { "background-position": offsets.UP } );
setElementPosition( button, { "x": 0, "y": 0 } );
}
}
@ -1401,25 +1439,26 @@ Wiki.prototype.toggle_image_button = function ( name ) {
if ( !button )
return;
var offsets = this.button_offsets();
var bg_pos = getStyle( button.parentNode, "background-position" );
if ( bg_pos == BUTTON_DOWN || bg_pos == BUTTON_HOVER_DOWN ) {
if ( bg_pos == BUTTON_HOVER_DOWN ) {
setStyle( button.parentNode, { "background-position": BUTTON_HOVER_UP } );
if ( bg_pos == offsets.DOWN || bg_pos == offsets.HOVER_DOWN ) {
if ( bg_pos == offsets.HOVER_DOWN ) {
setStyle( button.parentNode, { "background-position": offsets.HOVER_UP } );
setElementPosition( button, { "x": 0, "y": 0 } );
} else {
setStyle( button.parentNode, { "background-position": BUTTON_UP } );
setStyle( button.parentNode, { "background-position": offsets.UP } );
setElementPosition( button, { "x": 0, "y": 0 } );
}
this.resize_toolbar_button( button );
return false;
} else {
if ( bg_pos == BUTTON_HOVER_UP ) {
setStyle( button.parentNode, { "background-position": BUTTON_HOVER_DOWN } );
setElementPosition( button, { "x": BUTTON_DOWN_OFFSET, "y": BUTTON_DOWN_OFFSET } );
if ( bg_pos == offsets.HOVER_UP ) {
setStyle( button.parentNode, { "background-position": offsets.HOVER_DOWN } );
setElementPosition( button, { "x": offsets.DOWN_FG_OFFSET, "y": offsets.DOWN_FG_OFFSET } );
} else {
setStyle( button.parentNode, { "background-position": BUTTON_DOWN } );
setElementPosition( button, { "x": BUTTON_DOWN_OFFSET, "y": BUTTON_DOWN_OFFSET } );
setStyle( button.parentNode, { "background-position": offsets.DOWN } );
setElementPosition( button, { "x": offsets.DOWN_FG_OFFSET, "y": offsets.DOWN_FG_OFFSET } );
}
this.resize_toolbar_button( button );
return true;

View File

@ -11,62 +11,62 @@ class Toolbar( Div ):
Div( Input(
type = u"button",
id = u"newNote", title = u"make a new %s [ctrl-M]" % ( note_word or u"note" ),
class_ = "image_button",
class_ = "image_button newNote_large",
), class_ = u"button_background" ),
Div( Input(
type = u"button",
id = u"createLink", title = u"link [ctrl-L]",
class_ = "image_button",
class_ = "image_button createLink_large",
), class_ = u"button_background" ),
# Notebook.READ_WRITE_FOR_OWN_NOTES should not have a file upload button
( notebook.read_write == Notebook.READ_WRITE ) and Div( Input(
type = u"button",
id = u"attachFile", title = u"attach file or image",
class_ = "image_button",
class_ = "image_button attachFile_large",
), class_ = u"button_background" ) or None,
),
P(
Div( Input(
type = u"button",
id = u"bold", title = u"bold [ctrl-B]",
class_ = "image_button",
class_ = "image_button bold_large",
), class_ = u"button_background" ),
Div( Input(
type = u"button",
id = u"italic", title = u"italic [ctrl-I]",
class_ = "image_button",
class_ = "image_button italic_large",
), class_ = u"button_background" ),
Div( Input(
type = u"button",
id = u"underline", title = u"underline [ctrl-U]",
class_ = "image_button",
class_ = "image_button underline_large",
), class_ = u"button_background" ),
Div( Input(
type = u"button",
id = u"strikethrough", title = u"strikethrough [ctrl-S]",
class_ = "image_button",
class_ = "image_button strikethrough_large",
), class_ = u"button_background" ),
Div( Input(
type = u"button",
id = u"font", title = u"font",
class_ = "image_button",
class_ = "image_button font_large",
), class_ = u"button_background" ),
Div( Input(
type = u"button",
id = u"title", title = u"title",
class_ = "image_button",
class_ = "image_button title_large",
), class_ = u"button_background" ),
),
P(
Div( Input(
type = u"button",
id = u"insertUnorderedList", title = u"bullet list [ctrl-period]",
class_ = "image_button",
class_ = "image_button insertUnorderedList_large",
), class_ = u"button_background" ),
Div( Input(
type = u"button",
id = u"insertOrderedList", title = u"numbered list [ctrl-1]",
class_ = "image_button",
class_ = "image_button insertUnorderedList_large",
), class_ = u"button_background" ),
),
class_ = u"button_wrapper",