Commits

Benjamin Wong committed a284761

AUI-1269 adding reveal text soy template and option for replace text and replace selector

  • Participants
  • Parent commits 5f56691

Comments (0)

Files changed (4)

File auiplugin-tests/src/main/resources/test-pages/experimental/expander/index.soy

                     {param content: 'This should be in content'/}
                 {/call}
 
+
+                <h3> Normal Expander with replace text </h3>
+                {call aui.expander.trigger}
+                    {param id: 'replace-text-trigger'/}
+                    {param contentId: 'expander-with-replace-text-content'/}
+                    {param tag: 'a'/}
+                    {param content: 'Read More'/}
+                    {param replaceText: 'Read Less'/}
+                {/call}
+
+                {call aui.expander.content}
+                    {param id: 'expander-with-replace-text-content'/}
+                    {param content: 'This should be in content'/}
+                {/call}
+
                 <h3> Initially Expanded Expander </h3>
                 {call aui.expander.trigger}
                     {param id: 'initially-expanded-expander-trigger'/}
                     {param id: 'min-height-expander-trigger'/}
                     {param contentId: 'min-height-expander-content'/}
                     {param tag: 'button'/}
-                    {param content: 'Read More'/}
+                    {param content: 'Read all the things'/}
                     {param extraClasses: 'aui-button aui-button-subtle'/}
+                    {param replaceText: 'Hide most of the things'/}
                 {/call}
 
                 {call aui.expander.content}
                 {/literal}
                 <h3> ADG Reveal Text Pattern </h3>
 
-
-                {call aui.expander.content}
-                    {param id: 'reveal-text-content'/}
-                    {param content} '
+                {call aui.expander.revealText}
+                    {param triggerId: 'reveal-text-trigger'/}
+                    {param contentId: 'reveal-text-content'/}
+                    {param contentContent} '
                         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur lobortis felis eget pharetra. Vestibulum placerat, mi vitae ultricies dignissim, mi est blandit ligula, at cursus turpis neque non risus. Ut mollis placerat diam, in semper felis varius non. Sed molestie vulputate dictum. Vestibulum sagittis sollicitudin odio, auctor iaculis dui ornare et. Donec porttitor odio vulputate nunc faucibus ut porta nisi hendrerit. Morbi bibendum gravida libero vel commodo. Sed sit amet velit diam, quis condimentum mi. In mollis tortor a neque blandit egestas. Sed eget velit dolor, vel molestie lorem. Aliquam convallis convallis tempus. Maecenas mattis molestie rutrum.'
-                        {call aui.expander.trigger}
-                                {param id: 'reveal-text-trigger'/}
-                                {param contentId: 'reveal-text-content'/}
-                                {param tag: 'a'/}
-                                {param content: 'Read More'/}
-                                {param type: 'revealText'/}
-                        {/call}
-                    {/param}
+                    {/param}     
                 {/call}
                 {literal}
                 <style type="text/css">

File auiplugin/src/main/resources/experimental/css/atlassian/aui-expander.css

 a.aui-expander-trigger.aui-expander-reveal-text {
     background: #fff;
     bottom: 0;
-    box-shadow: -10px 0 5px #fff;
+/*    box-shadow: -10px 0 5px #fff;*/
     position: absolute;
     right: 0;
     text-decoration: none;
+    padding-left: 10px;
 }
 
 .aui-expander-trigger.aui-expander-reveal-text:hover > span {
 .aui-expander-content[aria-expanded="true"] .aui-expander-trigger.aui-expander-reveal-text:before {
     display: none;  /* Hide the ellipsis when expanded */
 }
+
+.aui-expander-content[aria-expanded="true"] .aui-expander-trigger.aui-expander-reveal-text {
+    position: relative;    
+}

File auiplugin/src/main/resources/experimental/js/atlassian/aui-expander.js

             properties.$shortContent = properties.triggerIsParent ? properties.$trigger.find(".aui-expander-short-content") : null;
             properties.height = properties.$content.css("min-height");
             properties.isCollapsible = properties.$trigger.data("collapsible") != false;
+            properties.replaceText = properties.$trigger.attr("data-replace-text"); //can't use .data here because it doesn't update after the first call
+            properties.replaceSelector = properties.$trigger.data("replace-selector");
 
             return properties;
         },
+        replaceText = function(properties){
+             if(properties.replaceText){
+                var $replaceElement = properties.replaceSelector ? 
+                                        properties.$trigger.find(properties.replaceSelector) :
+                                        properties.$trigger;
+                
+                properties.$trigger.attr("data-replace-text", $replaceElement.text());
+                $replaceElement.text(properties.replaceText);
+            }    
+        }
         //events that the expander listens to
         EXPANDER_EVENTS = {
             "aui-expander-invoke": function(event){
                 var $trigger = $(event.currentTarget);
                 var $content = $document.find("#" + $trigger.attr("aria-controls"));
                 var isCollapsible = $trigger.data("collapsible") != false;
+
                 //determine if content should be expanded or collapsed
                 if($content.attr("aria-expanded")=="true" && isCollapsible){
-                     $trigger.trigger("aui-expander-collapse");
+                    $trigger.trigger("aui-expander-collapse");
                 } else {
                     $trigger.trigger("aui-expander-expand");
                 }
                     properties.$content.attr("aria-hidden", "false");                       
                 }   
                 
+                //handle replace text
+                replaceText(properties);
+
                 //if the trigger is the parent also hide the short-content (default)
                 if(properties.triggerIsParent){
                     properties.$shortContent.hide();
                 } else {
                     properties.$content.attr("aria-hidden", "true");                        
                 }
+                 //handle replace text
+                replaceText(properties);
 
                 //collapse the expander
                 properties.$content.attr("aria-expanded", "false");

File auiplugin/src/main/resources/soy/atlassian/expander.soy

  * @param id the id to put on the trigger
  * @param tag the html tag of the trigger
  * @param contentId the content that this trigger controls
+ * @param? replaceText Text that will be replace the initial trigger text when it is invoked.
+ * @param? replaceSelector Text that will be replace the initial trigger text when it is invoked.
  * @param? extraClasses Standard option.
  * @param? extraAttributes Standard option.
  * @param? content the contents of the trigger
  * @param? collapsible whether or not the trigger will collapse the expander after it is expanded.
- * @param? type type of trigger
  **/
 {template .trigger}
     <{$tag ? $tag : 'div'}
         {if $id}{sp}id="{$id}"{/if}
+        {if $replaceText}{sp}data-replace-text="{$replaceText}"{/if}
+        {if $replaceSelector}{sp}data-replace-selector="{$replaceSelector}"{/if}
         {sp}class="aui-expander-trigger
         {call aui.renderExtraClasses data="all" /}
-        {if $type == 'revealText'}{sp}aui-expander-reveal-text{/if}
         "
         {call aui.renderExtraAttributes data="all" /}
         {sp}aria-controls="{$contentId}"
         {if $collapsible} data-collapsible="{$collapsible}"{/if}
     >   
-    {if $type == 'revealText'}
-        {if $content}<span>{$content|noAutoescape}</span> {/if}
-    {else}
-        {if $content}{$content|noAutoescape}{/if}
-    {/if}       
+        {if $content}{$content|noAutoescape}{/if}   
     </{$tag ? $tag : 'div'}>
+{/template}
 
+/**
+ * template for creating teh reveal text pattern
+ * @param triggerId the id to put on the trigger
+ * @param contentId the content that this trigger controls
+ * @param contentContent the content of the contents, can be html
+ * @param contentExtraClasses Standard option.
+ * @param contentExtraAttributes Standard option.
+ * @param? triggerExtraClasses Standard option.
+ * @param? triggerExtraAttributes Standard option.
+ **/
+{template .revealText}
+     {call .content}
+        {param id: $contentId/}
+        {param content} 
+            {$contentContent}
+            {call .trigger}
+                    {param id: $triggerId/}
+                    {param contentId: $contentId/}
+                    {param tag: 'a'/}
+                    {param content}
+                        <span class='reveal-text-trigger-text'>Show more</span>
+                    {/param}
+                    {param replaceSelector: '.reveal-text-trigger-text' /}
+                    {param replaceText: 'Show less'/}
+                    {param extraAttributes: $triggerExtraAttributes/}
+                    {param extraClasses}
+                        {if $triggerExtraClasses}{$triggerExtraClasses} {sp}{/if} aui-expander-reveal-text
+                    {/param}          
+            {/call}
+        {/param}
+        {param extraAttributes: $contentExtraAttributes/}
+        {param extraClasses: $contentExtraClasses/}
+    {/call}
 {/template}