/** * 求人詳細内にある特徴ブロックの文字段数を制限してトグル表示します * @param $: jQuery * @since 2022-12-15 */ (function($) { ///// vars /** * Flag for screen resizing * @type {boolean} */ var timer = false; /** * number of lines */ var row; /** * Characters if the number of characters exceeds * @type {string} */ var clamp = '…'; /** * How many characters to delete in the last line * @type {number} */ var cutWords = 10; /** * Specified jQuery object * @type {*|jQuery} */ var $targets = $('.page-node-type-job .field--name-field-pr-comment'); /** * span of the specified target * @type {*|jQuery} */ var $children = setElements($targets); ///// functions /** * Count half-width characters. * Count is 0.5 because it is not half of full-width when displayed. * @param str * @returns {number} */ function strCount (str) { var len = 0; for (var i = 0; i < str.length; i++) { (str[i].match(/[ -~]/)) ? len += 0.5 : len += 0; } return len; } /** * Extract the text from the element containing the text * and enclose it with a span, and save the original text at the same time. * @param target: jQuery * @returns {*[]|*|jQuery|HTMLElement} */ function setElements(target){ if(target.length === 0) return []; for (var i = 0; i < target.length; i ++){ var t_html = target.eq(i).html(); target.eq(i).html(`${t_html}`); target.eq(i).children().eq(0).data('fullText', t_html) } return target.children(); } /** * Adjustment to keep text within regulations * @return void */ function doTextAdjust(){ for (var i = 0; i < $children.length; i++) { // vars var $child = $children.eq(i); var style = window.getComputedStyle($children.get(i)); var fontsize = parseFloat(style.fontSize); var width = parseFloat(style.width); var letterSpacing = parseFloat(style.letterSpacing) || 0; var wordCount = Math.floor(width / (fontsize + letterSpacing)) * row; var fullText = Object.assign($child.data('fullText')); // add half the number of characters wordCount += Math.floor(strCount( fullText ) / 2); // Change processing by text length if (fullText.length > wordCount) { var replaceText = fullText.substr(0, (wordCount - cutWords)) + clamp; $child.text(replaceText); }else{ $child.text($child.data('fullText')); } // more button setMoreButton(fullText.length > wordCount, i); } } /** * Add button for shorter text, show/hide * @param display: boolean * @param count */ function setMoreButton( display = false, count){ var moreButton = $targets.eq(count).find('.pr-comment-more'); if(moreButton.length === 0){ moreButton = $('もっとみる').hide().appendTo($targets.eq(count)); } moreButton.on('click',function (e){ e.preventDefault(); $(e.currentTarget).prev().text($(e.currentTarget).prev().data('fullText')); $(e.currentTarget).hide(); }); if(display){ moreButton.show(); }else{ moreButton.hide(); } } /** * window resize action * @param cb : function */ function windowResize(cb){ if (timer !== false) { clearTimeout(timer); } timer = setTimeout(function() { setRow(); cb(); }, 200); } /** * Set the number of row * @return void */ function setRow(){ var windowSize = $(window).width() || 0; if (windowSize < 768) { row = 4; } else { row = 999; } } /** * main function */ function doMain(){ if($children.length === 0) return; setRow() doTextAdjust(); $(window).on('resize', function (){ windowResize(doMain) }) } ///// exec doMain(); })(jQuery);