Merge pull request #6039 from gitcoinco/stable

stable -> master

Author: thelostone-mc

app/app/context.py

@@ -153,6 +153,7 @@ def preprocess(request):
         'footer_msg': footer_msg,
         'INFURA_V3_PROJECT_ID': settings.INFURA_V3_PROJECT_ID,
         'email_key': email_key,
+        'giphy_key': settings.GIPHY_KEY,
         'orgs': profile.organizations if profile else [],
         'profile_id': profile.id if profile else '',
         'hotjar': settings.HOTJAR_CONFIG,

app/app/local.env

@@ -36,3 +36,4 @@ CONTACT_EMAIL=
 
 FEE_ADDRESS=
 FEE_ADDRESS_PRIVATE_KEY=
+GIPHY_KEY=

app/app/settings.py

@@ -49,6 +49,8 @@
 SECRET_KEY = env('SECRET_KEY', default='YOUR-SupEr-SecRet-KeY')
 ADMINS = (env.tuple('ADMINS', default=('TODO', 'todo@todo.net')))
 BASE_DIR = root()
+#social integrations
+GIPHY_KEY = env('GIPHY_KEY', default='LtaY19ToaBSckiLU4QjW0kV9nIP75NFy')
 
 # Ratelimit
 RATELIMIT_ENABLE = env.bool('RATELIMIT_ENABLE', default=True)
@@ -569,7 +571,6 @@
 SOCIAL_AUTH_GH_CUSTOM_SECRET = GITHUB_CLIENT_SECRET
 SOCIAL_AUTH_GH_CUSTOM_SCOPE = ['read:org', 'public_repo']
 
-
 SOCIAL_AUTH_PIPELINE = (
     'social_core.pipeline.social_auth.social_details', 'social_core.pipeline.social_auth.social_uid',
     'social_core.pipeline.social_auth.auth_allowed', 'social_core.pipeline.social_auth.social_user',

app/assets/v2/css/town_square.css

@@ -383,8 +383,20 @@ a.offer_container.animate:hover .prize-gift::after {
 .offer_container.secret.empty{
   display: none;
 }
+.gif-grid {
+  display: flex;
+  width: 300px;
+  height: 450px;
+  flex-wrap: wrap;
+  overflow: scroll;
+  overflow-x: hidden;
 
-
+}
+.pick-gif {
+  max-width: 300px;
+  max-height: 250px;
+  flex-grow: 1;
+}
 div.back0,
 body.back0 {
   background: url('/static/v2/images/quests/backs/0.gif') repeat;

app/assets/v2/js/lib/yall.min.js

@@ -39,13 +39,11 @@ joinTribe();
 const joinTribeDirect = (elem) => {
 
   if (!document.contxt.github_handle) {
-    //elem.preventDefault();
     _alert('Please login first.', 'error');
     return;
   }
 
   $(elem).attr('disabled', true);
-  //elem.preventDefault();
   const tribe = $(elem).data('jointribe');
   const url = `/tribe/${tribe}/join/`;
   const sendJoin = fetchData (url, 'POST', {}, {'X-CSRFToken': $("input[name='csrfmiddlewaretoken']").val()});
@@ -57,7 +55,7 @@ const joinTribeDirect = (elem) => {
   }).fail(function(error) {
     $(elem).attr('disabled', false);
   });
-}
+};
 
 
 const tribeLeader = () => {

app/assets/v2/js/pages/join_tribe.js

@@ -128,4 +128,42 @@ $(document).ready(function() {
   $('.announce .remove').click(function() {
     $(this).parents('.announce').remove();
   });
+
+  function onIntersection(imageEntites, observer) {
+    imageEntites.forEach(image => {
+      if (image.isIntersecting) {
+        observer.unobserve(image.target);
+        image.target.src = image.target.dataset.src;
+        image.target.onload = () => image.target.classList.add('loaded');
+      }
+    });
+  }
+  const interactSettings = {
+    root: document.querySelector('.loader-container'),
+    rootMargin: '0px 200px 200px 200px',
+    threshold: 0.01
+  };
+
+  function loadImages() {
+    if ('IntersectionObserver' in window) {
+      let images = [...document.querySelectorAll("img[loading='lazy']")];
+      let observer = new IntersectionObserver(onIntersection, interactSettings);
+
+      images.forEach(img => {
+        img.setAttribute('loading', '');
+        observer.observe(img);
+      });
+    } else {
+      const images = document.querySelectorAll("img[loading='lazy']");
+
+      images.forEach(img => {
+        img.src = img.dataset.src;
+        img.setAttribute('loading', '');
+      });
+    }
+
+    window.setTimeout(loadImages, 700);
+  }
+
+  loadImages();
 }(jQuery));

app/assets/v2/js/pages/townsquare.js

@@ -1,9 +1,45 @@
 const url_re = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,10}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/;
 const youtube_re = /(?:https?:\/\/|\/\/)?(?:www\.|m\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))([\w-]{11})(?![\w-])/;
+const giphy_re = /(?:https?:\/\/)?(?:media0\.)?(?:giphy\.com\/media\/)/;
 
 $(document).ready(function() {
-  embedded_resource = '';
+  var embedded_resource = '';
+  const GIPHY_API_KEY = document.contxt.giphy_key;
+  
   let button = document.querySelector('#btn_post');
+  
+  function selectGif(e) {
+    embedded_resource = $(e.target).data('src');
+    $('#preview-img').attr('src', embedded_resource);
+    $('#preview').show();
+    $('#thumbnail').hide();
+  }
+  
+  
+  function injectGiphy(query) {
+    const endpoint = 'https://api.giphy.com/v1/gifs/search?limit=13&api_key=' + GIPHY_API_KEY + '&offset=0&rating=G&lang=en&q=' + query;
+    const result = fetchData(endpoint);
+
+    $.when(result).then(function(response) {
+      $('.pick-gif').remove();
+
+      for (let i = 0; i < response.data.length; i++) {
+        let item = response.data[i];
+        let downsize = item.images.original.webp;
+        let preview = item.images.fixed_width_downsampled.webp;
+
+        $('.gif-grid').append('<img class="pick-gif" src="' + preview + '" data-src="' + downsize + '" alt="' + item.slug + '">');
+      }
+      $('.pick-gif').on('click', selectGif);
+    });
+  }
+  
+  $('#search-gif').on('input', function(e) {
+    e.preventDefault();
+    const query = e.target.value;
+    
+    injectGiphy(query);
+  });
 
   if (button) {
     button.addEventListener(
@@ -31,6 +67,11 @@ $(document).ready(function() {
     const youtube = e.target.value.match(youtube_re);
     const no_lb = e.originalEvent.inputType !== 'insertLineBreak';
 
+    // GIF has priority, no other display info allowed
+    if (typeof embedded_resource === 'string' && embedded_resource.match(giphy_re)) {
+      return;
+    }
+
     if (youtube !== null && youtube[1].length === 11 && no_lb) {
       let videoId = youtube[1];
 
@@ -46,6 +87,7 @@ $(document).ready(function() {
             $('#thumbnail-img').attr('src', 'https://img.youtube.com/vi/' + videoId + '/default.jpg');
             embedded_resource = youtube[0];
             $('#thumbnail').show();
+            $('#preview').hide();
           } else {
             $('#thumbnail').hide();
             $('#thumbnail-desc').text('');
@@ -75,6 +117,7 @@ $(document).ready(function() {
 
           embedded_resource = url;
           $('#thumbnail').show();
+          $('#preview').hide();
         } else {
           $('#thumbnail').hide();
           $('#thumbnail-desc').text('');
@@ -192,18 +235,25 @@ $(document).ready(function() {
       const image = $('#thumbnail-img').attr('src');
       const youtube = embedded_resource.match(youtube_re);
 
-      if (youtube !== null && youtube[1].length === 11) {
+      if (embedded_resource.match(giphy_re)) {
+        data.append('resource', 'gif');
+        data.append('resourceProvider', 'giphy');
+        data.append('resourceId', embedded_resource);
+      } else if (youtube !== null && youtube[1].length === 11) {
         data.append('resource', 'video');
         data.append('resourceProvider', 'youtube');
         data.append('resourceId', youtube[1]);
+        data.append('title', title);
+        data.append('description', description);
+        data.append('image', image);
       } else {
         data.append('resource', 'content');
         data.append('resourceProvider', link);
         data.append('resourceId', embedded_resource);
+        data.append('title', title);
+        data.append('description', description);
+        data.append('image', image);
       }
-      data.append('title', title);
-      data.append('description', description);
-      data.append('image', image);
     }
 
     fetch('/api/v0.1/activity', {
@@ -216,7 +266,9 @@ $(document).ready(function() {
           $('#thumbnail-title').text('');
           $('#thumbnail-provider').text('');
           $('#thumbnail-desc').text('');
-          $('#thumbnail-img').attr('');
+          $('#thumbnail-img').attr('src', '');
+          $('#preview').hide();
+          $('#preview-img').attr('src', '');
           embedded_resource = '';
 
           _alert(
@@ -243,6 +295,8 @@ $(document).ready(function() {
       })
       .catch(err => console.log('Error ', err));
   }
+  
+  injectGiphy('latest');
 });
 window.addEventListener('DOMContentLoaded', function() {
   var button = document.querySelector('#emoji-button');

app/assets/v2/js/status.js

@@ -166,17 +166,7 @@ def get_created_at(self, instance):
         return instance.created.isoformat()
 
     def get_url(self, instance):
-        action = self.get_action(instance)
-        if action in ('bounty', ):
-            return instance.bounty.get_absolute_url()
-
-        if action in ('kudos', ):
-            return instance.kudos.kudos_token.get_absolute_url()
-
-        if action in ('profile', ):
-            return instance.profile.absolute_url
-
-        return ''
+        return instance.action_url
 
     def get_action(self, instance):
         action = ''

app/dashboard/export.py

@@ -29,6 +29,22 @@
       </button>
     </div>
   </div>
+  <div class="btn-group-toggle text-center text-md-left" style="margin-top: 8px; margin-bottom: 8px">
+    <div class="btn-group" data-toggle="actions">
+      <button class="btn btn-radio font-smaller-4 dropdown-toggle" data-toggle="dropdown" id="btn_gif" aria-haspopup="true" aria-expanded="false">
+        <i class="fas fa-gift mr-2"></i> GIF
+      </button>
+      <div class="dropdown-menu">
+        <form class="px-4 py-3">
+          <div class="form-group">
+            <label for="search-gif">Search GIF</label>
+            <input type="text" class="form-control" id="search-gif" placeholder="Search">
+          </div>
+        </form>
+        <div id="list-gif" class="gif-grid"></div>
+      </div>
+    </div>
+  </div>
   <div id="thumbnail" class="mt-1 mb-2" style="display: none; top: initial; left: initial; background-color: #FAFAFA">
     <div class="row" style="display: flex; justify-content: center; align-items: center; ">
       <div class="col ml-1 col-sm-3 col-md-2 text-center">
@@ -41,5 +57,10 @@
       </div>
     </div>
   </div>
+  <div id="preview" class="mt-1 mb-2" style="display: none; top: initial; left: initial;">
+    <div class="row ml-2" style=" ">
+        <img id="preview-img" style="max-width: 80%; max-height: 350px;" src="">
+    </div>
+  </div>
 </div>
 <input type="hidden" name="what" value="{{what}}:{{whatid}}">