3

I'm trying to implement font scaling in Steroids+Angular1.3.15 (AppGyver) hybrid app. I decided to use $localStorage to store current font size. It all works great on android devices but not on iOS.. Actually in iOS it works for the newly opened WebViews but not the ones that are already displayed.

Links for font scaling: 

<a class="font-size font-small" data-remote="true" ng-class="{current: fontSize == 'rem-base-small'}" ng-click="setFontSize('rem-base-small')">A</a>
<a class="font-size font-medium" data-remote="true" ng-class="{current: fontSize == 'rem-base-medium'}" ng-click="setFontSize('rem-base-medium')">A</a>
<a class="font-size font-large" data-remote="true" ng-class="{current: fontSize == 'rem-base-large'}" ng-click="setFontSize('rem-base-large')">A</a>

and in my controller:

$scope.fontSize = $localStorage.fontSize || 'rem-base-medium'

$scope.setFontSize = function(size) {
  $localStorage.fontSize = size
  $scope.fontSize = size
}

I use myfontsize directive on <html> tag to update UI. My directive looks like so:

var sharedStuff = angular.module('sharedStuff', ['ngStorage'])

  sharedStuff.directive('myfontsize', function($localStorage) {
    function link(scope, element, attrs) {
        var format,
            timeoutId;

        function updateClass() {
          element.removeClass('rem-base-large')
          element.removeClass('rem-base-medium')
          element.removeClass('rem-base-small')

          $localStorage.fontSize = $localStorage.fontSize || "rem-base-medium"
          element.addClass($localStorage.fontSize)
        }

        scope.$watch(attrs.myCurrentTime, function(value) {
          format = value;
          updateClass();
        });

        element.on('$destroy', function() {
          clearInterval(timeoutId);
        });

        // start the UI update process; save the timeoutId for canceling
        timeoutId = setInterval(function() {
          updateClass(); // update DOM
        }, 1000);
      }

      return {
        link: link
      };
  })

If somebody could shed some light on why it works on android but it doesn't on iOS, I would be much obliged. Alternatively if you have better solution to achieve my goal and don't mind sharing, please do :)

Wally
  • 61
  • 6
  • When you say "it works for the newly opened `WebViews` but not the ones that are already displayed" do you mean those that are already displayed are preloaded and it doesn't work on those? You can try asking your question [here](http://community.appgyver.com/) as well. – area28 Sep 14 '15 at 16:28
  • Each time link is clicked in the side menu ` $scope.switchPage = function(item) { webView = new steroids.views.WebView(item.url); steroids.layers.push(webView); steroids.drawers.hide() }; ` fonts are scaled correctly, so yes, it doesn't work on preloaded views with iOS – Wally Sep 14 '15 at 17:21

0 Answers0