javascript - Directive is unable to resize font-size of text inside div -
i have plugin re-sizes text fit <div>.
i have directive tell div inside div change color , font-size. but, can change color, not font-size.
my question is: how override font-size of plugin?
i couldn't import ng-fi-text plugin. so, put in javascript snippet.
the actual code inside html.
/*! ng-fi-text v0.1.0 - 2014-11-10 * license: mit * author: leandro bessone */ angular.module('ng-fi-text', []) .directive('ngfitext', ['$window', function($window) { "use strict"; return { restrict: 'a', scope: { ngfitext: '@', ngfitexthtml: '@' }, link: function postlink(scope, element, attrs) { if (!window.jquery) { console.error('ng-fi-text needs jquery work. sory :('); return; } // options var rotate = attrs.ngfitextrotate || false; var maxfontsize = attrs.ngfitextmaxfontsize || false; // var minfontsize = attrs.ngfitextminfontsize || false; //var lineheightmultiplier = attrs.ngfitextlineheightmultiplier || false; var implementationtype = attrs.hasownproperty('ngfitexthtml') ? 'html' : 'text'; // internal options var heighttolerance = 3; var fontsize = 10; var looplimiter = 25; // higher more accurate increases process. min 5~6 var executionodometer = 0; // creating element var rotatetoadd = rotate ? ' rotate(' + rotate + 'deg) ' : ''; var textelem = angular.element('<div />').attr('style', 'word-wrap: break-word;' + 'line-height: normal;' + 'margin: 0px;' + //'padding: 0px;'+ 'position: absolute; ' + 'left:0px;' + 'right: 0px;' + 'top: 50%;' + '-webkit-transform: translate(0%,-50%) ' + rotatetoadd + ';' + '-moz-transform: translate(0%,-50%) ' + rotatetoadd + ';' + '-ms-transform: translate(0%,-50%) ' + rotatetoadd + ';' + 'transform: translate(0%,-50%) ' + rotatetoadd + ';' ); element.html(textelem); function contentfilling(callback) { var text = ''; if (implementationtype === 'html') { text = attrs.ngfitexthtml || element.html() || ''; } else { text = attrs.ngfitext || element.text() || ''; } // populating dom textelem[implementationtype](text); if (callback) callback(); } // contentfilling function executemagic() { onstarted(); executionodometer++; var elementparent = textelem.parent(); var elemparentheight = elementparent.height(); //var elemparentwidth = elementparent.width(); var elemheight; var heightdiff; var basecorrection = 10; var definitivecorrection; var direction; var prevdirection = false; var currloop = 1; var currxloop = 0; var correctionmultiplier = 1; var newfontsize = fontsize; heightdiff = elemparentheight - elemheight; var lastsamedirectiondiff = '', prelastsamedirectiondiff = ''; var lesserdiff = false; var lessersize = false; function grosscorrection(executionnumber) { if (currloop > looplimiter) { //console.log('no more loops :('); //console.log('----------------------------------------- no + loops'); onfinished(newfontsize); return; } onloopstarted(); textelem.css('font-size', newfontsize + 'px'); if (implementationtype === 'html') { textelem.children().css('font-size', newfontsize + 'px'); } window.settimeout(function() { if (executionnumber !== executionodometer) { return; } elemheight = textelem.height(); heightdiff = elemparentheight - elemheight; if (heightdiff >= 0 && (heightdiff < lesserdiff || !lesserdiff)) { lesserdiff = heightdiff; lessersize = newfontsize; } direction = heightdiff >= 0 ? 1 : -1; if (prevdirection && prevdirection !== direction) { if (prelastsamedirectiondiff === heightdiff) { //console.log('------------------ deberia parar -----------'); if (newfontsize !== lessersize) { textelem.css('font-size', lessersize + 'px'); if (implementationtype === 'html') { textelem.children().css('font-size', lessersize + 'px'); } } //console.log('----------------------------------------- dp'); onfinished(newfontsize); return; } prelastsamedirectiondiff = lastsamedirectiondiff; lastsamedirectiondiff = heightdiff; currxloop++; correctionmultiplier = correctionmultiplier * (1 - 0.25 * currxloop); correctionmultiplier = correctionmultiplier < 0.05 ? 0.05 : correctionmultiplier; } prevdirection = direction; definitivecorrection = basecorrection * correctionmultiplier * direction; newfontsize = newfontsize + definitivecorrection; /* console.log( 'l'+currloop + ' | lsd:'+lastsamedirectiondiff+ ' | ldif:'+lesserdiff+ ' | elhght:'+elemheight + ' | hdiff:'+heightdiff + ' | cx:'+correctionmultiplier+ ' | def_corr:'+definitivecorrection + ' | newfontsize:'+newfontsize + ''); */ currloop++; if (math.abs(heightdiff) > heighttolerance) { grosscorrection(executionodometer); } else { //console.log('-----------------------------------------end'); onfinished(newfontsize); } }, 0); } //gross grosscorrection(executionodometer); } // executemagic function onstarted() { textelem.css('visibility', 'hidden'); } function onloopstarted() { } function onfinished(finalfontsize) { if (maxfontsize && finalfontsize > maxfontsize) { textelem.css('font-size', maxfontsize + 'px'); } textelem.css('visibility', 'visible'); } function onresizestarted() { textelem.css('visibility', 'hidden'); } // window resizing responsivenes var timeoutholder; angular.element($window).bind('resize', function() { window.cleartimeout(timeoutholder); onresizestarted(); timeoutholder = window.settimeout(executemagic, 150); }); // update on values changing scope.$watchgroup(['ngfitext', 'ngfitexthtml'], function(newvalue, oldvalue) { contentfilling(executemagic); }); // staring magic... contentfilling(executemagic); } }; } ]);.mydiv { width: 270px; height: 70px; border: solid orange; position: absolute; }<!doctype html> <html ng-app="plunker"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://code.angularjs.org/1.4.2/angular.js"></script> </head> <body> <div class='mydiv' resize-text ng-fi-text ng-fi-text-html='1234'></div> </body> </html> <script> var app = angular.module('plunker', ['ng-fi-text']); app.directive('resizetext', function() { return { restrict: 'a', link: function(scope, element, attrs) { var text_len = element.text().length; if (text_len < 15) { element.css('font-size', '10px'); element.css('color', 'red'); } } } }) </script>
just found solution:
element.addclass('small'); and style it:
<style> .small > div { font-size: 10px !important; } </style> 
Comments
Post a Comment