Skip to content

Commit

Permalink
Merge pull request #455 from hasgeek/widget
Browse files Browse the repository at this point in the history
Add support to embed hasjob iframe on any third party website
  • Loading branch information
vidya-ram authored Jun 21, 2018
2 parents a886b54 + 6819dff commit 3724393
Show file tree
Hide file tree
Showing 14 changed files with 255 additions and 98 deletions.
12 changes: 12 additions & 0 deletions hasjob/assets/sass/_embed.sass
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
.hasjob-iframe
background: none
height: auto

#main-content
width: 100%

#root
margin-bottom: 0

#root_footer
height: 0
1 change: 1 addition & 0 deletions hasjob/assets/sass/app.sass
Original file line number Diff line number Diff line change
Expand Up @@ -9,3 +9,4 @@
@import "stickie"
@import "40x"
@import "animate"
@import "embed"
Original file line number Diff line number Diff line change
Expand Up @@ -1163,3 +1163,13 @@ Copyright (c) 2014 Daniel Eden
.shake {
-webkit-animation-name: shake;
animation-name: shake; }

.hasjob-iframe {
background: none;
height: auto; }
.hasjob-iframe #main-content {
width: 100%; }
.hasjob-iframe #root {
margin-bottom: 0; }
.hasjob-iframe #root_footer {
height: 0; }
2 changes: 1 addition & 1 deletion hasjob/static/build/manifest.json
Original file line number Diff line number Diff line change
@@ -1 +1 @@
{"assets":{"vendor":"js/vendor.3246dcaf06972fc8f57c.js","app-css":"css/stylesheet-app-css.3246dcaf06972fc8f57c.css","app":"js/app.3246dcaf06972fc8f57c.js","manifest":"js/manifest.3246dcaf06972fc8f57c.js"}}
{"assets":{"vendor":"js/vendor.b055f8ff6a09d10ba3b0.js","app-css":"css/stylesheet-app-css.b055f8ff6a09d10ba3b0.css","app":"js/app.b055f8ff6a09d10ba3b0.js","manifest":"js/manifest.b055f8ff6a09d10ba3b0.js"}}
46 changes: 46 additions & 0 deletions hasjob/static/embed.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
(function() {
var containerDivs = document.getElementsByClassName('hasjob-embed');
var hostnames = [];
var urlParserElem = document.createElement('a');
for (var index = 0; index < containerDivs.length; index++) {
var iframeSrc, iframeId, hasjobIframe;
urlParserElem.href = containerDivs[index].getAttribute('data-href');
hostnames.push(urlParserElem.origin);
iframeId = containerDivs[index].getAttribute('data-iframe-id');
if(!iframeId) {
iframeId = 'hasjob-iframe-' + Math.random().toString(36).slice(3);
}
if(urlParserElem.search) {
iframeSrc = urlParserElem + '&embed=1&limit=';
} else {
iframeSrc = urlParserElem.origin + '/?embed=1&limit=';
}
iframeSrc = iframeSrc +
containerDivs[index].getAttribute('data-jobpost-limit') +
'&iframeid=' + iframeId;
hasjobIframe = document.createElement('iframe');
setAttributes(hasjobIframe, {
'id': iframeId,
'src': iframeSrc,
'width': '100%',
'height': '500px',
'frameborder': '0',
'scrolling': 'no'
});
containerDivs[index].appendChild(hasjobIframe);
}
function setAttributes(element, attributes) {
for(var name in attributes) {
element.setAttribute(name, attributes[name]);
}
}
function handleMessage(event) {
if(hostnames.indexOf(event.origin) !== -1) {
var message = JSON.parse(event.data);
if(message.context == "iframe.resize" && message.id) {
document.getElementById(message.id).setAttribute('height', message.height);
}
}
}
window.addEventListener('message', handleMessage, false);
})();
10 changes: 5 additions & 5 deletions hasjob/static/service-worker.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,19 +8,19 @@ const workboxSW = new self.WorkboxSW({

workboxSW.precache([
{
"url": "/static/build/css/stylesheet-app-css.3246dcaf06972fc8f57c.css",
"revision": "d8defbd537b7a3a67a53c13519660661"
"url": "/static/build/css/stylesheet-app-css.b055f8ff6a09d10ba3b0.css",
"revision": "31d172d123effd031f4a89f0d3aaf654"
},
{
"url": "/static/build/js/app.3246dcaf06972fc8f57c.js",
"url": "/static/build/js/app.b055f8ff6a09d10ba3b0.js",
"revision": "3deea6e4c0f55310d56b380ab35e66bd"
},
{
"url": "/static/build/js/manifest.3246dcaf06972fc8f57c.js",
"url": "/static/build/js/manifest.b055f8ff6a09d10ba3b0.js",
"revision": "fe684bf23b9518850a7a3dd90492001d"
},
{
"url": "/static/build/js/vendor.3246dcaf06972fc8f57c.js",
"url": "/static/build/js/vendor.b055f8ff6a09d10ba3b0.js",
"revision": "12a1ca8d2cb2caab35d21438cb595e94"
}
]);
Expand Down
59 changes: 59 additions & 0 deletions hasjob/templates/embedlayout.html.jinja2
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
{%- extends "layout.html.jinja2" -%}

{%- block layoutheaders %}
<link rel="icon" sizes="192x192" href="/static/img/hasjob-logo.svg">
<link rel="stylesheet" type="text/css" href='{{ asset_path('app-css') }}' />
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Fira+Sans:400,400i,700,700i|McLaren&amp;subset=latin-ext">
{#
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=McLaren" />
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Fira+Sans:400,700,400italic,700italic&subset=latin,latin-ext">
<link rel="stylesheet" type="text/css" href="//code.cdn.mozilla.net/fonts/fira.css">
-#}
<script>
if (typeof window.Hasjob === 'undefined') {
window.Hasjob = {};
}
// Use Hasjob.Config for server-generated responses
if (typeof window.Hasjob.Config === 'undefined') {
window.Hasjob.Config = {
baseURL: "/"
}
}
</script>
{%- endblock %}

{% block bodytag %}
<body class="hasjob-iframe">
{% endblock %}

{% block headerbox %}
{% endblock %}

{% block basecontent -%}
<div id='main-content'>
{% block pagecontent %}
{% block content %}{% endblock %}
{% endblock %}
</div>
{%- endblock %}

{% block basefooter -%}
{% endblock %}

{% block footer %}
{% endblock %}

{% block layoutscripts %}
<script type="text/javascript">
window.Hasjob.sendIframeSize = function() {
window.parent.postMessage(JSON.stringify({
context: "iframe.resize",
height: document.body.scrollHeight,
width: document.body.scrollWidth,
id: {{ request.args.get('iframeid') | tojson }}
}), '*');
};
window.addEventListener('resize', window.Hasjob.sendIframeSize, false);
window.addEventListener('load', window.Hasjob.sendIframeSize, false);
</script>
{% endblock %}
149 changes: 61 additions & 88 deletions hasjob/templates/index.html.jinja2
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
{%- from "domain.html.jinja2" import org_profile, user_profile with context %}
{% from "baseframe/forms.html.jinja2" import renderfield, widgetscripts %}
{%- macro pagetitle() %}{% if title %}{% if domain %}Jobs at {% endif%}{{ title }} | {% endif %}{% if g.board %}{{ g.board.title }}{% if g.board.not_root %} ({{ config['SITE_TITLE'] }}){% endif %}{% else %}{{ config['SITE_TITLE'] }}{% endif %}{%- endmacro %}
{%- if not request.is_xhr -%}

{%- if embed -%}
{% extends "embedlayout.html.jinja2" %}
{%- elif not request.is_xhr -%}
{% extends "layout.html.jinja2" %}
{% block titletags -%}
<title>{% block title %}{{ pagetitle() }}{% endblock %}</title>
Expand Down Expand Up @@ -53,88 +56,58 @@
{%- endif %}
{% endblock %}
{% endif %}

{% block content %}
{%- from "macros.html.jinja2" import stickie %}
{% with gkiosk=g.kiosk, gboard=g.board, guser=g.user, gstarred_ids=g.starred_ids %}
{%- if gboard and gboard.not_root and not paginated and not (domain or md5sum or location or tag) %}
<div class="flash info">
{{ gboard.description|safe }}
{%- if gkiosk and g.peopleflow_url %}
<p>If you find a job worth applying for here, tap your badge on the reader attached to this kiosk and we’ll send an email connecting you with the employer.</p>
{%- from "macros.html.jinja2" import stickiecontainer %}
{%- if embed %}
{{ stickiecontainer(false, pinsandposts, embed=true) }}
{%- else %}
{% with gkiosk=g.kiosk, gboard=g.board, guser=g.user, gstarred_ids=g.starred_ids %}
{%- if gboard and gboard.not_root and not paginated and not (domain or md5sum or location or tag) %}
<div class="flash info">
{{ gboard.description|safe }}
{%- if gkiosk and g.peopleflow_url %}
<p>If you find a job worth applying for here, tap your badge on the reader attached to this kiosk and we’ll send an email connecting you with the employer.</p>
{%- endif %}
</div>
{%- endif %}
{%- if filterset and filterset.description and not paginated %}
<div class="flash info">
<h2>{{ filterset.title }}</h2>
{{ filterset.description | safe }}
</div>
{%- endif %}
{%- if location and location.use_title and location.description and not paginated %}
<div class="flash info">
<h2>{{ location.use_title }}</h2>
{{ location.description }}
</div>
{%- elif location_prompts and not domain and not paginated %}
<div class="flash info">
<p>In {{ location_prompts[0]['use_title'] }}? Filter this view:</p>
<p class="button-bar">
{%- for loc in location_prompts %}
<a class="btn btn-sm btn-default" data-geonameid="{{ loc['geonameid'] }}" href="{{ request.base_url + '?l=' + loc['name']|urlencode }}">{{ loc['picker_title'] }}</a>
{%- endfor %}
<a class="btn btn-sm btn-default" href="{{ request.base_url }}?anywhere=1">Anywhere</a>
</p>
</div>
{%- endif %}
{%- if domain and not paginated %}
{{ org_profile(domain) }}
{%- elif md5sum and not paginated %}
{%- if template_vars['jobpost_user'] %}
{{ user_profile(template_vars['jobpost_user']) }}
{%- endif %}
</div>
{%- endif %}
{%- if filterset and filterset.description and not paginated %}
<div class="flash info">
<h2>{{ filterset.title }}</h2>
{{ filterset.description | safe }}
</div>
{%- endif %}
{%- if location and location.use_title and location.description and not paginated %}
<div class="flash info">
<h2>{{ location.use_title }}</h2>
{{ location.description }}
</div>
{%- elif location_prompts and not domain and not paginated %}
<div class="flash info">
<p>In {{ location_prompts[0]['use_title'] }}? Filter this view:</p>
<p class="button-bar">
{%- for loc in location_prompts %}
<a class="btn btn-sm btn-default" data-geonameid="{{ loc['geonameid'] }}" href="{{ request.base_url + '?l=' + loc['name']|urlencode }}">{{ loc['picker_title'] }}</a>
{%- endfor %}
<a class="btn btn-sm btn-default" href="{{ request.base_url }}?anywhere=1">Anywhere</a>
</p>
</div>
{%- endif %}
{%- if domain and not paginated %}
{{ org_profile(domain) }}
{%- elif md5sum and not paginated %}
{%- if template_vars['jobpost_user'] %}
{{ user_profile(template_vars['jobpost_user']) }}
{%- endif %}
{%- endif %}
{%- if pay_graph_data and not paginated %}
<div class="flash info">
<h2>What these jobs pay per annum</h2>
<div id="pay-graph"></div>
</div>
{%- endif %}
{%- if not paginated %}
<ul id="stickie-area" class="row">
{%- endif %}
{%- if grouped -%}
{%- for grouping, group in grouped.items() -%}{%- with pinned, post, is_bgroup=group[0] -%}
{%- if group|length == 1 -%}
<li class="col-xs-12 col-md-3 col-sm-4">
{{ stickie(post, post.url_for(b=is_bgroup), pinned, get_post_viewcounts, show_viewcounts=show_viewcounts, show_pay=is_siteadmin, starred=guser and post.id in gstarred_ids, is_bgroup=is_bgroup) }}
</li>
{%- else -%}
<li class="grouped col-xs-12 col-md-3 col-sm-4">
{%- if grouping[0] in ['sd', 'nd'] -%}
{{ stickie(post, url_for('browse_by_domain', domain=grouping[1]), pinned, get_post_viewcounts, dataurl=post.url_for(b=is_bgroup), show_viewcounts=show_viewcounts, show_pay=is_siteadmin, starred=guser and post.id in gstarred_ids, is_bgroup=is_bgroup) }}
{%- elif grouping[0] in ['se', 'ne'] -%}
{{ stickie(post, url_for('browse_by_email', md5sum=grouping[1]), pinned, get_post_viewcounts, dataurl=post.url_for(b=is_bgroup), show_viewcounts=show_viewcounts, show_pay=is_siteadmin, starred=guser and post.id in gstarred_ids, is_bgroup=is_bgroup) }}
{%- endif -%}
{%- for pinned, post, is_bgroup in group[1:] -%}
{{ stickie(post, none, false, get_post_viewcounts, groupedunder=true, dataurl=post.url_for(b=is_bgroup), show_viewcounts=show_viewcounts, show_pay=is_siteadmin, starred=guser and post.id in gstarred_ids, is_bgroup=is_bgroup) }}
{%- endfor -%}
</li>
{%- endif -%}
{%- endwith -%}{%- endfor -%}
{%- else %}
{%- for pinned, post, is_bgroup in pinsandposts -%}
<li class="col-xs-12 col-md-3 col-sm-4">
{{ stickie(post, post.url_for(b=is_bgroup), pinned, get_post_viewcounts, show_viewcounts=show_viewcounts, show_pay=is_siteadmin, starred=guser and post.id in gstarred_ids, is_bgroup=is_bgroup) }}
</li>
{%- else -%}
<li class="col-xs-12 col-md-3 col-sm-4">
<span class="stickie special">Sorry, no jobs listed.</span>
</li>
{%- endfor -%}
{%- endif -%}
{%- if not paginated -%}
</ul>
{%- endif -%}
{%- if pay_graph_data and not paginated %}
<div class="flash info">
<h2>What these jobs pay per annum</h2>
<div id="pay-graph"></div>
</div>
{%- endif %}
{{ stickiecontainer(grouped, pinsandposts, paginated, get_post_viewcounts, show_viewcounts, show_pay, guser, gstarred_ids, false ) }}
{%- endwith %}
{%- if loadmore and not paginated -%}
<noscript>
<div class="row text-center">
Expand All @@ -158,14 +131,14 @@
{%- endraw %}
</div>
{%- endif -%}
{%- endwith %}
{%- if not showall -%}
<div class="flash info">
<p>
You are only seeing jobs listed in the last 24 hours. To see everything,
<a class="btn btn-primary btn-sm" href="{{ url_for('login') }}">Login with Google or GitHub</a>
</p>
</div>
{%- if not showall -%}
<div class="flash info">
<p>
You are only seeing jobs listed in the last 24 hours. To see everything,
<a class="btn btn-primary btn-sm" href="{{ url_for('login') }}">Login with Google or GitHub</a>
</p>
</div>
{%- endif -%}
{%- endif -%}
{%- endblock -%}

Expand Down
43 changes: 41 additions & 2 deletions hasjob/templates/macros.html.jinja2
Original file line number Diff line number Diff line change
@@ -1,8 +1,47 @@
{%- macro stickie(post, url, pinned, get_post_viewcounts, groupedunder=false, dataurl=none, show_viewcounts=false, show_pay=false, starred=none, is_bgroup=none) -%}
{%- macro stickiecontainer(grouped, pinsandposts, paginated=false, get_post_viewcounts=false, show_viewcounts=false, show_pay=false, guser=None, gstarred_ids=false, embed=false) -%}
{%- if not paginated %}
<ul id="stickie-area" class="row">
{%- endif %}
{%- if grouped -%}
{%- for grouping, group in grouped.items() -%}{%- with pinned, post, is_bgroup=group[0] -%}
{%- if group|length == 1 -%}
<li class="col-xs-12 col-md-3 col-sm-4">
{{ stickie(post, post.url_for(b=is_bgroup), pinned, get_post_viewcounts, show_viewcounts=show_viewcounts, show_pay=is_siteadmin, starred=guser and post.id in gstarred_ids, is_bgroup=is_bgroup, embed=embed) }}
</li>
{%- else -%}
<li class="grouped col-xs-12 col-md-3 col-sm-4">
{%- if grouping[0] in ['sd', 'nd'] -%}
{{ stickie(post, url_for('browse_by_domain', domain=grouping[1]), pinned, get_post_viewcounts, dataurl=post.url_for(b=is_bgroup), show_viewcounts=show_viewcounts, show_pay=is_siteadmin, starred=guser and post.id in gstarred_ids, is_bgroup=is_bgroup, embed=embed) }}
{%- elif grouping[0] in ['se', 'ne'] -%}
{{ stickie(post, url_for('browse_by_email', md5sum=grouping[1]), pinned, get_post_viewcounts, dataurl=post.url_for(b=is_bgroup), show_viewcounts=show_viewcounts, show_pay=is_siteadmin, starred=guser and post.id in gstarred_ids, is_bgroup=is_bgroup, embed=embed) }}
{%- endif -%}
{%- for pinned, post, is_bgroup in group[1:] -%}
{{ stickie(post, none, false, get_post_viewcounts, groupedunder=true, dataurl=post.url_for(b=is_bgroup), show_viewcounts=show_viewcounts, show_pay=is_siteadmin, starred=guser and post.id in gstarred_ids, is_bgroup=is_bgroup, embed=embed) }}
{%- endfor -%}
</li>
{%- endif -%}
{%- endwith -%}{%- endfor -%}
{%- else %}
{%- for pinned, post, is_bgroup in pinsandposts -%}
<li class="col-xs-12 col-md-3 col-sm-4">
{{ stickie(post, post.url_for(b=is_bgroup), pinned, get_post_viewcounts, show_viewcounts=show_viewcounts, show_pay=is_siteadmin, starred=guser and post.id in gstarred_ids, is_bgroup=is_bgroup, embed=embed) }}
</li>
{%- else -%}
<li class="col-xs-12 col-md-3 col-sm-4">
<span class="stickie special">Sorry, no jobs listed.</span>
</li>
{%- endfor -%}
{%- endif -%}
{%- if not paginated -%}
</ul>
{%- endif -%}
{%- endmacro -%}

{%- macro stickie(post, url, pinned, get_post_viewcounts, groupedunder=false, dataurl=none, show_viewcounts=false, show_pay=false, starred=none, is_bgroup=none, embed=false) -%}
{%- if groupedunder %}
<div class="stickie {%- if post.state.ANNOUNCEMENT %} announcement{% endif %} grouped under" {%- if dataurl %} data-href="{{ dataurl }}"{% endif %}>
{%- else %}
<a class="stickie {%- if post.state.ANNOUNCEMENT %} announcement{% endif %}" href="{{ url }}" rel="bookmark" {%- if dataurl %} data-href="{{ dataurl }}"{% endif %}>
<a class="stickie {%- if post.state.ANNOUNCEMENT %} announcement{% endif %}" {%- if embed %} href="{{ url }}?utm_campaign=embed" {% else %} href="{{ url }}" {% endif %} rel="bookmark" {%- if embed %} target="_blank"{% endif %} {%- if dataurl %} data-href="{{ dataurl }}"{% endif %}>
{%- endif %}
{%- if pinned %}<span class="pinned">Pinned!</span>{% endif %}
<span class="annotation top-left">{{ post.location }}</span>
Expand Down
Loading

0 comments on commit 3724393

Please sign in to comment.