So, this demo shows how you can add a feature to show/hide more text on the field with JavaScript
Showing the contents
<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
<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>
|