[noosfero/noosfero][master] 3 commits: Enables fullscreen view for article view and edit
Leandro Nunes
gitlab at gitlab.com
Tue May 19 18:09:29 BRT 2015
Leandro Nunes pushed to branch master at Noosfero / noosfero
Commits:
e152b3a2 by Evandro Junior at 2015-05-19T17:51:26Z
Enables fullscreen view for article view and edit
- - - - -
d66c3542 by Leandro Nunes dos Santos at 2015-05-19T18:05:40Z
refactoring fullscreen url parameter activation
- - - - -
8578b1c9 by Leandro Nunes at 2015-05-19T21:09:18Z
Merge branch 'full_screen_for_article_tinymc4' into 'master'
Enables fullscreen view for article view and edit
Fix issue https://gitlab.com/noosfero/noosfero/issues/54
View
Edit
See merge request !535
- - - - -
7 changed files:
- app/helpers/application_helper.rb
- app/helpers/tinymce_helper.rb
- app/views/content_viewer/_article_toolbar.html.erb
- public/designs/icons/tango/style.css
- public/javascripts/application.js
- public/stylesheets/application.css
- test/unit/application_helper_test.rb
Changes:
=====================================
app/helpers/application_helper.rb
=====================================
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -1498,4 +1498,26 @@ module ApplicationHelper
text_field(object_name, method, options.merge(:class => 'colorpicker_field'))
end
+ def fullscreen_buttons(itemId)
+ content="
+ <script>fullscreenPageLoad('#{itemId}')</script>
+ "
+ content+=content_tag('a', content_tag('span',_("Full screen")),
+ { :id=>"fullscreen-btn",
+ :onClick=>"toggle_fullwidth('#{itemId}')",
+ :class=>"button with-text icon-fullscreen",
+ :href=>"#",
+ :title=>_("Go to full screen mode")
+ })
+
+ content+=content_tag('a', content_tag('span',_("Exit full screen")),
+ { :style=>"display: none;",
+ :id=>"exit-fullscreen-btn",
+ :onClick=>"toggle_fullwidth('#{itemId}')",
+ :class=>"button with-text icon-fullscreen",
+ :href=>"#",
+ :title=>_("Exit full screen mode")
+ })
+ end
+
end
=====================================
app/helpers/tinymce_helper.rb
=====================================
--- a/app/helpers/tinymce_helper.rb
+++ b/app/helpers/tinymce_helper.rb
@@ -20,7 +20,7 @@ module TinymceHelper
:image_advtab => true,
:language => tinymce_language
- options[:toolbar1] = "insertfile undo redo | copy paste | bold italic underline | styleselect fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
+ options[:toolbar1] = "fullscreen | insertfile undo redo | copy paste | bold italic underline | styleselect fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
if options[:mode] == 'simple'
options[:menubar] = false
else
=====================================
app/views/content_viewer/_article_toolbar.html.erb
=====================================
--- a/app/views/content_viewer/_article_toolbar.html.erb
+++ b/app/views/content_viewer/_article_toolbar.html.erb
@@ -1,6 +1,7 @@
<div<%= user && " class='logged-in'" %>>
<div id="article-actions">
+ <%= fullscreen_buttons('#article') %>
<% if @page.allow_edit?(user) && !remove_content_button(:edit, @page) %>
<% content = content_tag('span', label_for_edit_article(@page)) %>
=====================================
public/designs/icons/tango/style.css
=====================================
--- a/public/designs/icons/tango/style.css
+++ b/public/designs/icons/tango/style.css
@@ -114,6 +114,7 @@
.icon-set-admin-role { background-image: url(mod/16x16/apps/user.png) }
.icon-reset-admin-role { background-image: url(../../../images/icons-app/person-icon.png) }
.icon-clock { background-image: url(Tango/16x16/actions/appointment.png) }
+.icon-fullscreen { background-image: url(Tango/16x16/actions/view-fullscreen.png) }
/******************LARGE ICONS********************/
.image-gallery-item .folder { background-image: url(mod/96x96/places/folder.png) }
=====================================
public/javascripts/application.js
=====================================
--- a/public/javascripts/application.js
+++ b/public/javascripts/application.js
@@ -1165,3 +1165,35 @@ function add_new_file_fields() {
}
window.isHidden = function isHidden() { return (typeof(document.hidden) != 'undefined') ? document.hidden : !document.hasFocus() };
+
+function $_GET(id){
+ var a = new RegExp(id+"=([^&#=]*)");
+ return decodeURIComponent(a.exec(window.location.search)[1]);
+}
+
+var fullwidth=false;
+function toggle_fullwidth(itemId){
+ if(fullwidth){
+ jQuery(itemId).removeClass("fullwidth");
+ jQuery("#fullscreen-btn").show()
+ jQuery("#exit-fullscreen-btn").hide()
+ fullwidth = false;
+ }
+ else{
+ jQuery(itemId).addClass("fullwidth");
+ jQuery("#exit-fullscreen-btn").show()
+ jQuery("#fullscreen-btn").hide()
+ fullwidth = true;
+ }
+ jQuery(window).trigger("toggleFullwidth", fullwidth);
+}
+
+function fullscreenPageLoad(itemId){
+ jQuery(document).ready(function(){
+
+ if ($_GET('fullscreen') == 1){
+ toggle_fullwidth(itemId);
+ }
+ });
+}
+
=====================================
public/stylesheets/application.css
=====================================
--- a/public/stylesheets/application.css
+++ b/public/stylesheets/application.css
@@ -6971,3 +6971,19 @@ li.profile-activity-item.upload_image .activity-gallery-images-count-1 img {
body .ui-widget-overlay {
background: #000;
}
+
+.fullwidth{
+ position: fixed !important;
+ left: 0 !important;
+ top: 0 !important;
+ background: white !important;
+ width: 97% !important;
+ width: 100% !important;
+ z-index: 999 !important;
+ padding: 2em !important;
+ bottom:0 !important;
+ overflow: auto !important;
+ -webkit-box-sizing: border-box !important;
+ -moz-box-sizing: border-box !important;
+ box-sizing: border-box !important;
+}
=====================================
test/unit/application_helper_test.rb
=====================================
--- a/test/unit/application_helper_test.rb
+++ b/test/unit/application_helper_test.rb
@@ -1002,6 +1002,13 @@ class ApplicationHelperTest < ActionView::TestCase
assert_equal file, from_theme_include('atheme', 'afile')[:file] # exists? = true
end
+ should 'enable fullscreen buttons' do
+ html = fullscreen_buttons("#article")
+ assert html.include?("<script>fullscreenPageLoad('#article')</script>")
+ assert html.include?("class=\"button with-text icon-fullscreen\"")
+ assert html.include?("onClick=\"toggle_fullwidth('#article')\"")
+ end
+
protected
include NoosferoTestHelper
View it on GitLab: https://gitlab.com/noosfero/noosfero/compare/1f0a296a4c88b7bb27057db06898fa767989bc1a...8578b1c93b8b597ee070a6087488ed00ea4c189b
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://listas.softwarelivre.org/pipermail/noosfero-dev/attachments/20150519/bf54e062/attachment-0001.html>
More information about the Noosfero-dev
mailing list