Commit 8578b1c93b8b597ee070a6087488ed00ea4c189b

Authored by Leandro Santos
2 parents 1f0a296a d66c3542

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
![mussum_fs](https://gitlab.com/participa/noosfero/uploads/59b352b91bfb9c04a8beeadff9243dc0/mussum_fs.png)

Edit
![mussum_fs_edit](https://gitlab.com/participa/noosfero/uploads/b22be3c52ddc2f1a90143b718fdfc221/mussum_fs_edit.png)

See merge request !535
app/helpers/application_helper.rb
... ... @@ -1498,4 +1498,26 @@ module ApplicationHelper
1498 1498 text_field(object_name, method, options.merge(:class => 'colorpicker_field'))
1499 1499 end
1500 1500  
  1501 + def fullscreen_buttons(itemId)
  1502 + content="
  1503 + <script>fullscreenPageLoad('#{itemId}')</script>
  1504 + "
  1505 + content+=content_tag('a', content_tag('span',_("Full screen")),
  1506 + { :id=>"fullscreen-btn",
  1507 + :onClick=>"toggle_fullwidth('#{itemId}')",
  1508 + :class=>"button with-text icon-fullscreen",
  1509 + :href=>"#",
  1510 + :title=>_("Go to full screen mode")
  1511 + })
  1512 +
  1513 + content+=content_tag('a', content_tag('span',_("Exit full screen")),
  1514 + { :style=>"display: none;",
  1515 + :id=>"exit-fullscreen-btn",
  1516 + :onClick=>"toggle_fullwidth('#{itemId}')",
  1517 + :class=>"button with-text icon-fullscreen",
  1518 + :href=>"#",
  1519 + :title=>_("Exit full screen mode")
  1520 + })
  1521 + end
  1522 +
1501 1523 end
... ...
app/helpers/tinymce_helper.rb
... ... @@ -20,7 +20,7 @@ module TinymceHelper
20 20 :image_advtab => true,
21 21 :language => tinymce_language
22 22  
23   - options[:toolbar1] = "insertfile undo redo | copy paste | bold italic underline | styleselect fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
  23 + 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"
24 24 if options[:mode] == 'simple'
25 25 options[:menubar] = false
26 26 else
... ...
app/views/content_viewer/_article_toolbar.html.erb
1 1 <div<%= user && " class='logged-in'" %>>
2 2 <div id="article-actions">
3 3  
  4 + <%= fullscreen_buttons('#article') %>
4 5  
5 6 <% if @page.allow_edit?(user) && !remove_content_button(:edit, @page) %>
6 7 <% content = content_tag('span', label_for_edit_article(@page)) %>
... ...
public/designs/icons/tango/style.css
... ... @@ -114,6 +114,7 @@
114 114 .icon-set-admin-role { background-image: url(mod/16x16/apps/user.png) }
115 115 .icon-reset-admin-role { background-image: url(../../../images/icons-app/person-icon.png) }
116 116 .icon-clock { background-image: url(Tango/16x16/actions/appointment.png) }
  117 +.icon-fullscreen { background-image: url(Tango/16x16/actions/view-fullscreen.png) }
117 118  
118 119 /******************LARGE ICONS********************/
119 120 .image-gallery-item .folder { background-image: url(mod/96x96/places/folder.png) }
... ...
public/javascripts/application.js
... ... @@ -1165,3 +1165,35 @@ function add_new_file_fields() {
1165 1165 }
1166 1166  
1167 1167 window.isHidden = function isHidden() { return (typeof(document.hidden) != 'undefined') ? document.hidden : !document.hasFocus() };
  1168 +
  1169 +function $_GET(id){
  1170 + var a = new RegExp(id+"=([^&#=]*)");
  1171 + return decodeURIComponent(a.exec(window.location.search)[1]);
  1172 +}
  1173 +
  1174 +var fullwidth=false;
  1175 +function toggle_fullwidth(itemId){
  1176 + if(fullwidth){
  1177 + jQuery(itemId).removeClass("fullwidth");
  1178 + jQuery("#fullscreen-btn").show()
  1179 + jQuery("#exit-fullscreen-btn").hide()
  1180 + fullwidth = false;
  1181 + }
  1182 + else{
  1183 + jQuery(itemId).addClass("fullwidth");
  1184 + jQuery("#exit-fullscreen-btn").show()
  1185 + jQuery("#fullscreen-btn").hide()
  1186 + fullwidth = true;
  1187 + }
  1188 + jQuery(window).trigger("toggleFullwidth", fullwidth);
  1189 +}
  1190 +
  1191 +function fullscreenPageLoad(itemId){
  1192 + jQuery(document).ready(function(){
  1193 +
  1194 + if ($_GET('fullscreen') == 1){
  1195 + toggle_fullwidth(itemId);
  1196 + }
  1197 + });
  1198 +}
  1199 +
... ...
public/stylesheets/application.css
... ... @@ -6971,3 +6971,19 @@ li.profile-activity-item.upload_image .activity-gallery-images-count-1 img {
6971 6971 body .ui-widget-overlay {
6972 6972 background: #000;
6973 6973 }
  6974 +
  6975 +.fullwidth{
  6976 + position: fixed !important;
  6977 + left: 0 !important;
  6978 + top: 0 !important;
  6979 + background: white !important;
  6980 + width: 97% !important;
  6981 + width: 100% !important;
  6982 + z-index: 999 !important;
  6983 + padding: 2em !important;
  6984 + bottom:0 !important;
  6985 + overflow: auto !important;
  6986 + -webkit-box-sizing: border-box !important;
  6987 + -moz-box-sizing: border-box !important;
  6988 + box-sizing: border-box !important;
  6989 +}
... ...
test/unit/application_helper_test.rb
... ... @@ -1002,6 +1002,13 @@ class ApplicationHelperTest &lt; ActionView::TestCase
1002 1002 assert_equal file, from_theme_include('atheme', 'afile')[:file] # exists? = true
1003 1003 end
1004 1004  
  1005 + should 'enable fullscreen buttons' do
  1006 + html = fullscreen_buttons("#article")
  1007 + assert html.include?("<script>fullscreenPageLoad('#article')</script>")
  1008 + assert html.include?("class=\"button with-text icon-fullscreen\"")
  1009 + assert html.include?("onClick=\"toggle_fullwidth('#article')\"")
  1010 + end
  1011 +
1005 1012 protected
1006 1013 include NoosferoTestHelper
1007 1014  
... ...