From 7dca92a26c6f03bc567b0fea1fdd9f14df2b9e95 Mon Sep 17 00:00:00 2001
From: ebremner <ebremner@uwaterloo.ca>
Date: Wed, 25 Mar 2020 22:09:57 -0400
Subject: [PATCH] ISTWCMS-3661: adding styling for facebook

---
 .../04-components/facebook/_facebook.scss     |  9 ++++++++
 .../04-components/facebook/facebook.js        | 23 +++++++++++++++++++
 .../04-components/facebook/facebook.twig      |  6 +++++
 .../04-components/facebook/facebook.yml       |  0
 4 files changed, 38 insertions(+)
 create mode 100644 source/_patterns/04-components/facebook/_facebook.scss
 create mode 100644 source/_patterns/04-components/facebook/facebook.js
 create mode 100644 source/_patterns/04-components/facebook/facebook.twig
 create mode 100644 source/_patterns/04-components/facebook/facebook.yml

diff --git a/source/_patterns/04-components/facebook/_facebook.scss b/source/_patterns/04-components/facebook/_facebook.scss
new file mode 100644
index 00000000..6abbf900
--- /dev/null
+++ b/source/_patterns/04-components/facebook/_facebook.scss
@@ -0,0 +1,9 @@
+.uw-facebook {
+  width: 100%;
+
+  &__wrapper {
+    margin-left: auto;
+    margin-right: auto;
+    text-align: center;
+  }
+}
diff --git a/source/_patterns/04-components/facebook/facebook.js b/source/_patterns/04-components/facebook/facebook.js
new file mode 100644
index 00000000..4f717afe
--- /dev/null
+++ b/source/_patterns/04-components/facebook/facebook.js
@@ -0,0 +1,23 @@
+(function ($, Drupal) {
+  'use strict';
+
+  // The styling for this mobile menu is located in source/_patterns/04-components/menus/menu--main/.
+
+  Drupal.behaviors.facebook = {
+    attach(context, settings) {
+      $('.uw-facebook__data').each(function () {
+
+        var fbwidth = $(this).parent().width();
+
+        if (fbwidth == 0) {
+          fbwidth = 239;
+        }
+
+        var fburl = encodeURIComponent('/' + $(this).data('username'));
+
+        $(this).before('<iframe src="https://www.facebook.com/plugins/likebox.php?href=' + fburl + '&amp;width=' + fbwidth + '&amp;height=350&amp;colorscheme=light&amp;show_faces=false&amp;border_color&amp;stream=true&amp;header=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; max-width: 500px;width:' + fbwidth + 'px; height:350px;" allowTransparency="true"></iframe>');
+        $(this).remove();
+      });
+    },
+  };
+})(jQuery, Drupal);
diff --git a/source/_patterns/04-components/facebook/facebook.twig b/source/_patterns/04-components/facebook/facebook.twig
new file mode 100644
index 00000000..74c2957c
--- /dev/null
+++ b/source/_patterns/04-components/facebook/facebook.twig
@@ -0,0 +1,6 @@
+<div class="uw-facebook">
+  <div class="uw-facebook__wrapper">
+    <div class="uw-facebook__data" data-username="{{ username }}">
+    </div>
+  </div>
+</div>
diff --git a/source/_patterns/04-components/facebook/facebook.yml b/source/_patterns/04-components/facebook/facebook.yml
new file mode 100644
index 00000000..e69de29b
-- 
GitLab