- Enh: Support [data-contentcontainer-guid] e.g. in mentionings

- Enh: Refactored Js as HumHub module
- Fix: Force close on pjax load

assets/Assets.php

@@ -7,20 +7,36 @@
 
 namespace humhub\modules\popovervcard\assets;
 
+use humhub\modules\ui\view\components\View;
+use yii\helpers\Url;
 use yii\web\AssetBundle;
 
 class Assets extends AssetBundle
 {
 
     public $publishOptions = [
-        'forceCopy' => false
+        'forceCopy' => true
     ];
     public $sourcePath = '@popover-vcard/resources';
     public $css = [
-        'popover.css'
+        'humhub.vcard.popover.css'
     ];
     public $js = [
-        'popover.js'
+        'humhub.vcard.popover.js'
     ];
 
+    /**
+     * @param View $view
+     * @return void|AssetBundle
+     */
+    public static function register($view)
+    {
+        parent::register($view);
+
+        $view->registerJsConfig('vcard.popover', [
+            'delay' => 500,
+            'loadUrl' =>  Url::to(['/popover-vcard/index/load'])
+        ]);
+    }
+
 }

controllers/IndexController.php

@@ -28,11 +28,25 @@ public function actionIndex()
         return $this->render('index');
     }
 
+    /**
+     * @return string|HttpException
+     * @throws HttpException
+     * @throws \yii\db\IntegrityException
+     */
     public function actionLoad()
     {
-        $contentContainerId = Yii::$app->request->post('contentContainerId');
+        $contentContainerId = Yii::$app->request->post('id');
+        $contentContainerGuid = Yii::$app->request->post('guid');
+
+
+        if($contentContainerId !== null) {
+            $contentContainer = ContentContainer::findOne(['id' => $contentContainerId]);
+        } elseif ($contentContainerGuid !== null) {
+            $contentContainer = ContentContainer::findOne(['guid' => $contentContainerGuid]);
+        } else {
+            throw new HttpException(400, 'No container provided');
+        }
 
-        $contentContainer = ContentContainer::findOne(['id' => $contentContainerId]);
         if ($contentContainer === null) {
             return new HttpException(404, 'Could not find container!');
         }

docs/CHANGELOG.md

@@ -1,6 +1,12 @@
 Changelog
 =========
 
+1.0.3  (October 17, 2019)
+-----------------------
+- Enh: Support `[data-contentcontainer-guid]` e.g. in mentionings
+- Enh: Refactored Js as HumHub module
+- Fix: Force close on pjax load
+
 1.0.2  (October 16, 2019)
 -----------------------
 - Fix #1: Vcard Popover css breaks tour css

module.json

@@ -5,7 +5,7 @@
   "keywords": [
     ""
   ],
-  "version": "1.0.2",
+  "version": "1.0.3",
   "humhub": {
     "minVersion": "1.3.0"
   },

resources/humhub.vcard.popover.js

@@ -0,0 +1,111 @@
+/*
+ * @link https://www.humhub.org/
+ * @copyright Copyright (c) 2018 HumHub GmbH & Co. KG
+ * @license https://www.humhub.com/licences
+ */
+
+
+humhub.module('vcard.popover', function (module, require, $) {
+
+    var additions = require('ui.additions');
+    var client = require('client');
+
+    var vCardDelayTimer;
+
+
+    module.initOnPjaxLoad = true;
+
+    function init(pjax) {
+        $('.vcardPopover').remove();
+
+        if (pjax) {
+            return;
+        }
+
+        $(document).on('mouseenter', '[data-contentcontainer-id],[data-contentcontainer-guid]', function () {
+            var trigger = this;
+            var selector = '#' + getVCardId(trigger);
+            clearTimeout(vCardDelayTimer);
+            vCardDelayTimer = setTimeout(function () {
+                if (!$(selector).length) {
+                    createPopover(trigger)
+                } else {
+                    showPopOver(trigger, $(selector).html());
+                }
+            }, module.config.delay);
+        });
+
+        $(document).on('mouseleave', '[data-contentcontainer-id],[data-contentcontainer-guid]', function () {
+            clearTimeout(vCardDelayTimer);
+
+            var $this = $(this);
+            setTimeout(function () {
+                if (!$('.popover:hover').length) {
+                    $this.popover('hide');
+                }
+            }, 300);
+        });
+    }
+
+    function getVCardId(trigger) {
+        var contentContainerId = $(trigger).data('contentcontainer-id');
+        var contentContainerGuid = $(trigger).data('contentcontainer-guid');
+        return 'vCard' + (contentContainerId || contentContainerGuid);
+    }
+
+    function createPopover(trigger) {
+        var $trigger = $(trigger);
+        var vCardId = getVCardId(trigger);
+        var contentContainerId = $trigger.data('contentcontainer-id');
+        var contentContainerGuid = $trigger.data('contentcontainer-guid');
+
+
+        $("body").append('<div id="' + vCardId + '" class="hidden"></div>');
+
+        var data = {
+            guid: contentContainerGuid,
+            id: contentContainerId
+        };
+
+        client.post(module.config.loadUrl, {data: data}).then(function (response) {
+            if (response.html) {
+                $("#" + vCardId).html(response.html);
+                showPopOver(trigger, response.html);
+            }
+        }).catch(function (e) {
+            module.log.error(e);
+        });
+    }
+
+    function showPopOver(trigger, content) {
+        var $trigger = $(trigger);
+        var $content = $(content);
+
+        var $popover = $trigger.popover({
+            trigger: 'manual',
+            html: true,
+            placement: 'auto left',
+            container: 'body',
+            content: content,
+            animation: true
+        }).data('bs.popover').tip().addClass('vcardPopover');
+
+        $trigger.popover('show');
+
+        // Popover seems to get rid of inline styles, so we replace the content
+        $popover.find('.vcardContent').replaceWith($content.find('.vcardContent'));
+
+        // Make sure the image itself is not a popover target
+        $popover.find('[data-contentcontainer-id]').removeAttr('data-contentcontainer-id');
+
+        $('.vcardPopover').one('mouseleave', function () {
+            $trigger.popover('hide');
+        });
+    }
+
+    module.export({
+        init: init
+    });
+
+});
+

widgets/VCardLoader.php

@@ -21,10 +21,6 @@ class VCardLoader extends Widget
     public function run() {
 
         Assets::register($this->view);
-
-        $this->view->registerJsVar('vCardDelay', 500);
-        $this->view->registerJsVar('vCardLoadUrl', Url::to(['/popover-vcard/index/load']));
-
         return;
     }