Enables fullscreen view for article view and edit

Evandro Junior · Leandro Santos
1 parent 71cf8bc1
Showing 7 changed files with 87 additions and 1 deletions Show diff stats
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
@@ -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
@@ -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
 <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)) %>
@@ -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) }
@@ -1165,3 +1165,42 @@ function add_new_file_fields() {
 }
 window.isHidden = function isHidden() { return (typeof(document.hidden) != 'undefined') ? document.hidden : !document.hasFocus() };
+
+function getQueryParams(qs) {
+  qs = qs.split("+").join(" ");
+  var params = {},
+      tokens,
+      re = /[?&]?([^=]+)=([^&]*)/g;
+  while (tokens = re.exec(qs)) {
+      params[decodeURIComponent(tokens[1])]
+          = decodeURIComponent(tokens[2]);
+  }
+  return params;
+}
+
+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(){
+    var $_GET = getQueryParams(document.location.search);
+    if ($_GET['fullscreen']==1){
+      toggle_fullwidth(itemId);
+    }
+  });
+}
+
@@ -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;
+}
@@ -1002,6 +1002,13 @@ class ApplicationHelperTest &lt; 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
	@@ -1498,4 +1498,26 @@ module ApplicationHelper		@@ -1498,4 +1498,26 @@ module ApplicationHelper
1498	text_field(object_name, method, options.merge(:class => 'colorpicker_field'))	1498	text_field(object_name, method, options.merge(:class => 'colorpicker_field'))
1499	end	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	end	1523	end
	@@ -20,7 +20,7 @@ module TinymceHelper		@@ -20,7 +20,7 @@ module TinymceHelper
20	:image_advtab => true,	20	:image_advtab => true,
21	:language => tinymce_language	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	if options[:mode] == 'simple'	24	if options[:mode] == 'simple'
25	options[:menubar] = false	25	options[:menubar] = false
26	else	26	else
1	<div<%= user && " class='logged-in'" %>>	1	<div<%= user && " class='logged-in'" %>>
2	<div id="article-actions">	2	<div id="article-actions">
3		3
		4	+ <%= fullscreen_buttons('#article') %>
4		5
5	<% if @page.allow_edit?(user) && !remove_content_button(:edit, @page) %>	6	<% if @page.allow_edit?(user) && !remove_content_button(:edit, @page) %>
6	<% content = content_tag('span', label_for_edit_article(@page)) %>	7	<% content = content_tag('span', label_for_edit_article(@page)) %>
	@@ -114,6 +114,7 @@		@@ -114,6 +114,7 @@
114	.icon-set-admin-role { background-image: url(mod/16x16/apps/user.png) }	114	.icon-set-admin-role { background-image: url(mod/16x16/apps/user.png) }
115	.icon-reset-admin-role { background-image: url(../../../images/icons-app/person-icon.png) }	115	.icon-reset-admin-role { background-image: url(../../../images/icons-app/person-icon.png) }
116	.icon-clock { background-image: url(Tango/16x16/actions/appointment.png) }	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	/****************LARGE ICONS******************/	119	/****************LARGE ICONS******************/
119	.image-gallery-item .folder { background-image: url(mod/96x96/places/folder.png) }	120	.image-gallery-item .folder { background-image: url(mod/96x96/places/folder.png) }
	@@ -1165,3 +1165,42 @@ function add_new_file_fields() {		@@ -1165,3 +1165,42 @@ function add_new_file_fields() {
1165	}	1165	}
1166		1166
1167	window.isHidden = function isHidden() { return (typeof(document.hidden) != 'undefined') ? document.hidden : !document.hasFocus() };	1167	window.isHidden = function isHidden() { return (typeof(document.hidden) != 'undefined') ? document.hidden : !document.hasFocus() };
		1168	+
		1169	+function getQueryParams(qs) {
		1170	+ qs = qs.split("+").join(" ");
		1171	+ var params = {},
		1172	+ tokens,
		1173	+ re = /[?&]?([^=]+)=([^&]*)/g;
		1174	+ while (tokens = re.exec(qs)) {
		1175	+ params[decodeURIComponent(tokens[1])]
		1176	+ = decodeURIComponent(tokens[2]);
		1177	+ }
		1178	+ return params;
		1179	+}
		1180	+
		1181	+var fullwidth=false;
		1182	+function toggle_fullwidth(itemId){
		1183	+ if(fullwidth){
		1184	+ jQuery(itemId).removeClass("fullwidth");
		1185	+ jQuery("#fullscreen-btn").show()
		1186	+ jQuery("#exit-fullscreen-btn").hide()
		1187	+ fullwidth = false;
		1188	+ }
		1189	+ else{
		1190	+ jQuery(itemId).addClass("fullwidth");
		1191	+ jQuery("#exit-fullscreen-btn").show()
		1192	+ jQuery("#fullscreen-btn").hide()
		1193	+ fullwidth = true;
		1194	+ }
		1195	+ jQuery(window).trigger("toggleFullwidth", fullwidth);
		1196	+}
		1197	+
		1198	+function fullscreenPageLoad(itemId){
		1199	+ jQuery(document).ready(function(){
		1200	+ var $_GET = getQueryParams(document.location.search);
		1201	+ if ($_GET['fullscreen']==1){
		1202	+ toggle_fullwidth(itemId);
		1203	+ }
		1204	+ });
		1205	+}
		1206	+
	@@ -6971,3 +6971,19 @@ li.profile-activity-item.upload_image .activity-gallery-images-count-1 img {		@@ -6971,3 +6971,19 @@ li.profile-activity-item.upload_image .activity-gallery-images-count-1 img {
6971	body .ui-widget-overlay {	6971	body .ui-widget-overlay {
6972	background: #000;	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	+}
	@@ -1002,6 +1002,13 @@ class ApplicationHelperTest < ActionView::TestCase		@@ -1002,6 +1002,13 @@ class ApplicationHelperTest < ActionView::TestCase
1002	assert_equal file, from_theme_include('atheme', 'afile')[:file] # exists? = true	1002	assert_equal file, from_theme_include('atheme', 'afile')[:file] # exists? = true
1003	end	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	protected	1012	protected
1006	include NoosferoTestHelper	1013	include NoosferoTestHelper
1007		1014