{"action":"closed","issue":{"url":"https://api.github.com/repos/Adslot/alexandria/issues/78","repository_url":"https://api.github.com/repos/Adslot/alexandria","labels_url":"https://api.github.com/repos/Adslot/alexandria/issues/78/labels{/name}","comments_url":"https://api.github.com/repos/Adslot/alexandria/issues/78/comments","events_url":"https://api.github.com/repos/Adslot/alexandria/issues/78/events","html_url":"https://github.com/Adslot/alexandria/issues/78","id":125864643,"number":78,"title":"Loading Spinner","user":{"login":"camjc","id":4197647,"avatar_url":"https://avatars2.githubusercontent.com/u/4197647?v=3","gravatar_id":"","url":"https://api.github.com/users/camjc","html_url":"https://github.com/camjc","followers_url":"https://api.github.com/users/camjc/followers","following_url":"https://api.github.com/users/camjc/following{/other_user}","gists_url":"https://api.github.com/users/camjc/gists{/gist_id}","starred_url":"https://api.github.com/users/camjc/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/camjc/subscriptions","organizations_url":"https://api.github.com/users/camjc/orgs","repos_url":"https://api.github.com/users/camjc/repos","events_url":"https://api.github.com/users/camjc/events{/privacy}","received_events_url":"https://api.github.com/users/camjc/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2016-01-11T02:54:14Z","updated_at":"2017-05-22T01:18:25Z","closed_at":"2017-05-22T01:18:25Z","body":"Needs to animate without svg animation to be cross-browser compatible.\nA reference implementation (in angular not react) looks somewhat like this (still needs JS animation).\n\n``` jade\nsvg(ng-attr-width='{{size}}px'\n    ng-attr-height='{{size}}px')\n  g\n    ellipse(\n        ng-repeat='dot in dotArray'\n        ng-attr-fill='{{dot.color}}'\n        ng-attr-transform='rotate({{dot.angle}}, {{dot.xPos}}, {{dot.yPos}})'\n        ng-attr-cx='{{dot.xPos}}'\n        ng-attr-cy='{{dot.yPos}}'\n        ng-attr-rx='{{dot.rx}}'\n        ng-attr-ry='{{dot.ry}}'\n        ng-attr-style='{{dotStyle}}'\n        shape-rendering=\"geometricPrecision\"\n        stroke=\"none\")\n```\n\n``` coffee\n_ = require 'lodash'\n\nmodule.exports = class SpinnyDirective\n\n  PRESET_SIZES =\n    'small':\n      'dotCount': 16\n      'dotDiameter': 1\n      'radius': 8\n      'color': '#d79437'\n    'medium':\n      'dotCount': 12\n      'dotDiameter': 2\n      'radius': 12\n    'large':\n      'dotCount': 16\n      'dotDiameter': 2\n      'radius': 24\n\n  restrict: 'E'\n  replace: true\n  templateUrl: 'spinny'\n  scope:\n    presetSize: '@?'\n    dotCount: '=?'\n    dotDiameter: '=?'\n    radius: '=?'\n    duration: '=?'\n    minOpacity: '=?'\n    maxOpacity: '=?'\n    eccentricity: '=?'\n    color: '@?'\n\n  link: (@scope, element, attrs) =>\n\n    # if a size has been set eg 'small', use preset defaults (Large is default size)\n    if @scope.presetSize\n      _.extend @scope, PRESET_SIZES[@scope.presetSize]\n\n    @scope.dotCount = +@scope.dotCount or 16\n    @scope.dotDiameter = +@scope.dotDiameter or 2\n    @scope.radius = +@scope.radius or 24\n    @scope.duration = +@scope.duration or 1.4\n    @scope.minOpacity = +@scope.minOpacity or 0.05\n    @scope.maxOpacity = +@scope.maxOpacity or 0.7\n    @scope.color ?= '#000'\n    @scope.eccentricity = +@scope.eccentricity or 0\n    @scope.eccentricity = Math.max -0.9999, Math.min @scope.eccentricity, 0.9999\n    @scope.dotArray = @createDots()\n    @scope.size = (@scope.dotDiameter + @scope.radius) * 2\n    @scope.dotStyle = if @scope.duration > 0 then \"opacity:#{@scope.minOpacity};\" else ''\n\n\n  createDots: => for index in [0...@scope.dotCount] then @createDot index\n\n\n  createDot: (index) =>\n\n    calculateCoordinatePosition = (trigFunct) =>\n      (@scope.radius * (1 + trigFunct(2 * Math.PI * index / @scope.dotCount - Math.PI / 2)) + @scope.dotDiameter)\n\n    xPos = calculateCoordinatePosition(Math.cos).toFixed 4\n    yPos = calculateCoordinatePosition(Math.sin).toFixed 4\n\n    flattenedRadius = Math.sqrt((1 - Math.pow(@scope.eccentricity, 2)) * Math.pow(@scope.dotDiameter, 2))\n    if @scope.eccentricity > 0\n      rx = flattenedRadius\n      ry = @scope.dotDiameter\n    else\n      rx = @scope.dotDiameter\n      ry = flattenedRadius\n\n    angle = 360 * index / @scope.dotCount\n    beginTime = Math.round(@scope.duration * index * 10000 / @scope.dotCount) / 10000\n\n    return {\n      color: @scope.color\n      xPos\n      yPos\n      rx\n      ry\n      angle\n      beginTime\n    }\n\n```\n"}}
{"actor":{"display_login":"patrick-ivers"}}