...
ConfiForms TableView | ||
---|---|---|
| ||
HTML |
---|
<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> |
Storage format
Code Block |
---|
<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:>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> |