Page tree
Skip to end of metadata
Go to start of metadata

Playground and DEMO space

This is a playground and demo space for ConfiForms and ConfiDoc addons developed and supported by Vertuna LLC

Most pages provide a storage format for the demo, so you can use the free add-on from Atlassian Confluence Source Editor to import this configuration into your Confluence and see it in action

Please note, all the examples here are provided without any obligation and may or may not be incomplete or may have bugs, and we provide NO SUPPORT for these examples and demos.


So, this demo shows how you can add a feature to show/hide more text on the field with JavaScript

max 1000 symbols

Showing the contents

Huge textarea field

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
123
Test
dfasdfasdfasdfasdf
56465a4sfd65a4f65a4sf54asf56a4as565a6546
aafdasfdasfdasdfasfdasfdasfda5sfd4a5 5asd4f5a64 54 5asdf4 as5df4a5sd4 asd5f4 asd5f43a5sd14 sa5d f4as5d fa65sdf4a6s5d 4fa6s5d as65 d4as d4f5as65d 4asd fs565as6d asdf
sfsdsdfsdfsdfsdfddddddddddddddddddddddddddddddddddddddddfsdfsdfsfsdfsfsdsdfsdfsdfsdfddddddddddddddddddddddddddddddddddddddddfsdfsdfsfsdfsfsdsdfsdfsdfsdfddddddddddddddddddddddddddddddddddddddddfsdfsdfsfsdfsfsdsdfsdfsdfsdfddddddddddddddddddddddddddddddddddddddddfsdfsdfsfsdfsfsdsdfsdfsdfsdfddddddddddddddddddddddddddddddddddddddddfsdfsdfsfsdfsfsdsdfsdfsdfsdfddddddddddddddddddddddddddddddddddddddddfsdfsdfsfsdf
test text
djkhk.sdjfn
sdfsdfsdfsdfsdf
asd
ddddd
hello good morning.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
123456789012345689012345678901234568901234567890123456890123456789012345689012345678901234568901234567890123456890
55555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555

Storage format

<ac:structured-macro ac:macro-id="d69a709c-8d46-4a80-bc3f-451e22d98df5" ac:name="confiform" ac:schema-version="1">
  <ac:parameter ac:name="formName">myform1</ac:parameter>
  <ac:rich-text-body>
    <ac:structured-macro ac:macro-id="5fb1c0d1-5c36-489d-a94c-2833a50c70e2" ac:name="confiform-entry-register" ac:schema-version="1">
      <ac:parameter ac:name="embedded">true</ac:parameter>
      <ac:parameter ac:name="atlassian-macro-output-type">INLINE</ac:parameter>
      <ac:rich-text-body>
        <p>
          <br/>
        </p>
      </ac:rich-text-body>
    </ac:structured-macro>
    <p>
      <ac:structured-macro ac:macro-id="39f92f63-7dc1-4c3e-9276-bfd5c053440c" ac:name="confiform-field-definition" ac:schema-version="1">
        <ac:parameter ac:name="fieldName">hugeta</ac:parameter>
        <ac:parameter ac:name="fieldLabel">Huge textarea field</ac:parameter>
        <ac:parameter ac:name="fieldDescription">max 1000 symbols</ac:parameter>
        <ac:parameter ac:name="type">textarea</ac:parameter>
      </ac:structured-macro>
    </p>
    <p>
      <ac:structured-macro ac:macro-id="03b90e65-9ad8-40e3-a8c7-58597024451f" ac:name="confiform-field-definition-rules" ac:schema-version="1">
        <ac:parameter ac:name="condition">hugeta.asCount:&gt;1000</ac:parameter>
        <ac:parameter ac:name="fieldName">We accept only 1000 symbols here</ac:parameter>
        <ac:parameter ac:name="action">Validation rule</ac:parameter>
      </ac:structured-macro>
    </p>
    <p>
      <br/>
    </p>
  </ac:rich-text-body>
</ac:structured-macro>
<p>Showing the contents</p>
<ac:structured-macro ac:macro-id="377bb64c-95db-421d-b853-b0cd05767345" ac:name="confiform-table" ac:schema-version="1">
  <ac:parameter ac:name="formName">myform1</ac:parameter>
  <ac:rich-text-body>
    <p>
      <ac:structured-macro ac:macro-id="6354e4b6-2358-403e-9296-f21319ad343d" ac:name="confiform-field" ac:schema-version="1">
        <ac:parameter ac:name="fieldName">hugeta</ac:parameter>
      </ac:structured-macro>
    </p>
  </ac:rich-text-body>
</ac:structured-macro>
<ac:structured-macro ac:macro-id="3d4d8dd2-0381-45e2-ac3f-d48ffaf4d002" ac:name="html" ac:schema-version="1">
  <ac:plain-text-body><![CDATA[<style>
.morecontent span {
  display: none;
}

.morelink {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  position: relative;
  margin-top: 20px;
  font-size: 13px;
  color: #ececec;
}

.morelink:after {
  content: '';
  -ms-flex-item-align: start;
      align-self: flex-start;
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-top: 6px;
  margin-left: 10px;
  border: 1px solid #ececec;
  border-top: none;
  border-right: none;
  background: transparent;
  transform: rotate(-45deg);
  transform-origin: bottom;
}

.morelink.less:after {
  margin-left: 7px;
  transform: rotate(135deg);
}
</style>
<script>
function showHideText(sSelector, options) {
    // Def. options
    var defaults = {
        charQty     : 100,
        ellipseText : "...",
        moreText    : "Show more",
        lessText    : "Show less"
    };

    var settings = AJS.$.extend( {}, defaults, options );

    var s = this;

        s.container = AJS.$(sSelector);
        s.containerH = s.container.height();

        s.container.each(function() {
            var content = AJS.$(this).html();
            if(content.length > settings.charQty) {

                var visibleText = content.substr(0, settings.charQty);
                var hiddenText  = content.substr(settings.charQty, content.length - settings.charQty);

                var html = visibleText
                         + '<span class="moreellipses">' +
                           settings.ellipseText
                         + '</span><span class="morecontent"><span>' +
                           hiddenText
                         + '</span><a href="" class="morelink">' +
                           settings.moreText
                         + '</a></span>';

                AJS.$(this).html(html);
            }

        });

        s.showHide = function(event) {
            event.preventDefault();
            if(AJS.$(this).hasClass("less")) {
                AJS.$(this).removeClass("less");
                AJS.$(this).html(settings.moreText);

                AJS.$(this).prev().fadeToggle('fast', function() {
                    $(this).parent().prev().fadeIn();
                });
            } else {
                AJS.$(this).addClass("less");
                AJS.$(this).html(settings.lessText);

                AJS.$(this).parent().prev().hide();
                AJS.$(this).prev().fadeToggle('fast');
            }
        }

        AJS.$(".morelink").bind('click', s.showHide);
}
/*------------------------------------------*/

AJS.toInit(function() {
new showHideText('span[cf-field^="hugeta"]', { charQty : 50 });
});


</script>]]></ac:plain-text-body>
</ac:structured-macro>


  • No labels