nunosilva800 · September 28, 2017 12:35
diff --git a/README.md b/README.md
diff --git a/routes.rb b/routes.rb
 # app/config/routes.rb
 Rails.application.routes.draw do
  #...
  get 'widget', to: 'widgets#widget'
  get 'test_widget', to: 'widgets#test_widget'
  #...
 end
diff --git a/test_widget.html.erb b/test_widget.html.erb
 <!-- app/views/widgets/test_widget.html.erb -->
 <!DOCTYPE html>
 <html>
 <head>
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
 </head>
 <body>
 <div id='wrapper' style="width:400px; height: 600px; margin:75px; background-color:yellow">

  <div id="my-widget"></div>
  <script src="<%= root_url %>widget.js" type="text/javascript"></script>

 </div>
 </body>
 </html>
diff --git a/widget.html.erb b/widget.html.erb
 <!-- app/views/widgets/widget.html.erb -->
 <div class="widget-container">
  Hello world, it's: <%= Time.current %>.
 </div>
diff --git a/widget.js b/widget.js
 // app/views/widgets/widget.js
 var MyWidgetJS = {
  getScript: function(url, success) {
    var done, head, script;
    script = document.createElement('script');
    script.src = url;
    head = document.getElementsByTagName('head')[0];
    done = false;
    script.onload = script.onreadystatechange = function() {
      if (!done && (!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete')) {
        done = true;
        success();
        script.onload = script.onreadystatechange = null;
        return head.removeChild(script);
      }
    };
    return head.appendChild(script);
  },
  load: function() {
    var $elem, $iframe;
    $elem = $('#my-widget');
    var url = "<%= widget_url %>";
    if ($elem.length > 0) {
      $elem.empty();
      $iframe = $('<iframe>').attr('src',  url)
                             .attr('frameborder', '0')
                             .attr('id', 'widget-iframe')
                             .attr('allowtransparency', 'true');
      return $elem.append($iframe);
    }
  },
 };
 if (typeof jQuery === 'undefined') {
  MyWidgetJS.getScript('//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js', function() {
    return MyWidgetJS.load();
  });
 } else {
  MyWidgetJS.load();
 }
diff --git a/widget_layout.html.erb b/widget_layout.html.erb
 <!-- app/views/layouts/widget_layout.html.erb -->
 <!DOCTYPE html>
 <html>
 <head>
  <title>My Widget</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <%# stylesheet_link_tag 'widget', media: 'all' %> <!-- Have custom CSS? -->
 </head>
 <body>
  <%= yield %>
 </body>
 </html>
diff --git a/widgets_controller.rb b/widgets_controller.rb
 #app/controllers/widgets_controller.rb
 class WidgetsController < ApplicationController
  skip_before_filter :verify_authenticity_token
  after_action :allow_iframe
  layout 'widget'

  def widget
    respond_to do |format|
      format.html do
        # load data to show in the view
        # @data = ...
        render :widget
      end
      format.js do
        render :widget
      end
    end
  end

  def test_widget
    render :test_widget, layout: false
  end

  private
  
  def allow_iframe
    response.headers.except! 'X-Frame-Options'
  end

  def get_rumours
    if params[:id]
      Rumour.displayed.where(id: params[:id])
    else
      Rails.cache.fetch('rumours_for_widget', expires_in: 5.minutes) do
       Rumour.order(timestamp: :desc).displayed.limit(5)
      end
    end
  end
 end
	# app/config/routes.rb
	Rails.application.routes.draw do
	#...
	get 'widget', to: 'widgets#widget'
	get 'test_widget', to: 'widgets#test_widget'
	#...
	end
	<!-- app/views/widgets/test_widget.html.erb -->
	<!DOCTYPE html>
	<html>
	<head>
	<title></title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
	</head>
	<body>
	<div id='wrapper' style="width:400px; height: 600px; margin:75px; background-color:yellow">

	<div id="my-widget"></div>
	<script src="<%= root_url %>widget.js" type="text/javascript"></script>

	</div>
	</body>
	</html>
	<!-- app/views/widgets/widget.html.erb -->
	<div class="widget-container">
	Hello world, it's: <%= Time.current %>.
	</div>
	// app/views/widgets/widget.js
	var MyWidgetJS = {
	getScript: function(url, success) {
	var done, head, script;
	script = document.createElement('script');
	script.src = url;
	head = document.getElementsByTagName('head')[0];
	done = false;
	script.onload = script.onreadystatechange = function() {
	if (!done && (!this.readyState \|\| this.readyState === 'loaded' \|\| this.readyState === 'complete')) {
	done = true;
	success();
	script.onload = script.onreadystatechange = null;
	return head.removeChild(script);
	}
	};
	return head.appendChild(script);
	},
	load: function() {
	var $elem, $iframe;
	$elem = $('#my-widget');
	var url = "<%= widget_url %>";
	if ($elem.length > 0) {
	$elem.empty();
	$iframe = $('<iframe>').attr('src', url)
	.attr('frameborder', '0')
	.attr('id', 'widget-iframe')
	.attr('allowtransparency', 'true');
	return $elem.append($iframe);
	}
	},
	};
	if (typeof jQuery === 'undefined') {
	MyWidgetJS.getScript('//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js', function() {
	return MyWidgetJS.load();
	});
	} else {
	MyWidgetJS.load();
	}
	<!-- app/views/layouts/widget_layout.html.erb -->
	<!DOCTYPE html>
	<html>
	<head>
	<title>My Widget</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<%# stylesheet_link_tag 'widget', media: 'all' %> <!-- Have custom CSS? -->
	</head>
	<body>
	<%= yield %>
	</body>
	</html>
	#app/controllers/widgets_controller.rb
	class WidgetsController < ApplicationController
	skip_before_filter :verify_authenticity_token
	after_action :allow_iframe
	layout 'widget'

	def widget
	respond_to do \|format\|
	format.html do
	# load data to show in the view
	# @data = ...
	render :widget
	end
	format.js do
	render :widget
	end
	end
	end

	def test_widget
	render :test_widget, layout: false
	end

	private

	def allow_iframe
	response.headers.except! 'X-Frame-Options'
	end

	def get_rumours
	if params[:id]
	Rumour.displayed.where(id: params[:id])
	else
	Rails.cache.fetch('rumours_for_widget', expires_in: 5.minutes) do
	Rumour.order(timestamp: :desc).displayed.limit(5)
	end
	end
	end
	end