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
aga
niko
nikooooooooooooooooooooooooooooo
111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
xcvxcvcxvxc
dfjdjdfj
this is a string
Testing
`
1
2
3
4
5
6
fadsafdsadas DSds dasd dD

afdsadf afdasdf
asffadsf
hgjb;;;;;;;;;lkkkkkkjmml;


pjk;j
Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
fdsafdsafdsafdsafdsa
qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq
jbjkbjkhjkhjnjhljkh
ewrwe
vvvv
vcxvzxcvzxvzcx
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.
test
guyigyhiuhghjhsdjfhlsdjkfsjdfnjnfjkshfuhfnjkdfns
sdfjbrfgbdrg
rfgkdnfklndfgnal;kf
asdferjkntgjeruoginfvkldrg
adfjgnaornjfgdrgjkr
Vader: There is no escape. Don't make me destroy you. Luke, you do not yet realize your importance. You've only begun to discover your power. Join me, and I will complete your training. With our combined strength, we can end this destructive conflict, and bring order to the galaxy!
Luke: [wincing] I'll NEVER join you!
Vader: If only you knew the power of the dark side. Obi-Wan never told you what happened to your father.
Luke: He told me enough. He told me you killed him.
Vader: No. I am your father.
Luke: [shocked] No. No. That's not true! That's impossible!
Vader: Search your feelings, you know it to be true.
Luke: NOOOOOOO!!! NOOOOOOOO!!!
asdfsdfds
uihkjjo joikokl
сасал
now is the time
jhj
toto is alive toto is alive toto is alive toto is alive toto is alive toto is alive toto is alive toto is alive
fdsfdsf
gngngngnhgngngngnghnhnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn
rythn
sdfsdfsdfdsf
ññññññññññññññññññññññññññññññññññññññññññññññññññññññññññññññññññññññññññññññññññññññññññññññññññññññññllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkjjjjjjjjjjjjjkkkkkkkkkkkjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj
asdsdasd
test
Friday Afternoon Test
abcsd
test
dsddd
test
hgfytfytvy yfy gy
fgdfgd
jhbjhb
HelloWord
qwasdfghj
mkkl;l'lk;l';lkl;kl
fffff
xcxzczxcz
fgbhcvxb
ggggggg
zazaz
123ABC
dsdjsdsajdkadjaskdj dsdjsdsajdkadjaskdj dsdjsdsajdkadjaskdj dsdjsdsajdkadjaskdj dsdjsdsajdkadjaskdj dsdjsdsajdkadjaskdj dsdjsdsajdkadjaskdj dsdjsdsajdkadjaskdj dsdjsdsajdkadjaskdj dsdjsdsajdkadjaskdj dsdjsdsajdkadjaskdj dsdjsdsajdkadjaskdj dsdjsdsajdkadjaskdj dsdjsdsajdkadjaskdj dsdjsdsajdkadjaskdj dsdjsdsajdkadjaskdj dsdjsdsajdkadjaskdj dsdjsdsajdkadjaskdj dsdjsdsajdkadjaskdj dsdjsdsajdkadjaskdj dsdjsdsajdkadjaskdj dsdjsdsajdkadjaskdj dsdjsdsajdkadjaskdj dsdjsdsajdkadjaskdj dsdjsdsajdkadjaskdj dsdjsdsajdkadjaskdj dsdjsdsajdkadjaskdj dsdjsdsajdkadjaskdj dsdjsdsajdkadjaskdj dsdjsdsajdkadjaskdj dsdjsdsajdkadjaskdj dsdjsdsajdkadjaskdj
asdasd
dasd
dfdfdfd
Hallo Welt
test
testing
vccvcx
hihi
testse
123
test
test
bhkjlbiygjvh,.bhjbhkb.b
ssssssssssssssssssssssssssssssssssssss
jhkjk
test
dsffds
sdfsfdsdfsdfsdfsfsdfsdfsssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
Lulululululululululululululu
Lililololoooolilililillilillliollioooi
Iihciioycooooooyvoopppp0
zadddazdaz
sdfsdsdfsdsffdsfsdf
dsf
d
fs
dfs
df
sdf
sd
f
sd
fdds
fsdsd
f
dsf
dsfs
fff
qweqwe
Test
testing
hhhhhhhhhhhh
SSsasASA
a
asdasd
ASFSDFSFF








SDFSDF

SDF
S
FSD
FS
DF
SD
FS
DF
SF
SDF




SDFSDF
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
test
yyyyyyyppppppppppppp
Yvhh
dyfbydfgydfgfdgdfgdfg dyfbydfgydfgfdgdfgdfg dyfbydfgydfgfdgdfgdfg dyfbydfgydfgfdgdfgdfg dyfbydfgydfgfdgdfgdfg dyfbydfgydfgfdgdfgdfg dyfbydfgydfgfdgdfgdfg dyfbydfgydfgfdgdfgdfg dyfbydfgydfgfdgdfgdfg dyfbydfgydfgfdgdfgdfg dyfbydfgydfgfdgdfgdfg
dfhdfghdfghdfghdf
tybto
test
tony
aga
Lorem ipsum dolor sit amet, consectetur adipiscing...
(/)
hello
vcvc
bn,;b;,b,v;
asdffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
zxcxc
dsgsdbcvxhnfjyg
l,;;l,;,;l,l;,
judzfjgb
;mdv;mfl;ma'admgam
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.
asd
nn
The vendor, CSP, identified a problem with their queue and as of 17:11CT, they communicated they bounced the ports at 17:01 CT. Validation was successful.
fgfffgfg
koioi
111111111
kkkkkkkk
lkjlkjlkj
test
jkjk ii
89
eeeeeeeeeeeeeefffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
ttttt
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.
fdrdfgdfgdfgd
test asdfxsdgDSFgnd r yrsdf ymhdu tyuhftvh
gfdsgfdsgfds
ffghgfhgfh
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia,
molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum
numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium
optio, eaque rerum! Provident similique accusantium nemo autem. Veritatis
obcaecati tenetur iure eius earum ut molestias architecto voluptate aliquam
nihil, eveniet aliquid culpa officia aut! Impedit sit sunt quaerat, odit,
tenetur error, harum nesciunt ipsum debitis quas aliquid. Reprehenderit,
quia. Quo neque error repudiandae fuga? Ipsa laudantium molestias eos
sapiente officiis modi at sunt excepturi expedita sint? Sed quibusdam
recusandae alias error harum maxime adipisci amet laborum. Perspiciatis
minima nesciunt dolorem! Officiis iure rerum voluptates a cumque velit
quibusdam sed amet tempora. Sit laborum ab, eius fugit

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