Use WidgetManager for the cms reaction

modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/ReactionSelection/Default.cshtml

@@ -1,6 +1,6 @@
 @model Volo.CmsKit.Web.Pages.CmsKit.Shared.Components.ReactionSelection.ReactionSelectionViewModel
 <span class="cms-reaction-selection" data-entity-type="@Model.EntityType" data-entity-id="@Model.EntityId">
-    <div class="cms-reaction-selection-available-reactions">
+    <div>
         Pick a reaction:
         @foreach (var reaction in Model.Reactions)
         {
@@ -9,7 +9,7 @@
             </span>
         }
     </div>
-    <div class="cms-reaction-selection-reactions">
+    <div>
         Current reactions:
         @foreach (var reaction in Model.Reactions.Where(r => r.Count > 0))
         {

modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/ReactionSelection/ReactionSelectionViewComponent.cs

@@ -8,6 +8,7 @@ using Volo.CmsKit.Reactions;
 
 namespace Volo.CmsKit.Web.Pages.CmsKit.Shared.Components.ReactionSelection
 {
+    [ViewComponent(Name = "CmsReactionSelection")]
     [Widget(
         ScriptTypes = new[] {typeof(ReactionSelectionScriptBundleContributor)},
         StyleTypes = new[] {typeof(ReactionSelectionStyleBundleContributor)}

modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/ReactionSelection/default.js

@@ -1,25 +1,49 @@
-(function () {
+(function ($) {
     $(document).ready(function () {
 
-        function initReactionSelection() {
-            var $wrapper = $(this);
-            var $availableReactions = $wrapper.find('.cms-reaction-selection-available-reactions');
-
-            $wrapper.find('.cms-reaction-icon').each(function () {
-                var $icon = $(this);
-                $icon.click(function () {
-                    var methodName = $icon.hasClass('cms-reaction-icon-selected') ? 'delete' : 'create';
-                    volo.cmsKit.reactions.reactionPublic[methodName]({
-                        entityType: $wrapper.attr('data-entity-type'),
-                        entityId: $wrapper.attr('data-entity-id'),
-                        reactionName: $icon.attr('data-name')
-                    }).then(function () {
-                        location.reload(); //TODO: JUST TESTING !!!!!!!!
+        abp.widgets.CmsReactionSelection= function ($widget) {
+
+            var getFilters = function () {
+                return {
+
+                };
+            }
+
+            var refresh = function (filters) {
+
+            };
+
+            var init = function (filters) {
+                var $wrapper = $widget.find('.cms-reaction-selection');
+                $widget.find('.cms-reaction-icon').each(function () {
+                    var $icon = $(this);
+                    $icon.click(function () {
+                        var methodName = $icon.hasClass('cms-reaction-icon-selected') ? 'delete' : 'create';
+                        volo.cmsKit.reactions.reactionPublic[methodName]({
+                            entityType: $wrapper.attr('data-entity-type'),
+                            entityId: $wrapper.attr('data-entity-id'),
+                            reactionName: $icon.attr('data-name')
+                        }).then(function () {
+                            location.reload(); //TODO: JUST TESTING !!!!!!!!
+                        });
                     });
                 });
+            };
+
+            return {
+                getFilters: getFilters,
+                init: init,
+                refresh: refresh
+            };
+        };
+
+        $('.abp-widget-wrapper[data-widget-name="CmsReactionSelection"]').each(function(){
+            var $widget = $(this);
+            var widgetManager = new abp.WidgetManager({
+                wrapper: $widget.parent(), //TODO: Change to $widget once WidgetManager supports it!
             });
-        }
 
-        $('.cms-reaction-selection').each(initReactionSelection);
+            widgetManager.init();
+        });
     });
-})();
+})(jQuery);