Skip to Content

Changes for page Message Sender Macro

Last modified by Ludovic Dubost on 2024/07/22 15:51
From version 10.1
edited by Ludovic Dubost
on 2020/12/03 18:41
Change comment: Install extension [org.xwiki.platform:xwiki-platform-messagestream-ui/12.8]
To version 6.1
edited by Ludovic Dubost
on 2018/11/30 15:24
Change comment: Migrated property [async_enabled] from class [XWiki.WikiMacroClass]

Summary

Details

XWiki.JavaScriptExtension[0]
Code
... ... @@ -1,44 +1,78 @@
1 +#set ($userSuggestScope = 'local')
2 +#if ($services.wiki.user && $services.wiki.user.userScope != "LOCAL_ONLY")
3 + #set ($userSuggestScope = 'global')
4 +#end
1 1  var XWiki = (function (XWiki) {
2 2  // Start XWiki augmentation.
7 +/**
8 + * Extends the UserPicker in order to display the selected user/group inline after the target text input.
9 + */
10 +var CustomUserPicker = Class.create(XWiki.widgets.UserPicker, {
11 + // @Override
12 + _createSelectionManager: function($super, options) {
13 + var selectionManager = $super(Object.extend(options, {
14 + listInsertionPosition : 'after',
15 + acceptFreeText : false
16 + }));
17 + // Overwrite the way the selected item is displayed.
18 + selectionManager.displayItem = function(suggestion) {
19 + var targetInfo = new Element('span').update(suggestion.info).insert(this.createDeleteTool());
20 + var targetClass = this.suggest.sources[0].script.indexOf('uorg=group') > 0 ? 'target-group' : 'target-user';
21 + return new Element('li', {'class': targetClass}).insert(targetInfo).insert(this.createItemInput(suggestion));
22 + }.bind(selectionManager);
23 + return selectionManager;
24 + }
25 +});
26 +
3 3  XWiki.MessageStream = Class.create({
4 - initialize : function(container) {
5 - container = container || $(document.body);
6 - this.prepareForms(container);
7 - this.enhanceSelect(container);
28 + targetsWithName : ['user', 'group'],
29 + suggestParameters : {
30 + user : {
31 + script: '$doc.getURL("get", "xpage=uorgsuggest&uorg=user&wiki=${userSuggestScope}")&',
32 + noresults: "$escapetool.javascript($services.localization.render('core.widgets.userPicker.noResults'))"
33 + },
34 + group : {
35 + script: "$doc.getURL('get', 'xpage=uorgsuggest&uorg=group')&",
36 + noresults: "$escapetool.javascript($services.localization.render('core.widgets.groupPicker.noResults'))"
37 + }
8 8   },
39 + initialize : function() {
40 + this.prepareForms();
41 + this.enhanceSelect();
42 + },
9 9   prepareTargetInput : function(event, element) {
10 10   var targetType = element.options[element.selectedIndex].value;
11 11   element.className = targetType;
12 - var messageStream = element.up('.messagestream');
13 - var targetInputContainer = messageStream.down('.message-target-' + targetType);
14 - if (!targetInputContainer) {
15 - targetInputContainer = messageStream.down('.message-target-default');
16 - }
17 - messageStream.select('.message-target').forEach(function(messageTargetContainer) {
18 - var fields = messageTargetContainer.select('input, select, textarea');
19 - if (messageTargetContainer === targetInputContainer) {
20 - messageTargetContainer.removeClassName('hidden');
21 - fields.forEach(function(field) {
22 - field.enable();
23 - field.hasClassName('selectized') && field.selectize.enable();
24 - });
25 - } else {
26 - messageTargetContainer.addClassName('hidden');
27 - fields.forEach(function(field) {
28 - field.disable();
29 - field.hasClassName('selectized') && field.selectize.disable();
30 - });
46 + if (!element.__targetNameInput) {return;}
47 + if (this.targetsWithName.indexOf(targetType) < 0) {
48 + element.__targetNameInput.addClassName('hidden');
49 + if (element.__targetNameInput.__x_suggest) {
50 + element.__targetNameInput.__x_suggest.detach();
31 31   }
32 - });
52 + } else {
53 + // Focus the text input so that the place-holder value is cleared if present. Otherwise the user picker will treat
54 + // the place-holder value as if it was typed by the user and will automatically select the corresponding suggestion.
55 + element.__targetNameInput.removeClassName('hidden').activate();
56 + // Defer the creation of the user picker to allow the focus listeners to be called first (in order to clear the
57 + // place-holder value).
58 + this.suggestParameters[targetType] && function() {
59 + new CustomUserPicker(element.__targetNameInput, this.suggestParameters[targetType]);
60 + }.bind(this).defer();
61 + }
33 33   },
34 - enhanceSelect: function (container) {
35 - container.select('.messagestream select[name="visibilityLevel"]').each(function(element) {
63 + enhanceSelect: function () {
64 + $$('.messagestream select[name="visibilityLevel"]').each(function(element) {
65 + element.addClassName(element.options[element.selectedIndex].value);
66 + element.__targetNameInput = element.up('.messagestream').down('input[name="targetName"]');
67 + if (element.__targetNameInput && this.targetsWithName.indexOf(element.options[element.selectedIndex].value) < 0) {
68 + element.__targetNameInput.addClassName('hidden');
69 + }
36 36   element.observe('change', this.prepareTargetInput.bindAsEventListener(this, element));
37 37   this.prepareTargetInput(null, element);
38 38   }.bind(this));
39 39   },
40 - prepareForms: function(container) {
41 - container.select('.messagestream form').each(function(msForm) {
74 + prepareForms: function() {
75 + $$('.messagestream form').each(function(msForm) {
42 42   msForm.action = msForm.action.replace(/xredirect=.*$/, 'xpage=plain')
43 43   msForm.observe('submit', function(event) {
44 44   event.stop();
... ... @@ -94,21 +94,11 @@
94 94   }
95 95  });
96 96  
97 -var init = function (event) {
98 - var elements = (event && event.memo.elements) || [$(document.body)];
99 - elements.forEach(function(container) {
100 - new XWiki.MessageStream(container);
101 - });
102 - return true;
131 +var init = function() {
132 + return new XWiki.MessageStream();
103 103  };
134 +(XWiki.domIsLoaded && init()) || document.observe('xwiki:dom:loaded', init);
104 104  
105 -// Initialize the message sender macro when the page is loaded.
106 -(XWiki.domIsLoaded && init())
107 -|| document.observe('xwiki:dom:loaded', init);
108 -
109 -// Initialize the message sender macro when it is added after the page is loaded.
110 -document.observe('xwiki:dom:updated', init);
111 -
112 112  // End XWiki augmentation.
113 113  return XWiki;
114 114  }(XWiki || {}));
XWiki.StyleSheetExtension[0]
Code
... ... @@ -1,48 +1,29 @@
1 1  #template('colorThemeInit.vm')
2 2  
3 3  .messagestream-tools {
4 - display: flex;
5 5   position: relative;
6 6   margin: .5em 0 1em;
7 7  }
8 -.messagestream select {
9 - width: auto;
7 +.messagestream-tools .accepted-suggestions {
8 + display: inline;
10 10  }
11 -.messagestream .message-target {
12 - flex-grow: 1;
13 - margin-left: .3em;
10 +.messagestream-tools .accepted-suggestions .target-user,
11 +.messagestream-tools .accepted-suggestions .target-group {
12 + background: none no-repeat scroll left center transparent;
13 + display: inline-block;
14 + margin-right: 1em;
15 + padding: 0 1px 0 18px;
14 14  }
15 -
16 -.messagestream .message-content {
17 - padding: .5em 0 .5em 75px;
17 +.messagestream-tools .accepted-suggestions .target-user {
18 + background-image: url("$xwiki.getSkinFile('icons/silk/user.png')");
18 18  }
19 -
20 -.messagestream .activitySnapshot {
21 - height: 30px;
22 - margin: 5px 0 0 -50px;
23 - position: absolute;
20 +.messagestream-tools .accepted-suggestions .target-group {
21 + background-image: url("$xwiki.getSkinFile('icons/silk/group.png')");
24 24  }
25 -
26 -.messagestream .activitySnapshot img {
27 - border-radius: 10px 10px 0 10px;
28 - box-shadow: -1px 1px 1px rgba(128,128,128,0.6);
23 +.messagestream select {
24 + width: auto;
29 29  }
30 -
31 -/* User's avatar */
32 -.messagestream .activitySnapshot .avatar {
33 - border-radius: 4px;
34 - box-shadow: 0 0 2px 1px rgba(128,128,128,0.6);
26 +.messagestream input.targetName {
27 + margin-right: .3em;
28 + width: auto;
35 35  }
36 -
37 -.messagestream .activitySnapshot .activityActionAvatar {
38 - background: $theme.pageContentBackgroundColor;
39 - border-color: $theme.pageContentBackgroundColor;
40 - border-style: solid;
41 - border-width: 4px 1px 1px 3px;
42 - box-sizing: content-box;
43 - bottom: -5px;
44 - height: 16px;
45 - position: absolute;
46 - right: -10px;
47 - width: 16px;
48 -}
XWiki.WikiMacroClass[0]
Macro code
... ... @@ -7,6 +7,8 @@
7 7  #set ($configClass = $xwiki.getDocument($config).getxWikiClass())
8 8  #set ($isMessageStreamActive = $services.messageStream.isActive())
9 9  
10 +#set ($currentUser = $services.model.serialize($xcontext.userReference, 'default'))
11 +
10 10  #set ($activityActionsMap = {
11 11   'publicMessage': 'icons/silk/user_comment.png',
12 12   'personalMessage': 'icons/silk/user_comment.png',
... ... @@ -32,6 +32,9 @@
32 32  ##
33 33  ## Skin Extensions
34 34  ##--------------------------------------------------------------
37 +#set ($discard = $xwiki.jsfx.use('uicomponents/suggest/suggestPicker.js'))
38 +#set ($discard = $xwiki.jsfx.use('uicomponents/widgets/userpicker/userPicker.js'))
39 +#set ($discard = $xwiki.ssx.use('Main.Activity'))
35 35  #set ($discard = $xwiki.ssx.use('Main.MessageSenderMacro'))
36 36  #set ($discard = $xwiki.jsx.use('Main.MessageSenderMacro'))
37 37  {{/velocity}}
... ... @@ -110,11 +110,11 @@
110 110   #set ($actionQueryString = "xredirect=$escapetool.url($xredirect)")
111 111   {{html}}
112 112   ## Wrap the form in a div so that the layout is preserved in inline mode (where the form is stripped by the rendering).
113 - <div class='messagestream xform'>
118 + <div class='messagestream activityUser xform'>
114 114   #if (!$inEditMode)
115 115   <form action="${xwiki.getURL('Main.MessageSenderMacro', 'view', $!{actionQueryString})}" method='post'>
116 116   #end
117 - <div class='message-content'>
122 + <div class='activityContent'>
118 118   #if(!$inEditMode)
119 119   ## CSRF prevention
120 120   <input type="hidden" name="form_token" value="$!{services.csrf.getToken()}" />
... ... @@ -136,13 +136,13 @@
136 136   #if (!$defaultTarget)
137 137   #if ($doc.getObject('XWiki.XWikiGroups'))
138 138   #set ($defaultTarget = 'group')
139 - #set ($targetName = $doc.fullName)
144 + #set ($targetName = $doc.prefixedFullName)
140 140   #elseif ($doc.getObject('XWiki.XWikiUsers'))
141 - #if ($doc.documentReference == $xcontext.userReference)
146 + #if ($doc.prefixedFullName == $currentUser)
142 142   #set ($defaultTarget = 'followers')
143 143   #else
144 144   #set ($defaultTarget = 'user')
145 - #set ($targetName = $doc.fullName)
150 + #set ($targetName = $doc.prefixedFullName)
146 146   #end
147 147   #else
148 148   #set ($defaultTarget = 'everyone')
... ... @@ -155,31 +155,16 @@
155 155   #end
156 156   </select>
157 157   </label>
158 - #set ($suggestPickerParams = {
159 - 'name': 'targetName',
160 - 'title': $services.localization.render('xe.activity.messages.visibility.targetName.tip')
161 - })
162 - #foreach ($target in ['user', 'group'])
163 - #if ($possibleTargets.contains($target))
164 - #set ($notDefaultTarget = $target != $defaultTarget)
165 - <div class="message-target message-target-$target#if ($notDefaultTarget) hidden#end">
166 - #set ($discard = $suggestPickerParams.put('class', 'targetName'))
167 - #set ($suggestPickerParams.disabled = $inEditMode || $notDefaultTarget)
168 - #set ($suggestPickerParams.value = $targetName)
169 - #if ($notDefaultTarget)
170 - #set ($suggestPickerParams.value = '')
171 - #end
172 - #if ($target == 'user')
173 - #userPicker(false, $suggestPickerParams)
174 - #else
175 - #groupPicker(false, $suggestPickerParams)
176 - #end
177 - </div>
178 - #end
163 + <label for="targetName$!{targetNameCounter}">
164 + <span class='hidden'>Name:</span>
165 + <input type="text" name="targetName" id="targetName$!targetNameCounter" class="targetName withTip useTitleAsTip" value="$!targetName" size="15"
166 + title="$services.localization.render('xe.activity.messages.visibility.targetName.tip')" #if ($inEditMode) disabled="disabled"#end/>
167 + </label>
168 + #if (!$targetNameCounter)
169 + #set ($targetNameCounter = 1)
170 + #else
171 + #set ($targetNameCounter = $targetNameCounter + 1)
179 179   #end
180 - <div class="message-target message-target-default">
181 - <input type="hidden" name="targetName" value="$!escapetool.xml($targetName)" class="targetName" />
182 - </div>
183 183   </div>
184 184   <div class='messagestream-buttons'>
185 185   <span class='butonwrapper'><input type='submit' value="$services.localization.render('xe.activity.messages.submit')" class='button'#if($inEditMode) disabled='disabled'#end/></span>