차이
문서의 선택한 두 판 사이의 차이를 보여줍니다.
| 양쪽 이전 판이전 판다음 판 | 이전 판 | ||
| tech:isotope [2016/09/19 14:16] – V_L | tech:isotope [2021/05/28 07:54] (현재) – V_L | ||
|---|---|---|---|
| 줄 1: | 줄 1: | ||
| {{tag> | {{tag> | ||
| ====== Isotope ====== | ====== Isotope ====== | ||
| - | {{INLINETOC}} | + | |
| 씨발 존 | 씨발 존 | ||
| 줄 9: | 줄 9: | ||
| 존네좋군 | 존네좋군 | ||
| + | |||
| + | |||
| [[http:// | [[http:// | ||
| + | |||
| + | |||
| + | http:// | ||
| + | |||
| + | |||
| + | http:// | ||
| + | |||
| + | http:// | ||
| + | |||
| + | |||
| + | https:// | ||
| + | |||
| + | |||
| + | < | ||
| + | "use strict"; | ||
| + | var resolve = { | ||
| + | delay: function($q, | ||
| + | var delay = $q.defer(); | ||
| + | return $timeout(delay.resolve, | ||
| + | } | ||
| + | }; | ||
| + | angular.module(" | ||
| + | $compileProvider.debugInfoEnabled(!1) | ||
| + | }]).config([" | ||
| + | $routeProvider.when("/", | ||
| + | templateUrl: | ||
| + | controller: " | ||
| + | resolve: resolve | ||
| + | }).when("/ | ||
| + | templateUrl: | ||
| + | controller: " | ||
| + | resolve: resolve | ||
| + | }).when("/ | ||
| + | templateUrl: | ||
| + | controller: " | ||
| + | resolve: resolve | ||
| + | }).when("/ | ||
| + | templateUrl: | ||
| + | controller: " | ||
| + | reloadOnSearch: | ||
| + | resolve: resolve | ||
| + | }).when("/ | ||
| + | templateUrl: | ||
| + | controller: " | ||
| + | reloadOnSearch: | ||
| + | resolve: resolve | ||
| + | }).otherwise({ | ||
| + | redirectTo: "/" | ||
| + | }), $httpProvider.defaults.headers.post[" | ||
| + | var param = function(obj) { | ||
| + | var name, value, fullSubName, | ||
| + | for (name in obj) | ||
| + | if (value = obj[name], value instanceof Array) | ||
| + | for (i = 0; i < value.length; | ||
| + | else if (value instanceof Object) | ||
| + | for (subName in value) subValue = value[subName], | ||
| + | else void 0 !== value && null !== value && (query += encodeURIComponent(name) + " | ||
| + | return query.length ? query.substr(0, | ||
| + | }; | ||
| + | $httpProvider.defaults.transformRequest = [function(data) { | ||
| + | return angular.isObject(data) && " | ||
| + | }] | ||
| + | }]).run([" | ||
| + | var token_key = " | ||
| + | token_index = window.location.href.indexOf(token_key); | ||
| + | if (token_index > -1) { | ||
| + | var token = window.location.href.substr(token_index + token_key.length).split("&" | ||
| + | Spotify.set_access_token(token), | ||
| + | } | ||
| + | var oldLocation = ""; | ||
| + | $rootScope.$on(" | ||
| + | $rootScope.view_class = " | ||
| + | var isForwards = !0; | ||
| + | if (next && next.$$route) { | ||
| + | var newLocation = next.$$route.originalPath; | ||
| + | oldLocation !== newLocation && -1 !== oldLocation.indexOf(newLocation) && (isForwards = !1), oldLocation = newLocation | ||
| + | } | ||
| + | }), ngProgress.color("# | ||
| + | }]), angular.module(" | ||
| + | function hexToRgb(hex) { | ||
| + | var result = / | ||
| + | return result ? { | ||
| + | r: parseInt(result[1], | ||
| + | g: parseInt(result[2], | ||
| + | b: parseInt(result[3], | ||
| + | } : null | ||
| + | } | ||
| + | this.grayscale = function(pixels) { | ||
| + | for (var d = pixels.data, | ||
| + | var r = d[i], | ||
| + | g = d[i + 1], | ||
| + | b = d[i + 2], | ||
| + | v = .2126 * r + .7152 * g + .0722 * b; | ||
| + | d[i] = d[i + 1] = d[i + 2] = v | ||
| + | } | ||
| + | return pixels | ||
| + | }, this.duotone = function(img, | ||
| + | var gradient = this.gradientMap(tone1, | ||
| + | img = this.grayscale(img); | ||
| + | for (var d = img.data, i = 0; i < d.length; i += 4) d[i] = gradient[4 * d[i]], d[i + 1] = gradient[4 * d[i + 1] + 1], d[i + 2] = gradient[4 * d[i + 2] + 2]; | ||
| + | return img | ||
| + | }, this.gradientMap = function(tone1, | ||
| + | for (var rgb1 = hexToRgb(tone1), | ||
| + | return gradient | ||
| + | }, this.flipImage = function(input) { | ||
| + | for (var tempCtx = document.createElement(" | ||
| + | for (var x = 1; w - 1 > x; x += 1) | ||
| + | for (var i = 4 * (y * w + x), flip = 4 * (y * w + (w - x)), c = 0; 4 > c; c += 1) outputData[i + c] = inputData[flip + c]; | ||
| + | return output | ||
| + | } | ||
| + | }), angular.module(" | ||
| + | this.format_media = function(media, | ||
| + | var block = {}; | ||
| + | switch (block.type = " | ||
| + | case " | ||
| + | block.call_to_action = "watch now"; | ||
| + | break; | ||
| + | case " | ||
| + | block.call_to_action = " | ||
| + | break; | ||
| + | case " | ||
| + | block.call_to_action = " | ||
| + | } | ||
| + | return block | ||
| + | }, this.format_drop = function(data) { | ||
| + | var block = {}; | ||
| + | return block.type = " | ||
| + | } | ||
| + | }), angular.module(" | ||
| + | var access_token, | ||
| + | redirect_uri = " | ||
| + | authorization_url = " | ||
| + | api_base = " | ||
| + | this.set_access_token = function(token) { | ||
| + | access_token = token | ||
| + | }, this.get_access_token = function() { | ||
| + | return access_token | ||
| + | }, this.authenticate = function() { | ||
| + | var url_string = authorization_url + "? | ||
| + | $window.location.href = url_string | ||
| + | }, this.get_user = function() { | ||
| + | var deferred = $q.defer(); | ||
| + | return user ? deferred.resolve(user) : $http({ | ||
| + | url: api_base + "/ | ||
| + | headers: { | ||
| + | Authorization: | ||
| + | } | ||
| + | }).success(function(response) { | ||
| + | deferred.resolve(user = response) | ||
| + | }).error(function(response) { | ||
| + | deferred.reject() | ||
| + | }), deferred.promise | ||
| + | } | ||
| + | }]), angular.module(" | ||
| + | function card_shim(raw) { | ||
| + | for (var i = 0; i < raw.length; i++) raw[i].type = " | ||
| + | return raw | ||
| + | } | ||
| + | |||
| + | function drop_shim(data) { | ||
| + | function get_image_url(id) { | ||
| + | return data.files[id] ? data.files[id].url : null | ||
| + | } | ||
| + | |||
| + | function get_image_content_url(i, | ||
| + | return data.content[i].files[id] ? data.content[i].files[id].url : null | ||
| + | } | ||
| + | var now = (new Date).getTime(); | ||
| + | data.type = " | ||
| + | var card_image_1 = get_image_url(data.artist_image1_id), | ||
| + | card_image_2 = get_image_url(data.artist_image2_id), | ||
| + | card_image_3 = get_image_url(data.artist_image3_id); | ||
| + | if (card_image_1 && data.card_images.push(card_image_1), | ||
| + | for (var i = 0; i < data.content.length; | ||
| + | var content = data.content[i]; | ||
| + | content.item_index = i, content.type = " | ||
| + | } | ||
| + | return data | ||
| + | } | ||
| + | var drops, cards, ads, base = " | ||
| + | this.get_drop = function(id) { | ||
| + | var deferred = $q.defer(); | ||
| + | return $http.get(base + "/ | ||
| + | deferred.resolve(drop_shim(response)) | ||
| + | }), deferred.promise | ||
| + | }, this.get_all_drops = function() { | ||
| + | var deferred = $q.defer(); | ||
| + | return drops ? deferred.resolve(drops) : $http.get(base + "/ | ||
| + | for (var i = 0; i < response.length; | ||
| + | deferred.resolve(drops = response) | ||
| + | }), deferred.promise | ||
| + | }, this.get_featured = function() { | ||
| + | var deferred = $q.defer(); | ||
| + | return $http.get(base + "/ | ||
| + | deferred.resolve(drop_shim(response[response.length - 1])) | ||
| + | }), deferred.promise | ||
| + | }, this.get_cards = function() { | ||
| + | var deferred = $q.defer(); | ||
| + | return cards ? deferred.resolve(cards) : $http.get(base + "/ | ||
| + | cards = card_shim(response), | ||
| + | }), deferred.promise | ||
| + | }, this.get_single_card = function(route) { | ||
| + | var deferred = $q.defer(); | ||
| + | return cards ? deferred.resolve(cards) : $http.get(route).success(function(response) { | ||
| + | deferred.resolve(response) | ||
| + | }), deferred.promise | ||
| + | }, this.get_ad = function() { | ||
| + | var deferred = $q.defer(), | ||
| + | addArray = []; | ||
| + | return ads ? deferred.resolve(ads) : $http.get(base + "/ | ||
| + | if (" | ||
| + | var adObj = { | ||
| + | type: " | ||
| + | image: " | ||
| + | description: | ||
| + | content_url: | ||
| + | }, | ||
| + | add_timestamp = function(url) { | ||
| + | return url ? String(url).replace(" | ||
| + | }, | ||
| + | setObj = function(responseObj) { | ||
| + | adObj.image = responseObj.files[responseObj.image_id].url, | ||
| + | }; | ||
| + | response = response.sort(function(a, | ||
| + | return a.id == b.id ? 0 : a.id > b.id ? -1 : 1 | ||
| + | }); | ||
| + | for (var i = 0; i < response.length; | ||
| + | } | ||
| + | deferred.resolve(addArray) | ||
| + | }), deferred.promise | ||
| + | }, this.save_card = function(card_data, | ||
| + | var deferred = $q.defer(), | ||
| + | data = { | ||
| + | drop_id: card_data.drop.id, | ||
| + | creator_id: card_data.user.id, | ||
| + | image: image | ||
| + | }; | ||
| + | return $http({ | ||
| + | method: " | ||
| + | url: base + "/ | ||
| + | data: data, | ||
| + | headers: { | ||
| + | " | ||
| + | } | ||
| + | }).success(function(response, | ||
| + | deferred.resolve("" | ||
| + | }), deferred.promise | ||
| + | } | ||
| + | }]), angular.module(" | ||
| + | $scope.items = []; | ||
| + | var featured = 0; | ||
| + | $scope.selectFeature = function(setFeature) { | ||
| + | featured = setFeature | ||
| + | }, $scope.isFeatured = function(checkFeature) { | ||
| + | return featured === checkFeature | ||
| + | }, this.load_featured_drop = function() { | ||
| + | Api.get_featured().then(function(response) { | ||
| + | ngProgress.complete(), | ||
| + | $timeout(function() { | ||
| + | $scope.backgroundLoaded = !0, $scope.firstLoad = !0; | ||
| + | media: for (var i = $scope.featured.content.length; | ||
| + | if (!$scope.featured.content[i].locked) { | ||
| + | $scope.items.unshift($scope.featured.content[i]), | ||
| + | $scope.firstLoad = !1 | ||
| + | }, 1e3); | ||
| + | break media | ||
| + | } | ||
| + | $timeout(function() { | ||
| + | Api.get_ad().then(function(response) { | ||
| + | $scope.items.push(response[0]) | ||
| + | }), $scope.ready = !0 | ||
| + | }, 1600) | ||
| + | }, 700) | ||
| + | }) | ||
| + | }) | ||
| + | }; | ||
| + | var random_drops, | ||
| + | $scope.load_random_assets = function() { | ||
| + | ngProgress.start(), | ||
| + | ngProgress.complete(), | ||
| + | }) | ||
| + | }, $scope.add_random_assets = function() { | ||
| + | if (counter++, $scope.ready = !1, !random_drops || !random_drops.length) return $scope.load_random_assets(), | ||
| + | for (var random_items = [], random_index = Math.floor(Math.random() * (random_drops.length - 9)), random_range = random_drops.splice(random_index, | ||
| + | var selected_drop = random_range[i], | ||
| + | selected_drop_media_length = selected_drop.content ? selected_drop.content.length : 0, | ||
| + | selected_random_index = Math.floor(Math.random() * (selected_drop_media_length + 1)); | ||
| + | selected_random_index === selected_drop_media_length ? random_items.push(selected_drop) : (selected_drop.content[selected_random_index].name = selected_drop.name, | ||
| + | } | ||
| + | if (counter % 2 === 0) { | ||
| + | var shuffle = function(a) { | ||
| + | var j, x, i; | ||
| + | for (i = a.length; i; i -= 1) j = Math.floor(Math.random() * i), x = a[i - 1], a[i - 1] = a[j], a[j] = x; | ||
| + | return a | ||
| + | }; | ||
| + | random_items = shuffle(random_items); | ||
| + | var shuffle_merge = function(source, | ||
| + | for (var sourceInds = [], result = [], i = 0; i < source.length; | ||
| + | sourceInds = shuffle(shuffle(sourceInds)).slice(0, | ||
| + | for (var currentInd = sourceInds.shift(), | ||
| + | return result | ||
| + | }; | ||
| + | random_items = shuffle_merge(random_items, | ||
| + | } | ||
| + | $scope.items = $scope.items.concat(random_items), | ||
| + | }, this.load_featured_drop() | ||
| + | }]), angular.module(" | ||
| + | $scope.links = [{ | ||
| + | title: " | ||
| + | path: "/ | ||
| + | color: "# | ||
| + | }, { | ||
| + | title: " | ||
| + | path: "/ | ||
| + | color: "# | ||
| + | }], $scope.timestamp = (new Date).getTime(), | ||
| + | var $shareButtons = $(" | ||
| + | buttonsNum = $shareButtons.length, | ||
| + | buttonsMid = buttonsNum / 3, | ||
| + | spacing = 90; | ||
| + | $scope.visisble && " | ||
| + | var $cur = $(this), | ||
| + | pos = i - 1, | ||
| + | dist = Math.abs(pos); | ||
| + | $cur.css({ | ||
| + | zIndex: buttonsMid - dist | ||
| + | }), TweenMax.to($cur, | ||
| + | x: pos * spacing, | ||
| + | y: 90, | ||
| + | scale: .95, | ||
| + | width: 60, | ||
| + | height: 60, | ||
| + | ease: Elastic.easeOut, | ||
| + | easeParams: [1.01, .5] | ||
| + | }), TweenMax.to($cur, | ||
| + | delay: .2 * dist - .1, | ||
| + | scale: .95, | ||
| + | width: 60, | ||
| + | height: 60, | ||
| + | ease: Elastic.easeOut, | ||
| + | easeParams: [1.1, .6] | ||
| + | }), TweenMax.fromTo($cur.children(" | ||
| + | scale: 0 | ||
| + | }, { | ||
| + | delay: .2 * dist - .1, | ||
| + | scale: 1, | ||
| + | ease: Quad.easeInOut | ||
| + | }) | ||
| + | }), $scope.visisble = !$scope.visisble) : " | ||
| + | var $cur = $(this), | ||
| + | pos = i, | ||
| + | dist = Math.abs(pos); | ||
| + | $cur.css({ | ||
| + | zIndex: dist | ||
| + | }), TweenMax.to($cur, | ||
| + | x: 0, | ||
| + | y: 0, | ||
| + | scale: 0, | ||
| + | width: 32, | ||
| + | height: 32, | ||
| + | ease: Quad.easeInOut | ||
| + | }), TweenMax.to($cur.children(" | ||
| + | scale: 0, | ||
| + | ease: Quad.easeIn | ||
| + | }) | ||
| + | }), $scope.visisble = !0) : ($shareButtons.each(function(i) { | ||
| + | var $cur = $(this), | ||
| + | pos = i, | ||
| + | dist = Math.abs(pos); | ||
| + | $cur.css({ | ||
| + | zIndex: dist | ||
| + | }), TweenMax.to($cur, | ||
| + | x: 0, | ||
| + | y: 0, | ||
| + | scale: 0, | ||
| + | width: 32, | ||
| + | height: 32, | ||
| + | ease: Quad.easeInOut | ||
| + | }), TweenMax.to($cur.children(" | ||
| + | scale: 0, | ||
| + | ease: Quad.easeIn | ||
| + | }) | ||
| + | }), $scope.visisble = !0) | ||
| + | }, $scope.$on(" | ||
| + | $scope.path = $location.path(), | ||
| + | }), $scope.path = $location.path() | ||
| + | }]), angular.module(" | ||
| + | $scope.items = [], this.load_featured_drop = function() { | ||
| + | ngProgress.start(), | ||
| + | ngProgress.complete(), | ||
| + | $scope.featured = response; | ||
| + | media: for (var i = $scope.quantity; | ||
| + | if (!$scope.featured.content[i].locked) { | ||
| + | $scope.items.unshift($scope.featured.content[i]); | ||
| + | break media | ||
| + | } | ||
| + | Api.get_ad().then(function(response) { | ||
| + | $scope.items.push(response[0]) | ||
| + | }), $scope.ready = !0 | ||
| + | }, 500) | ||
| + | }) | ||
| + | }; | ||
| + | var random_drops, | ||
| + | $scope.load_random_assets = function() { | ||
| + | ngProgress.start(), | ||
| + | ngProgress.complete(), | ||
| + | }) | ||
| + | }, $scope.add_random_assets = function() { | ||
| + | if ($scope.ready = !1, !random_drops || !random_drops.length) return $scope.load_random_assets(), | ||
| + | for (var random_items = [], random_index = Math.floor(Math.random() * (random_drops.length - 4)), random_range = random_drops.splice(random_index, | ||
| + | var selected_drop = random_range[i], | ||
| + | selected_drop_media_length = selected_drop.content ? selected_drop.content.length : 0, | ||
| + | selected_random_index = Math.floor(Math.random() * (selected_drop_media_length + 1)); | ||
| + | selected_random_index === selected_drop_media_length ? random_items.push(selected_drop) : random_items.push(selected_drop.content[selected_random_index]) | ||
| + | } | ||
| + | if (random_cards.length) { | ||
| + | var random_card_index = Math.floor(Math.random() * (random_items.length - 1)); | ||
| + | random_items.splice(random_card_index, | ||
| + | } | ||
| + | $scope.items = $scope.items.concat(random_items), | ||
| + | }, this.load_featured_drop() | ||
| + | }]), angular.module(" | ||
| + | $scope.limit = 6, $scope.limit_per_page = 6, $scope.visible = !1, this.load_drops = function() { | ||
| + | ngProgress.start(), | ||
| + | ngProgress.complete(), | ||
| + | $scope.drops = response.reverse(), | ||
| + | }, 500) | ||
| + | }) | ||
| + | }, $scope.background = "/ | ||
| + | $scope.limit = $scope.limit + $scope.limit_per_page | ||
| + | }, this.load_drops() | ||
| + | }]), angular.module(" | ||
| + | $scope.card = {}, $scope.imageUrl = " | ||
| + | ngProgress.complete(), | ||
| + | $scope.card.track = $scope.card.drop.song_list[0], | ||
| + | }, !0), $timeout(function() { | ||
| + | $timeout(function() { | ||
| + | $scope.drops = response[1], | ||
| + | }, 500) | ||
| + | }, 500) | ||
| + | }, function(response) { | ||
| + | ngProgress.complete(), | ||
| + | })), $scope.authenticate = function() { | ||
| + | Spotify.authenticate() | ||
| + | }, $scope.themes = [{ | ||
| + | text: "# | ||
| + | foreground: "# | ||
| + | background: "# | ||
| + | value: 0 | ||
| + | }, { | ||
| + | text: "# | ||
| + | foreground: "# | ||
| + | background: "# | ||
| + | value: 1 | ||
| + | }, { | ||
| + | text: "# | ||
| + | foreground: "# | ||
| + | background: "# | ||
| + | value: 2 | ||
| + | }, { | ||
| + | text: "# | ||
| + | foreground: "# | ||
| + | background: "# | ||
| + | value: 3 | ||
| + | }], $scope.background = "/ | ||
| + | $scope.card.type = type | ||
| + | }, $scope.select_burst = function(burst) { | ||
| + | $scope.card.burst = burst | ||
| + | }, $scope.select_image = function(image) { | ||
| + | $scope.card.image = image | ||
| + | }, $scope.select_theme = function(theme) { | ||
| + | $scope.card.theme = theme | ||
| + | }, $scope.scale_background = function() { | ||
| + | $scope.card.scale = !$scope.card.scale | ||
| + | }, $scope.flip_background = function() { | ||
| + | $scope.card.flip = !$scope.card.flip | ||
| + | }, $scope.rotate_background = function() { | ||
| + | $scope.card.rotation = $scope.card.rotation < 3 ? ++$scope.card.rotation : 0 | ||
| + | }, $scope.drag_background = function() { | ||
| + | $scope.drag = !$scope.drag | ||
| + | }, $scope.randomize = function() { | ||
| + | $scope.card.type = Math.random() >= .5 ? " | ||
| + | } | ||
| + | }]), angular.module(" | ||
| + | function load_drop() { | ||
| + | isNaN($routeParams.id) ? Api.get_featured().then(render_drop) : Api.get_drop($routeParams.id).then(render_drop) | ||
| + | } | ||
| + | |||
| + | function render_drop(drop) { | ||
| + | " | ||
| + | for (var i = $scope.drop.content.length; | ||
| + | Api.get_ad().then(function(response) { | ||
| + | $scope.items.push(response[0]) | ||
| + | }), $timeout(function() { | ||
| + | $scope.$broadcast(" | ||
| + | }, 400), $scope.$on(" | ||
| + | } | ||
| + | $scope.items = [], $scope.clickWatch = 0, $scope.set_media = function(index) { | ||
| + | $location.search(" | ||
| + | }, $scope.clear_media = function() { | ||
| + | $(" | ||
| + | }, $scope.on_route_update = function() { | ||
| + | $scope.media_index = $location.search().media, | ||
| + | }, load_drop() | ||
| + | }]), angular.module(" | ||
| + | return { | ||
| + | scope: { | ||
| + | uri: " | ||
| + | albumUri: " | ||
| + | revealDate: " | ||
| + | }, | ||
| + | link: function(scope, | ||
| + | var base = '< | ||
| + | scope.afterRelease = !1, scope.$watch(" | ||
| + | if (scope.revealDate) { | ||
| + | var revealDate = moment(scope.revealDate), | ||
| + | currentDate = moment(), | ||
| + | diff = currentDate.diff(revealDate, | ||
| + | scope.afterRelease = diff > 0 ? !0 : !1 | ||
| + | } | ||
| + | }), scope.$watch(" | ||
| + | scope.afterRelease && (scope.albumUri ? (element.html(base.replace(" | ||
| + | element.addClass(" | ||
| + | }, 500)) : element.removeClass(" | ||
| + | }), scope.$watch(" | ||
| + | scope.afterRelease || (scope.uri ? (element.html(base.replace(" | ||
| + | element.addClass(" | ||
| + | }, 500)) : element.removeClass(" | ||
| + | }) | ||
| + | } | ||
| + | } | ||
| + | }), angular.module(" | ||
| + | return { | ||
| + | scope: { | ||
| + | options: " | ||
| + | switcher: " | ||
| + | }, | ||
| + | templateUrl: | ||
| + | transclude: !0, | ||
| + | controller: [" | ||
| + | this.initialize = function() { | ||
| + | $scope.init() | ||
| + | } | ||
| + | }], | ||
| + | link: function(scope, | ||
| + | var defaults = { | ||
| + | grabCursor: !0, | ||
| + | pagination: $(element).find(" | ||
| + | nextButton: $(element).find(" | ||
| + | prevButton: $(element).find(" | ||
| + | paginationClickable: | ||
| + | preloadImages: | ||
| + | lazyLoading: | ||
| + | }; | ||
| + | scope.$watch(" | ||
| + | $(" | ||
| + | self = $(this), $(this).attr(" | ||
| + | s.lazy.load() | ||
| + | })) | ||
| + | }) | ||
| + | }); | ||
| + | var s, options = angular.extend(defaults, | ||
| + | scope.init = function() { | ||
| + | s && s.destroy(), | ||
| + | s = new Swiper(element[0], | ||
| + | }, 100) | ||
| + | } | ||
| + | } | ||
| + | } | ||
| + | }), angular.module(" | ||
| + | return { | ||
| + | require: " | ||
| + | link: function(scope, | ||
| + | scope.$last && sliderCtrl.initialize() | ||
| + | } | ||
| + | } | ||
| + | }), angular.module(" | ||
| + | return { | ||
| + | templateUrl: | ||
| + | link: function(scope, | ||
| + | var r = 4 * Math.random() + 2.5, | ||
| + | t = .25 * Math.PI, | ||
| + | labelX = r + r * Math.cos(t), | ||
| + | labelY = r + r * Math.sin(t); | ||
| + | scope.circleStyle = { | ||
| + | width: 2 * r + " | ||
| + | height: 2 * r + " | ||
| + | }, scope.labelStyle = { | ||
| + | top: labelY + " | ||
| + | left: labelX + " | ||
| + | }, setTimeout(function() { | ||
| + | element.addClass(" | ||
| + | }, 200 * scope.$index + 1500) | ||
| + | } | ||
| + | } | ||
| + | }), angular.module(" | ||
| + | return { | ||
| + | scope: { | ||
| + | imageLoaderSrc: | ||
| + | }, | ||
| + | template: '< | ||
| + | link: function(scope, | ||
| + | function loadImage() { | ||
| + | image = new Image, image.onload = onImageLoaded, | ||
| + | } | ||
| + | |||
| + | function onImageLoaded() { | ||
| + | void 0 !== attrs.backgroundImage && scope.$emit(" | ||
| + | } | ||
| + | |||
| + | function onImageError() { | ||
| + | element.removeClass(" | ||
| + | } | ||
| + | var image; | ||
| + | scope.$watch(" | ||
| + | val ? setTimeout(function() { | ||
| + | loadImage() | ||
| + | }, 300) : onImageError() | ||
| + | }) | ||
| + | } | ||
| + | } | ||
| + | }), angular.module(" | ||
| + | return { | ||
| + | scope: { | ||
| + | items: " | ||
| + | }, | ||
| + | templateUrl: | ||
| + | link: function(scope, | ||
| + | scope.gallerySliderOptions = { | ||
| + | slidesPerView: | ||
| + | pagination: " | ||
| + | nextButton: " | ||
| + | prevButton: " | ||
| + | paginationClickable: | ||
| + | preloadImages: | ||
| + | lazyLoading: | ||
| + | loop: !0 | ||
| + | } | ||
| + | } | ||
| + | } | ||
| + | }), angular.module(" | ||
| + | return { | ||
| + | scope: { | ||
| + | data: " | ||
| + | }, | ||
| + | templateUrl: | ||
| + | link: function(scope, | ||
| + | var id, base = " | ||
| + | scope.visible = !1, scope.$watch(" | ||
| + | if (scope.data && scope.data.content) { | ||
| + | if (!scope.data.content.url) return void scope.stop(); | ||
| + | id = scope.data.content.url.split(" | ||
| + | } else scope.stop() | ||
| + | }), scope.play = function() { | ||
| + | scope.iframe_url = $sce.trustAsResourceUrl(base.replace(" | ||
| + | }, scope.stop = function() { | ||
| + | scope.iframe_url = $sce.trustAsResourceUrl(" | ||
| + | }, window.uploadDone = function() { | ||
| + | scope.data && (scope.visible = !0, scope.$apply()) | ||
| + | } | ||
| + | } | ||
| + | } | ||
| + | }]), angular.module(" | ||
| + | return { | ||
| + | scope: !0, | ||
| + | controller: [" | ||
| + | this.initialize = function() { | ||
| + | $scope.init() | ||
| + | } | ||
| + | }], | ||
| + | link: function(scope, | ||
| + | var p, defaults = { | ||
| + | itemSelector: | ||
| + | percentPosition: | ||
| + | masonry: { | ||
| + | columnWidth: | ||
| + | } | ||
| + | }; | ||
| + | scope.init = function() { | ||
| + | setTimeout(function() { | ||
| + | p = new Isotope(element[0], | ||
| + | }, 200), setTimeout(function() { | ||
| + | p.arrange() | ||
| + | }, 300) | ||
| + | } | ||
| + | } | ||
| + | } | ||
| + | }), angular.module(" | ||
| + | return { | ||
| + | require: " | ||
| + | link: function(scope, | ||
| + | scope.$last && packeryCtrl.initialize() | ||
| + | } | ||
| + | } | ||
| + | }), angular.module(" | ||
| + | return { | ||
| + | scope: { | ||
| + | data: " | ||
| + | }, | ||
| + | template: '< | ||
| + | link: function(scope, | ||
| + | function generate_media_cta(type) { | ||
| + | switch (type) { | ||
| + | case " | ||
| + | return "watch now"; | ||
| + | case " | ||
| + | return " | ||
| + | case " | ||
| + | return " | ||
| + | case " | ||
| + | return "view now"; | ||
| + | case " | ||
| + | return "watch now"; | ||
| + | default: | ||
| + | return "view " + type | ||
| + | } | ||
| + | } | ||
| + | |||
| + | function get_image_url(id, | ||
| + | return files[id] ? files[id].url : null | ||
| + | } | ||
| + | |||
| + | function build_card() { | ||
| + | switch (scope.data.type) { | ||
| + | case " | ||
| + | scope.template_url = " | ||
| + | break; | ||
| + | case " | ||
| + | scope.template_url = " | ||
| + | break; | ||
| + | case " | ||
| + | scope.template_url = " | ||
| + | break; | ||
| + | case " | ||
| + | scope.template_url = " | ||
| + | } | ||
| + | if (!scope.data.image && !scope.data.featured_image) { | ||
| + | var random_drop_style = Math.floor(5 * Math.random()); | ||
| + | element.addClass(" | ||
| + | } | ||
| + | } | ||
| + | scope.$watch(" | ||
| + | val && build_card() | ||
| + | }), scope.get_template_url = function() { | ||
| + | return scope.template_url | ||
| + | }, scope.show_ad_video = function(youtube_id) { | ||
| + | if (youtube_id) { | ||
| + | var iframeHtml = '< | ||
| + | $.fancybox(iframeHtml, | ||
| + | title: "", | ||
| + | closeBtn: !1, | ||
| + | closeClick: !0, | ||
| + | width: 560, | ||
| + | height: 300, | ||
| + | autoSize: !1, | ||
| + | autoHeight: !1, | ||
| + | scrolling: !1, | ||
| + | helpers: { | ||
| + | overlay: { | ||
| + | closeClick: !0, | ||
| + | locked: !1, | ||
| + | css: { | ||
| + | position: " | ||
| + | width: " | ||
| + | height: " | ||
| + | top: 0, | ||
| + | left: 0, | ||
| + | background: " | ||
| + | zIndex: 0 | ||
| + | } | ||
| + | } | ||
| + | } | ||
| + | }) | ||
| + | } | ||
| + | }, scope.is_playing = !1, scope.toggle_music = function() { | ||
| + | scope.is_playing ? (scope.is_playing = !1, element.removeClass(" | ||
| + | } | ||
| + | } | ||
| + | } | ||
| + | }), angular.module(" | ||
| + | return { | ||
| + | scope: !1, | ||
| + | restrict: " | ||
| + | link: function(scope, | ||
| + | function render_background() { | ||
| + | var is_burst = " | ||
| + | background.onImageLoaded(function() { | ||
| + | var img_data = background.getOriginalImageData(); | ||
| + | img_data = Image.duotone(img_data, | ||
| + | w: 900, | ||
| + | h: 900, | ||
| + | x: -300, | ||
| + | y: -300 | ||
| + | } : { | ||
| + | w: 450, | ||
| + | h: 450, | ||
| + | x: -75, | ||
| + | y: -75 | ||
| + | }) | ||
| + | }), card.background.update({ | ||
| + | fill: scope.card.theme.background | ||
| + | }), background.changeURL(is_burst ? scope.card.burst : scope.card.image) | ||
| + | } | ||
| + | |||
| + | function render_text() { | ||
| + | return scope.card.track ? (text.song.changeText(scope.card.track), | ||
| + | } | ||
| + | |||
| + | function format_text(type) { | ||
| + | switch (type) { | ||
| + | case " | ||
| + | text.headline.update({ | ||
| + | y: 100 | ||
| + | }), text.songxs.update({ | ||
| + | y: 138 | ||
| + | }), text.from.update({ | ||
| + | y: 170 | ||
| + | }), text.artist.update({ | ||
| + | y: 170 | ||
| + | }); | ||
| + | break; | ||
| + | default: | ||
| + | text.headline.update({ | ||
| + | y: 100 | ||
| + | }), text.song.update({ | ||
| + | y: 145 | ||
| + | }), text.from.update({ | ||
| + | y: 178 | ||
| + | }), text.artist.update({ | ||
| + | y: 178 | ||
| + | }) | ||
| + | } | ||
| + | for (var t in text) text[t].update({ | ||
| + | fill: scope.card.theme.text | ||
| + | }) | ||
| + | } | ||
| + | |||
| + | function render_user() { | ||
| + | if (scope.card.user) { | ||
| + | var img = new window.Image; | ||
| + | img.crossOrigin = " | ||
| + | var c = document.createElement(" | ||
| + | ctx = c.getContext(" | ||
| + | ctx.beginPath(), | ||
| + | var d = ctx.getImageData(0, | ||
| + | avatar.setImageData(d), | ||
| + | y: 15 | ||
| + | }) | ||
| + | }, img.src = scope.card.user.images[0].url, | ||
| + | y: 35 | ||
| + | }) | ||
| + | } | ||
| + | } | ||
| + | |||
| + | function onMouseLeave() { | ||
| + | is_dragging = !1 | ||
| + | } | ||
| + | |||
| + | function onMouseDown(x, | ||
| + | drag_position.x = x - background.x, | ||
| + | } | ||
| + | |||
| + | function onMouseUp() { | ||
| + | is_dragging = !1 | ||
| + | } | ||
| + | |||
| + | function onMouseMove(x, | ||
| + | if (is_dragging) { | ||
| + | var _x = x - drag_position.x, | ||
| + | _y = y - drag_position.y; | ||
| + | _x >= -1 ? _x = -1 : _x + background.w <= card.width - 1 && (_x = card.width - background.w + 1), _y >= -1 ? _y = -1 : _y + background.h <= card.height - 1 && (_y = card.height - background.h + 1), background.update({ | ||
| + | x: _x, | ||
| + | y: _y | ||
| + | }) | ||
| + | } | ||
| + | } | ||
| + | var card = new Postcard(element[0], | ||
| + | filename: " | ||
| + | }), | ||
| + | background = card.addImage(" | ||
| + | avatar = (card.addImage(" | ||
| + | x: 0, | ||
| + | y: 260, | ||
| + | w: 300, | ||
| + | h: 40 | ||
| + | }), card.addImage(" | ||
| + | x: 15, | ||
| + | y: -45, | ||
| + | w: 35, | ||
| + | h: 35 | ||
| + | })), | ||
| + | username = card.addText(" | ||
| + | x: 58, | ||
| + | y: -35, | ||
| + | family: " | ||
| + | size: " | ||
| + | }), | ||
| + | text = { | ||
| + | headline: card.addText(" | ||
| + | x: 15, | ||
| + | y: -15, | ||
| + | family: " | ||
| + | size: " | ||
| + | }), | ||
| + | song: card.addText(" | ||
| + | x: 15, | ||
| + | y: 128, | ||
| + | family: " | ||
| + | size: " | ||
| + | }), | ||
| + | songxs: card.addText(" | ||
| + | x: 15, | ||
| + | y: 121, | ||
| + | family: " | ||
| + | size: " | ||
| + | }), | ||
| + | from: card.addText(" | ||
| + | x: 15, | ||
| + | y: -15, | ||
| + | family: " | ||
| + | size: " | ||
| + | }), | ||
| + | artist: card.addText(" | ||
| + | x: 63, | ||
| + | y: -15, | ||
| + | family: " | ||
| + | size: " | ||
| + | }), | ||
| + | cta: card.addText(" | ||
| + | x: 15, | ||
| + | y: -15, | ||
| + | family: " | ||
| + | size: " | ||
| + | }) | ||
| + | }; | ||
| + | scope.refresh = function() { | ||
| + | scope.saved = !1, render_background(), | ||
| + | }, scope.$watch(" | ||
| + | var is_dragging = !1, | ||
| + | drag_position = {}; | ||
| + | scope.$watch(" | ||
| + | scope.drag ? (element.css(" | ||
| + | }), scope.save = function() { | ||
| + | Api.save_card(scope.card, | ||
| + | scope.saved = !0, Api.get_single_card(response).then(function(data) { | ||
| + | scope.imageUrl = encodeURIComponent(data.files[data.image_id].url) | ||
| + | }) | ||
| + | }) | ||
| + | }, scope.download = function(event) { | ||
| + | card.save(event) | ||
| + | }, PostcardTextObject.prototype.truncate = function(width) { | ||
| + | for (var t = this.text, i = 0; this.w > width;) this.changeText(t.substr(0, | ||
| + | } | ||
| + | } | ||
| + | } | ||
| + | }]), angular.module(" | ||
| + | return { | ||
| + | scope: { | ||
| + | media: " | ||
| + | }, | ||
| + | link: function(scope, | ||
| + | scope.$watch(" | ||
| + | if (element.removeClass(), | ||
| + | else switch (scope.media.media_type) { | ||
| + | case " | ||
| + | element.replaceWith('< | ||
| + | break; | ||
| + | case " | ||
| + | element.replaceWith('< | ||
| + | break; | ||
| + | case " | ||
| + | element.addClass(" | ||
| + | break; | ||
| + | case " | ||
| + | element.replaceWith('< | ||
| + | } | ||
| + | }) | ||
| + | } | ||
| + | } | ||
| + | }); | ||
| + | </ | ||