From 50b34fb414b3a5a15a445e8a71bec1efbc1ecde2 Mon Sep 17 00:00:00 2001 From: Marien Fressinaud Date: Sat, 8 Dec 2012 17:37:08 +0100 Subject: 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 000000000..881399237 Binary files /dev/null and b/public/theme/read_mode.png differ -- cgit v1.2.3