From 7aa07c7bcc96b144ed562f58dde3dce717524985 Mon Sep 17 00:00:00 2001 From: =?utf8?q?=C5=81ukasz=20Rekucki?= Date: Thu, 1 Oct 2009 01:26:35 +0200 Subject: [PATCH 1/1] =?utf8?q?*=20Zoom=20w=20galerii=20skan=C3=B3w.=20*=20?= =?utf8?q?Ikonki.=20*=20Jesienne=20kolory=20(tak=20naprawde=20CSS=20refack?= =?utf8?q?tor=20i=20pr=C3=B3ba=20wydzielenia=20kolor=C3=B3w).?= MIME-Version: 1.0 Content-Type: text/plain; charset=utf8 Content-Transfer-Encoding: 8bit --- project/static/css/autumn.css | 40 +++ project/static/css/master.css | 386 ++++++++----------------- project/static/css/toolbar.css | 22 +- project/static/icons/go-next.png | Bin 0 -> 676 bytes project/static/icons/go-previous.png | Bin 0 -> 655 bytes project/static/icons/zoom.png | Bin 0 -> 2176 bytes project/static/icons/zoom_in.png | Bin 0 -> 2226 bytes project/static/icons/zoom_out.png | Bin 0 -> 2157 bytes project/static/js/views/gallery.js | 129 +++++++-- project/static/js/views/view.js | 13 +- project/templates/explorer/editor.html | 73 +++-- 11 files changed, 322 insertions(+), 341 deletions(-) create mode 100644 project/static/css/autumn.css create mode 100644 project/static/icons/go-next.png create mode 100644 project/static/icons/go-previous.png create mode 100644 project/static/icons/zoom.png create mode 100644 project/static/icons/zoom_in.png create mode 100644 project/static/icons/zoom_out.png diff --git a/project/static/css/autumn.css b/project/static/css/autumn.css new file mode 100644 index 00000000..a5f03fd3 --- /dev/null +++ b/project/static/css/autumn.css @@ -0,0 +1,40 @@ +/* + Document : autumn + Created on : 2009-10-01, 00:23:51 + Author : lreqc + Description: + Autumn colors for PR. +*/ + +body { + background-color: #C28800; +} + +#header { + background-color: #E2CF62; + border-bottom-color: #860000; +} + +.panel-main-toolbar { + background-color: #412F1D; +} + +.splitview-splitbar { + /* border-color: #412F1D; */ + border: none; + background-color: #860000; +} + +.image-gallery-header { + background-color: #E2CF62; +} + +a:link, a:visited, a:active { + color: #395428; + text-decoration: none; + font-weight: bold; +} + +a:hover { + text-decoration: underline; +} \ No newline at end of file diff --git a/project/static/css/master.css b/project/static/css/master.css index 32ed073f..1649a4be 100644 --- a/project/static/css/master.css +++ b/project/static/css/master.css @@ -1,135 +1,91 @@ body { - margin: 0; + margin: 0; + font: 12px Helvetica, Verdana, sans-serif; overflow: hidden; background: #AAA; } -#header { - position: absolute; - padding: 0.2em 0.5em; - background-color: #CDCDCD; - border-bottom: 0.1px solid black; - height: 1.8em; - line-height: 1.8em; +/* fix icon buttons */ + +button img { vertical-align: middle; + margin: 0px; +} - top: 0px; left: 0px; right: 0px; - z-index: 300; +/* default form style hacks */ +select { + border: none; + margin-left: 0.1em; } -#header #breadcrumbs { +#body-wrap { + margin: 0px; + padding: 0px; } -#header-right-toolbar { +#header { position: absolute; - right: 1em; -} + padding: 2px 0.5em; + background-color: #CDCDCD; /* !unused */ + border-bottom: 2px solid black; -#header button { + font-size: 14px; + + line-height: 26px; vertical-align: middle; + + /* height: 30px; */ + top: 0px; left: 0px; right: 0px; + z-index: 300; } #content { position: absolute; - top: 2.4em; left: 0px; right: 0px; bottom: 0px; - overflow: auto; + top: 32px; left: 0px; right: 0px; bottom: 0px; + overflow: auto; background-color: white; } -/* -ul { - margin: 20px; - padding: 0; -} - -li { - margin: 0; - padding: 0; - list-style: none; -} */ - -a { - text-decoration: none; -} - -a:hover { - text-decoration: underline; -} - -li a { - display: block; - padding: 5px 20px; - width: 480px; -} - -li a:hover { - background-color: #BCD6E9; -} - -#tabs { - border-bottom: 1px solid #858585; - background-color: #B7B7B7; -} - -#tabs a { - display: block; - border-right: 1px solid #858585; - float: left; - padding: 5px 10px; -} - -#tabs a.active { - background-color: #909090; -} - -.theme-begin { - display: none; -} - -label { - display: block; +#header #breadcrumbs { } -#text_id { - width: 480px; - height: 480px; +#header-right-toolbar { + position: absolute; + right: 1em; } -#file-text { - padding: 5px 10px; - overflow-x: hidden; - overflow-y: scroll; +#header button { + vertical-align: middle; } /* ========== */ /* = Panels = */ /* ========== */ -#panels { +/* #panels { height: 100%; width: 100%; } .panel-wrap { overflow: hidden; - position: absolute; /* absolute to relation with #panels */ + position: absolute; top: 0px; bottom: 0px; } #left-panel-wrap { left: 0px; - width: 8px; /* initial width */ + width: 8px; } #right-panel-wrap { right: 0px; width: auto; - left: 8px; /* initial width of the left panel */ + left: 8px; } -/* contents */ .panel-content { position: absolute; overflow: auto; @@ -160,47 +116,14 @@ label { display: none; } -/* Toolbars with select box to change panel contents*/ .panel-wrap .panel-toolbar { position: absolute; top: 0px; left:0px; right: 0px; height: 26px; padding: 0px; - /* border-top: 1px solid #AAA; */ border-bottom: 1px solid #AAA; z-index: 80; } - -.panel-toolbar label { - display: inline; -} - -.panel-toolbar p { - /* position: relative; */ - font-size: 12px; - line-height: 26px; - background-color: #DDD; - white-space: nowrap; - overflow: hidden; - - margin: 0px; - padding: 0px 1em; - - width: auto; - height: 26px; -} - -.panel-toolbar .toolbar-button-groups-container .panel-toolbar-extra button { - /* this is uber specific */ - font-size: 12px; - font-family: Sans-Serif; - padding: 2px 5px; - margin: 0px; - border: 0px solid black; - vertical-align: bottom; -} - -/* Slider between panels */ .panel-wrap .panel-slider { position: absolute; background-color: #DDD; @@ -224,150 +147,9 @@ label { background-color: #DDD; } -/* ================= */ -/* = Gallery panel = */ -/* ================= */ -.image-gallery-view-template { - position: absolute; - top: 0px; left: 0px; right: 0px; bottom: 0px; - overflow: hidden; -} - -.image-gallery-header { - position: absolute; - bottom: 0px; - left: 0px; - right: 0px; - height: 30px; - - background: blue; - border: 1px solid green; -} - -.image-gallery-header p { - margin: 0px; - padding: 3px 1em; - height: 30px; - line-height: 24px; - text-align: center; -} - -.image-gallery-page-list { - position: absolute; - top: 0px; - left: 0px; - right: 0px; - bottom: 30px; - border: 1px solid red; - background: black; - z-index: 0; - - overflow: hidden; -} -.image-gallery-page-container { - display: none; - border: none; - - position: absolute; - top: 0px; left: 0px; - - text-align: center; - padding: 0px; -} - -.image-gallery-page-container img { - /* border: 2px solid green; */ - margin: 0px; -} - - -/* =========================== */ -/* = DublinCore Editor panel = */ -/* =========================== */ -.panel-dceditor { - padding: 10px; -} - -.panel-dceditor label { - display: block; - font-size: 12px; - margin-top: 10px; - color: #666; - font-weight: bold; -} - -.panel-dceditor input, .panel-dceditor textarea { - width: 400px; - display: block; -} - -div.isection { - margin: 1em auto; - border: 1px solid black; - padding: 0.5em 2em; - background: #9f9ffa; - - width: 60%; -} - -div.isection p { - margin: 0.5em 1em; -} - -.change-notification { - color: red; -} - -/* - * Popups */ -#message-box { - position: fixed; - top: 2px; - left: 35%; - width: 33%; -} -.msg-error, .msg-success, .msg-warning, .msg-info { - overflow: hidden; - padding: 0.1em 0.5em; - text-align: center; - border: 1px solid; - -moz-border-radius: 8px; - -webkit-border-radius: 8px; - font-size: 10pt; - line-height: 11pt; - display: none; - - width: 100%; -} - -#message-box * p { - padding: 0em; - margin: 0.1em; -} - -.msg-error { - background-color: red; - border-color: red; - color: white; - font-weight: bold; -} - -.msg-success { - background-color: lightgreen; - border-color: lightgreen; -} - -.msg-info { - background-color: lightblue; - border-color: lightblue; -} - -.msg-warning { - background-color: yellow; - border-color: yellow; -} +/* OLD STUFF AGAIN */ /* Commit dialog */ #commit-dialog-error-empty-message { @@ -389,6 +171,9 @@ text#commit-dialog-message { margin: 0.5em; } + + + /* ======= */ /* = New = */ /* ======= */ @@ -421,15 +206,33 @@ text#commit-dialog-message { .content-view { position: absolute; - top: 20px; + top: 25px; right: 0; bottom: 0; left: 0; overflow: none; } -.panel-container select { - z-index: 1100; +.panel-main-toolbar { + z-index: 1100; + position: absolute; + + top: 0px; + right: 0px; + left: 0px; + height: 24px; + + border-bottom: 1px solid black; + background: gray; + + padding: 0px; +} + +.panel-main-toolbar p { + margin: 0px; + padding: 2px; + line-height: 20px; + font-size: 13px; } .xmlview { @@ -452,7 +255,7 @@ text#commit-dialog-message { height: 40px; } -.buttontoolbarview { +/* .buttontoolbarview { display: block; background-color: #CCC; } @@ -460,4 +263,67 @@ text#commit-dialog-message { .buttontoolbarview a { color: #000; text-decoration: none; +} */ /* Similar classes already exist in toolbar.css */ + + +/* ================= */ +/* = Gallery panel = */ +/* ================= */ +.image-gallery-view-template { + position: absolute; + top: 0px; left: 0px; right: 0px; bottom: 0px; + overflow: hidden; } + +.image-gallery-header { + position: absolute; + bottom: 0px; + left: 0px; + right: 0px; + height: 30px; + + background: gray; + border-top: 1px solid #780000; + z-index: 100; +} + +input.image-gallery-current-page { + text-align: center; +} + +.image-gallery-header p { + margin: 0px; + padding: 3px 1em; + height: 30px; + line-height: 24px; + text-align: center; + white-space: nowrap; +} + +.image-gallery-page-list { + position: absolute; + top: 0px; + left: 0px; + right: 0px; + bottom: 31px; + background: black; + z-index: 0; + + overflow: hidden; +} + +.image-gallery-page-container { + display: none; + border: none; + + position: absolute; + top: 0px; left: 0px; + + text-align: center; + padding: 0px; +} + +.image-gallery-page-container img { + /* border: 2px solid green; */ + margin: 0px; +} \ No newline at end of file diff --git a/project/static/css/toolbar.css b/project/static/css/toolbar.css index 03cb2d27..4eddaad3 100644 --- a/project/static/css/toolbar.css +++ b/project/static/css/toolbar.css @@ -1,4 +1,4 @@ -.toolbar { +/* .toolbar { overflow: hidden; z-index: 100; background: #AAA; @@ -25,7 +25,7 @@ background: green; margin: 0px; padding: 0px; -} +} */ .toolbar-buttons-container { background: #DDD; @@ -33,34 +33,32 @@ padding-bottom: 2px; } -.toolbar-buttons-container button { +.toolbar-buttons-container a { background: #DDD; border: none; padding: 2px 0.5em; background: #AAA; font-family: Sans-Serif; + color: #000; + text-decoration: none; } -.toolbar-buttons-container button:hover { +.toolbar-buttons-container a:hover { background: #EEE; } -.toolbar-buttons-container button:active { +.toolbar-buttons-container a:active { background: yellow; } -.panel-toolbar-extra button { +.panel-toolbar-extra a { background: inherit; } -.toolbar-tabs-container > p { - background: #CCC; -} - -.toolbar-tabs-container > p button { +.toolbar-tabs-container a { background: #CCC; } -.toolbar-tabs-container button.active { +.toolbar-tabs-container a.active { background: #DDD; } \ No newline at end of file diff --git a/project/static/icons/go-next.png b/project/static/icons/go-next.png new file mode 100644 index 0000000000000000000000000000000000000000..6ef8de76e0f5bf01c09da24a07c61cfe558d7a4b GIT binary patch literal 676 zcmV;V0$crwP)5 zl1oTbVI0MO-{a21M#B_R#9l-oXcPp6(?)2~B7y{4Mu9@O$#RS~LMu0okc%jC6BNCq zMPfd15iMrWDWnuP(IPA}ow0!)<9P4f`?UyPGZWN-v-$pq!}*{8hcSkHhP!mEu~WAd zo8?nd1jeIrclCk3aF;a@j#!~$nl%(P0Jzf98$5aR>}dqE;fU4n-v&x*nhu}wwKrd{ z4f;b9;fU2%OeY#6`YVQ=TOJkJo9%;vsn26nmF>ePxAA!V*2;(ZnPFo%AB#FaHw-$p z>A83xDHKX5gpddX0EtgSc(|1Lcd)Cxp7`{*Gd4M}fH9|HQD+7~1Grv}*vDrmsZm0K z5C{Q60m5V1o+G_9&%wGQR!!BO+NWc8C&Ce{BNlb~H9*c=C7oHocC*-S7Ns<$C1sQZ zLijB|M!48sj(1C=)P(9pYjao0(5pv%$FEw)G{Dl2Io>Bnm(2P=eF~WywGEfv2*dEE+1BNH1p0gO_(!va6Ym6#!ZeU0XL$ zmOyFA$XqYlC#eqYr*8WRCf~&E#M}5+`DMhod1o}n6nu_w#4?v#yZPlMNv2Zf#pvLQ?bsc$8%}?|wxEMGI60fdRAO~{ zc52bv6uF?Yza^+BugrY=o*FhT7dA)!rvyS0Urwj)#iE6g^YI%&-U+mBcICDJ0000< KMNUMnLSTZVNH5j^ literal 0 HcmV?d00001 diff --git a/project/static/icons/go-previous.png b/project/static/icons/go-previous.png new file mode 100644 index 0000000000000000000000000000000000000000..659cd90d7f80488a8a6a2c12f6f9e5ad98720461 GIT binary patch literal 655 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 AJpcdz literal 0 HcmV?d00001 diff --git a/project/static/icons/zoom_out.png b/project/static/icons/zoom_out.png new file mode 100644 index 0000000000000000000000000000000000000000..fdd7124ed0bc31c89c46bd80a2051da9d96b10e7 GIT binary patch literal 2157 zcmV-z2$J`SP)gl|N~I)Jgf{6zn>JL9cxY8M2x_UtrAS~1b=45_*EYspuf2}r_1f&NJ+t%wo<77N zmnN~@x=XdVhSyNwM4_((`7zSL|h41^|oFfnjK+`mY z!(q(K%%HQg6McPsMaJ0L7himF@P7t4aNt0#s;cQdd-gzvsm9vU$)_J)zH&ojJfx~BE?l^PbLY;%^SqV&_wOHAG{75gyisD?_Q2k~ zdust8Gck!*-|4%0H8m5jx~nX;v^{ZbjsSm%g#Fp`tvB zuC6Y0b#>h|O|veMNEGJ-kmp{Qrupq{+qTupvWyQu9LM*5bFts{CH0FBHk^5Ab!BWt zRcX95CVt_>Iy0(B(*g>d_0y)rCtE=%6tIQ zT+^wldbX{t4HFX+_}TIPYZ+b0tt}0GU)>UKTwNQfj;H}u=3J5`E~!CDSzfL!iD(M< zWaUOWQ>f@4p3Fb?P<>3(H1zlPx3;vjymtEZY3I`bZr8Ktc{`e$o1yDEKA6<)e+?9t zZdeoV-LZaILsU~Vi8D!&C0UXflQ<)ZGr<^Wd4;;9CKgifzjyhyfArm4a$`6n%FD}9 zS62sBRlhRd2;2rBqFq&0RVWsV_`{juv8u|lv32$3vC^O%^aYV1a$R3oM6dza5}3^y zEXJ8tFq}N++`Fr??1SHR^iBl=0o2sgfQWW27y!U}MN#1UJ}!^w;fh#kwk{TmxW4cE zLRhX#Mb{_87cfXrQ4op%%xS}&Fih_zz-B6Ak<5Do`GD{Hh(@CTux>FXj5Ed{gh0^} zVYM`9lmw)JCtz_80uX`=_?$CO5V-_$iQrvH7ka^%1&|17fvj%2n&UVKg+c(ZY%u^P z5vh!^+vRDwz7>!-F$Nz#_c({giChpIUyyerqYn&C=xGo%&KP50Apo}<767prfDe7& zFPCK*r6I{E>XtS&t(HDMw5!rm@#i?m$ zOaOTRc@7kOAP+*GfqZ}k1jq*N)l zG~2PuE?ygac6mjx@%v9T2XeU_Iy*a|>-uyml~NYmiUHuc=bpQqPNyGs9Ov$MJdVe= z)GLGOiO9Q`(+?Piqk!NBN@UlwJvDoC`kvu*wkENpEV# zmH}cFk)Xe&sak&Ok=3k11E!{?5DW&9OeS&Z(j~-VG3dIEW5eYDiwV&eb*|T``(MOR=rC{4O#>dAIjYdI4IC}JG!8Fa?Cr_UI+k61D zt2+LXuQ>;O)J*=Hn!MRFAAg?AApZQbS9D#sR;^mKv7w;>g+c+GbBv9RLDMuSih}m` zb}ygLf48Hf<5!>Pfu@j_SQ(5U=Q^-l3q{{W(Q{z(-yFTD5B5_U+r@I1U`gL7`B9@B4^EBIxe!#+55q+AYi4efsoi zi+xIY-V&QV3IHwun$?}Tq1jw&ZEby~y1M!oyLaynFvegQ25j3#G#bU)wQKR_n{T4K zyZhA>Cr<3=clbdDpvM%Mwinrc+3x;7FOeT|O*&S0L&AwEc0{{Rs z3-n|FK>6%c-BvgpmNsqL^c`82pC%#?z;9bxT3$~i5@J3RvROF`1dsq|bBrng_;&!& jqBf_WVXsN}e~5nr2yN>`2j9>&00000NkvXXu0mjftYi)2 literal 0 HcmV?d00001 diff --git a/project/static/js/views/gallery.js b/project/static/js/views/gallery.js index 95736565..ad17c4be 100644 --- a/project/static/js/views/gallery.js +++ b/project/static/js/views/gallery.js @@ -3,22 +3,23 @@ var ImageGalleryView = View.extend({ _className: 'ImageGalleryView', element: null, model: null, + currentPage: -1, + pageZoom: 1.0, template: 'image-gallery-view-template', init: function(element, model, parent, template) - { - this.currentPage = -1; - + { + console.log("init for gallery"); this._super(element, model, template); this.parent = parent; this.model .addObserver(this, 'data', this.modelDataChanged.bind(this)) .addObserver(this, 'state', this.modelStateChanged.bind(this)); - + //$('.image-gallery-view', this.element).html(this.model.get('data')); this.modelStateChanged('state', this.model.get('state')); - this.model.load(); + this.model.load(); }, modelDataChanged: function(property, value) @@ -26,7 +27,7 @@ var ImageGalleryView = View.extend({ if( property == 'data') { this.render(); - this.gotoPage(this.currentPage); + this.gotoPage(this.currentPage); } }, @@ -51,7 +52,7 @@ var ImageGalleryView = View.extend({ this.currentPage = index; cpage = this.$currentPage() - this.renderImage(cpage, cpage.attr('ui:model')); + this.renderImage(cpage); if(offset) { cpage.css({top: offset.y, left: offset.x}); @@ -78,15 +79,11 @@ var ImageGalleryView = View.extend({ this.$pageInput.val( (this.currentPage+1) ); }, - modelStateChanged: function(property, value) { - if (value == 'synced' || value == 'dirty') { - this.parent.unfreeze(); - } else if (value == 'unsynced') { - this.parent.freeze('Niezsynchronizowany...'); - } else if (value == 'loading') { + modelStateChanged: function(property, value) { + if (value == 'loading') { this.parent.freeze('Ładowanie...'); - } else if (value == 'saving') { - this.parent.freeze('Zapisywanie...'); + } else { + this.parent.unfreeze(); } }, @@ -156,12 +153,14 @@ var ImageGalleryView = View.extend({ // and correct var MARGIN = 30; + var vp_width = this.$pageListRoot.width(); var vp_height = this.$pageListRoot.height(); var width = $page.outerWidth(); - var height = $page.outerHeight(); + var height = $page.outerHeight(); + // console.log(offset, vp_width, vp_height, width, height); if( offset.x+width-MARGIN < 0 ) { // console.log('too much on the left', offset.x, -width) offset.x = -width+MARGIN; @@ -172,7 +171,6 @@ var ImageGalleryView = View.extend({ offset.x = vp_width-MARGIN; // console.log('too much on the right', offset.x, vp_width, width) } - if( offset.y+height-MARGIN < 0) offset.y = -height+MARGIN; @@ -183,26 +181,41 @@ var ImageGalleryView = View.extend({ $page.css({left: offset.x, top: offset.y}); }, - renderImage: function(target, source) { - target.html(''); + renderImage: function(target) + { + var source = target.attr('ui:model'); + var orig_width = parseInt(target.attr('ui:width')); + var orig_height = parseInt(target.attr('ui:height')); + + target.html(''); + $('img', target). css({ 'user-select': 'none', '-webkit-user-select': 'none', '-khtml-user-select': 'none', - '-moz-user-select': 'none', + '-moz-user-select': 'none' }). attr('unselectable', 'on'). - mousedown(this.pageDragStart.bind(this)); + mousedown(this.pageDragStart.bind(this)); }, - render: function() { - /* first unbind all */ + render: function() + { + console.log('rendering:', this._className); - // this.pageListElement + /* first unbind all */ if(this.$nextButton) this.$nextButton.unbind(); if(this.$prevButton) this.$prevButton.unbind(); if(this.$jumpButton) this.$jumpButton.unbind(); + if(this.$pageInput) this.$pageInput.unbind(); + + if(this.$zoomInButton) this.$zoomInButton.unbind(); + if(this.$zoomOutButton) this.$zoomOutButton.unbind(); + if(this.$zoomResetButton) this.$zoomResetButton.unbind(); /* render */ this.element.html(render_template(this.template, this)); @@ -215,11 +228,23 @@ var ImageGalleryView = View.extend({ this.$prevButton = $('.image-gallery-prev-button', this.element); this.$pageInput = $('.image-gallery-current-page', this.element); + // this.$zoomSelect = $('.image-gallery-current-zoom', this.element); + this.$zoomInButton = $('.image-gallery-zoom-in', this.element); + this.$zoomOutButton = $('.image-gallery-zoom-out', this.element); + this.$zoomResetButton = $('.image-gallery-zoom-reset', this.element); + /* re-bind events */ this.$nextButton.click( this.nextPage.bind(this) ); this.$prevButton.click( this.prevPage.bind(this) ); - this.$pageInput.change( this.jumpToPage.bind(this) ); + + // this.$zoomSelect.change( this.zoomChanged.bind(this) ); + this.$zoomInButton.click( this.zoomInOneStep.bind(this) ); + this.$zoomOutButton.click( this.zoomOutOneStep.bind(this) ); + this.$zoomResetButton.click( this.zoomReset.bind(this) ); + + this.gotoPage(this.currentPage); + this.changePageZoom(this.pageZoom); }, jumpToPage: function() { @@ -233,10 +258,58 @@ var ImageGalleryView = View.extend({ prevPage: function() { this.gotoPage(this.currentPage - 1); }, + + zoomReset: function() { + this.changePageZoom(1.0); + }, + + zoomInOneStep: function() { + var zoom = this.pageZoom + 0.1; + if(zoom > 3.0) zoom = 3.0; + this.changePageZoom(zoom); + }, + + zoomOutOneStep: function() { + var zoom = this.pageZoom - 0.1; + if(zoom < 0.3) zoom = 0.3; + this.changePageZoom(zoom); + }, + + changePageZoom: function(value) { + var current = this.$currentPage(); + + if(!current) return; + + var alpha = value/this.pageZoom; + this.pageZoom = value; + + var nwidth = current.attr('ui:width') * this.pageZoom; + var nheight = current.attr('ui:height') * this.pageZoom; + var off_top = parseInt(current.css('top')); + var off_left = parseInt(current.css('left')); + + var vpx = this.$pageListRoot.width() * 0.5; + var vpy = this.$pageListRoot.height() * 0.5; + + var new_off_left = vpx - alpha*(vpx-off_left); + var new_off_top = vpy - alpha*(vpy-off_top); + + $('img', current).attr('width', nwidth); + $('img', current).attr('height', nheight); + + this.setPageViewOffset(current, { + y: new_off_top, x: new_off_left + }); + + // this.$zoomSelect.val(this.pageZoom); + // console.log('Zoom is now', this.pageZoom); + }, - dispose: function() { - this.model.removeObserver(this); - this._super(); + dispose: function() + { + console.log("Disposing gallery."); + this.model.removeObserver(this); + this._super(); } }); diff --git a/project/static/js/views/view.js b/project/static/js/views/view.js index 52fc6e04..6e7eaaa1 100644 --- a/project/static/js/views/view.js +++ b/project/static/js/views/view.js @@ -7,19 +7,24 @@ var View = Editor.Object.extend({ overlayClass: 'view-overlay', overlay: null, - init: function(element, model, template) { + init: function(element, model, template) + { + console.log("init for view"); this.element = $(element); this.model = model; this.template = template || this.template; - if (this.template) { - this.element.html(render_template(this.template, this)); - } + if (this.template) this.render(); this._resizeHandler = this.resized.bind(this); $(window).bind('resize', this._resizeHandler); $(this.element).bind('resize', this._resizeHandler); }, + + render: function() { + console.log('rendering:', this._className); + this.element.html(render_template(this.template, this)); + }, frozen: function() { return !!this.overlay; diff --git a/project/templates/explorer/editor.html b/project/templates/explorer/editor.html index b51af173..e892053e 100644 --- a/project/templates/explorer/editor.html +++ b/project/templates/explorer/editor.html @@ -1,8 +1,10 @@ {% extends "base.html" %} {% block extrahead %} - - + + + + @@ -54,28 +58,37 @@

- + + - - + size="5" value="<%= (currentPage + 1) %>" /> + - - - + + + + +

<% for(var i=0; i < model.data.length; i++) { %> -
-
+
<% }; %>
@@ -83,15 +96,15 @@