Add support to embed hasjob iframe on any third party website #455

vidya-ram · 2018-06-13T14:37:34Z

JS for adding iframe to third party website and to resize the iframe
automatically to match content size
iframe endpoint, accessed by passing ?embed=1 to any view URL,
plus &limit=n where default is 8 when an embed is specified
In iframe view, grouping is disabled
Clicking on job posts opens Hasjob on a new tab

To add iframe to a website, include container div and script tag

<div class="hasjob-embed" data-href="http://hasjob.co" data-jobpost-limit="16"></div>
<script src="https://hasjob.co/api/1/embed.js"></script>

Fixes #454

Desktop view

Mobile view(on resizing)

1. JS for adding iframe to third party website and to resize the iframe automatically to match content size 2. iframe endpoint, accessed by passing `?embed=1` to any view URL, plus `&limit=n` where default is 8 when an embed is specified 3. In iframe view, grouping is disabled

jace · 2018-06-14T06:24:48Z

hasjob/static/embed.js

@@ -0,0 +1,24 @@
+(function() {
+  var containerDiv = document.getElementById('hasjob');


This assumes there can be only one Hasjob embed per page. Do we want to support multiple? In the case of a Medium article, for instance, there can be multiple. While this code isn't for Medium, we may have a similar use case on our own websites.

Fixed.
To include multiple hasjob iframes, container div needs to have
data-href : hasjob url (can contain query parameters)
data-jobpost-limit: Number of job posts to be displayed
data-iframe-id: id for the iframe (this is required to set the height of the respective iframe on resize)

Eg:-

<div class="hasjob-embed" data-href="http://hasjob.co/?q=javascript" data-jobpost-limit="16" data-iframe-id="hasjob-js"></div> <div class="hasjob-embed" data-href="http://hasjob.co/?t=contract&q=android" data-jobpost-limit="16" data-iframe-id="hasjob-android"></div> <script src="http://hasjob.co/api/1/embed.js"></script>

jace · 2018-06-14T06:26:18Z

hasjob/static/embed.js

+  var link = containerDiv.getAttribute('data-href');
+  link = link.substr(-1) !== '/' ? link : link.substr(0, link.length-1);
+  var jobPostLimit = containerDiv.getAttribute('data-jobpost-limit');
+  var iframeSrc = link + '/?embed=1&limit=' + jobPostLimit;


This won't work if the link already contains query parameters. Have to check for that.

jace · 2018-06-14T09:53:21Z

hasjob/templates/index.html.jinja2

-        {{ 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>
+    {%- if not embed %}


Due to the complexity of this template, I'm unable to tell if the if/endif tags are correctly positioned and have to trust you on this. We should simplify this in a separate PR, composing the template as a collection of calls to macros.

Moved stickie-area rendering to a macro

jace · 2018-06-14T10:11:04Z

hasjob/templates/layout.html.jinja2

+  {%- if not embed %}
+    {{ super() }}
+  {% endif %}
+{% endblock %}


Instead of this, make an embedlayout.html.jinja2 and in index.html.jinja2, add an if condition to decide which template to extend.

jace · 2018-06-14T10:17:22Z

hasjob/views/index.py

@@ -702,7 +713,7 @@ def sortarchive(order_by):
            if reverse is None:
                reverse = False
            try:
-                reverse = bool(int(reverse))
+                reverse = bool( (reverse))


jace · 2018-06-14T10:17:53Z

hasjob/views/index.py

+
+
+@app.route('/embed.js', methods=['GET'], subdomain='<subdomain>')
+@app.route('/embed.js', methods=['GET'])


This should be /api/1/embed.js

…ring of stickie-area to a macro.

jace · 2018-06-15T12:42:38Z

hasjob/templates/embedlayout.html.jinja2

+<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en" {% block manifest %}{%- if g.kiosk %} manifest="{{ url_for('kiosk_manifest') }}" {%- endif %}{% endblock %}> <![endif]-->
+<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en" {{ self.manifest() }}> <![endif]-->
+<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en" {{ self.manifest() }}> <![endif]-->
+<!--[if gt IE 8]><!--> <html lang="en" class="no-js {%- if g.user %} userlogin {%- else %} no-userlogin {%- endif %}" {{ self.manifest() }}> <!--<![endif]-->


We should move this manifest block into baseframe so we don't have to repeat it here.

jace · 2018-06-15T12:50:08Z

hasjob/templates/embedlayout.html.jinja2

+      }
+    }
+  </script>
+{%- endblock %}


There is too much replicated from layout.html.jinja2 here. We'll have to find a way to abstract this out. Maybe in a separate PR.

@jace I extended layout.html.jinja2 in embedlayout.html.jinja2

Better now!

jace · 2018-06-15T12:51:17Z

hasjob/templates/index.html.jinja2

+
+{%- if embed -%}
+  {% extends "embedlayout.html.jinja2" %}
+{%- elif not request.is_xhr -%}


Wait, doesn't this if condition do the same thing we're trying to achieve with embed? It returns an embeddable version of the page without header or footer, right?

Yes and that's what I had done earlier. There are other parts of the page that we don't need in the embed like flash, campaign, footerscripts, there was more if/endif tags and increasing the complexity of the template.

Also if not request.is_xhr doesn't include baseframe styling

As a clean-up project, can we design templates around these use cases?

Full page

iframe (no header and footer, but includes stylesheet and scripts)

Fragment (just a HTML snippet)

This needs a separate ticket, and should be supported from Baseframe, so the ticket goes there.

jace · 2018-06-21T10:38:45Z

hasjob/templates/embedlayout.html.jinja2

+      }
+    }
+  </script>
+{%- endblock %}


Better now!

jace · 2018-06-21T10:42:44Z

hasjob/templates/index.html.jinja2

+
+{%- if embed -%}
+  {% extends "embedlayout.html.jinja2" %}
+{%- elif not request.is_xhr -%}


As a clean-up project, can we design templates around these use cases?

Full page

iframe (no header and footer, but includes stylesheet and scripts)

Fragment (just a HTML snippet)

This needs a separate ticket, and should be supported from Baseframe, so the ticket goes there.

vidya-ram requested review from jace and iambibhas June 13, 2018 14:37

Add newline.

8e49636

jace requested changes Jun 14, 2018

View reviewed changes

vidya-ram added 3 commits June 15, 2018 16:01

Add support for multiple hasjob iframes, query parameters. Move rende…

68e7405

…ring of stickie-area to a macro.

Remove embed check from layout.html.

6ebe4e2

Add script tag.

1f202d8

jace requested changes Jun 15, 2018

View reviewed changes

vidya-ram added 2 commits June 18, 2018 10:37

Extend layout.html.jinja2 in embedlayout.html.jinja2.

8212a0d

Merge branch 'master' into widget

ddbd56b

jace approved these changes Jun 21, 2018

View reviewed changes

jace mentioned this pull request Jun 21, 2018

baseframe.html.jinja2 should honour a baseframe_render variable hasgeek/baseframe#193

Open

Merge branch 'master' into widget

6819dff

vidya-ram merged commit 3724393 into master Jun 21, 2018

vidya-ram deleted the widget branch June 21, 2018 12:18

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add support to embed hasjob iframe on any third party website #455

Add support to embed hasjob iframe on any third party website #455

vidya-ram commented Jun 13, 2018 •

edited

Loading

jace Jun 14, 2018

vidya-ram Jun 15, 2018 •

edited

Loading

jace Jun 14, 2018

vidya-ram Jun 15, 2018

jace Jun 14, 2018

vidya-ram Jun 15, 2018

jace Jun 14, 2018

jace Jun 14, 2018

vidya-ram Jun 15, 2018

jace Jun 14, 2018

vidya-ram Jun 15, 2018

jace Jun 15, 2018

jace Jun 15, 2018

vidya-ram Jun 18, 2018 •

edited

Loading

jace Jun 21, 2018

jace Jun 15, 2018

vidya-ram Jun 15, 2018

vidya-ram Jun 15, 2018

jace Jun 21, 2018

jace Jun 21, 2018

jace Jun 21, 2018

		@@ -0,0 +1,24 @@
		(function() {
		var containerDiv = document.getElementById('hasjob');



		@app.route('/embed.js', methods=['GET'], subdomain='<subdomain>')
		@app.route('/embed.js', methods=['GET'])

Add support to embed hasjob iframe on any third party website #455

Add support to embed hasjob iframe on any third party website #455

Conversation

vidya-ram commented Jun 13, 2018 • edited Loading

Choose a reason for hiding this comment

vidya-ram Jun 15, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

vidya-ram Jun 18, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

vidya-ram commented Jun 13, 2018 •

edited

Loading

vidya-ram Jun 15, 2018 •

edited

Loading

vidya-ram Jun 18, 2018 •

edited

Loading