From 50b34fb414b3a5a15a445e8a71bec1efbc1ecde2 Mon Sep 17 00:00:00 2001 From: Marien Fressinaud Date: Sat, 8 Dec 2012 17:37:08 +0100 Subject: [PATCH] Ajout mode lecture (en js par contre) fix issue #6 --- app/controllers/indexController.php | 1 + app/views/javascript/main.phtml | 6 +- public/scripts/endless_mode.js | 5 +- public/scripts/read_mode.js | 85 ++++++++++++++++++++++++++++ public/theme/base.css | 44 ++++++++++++++ public/theme/read_mode.png | Bin 0 -> 3543 bytes 6 files changed, 137 insertions(+), 4 deletions(-) create mode 100644 public/scripts/read_mode.js create mode 100644 public/theme/read_mode.png diff --git a/app/controllers/indexController.php b/app/controllers/indexController.php index 57d37e0f5..7d42de67a 100755 --- a/app/controllers/indexController.php +++ b/app/controllers/indexController.php @@ -6,6 +6,7 @@ class indexController extends ActionController { View::appendScript (Url::display ('/scripts/shortcut.js')); View::appendScript (Url::display (array ('c' => 'javascript', 'a' => 'main'))); View::appendScript (Url::display ('/scripts/endless_mode.js')); + View::appendScript (Url::display ('/scripts/read_mode.js')); $entryDAO = new EntryDAO (); $catDAO = new CategoryDAO (); diff --git a/app/views/javascript/main.phtml b/app/views/javascript/main.phtml index 1fb30feb1..2bc6f4abb 100644 --- a/app/views/javascript/main.phtml +++ b/app/views/javascript/main.phtml @@ -20,7 +20,7 @@ function slide (new_active, old_active) { old_active.removeClass ("active"); new_active.addClass ("active"); - if (hide_posts) { + if (hide_posts && !read_mode_on ) { old_active.children (".content").slideUp (500); new_active.children (".content").slideDown (500, function () { $.smoothScroll({ @@ -29,7 +29,7 @@ function slide (new_active, old_active) { }); } else { $.smoothScroll({ - offset: new_active.position ().top - 50 + offset: new_active.position ().top }); } } @@ -104,7 +104,7 @@ function mark_favorite (active) { } function init_posts () { - if (hide_posts) { + if (hide_posts && !read_mode_on) { $(".post.flux:not(.active) .content").slideUp (); } diff --git a/public/scripts/endless_mode.js b/public/scripts/endless_mode.js index 30b91822c..7a9840cd4 100644 --- a/public/scripts/endless_mode.js +++ b/public/scripts/endless_mode.js @@ -10,7 +10,7 @@ function load_more_refresh () { } } -function load_more_posts () { +function load_more_posts (f_callback) { load = true; $.get (url_next_page, function (data) { $("#load_more").before ($("#stream .post", data)); @@ -19,6 +19,9 @@ function load_more_posts () { init_posts (); load_more_refresh (); + if (typeof f_callback == 'function') { + f_callback.call (this); + } load = false; }); } diff --git a/public/scripts/read_mode.js b/public/scripts/read_mode.js new file mode 100644 index 000000000..13b3ecf5a --- /dev/null +++ b/public/scripts/read_mode.js @@ -0,0 +1,85 @@ +var read_mode_on = false; +var scroll_auto = false; + +function read_mode () { + read_mode_on = true; + + // global + $('#global').css({ + 'background': '#ddd' + }); + $('#main_aside').animate ({width: 0}, 500, function () { + $('#main_aside').hide (); + }); + $('#top').animate ({height: 0}, 500, function () { + $('#top').hide (); + }); + $('#main').animate({ + 'width': 800, + 'padding-left': ($(window).width() - 800) / 2, + }); + $('#main').css({ + 'background': '#ddd' + }); + $('#stream').addClass ('read_mode'); + $('ul.pagination').fadeOut (500); + + // posts + $('.post.flux .content').slideDown (500); + + // mode endless auto + scroll_auto = true; + $(window).scroll (function () { + offset = $('#load_more').offset (); + + if (offset.top - $(window).height () <= $(window).scrollTop () + && !load + && url_next_page !== undefined + && scroll_auto) { + load_more_posts (); + } + }); +} +function un_read_mode () { + read_mode_on = false; + + // global + $('#global').css({ + 'background': '#fafafa' + }); + $('#main_aside').show (); + $('#main_aside').animate ({width: 250}); + $('#top').show (); + $('#top').animate ({height: 50}); + $('#main').animate({ + 'width': '100%', + 'padding-left': 250, + }); + $('#main').css({ + 'background': '#fafafa' + }); + $('#stream').removeClass ('read_mode'); + $('ul.pagination').fadeIn (500); + + // posts + if (hide_posts) { + $('.post.flux .content').slideUp (500); + } + + // mode endless auto desactivé + scroll_auto = false; +} + +$(document).ready (function () { + $('#global').append (' '); + + $('a#read_mode').click (function () { + if (read_mode_on) { + un_read_mode (); + } else { + read_mode (); + } + + return false; + }); +}); diff --git a/public/theme/base.css b/public/theme/base.css index 9a0cce46d..1956303c9 100644 --- a/public/theme/base.css +++ b/public/theme/base.css @@ -104,6 +104,7 @@ form { display: table; width: 100%; height: 100%; + background: #fafafa; } .aside { display: table-cell; @@ -311,6 +312,28 @@ form { border-left: 10px solid #FFC300; background: #FFF6DA; } + +#stream.read_mode { + background: #fff; + box-shadow: 0 0 5px #000; +} + #stream.read_mode .post.flux { + border-left: 0; + padding: 50px 20px; + background: #fff; + } + #stream.read_mode .post.flux a { + color: #363; + } + #stream.read_mode .post.flux .content a { + text-decoration: underline; + } + #stream.read_mode .post.flux .content a:hover { + text-decoration: none; + } + #stream.read_mode .post.flux .after { + display: none; + } /*** PAGINATION ***/ .pagination { @@ -355,6 +378,27 @@ a#load_more { color: #666; } +a#read_mode { + display: block; + position: fixed; + bottom: 0; + right: 0; + width: 50px; + height: 50px; + background: url("read_mode.png") 9px 9px no-repeat #ddd; + border-top: 1px solid #aaa; + border-left: 1px solid #aaa; + border-radius: 20px 0 0 0; + box-shadow: -2px -2px 5px #aaa; + transition: all 100ms linear 0s; +} + a#read_mode:hover { + width: 60px; + height: 60px; + background-color: #eee; + text-decoration: none; + } + /*** NOTIFICATION ***/ #notification { position: fixed; diff --git a/public/theme/read_mode.png b/public/theme/read_mode.png new file mode 100644 index 0000000000000000000000000000000000000000..881399237345b74cf6012bee9625c756b250a501 GIT binary patch literal 3543 zcmb_f3vd%v6pbBY!z)s56YB!XPR_LHVkq3?m;=qNpG!Aj1qQ;0JY7z~87?#n0PKvLu~QKSO8IX7}BD z?s@l~``+yX4fRupl#VPlnM_0cb>2qw7t=l^1JQ4_v-2mDY4A8c)B;-qx6!N=wJ@C2 z3M|Q}jMhyi$E2jpu~^~bVzru)g<0(oA(J$VYPklH#_$4_Rd^Zll89-TOsf=wP8>(;SO#2flc1!w zNwN__R5Lk4*&~c)g0hfAt|LlFBOhslYGKDDBkL}TZqwJZf1f^K0)hU`qtQHg75d_6 zlbM9&?Iue~4Ry$XXauShQ&`}O0}+S%R7D%3@#T)|}F9Q({5-4RRDYMlU zqAF;cjixGZAt@x&tbHIr`$ZKpA`ARpCyu}^JkQZJ6<%AV$L6lFT5Eg=!(Lb>md&g?huo1(t*6>s=_9Sx|KL6y35ypQ;eWws4T3o?WTZ)DA|M2m zsH(4|o5wA{^i%p#;I)pS1xAdZ{hB!tW?}-wT^g>Q{%O=qr` zMC~qQGZj=}*~U4z0%NzM}iE()gmZ*YPTpl#U#tK`<|$sNUWf zrZ)o3uo@F5t}=1J>G?-{PcQKWD)_HTU?3#g0D?BuQW>IZ=n6YcQaNfdjM+AnJ56|m zc4TT|!--2r{9j4W;L?Y9L75xI7bl)BWwro%@%og=!Lc-}NkmfmE17F5Y6Ssl3Uw_T zLlurl=R)*8p|sG*EqepxgwLuib4^@K+ReNI!U_{b2Za7u^uL$zQlC!wR2;e28m-5Y6pw@k z5f=Kzu%sVE`8Ir$A~Z`1nv-%SnusBO3mQ5yr-CDMA=3URI-N7%IT^_6-Vkx-*em2# zk3{Um3x>hc+0UXmh(i8)Sc8y9k~{Q*OizfQ-?r{UDc|w`kjh8UXr<}rOnT^L`W>1e z(dbGTvnzTqre7eUb67#MZR+hCtI%9L0{U8DPzu8YqX1KSgw^xjh-Qn9dHaCFWGb5C z_qs#L56?93pNqT8&Q>ixaBpq2?3y3CZW-=A-^Km8`%IXRZy7wl>xaSCnc#`uqIa*` z1LE;2m%QZK;l-&9-Q({+X20&khWNx0wxhe=>AH1k)6tW`m%m-}&29FgH(QtZ)*Sx5 zWx}#i550Zx!2#%J*{CvEyIp z*|cWY>2tsD__6!oeT?<-SKPs+=l|N8nj@>jy1Y2E<3-QHb<1~*zUj(0K7Dv%$(~d5 zj+Ac-zPD}U;wg)ta!l?xS-$$o8B_hlcP*ya%4ui2;ke+@6@#xs>&?F{Jn##?_V$@CZP~DodwpT0~>BqLvMT_yhV*WG3eY4sk4*zQ_F2*7k##~ zctHyD)SZ0f)SzYJu|a!>`mQY*Fs<#N`OTgO>?KW=Pjt*W^w^lIlE2M)-um>xAv=q& zAm&~cpTE6j!iu4zSA8$fpzLG7>x;fn_MMxx@BI8pPaU4^FTH2;?VJ93wdaOJZQux3 zHkRErYu)tD5ue_@clbSb5UYaox=)>1`RAOUdcPWbzLa|CvF5w)3YF~|M4Ip^UzWU@ S+MxaGX7c;$z0cRqS@1WD{h-kR literal 0 HcmV?d00001