',\n };\n });\n }\n function getRollTypeOptions() {\n var options = [{\n value: 'Reverse Roll',\n description: 'Fabric falls off the FRONT of the roll.',\n image: '/assets/images/reverse-roll.svg',\n },{\n value: 'Regular Roll',\n description: 'Fabric falls off the BACK of the roll.',\n image: '/assets/images/regular-roll.svg',\n }];\n return options.map(function(item) {\n return {\n value: item.value,\n html: '
'\n + '
'\n + ''\n + '
' + item.description + '
',\n };\n });\n }\n\n function getMotorPositionOptions() {\n var options = [{\n value: 'Right Side',\n description: 'Motor is used to raise and lower window shade.',\n image: '/assets/images/right-motor.svg',\n }, {\n value: 'Left Side',\n description: 'Motor is used to raise and lower window shade.',\n image: '/assets/images/left-motor.svg',\n }];\n return options.map(function(item) {\n return {\n value: item.value,\n html: '
'\n + '
'\n + ''\n + '
' + item.description + '
',\n };\n });\n }\n\n function getControlPositionOptions() {\n var options = [{\n value: 'Right Side',\n description: 'Chain is used to raise and lower window shade.',\n image: '/assets/images/right-control.svg',\n }, {\n value: 'Left Side',\n description: 'Chain is used to raise and lower window shade.',\n image: '/assets/images/left-control.svg',\n }];\n return options.map(function(item) {\n return {\n value: item.value,\n html: '
'\n + '
'\n + ''\n + '
' + item.description + '
',\n };\n });\n }\n function getControlColorOptions() {\n var options = [{\n value: 'White',\n description: 'Continuous nylon cord with white plastic beads.',\n image: '/assets/images/white-chain.svg',\n }, {\n value: 'Black',\n description: 'Continuous nylon cord with black plastic beads.',\n image: '/assets/images/black-chain.svg',\n },\n {\n value: 'Stainless Steel',\n description: 'Rust resistant stainless steel chain.',\n image: '/assets/images/aluminum-chain.svg',\n }];\n return options.map(function(item) {\n return {\n value: item.value,\n html: '
'\n + '
'\n + ''\n + '
' + item.description + '
',\n };\n });\n }\n function getFormOptions() {\n return [\n { \n label: 'Mounting Style',\n fieldKey: 'mounting', \n options: getMountingStyleOptions(), \n modalFilename: 'mounting-options.view' \n },\n { \n label: 'Image Orientation', \n fieldKey: 'imageOrientation', \n options: getImageOrientationOptions(),\n modalFilename: 'image-orientation.view'\n },\n { \n label: 'Roll Type', \n fieldKey: 'rollType', \n options: getRollTypeOptions(),\n modalFilename: 'roll-type.view',\n isDisabled: function(orderMetadata) {\n return orderMetadata && orderMetadata.fascia !== 'No Fascia';\n }\n },\n { \n label: 'Chain Position', \n fieldKey: 'controlPosition', \n options: getControlPositionOptions(),\n modalFilename: 'chain-position.view',\n isVisible: function(orderMetadata) {\n return orderMetadata && orderMetadata.motorization === 'No Motorization';\n }\n },\n { \n label: 'Motor Position', \n fieldKey: 'controlPosition', \n options: getMotorPositionOptions(),\n modalFilename: 'motor-position.view',\n isVisible: function(orderMetadata) {\n return orderMetadata && orderMetadata.motorization !== 'No Motorization';\n }\n },\n { \n label: 'Chain Color', \n fieldKey: 'controlColor', \n options: getControlColorOptions(),\n modalFilename: 'chain-color.view',\n disabledMessage: 'Not applicable with motorization',\n isDisabled: function(orderMetadata) {\n return orderMetadata && orderMetadata.motorization !== 'No Motorization';\n }\n },\n ];\n }\n\n function getInchesOptions(start, count) {\n return Array.apply(0, Array(count - start + 1))\n .map(function (element, index) { \n var val = index + start;\n return toInchesOption(val);\n });\n }\n\n function toInchesOption(val) {\n return { value: val, label: val + '″' }; \n }\n\n function toLabelValueObj(item) {\n return { value: item, label: item }; \n }\n\n function getFractionalInchesOptions() {\n return ['0', '1/8', '1/4', '3/8', '1/2', '5/8', '3/4', '7/8'].map(toInchesOption);\n }\n \n function calcSizeCost(metadata) {\n var min = 24, step = 6, count = 25;\n\n var widthId = calcDimensionIndex(metadata.width, metadata.widthFraction, count - 1);\n var heightId = calcDimensionIndex(metadata.height, metadata.heightFraction, count - 2);\n\n var offset = heightId * count;\n var pricing = getShadesPricing();\n return pricing[offset + widthId];\n }\n\n function calcDimensionIndex(whole, fraction, max) {\n var min = 24, step = 6, count = 25;\n var index = parseInt((whole - min) / step);\n if (((whole - min) % step || (fraction && fraction !== '0')) && index + 1 <= max) {\n return index + 1;\n }\n return index;\n }\n\n function getOrderTax(orderMetadata) {\n var shippingAddress = orderMetadata.shippingAddress;\n if (!isTaxIncluded(shippingAddress)) {\n return undefined;\n }\n var taxesRatings = getTaxesRatings();\n return taxesRatings[shippingAddress.state];\n }\n\n function isTaxIncluded(shippingAddress) {\n var states = Object.keys(getTaxesRatings());\n return states.indexOf(shippingAddress.state) >= 0;\n }\n\n function getTotalOrderCost(orderCost, orderMetadata) {\n if (!isTaxIncluded(orderMetadata.shippingAddress)) {\n return orderCost;\n }\n return orderCost + (orderCost * getOrderTax(orderMetadata) / 100);\n }\n\n function getTaxesRatings() {\n return {\n 'California': 8.75,\n };\n }\n\n function getBaseMetadataKeys() {\n return [\n 'width',\n 'height',\n 'scale',\n 'widthFraction',\n 'heightFraction',\n ];\n }\n\n function getShadesPricing() {\n return [240.08,249.10,255.13,266.00,275.17,336.19,354.21,369.23,428.25,449.27,461.29,477.31,483.33,643.35,649.38,731.40,787.42,805.44,811.46,851.48,907.50,927.52,933.54,975.56,981.58,\n 244.33,254.42,261.50,273.58,283.67,345.75,364.83,380.92,441.00,463.08,476.17,493.25,500.33,661.42,668.50,751.58,808.67,827.75,834.83,875.92,933.00,954.08,961.17,1004.25,1011.33,\n 248.58,259.73,267.88,281.02,292.17,355.31,375.46,392.60,453.75,476.90,491.04,509.19,517.33,679.48,687.63,771.77,829.92,850.06,858.21,900.35,958.50,980.65,988.79,1032.94,1041.08,\n 252.83,268.04,277.25,291.46,302.67,366.88,388.08,406.29,468.50,492.71,507.92,527.13,536.33,699.54,708.75,793.96,853.17,874.38,883.58,926.79,986.00,1009.21,1018.42,1063.63,1072.83,\n 259.08,273.35,283.63,298.90,311.17,376.44,398.71,417.98,481.25,506.52,522.79,543.06,553.33,717.60,727.88,814.15,874.42,896.69,906.96,951.23,1011.50,1035.77,1046.04,1092.31,1102.58,\n 263.33,280.67,292.00,308.33,322.67,389.00,411.33,431.67,496.00,522.33,539.67,561.00,572.33,737.67,749.00,836.33,897.67,921.00,932.33,977.67,1039.00,1064.33,1075.67,1124.00,1135.33,\n 269.58,285.98,298.38,315.77,331.17,398.56,421.96,443.35,508.75,536.15,554.54,576.94,589.33,755.73,768.13,856.52,918.92,943.31,955.71,1002.10,1064.50,1090.90,1103.29,1152.69,1165.08,\n 273.83,293.29,306.75,325.21,341.67,410.13,434.58,457.04,523.50,552.96,571.42,594.88,608.33,775.79,789.25,880.71,944.17,969.63,983.08,1031.54,1095.00,1121.46,1134.92,1185.38,1198.83,\n 280.08,298.60,313.13,332.65,350.17,419.69,445.21,468.73,536.25,566.77,586.29,610.81,625.33,793.85,808.38,900.90,965.42,991.94,1006.46,1055.98,1120.50,1148.02,1162.54,1214.06,1228.58,\n 286.33,305.92,321.50,342.08,360.67,431.25,457.83,482.42,551.00,582.58,603.17,629.75,645.33,813.92,829.50,926.08,991.67,1018.25,1033.83,1084.42,1150.00,1179.58,1195.17,1246.75,1262.33,\n 290.58,311.23,327.88,349.52,369.17,440.81,468.46,494.10,563.75,596.40,618.04,645.69,662.33,831.98,848.63,946.27,1012.92,1040.56,1057.21,1108.85,1175.50,1206.15,1222.79,1275.44,1292.08,\n 296.83,318.54,336.25,358.96,379.67,452.38,481.08,507.79,585.50,612.21,634.92,683.63,701.33,917.04,934.75,968.46,1036.17,1085.88,1103.58,1135.29,1203.00,1236.71,1254.42,1308.13,1325.83,\n 301.08,323.85,342.63,366.40,388.17,461.94,491.71,519.48,598.25,626.02,649.79,699.56,718.33,935.10,953.88,988.65,1057.42,1108.19,1126.96,1159.73,1228.50,1263.27,1282.04,1336.81,1355.58,\n 307.33,331.17,351.00,375.83,398.67,473.50,510.33,540.17,613.00,641.83,666.67,717.50,737.33,955.17,975.00,1010.83,1080.67,1132.50,1152.33,1188.17,1258.00,1293.83,1313.67,1369.50,1389.33,\n 311.58,336.48,357.38,383.27,407.17,483.06,520.96,551.85,625.75,655.65,681.54,733.44,754.33,973.23,994.13,1031.02,1101.92,1154.81,1175.71,1212.60,1283.50,1320.40,1341.29,1398.19,1419.08,\n 329.83,355.79,377.75,405.71,430.67,508.63,533.58,561.54,636.50,671.46,699.42,751.38,773.33,993.29,1015.25,1053.21,1125.17,1179.13,1201.08,1243.04,1315.00,1352.96,1374.92,1490.88,1512.83,\n 334.08,361.10,384.13,413.15,439.17,518.19,544.21,573.23,649.25,685.27,714.29,767.31,790.33,1011.35,1034.38,1073.40,1146.42,1201.44,1224.46,1267.48,1340.50,1379.52,1402.54,1519.56,1542.58,\n 340.33,370.42,394.50,424.58,453.67,533.75,562.83,592.92,672.00,701.08,731.17,785.25,809.33,1031.42,1055.50,1095.58,1169.67,1227.75,1251.83,1293.92,1368.00,1408.08,1432.17,1552.25,1576.33,\n 344.58,375.73,400.88,432.02,462.17,543.31,573.46,604.60,684.75,714.90,746.04,801.19,826.33,1049.48,1074.63,1115.77,1190.92,1250.06,1275.21,1318.35,1393.50,1434.65,1459.79,1580.94,1606.08,\n 350.83,383.04,409.25,441.46,472.67,554.88,586.08,618.29,699.50,730.71,762.92,819.13,845.33,1069.54,1095.75,1137.96,1214.17,1275.38,1301.58,1346.79,1423.00,1467.21,1493.42,1617.63,1643.83,\n 355.08,388.35,415.63,448.90,481.17,564.44,596.71,629.98,712.25,744.52,777.79,835.06,862.33,1087.60,1114.88,1158.15,1235.42,1297.69,1324.96,1371.23,1448.50,1493.77,1521.04,1646.31,1673.58,\n 361.33,396.67,425.00,458.33,492.67,576.00,610.33,643.67,728.00,761.33,794.67,853.00,881.33,1107.67,1136.00,1180.33,1258.67,1322.00,1350.33,1402.67,1481.00,1528.33,1556.67,1685.00,1713.33,\n 365.58,401.98,431.38,465.77,501.17,585.56,620.96,655.35,740.75,775.15,809.54,868.94,898.33,1125.73,1155.13,1200.52,1279.92,1344.31,1373.71,1427.10,1506.50,1554.90,1584.29,1713.69,1743.08,\n 369.83,407.29,437.75,473.21,509.67,595.13,631.58,667.04,753.50,788.96,824.42,884.88,915.33,1143.79,1174.25,1220.71,1301.17,1366.63,1397.08,1451.54,1532.00,1581.46,1611.92,1742.38,1772.83];\n }\n\n function getFasciaPricing() {\n return [33, 35, 37, 37, 38, 40, 42, 46, 46, 52, 52, 64, 64, 69, 69, 79, 79, 90, 90, 100, 100, 100, 100, 100, 100];\n }\n }\n})();\n\n(function() {\n\t'use strict';\n\n\tangular.module('main').factory('cartService', CartService);\n\n\tfunction CartService() {\n var self = this;\n\n self.orderMetadata = createOrderMetadata();\n\n\t\treturn {\n getOrderMetadata: getOrderMetadata,\n remove: remove,\n };\n\n\t\tfunction getOrderMetadata() {\n\t\t\treturn self.orderMetadata;\n }\n\n function remove() {\n self.orderMetadata = createOrderMetadata();\n }\n \n function createOrderMetadata() {\n return {\n width: 30,\n height: 30,\n scale: 100,\n widthFraction: '',\n heightFraction: '',\n billingAddress: {\n country: 'United States',\n },\n shippingAddress: {\n country: 'United States',\n },\n rollType: 'Reverse Roll',\n\t\t\t};\n }\n\t}\n})();\n\n(function() {\n 'use strict';\n\n angular\n .module('home')\n .controller('HomeController', HomeController);\n\n function HomeController($log, $parse, $scope) {}\n})();\n\n(function() {\n\t'use strict';\n\n\tangular\n\t\t.module('checkout')\n\t\t.controller('CheckoutController', CheckoutController);\n\n\tfunction CheckoutController(\n\t\t$log,\n\t\t$scope,\n\t\t$rootScope,\n\t\t$state,\n\t\tstripeService,\n\t\tcartService,\n\t\tfileHelperService,\n\t\tselectHelperService,\n\t\torderModalService,\n\t\tordersService,\n\t\torderHelperService\n\t) {\n\t\tvar vm = this;\n\n\t\tvm.isOrderProcessing = false;\n\t\tvm.orderCost = vm.totalOrderCost = vm.orderTax = 0;\n\t\tvm.isBillingAddressHidden = true;\n\t\tvm.shippingForm = vm.paymentForm = {};\n \tvm.stripeErrors = {};\n\n\t\tvm.editShade = editShade;\n\t\tvm.removeShade = removeShade;\n\t\tvm.getMotorization = getMotorization;\n\t\tvm.submitOrder = submitOrder;\n\t\tvm.isTaxIncluded = isTaxIncluded;\n\n\t\t$scope.$watch(function() {\n\t\t\treturn vm.orderTax;\n\t\t}, calculateOrderCost);\n\n\t\t(function init() {\n\t\t\tvm.orderMetadata = cartService.getOrderMetadata();\n var isCartEmpty = !vm.orderMetadata.imageBlob;\n\t\t\tif (isCartEmpty) {\n\t\t\t\treturn $state.go('home');\n\t\t\t}\n\t\t\tcalculateOrderCost();\n\t\t\tinitStripeElements();\n\t\t})();\n\n\t\tfunction initStripeElements() {\n\t\t\tvar elements = stripeService.createElements();\n vm.stripeCard = stripeService.createCard(elements);\n \n stripeService.createCardExpiration(elements).mount('.card-expiration');\n stripeService.createCardCvc(elements).mount('.card-cvc');\n\t\t\tvm.stripeCard.mount('.card-number');\n\t\t}\n\n\t\tfunction editShade() {\n\t\t\t$state.go('home');\n\t\t}\n\n\t\tfunction removeShade() {\n\t\t\tcartService.remove();\n\t\t\t$state.go('home');\n\t\t}\n\n\t\tfunction isTaxIncluded() {\n\t\t\tvm.orderTax = orderHelperService.getOrderTax(vm.orderMetadata);\n\t\t\tif (!vm.orderTax) {\n\t\t\t\treturn false;\n\t\t\t}\n\t\t\treturn true;\n\t\t}\n\n\t\tfunction submitOrder() {\n\t\t\ttriggerFormValidation(vm.shippingForm);\n\t\t\tif (!vm.shippingForm.$valid) return;\n\n\t\t\tvm.isOrderProcessing = true;\n\t\t\tstripeService\n\t\t\t\t.createToken(vm.stripeCard)\n\t\t\t\t.then(handleStripeToken)\n\t\t\t\t.catch(function(err) {\n vm.isOrderProcessing = false;\n \n validateStripeFields(err);\n\t\t\t\t\t$log.error('stripeToken-error', err);\n\t\t\t\t\t$scope.$apply();\n\t\t\t\t});\n\t\t}\n\n\t\tfunction handleStripeToken(obj) {\n\t\t\tsetTimeout(showOrderModal, 500);\n\n\t\t\tvar originalImage = fileHelperService.dataURItoBlob(\n\t\t\t\tvm.orderMetadata.imageBlob\n\t\t\t);\n\t\t\tvar imagesPromises = [\n\t\t\t\tfileHelperService.uploadImage(vm.orderMetadata.croppedImage, 0),\n\t\t\t\tfileHelperService.uploadImage(originalImage, 1),\n\t\t\t];\n\t\t\treturn Promise.all(imagesPromises)\n\t\t\t\t.then(function(urls) {\n\t\t\t\t\tif (!urls[0] || !urls[1]) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\treturn createOrder(obj, urls[0], urls[1]);\n\t\t\t\t})\n\t\t\t\t.catch(function(err) {\n\t\t\t\t\t$rootScope.$broadcast('orderStateChange', false);\n\t\t\t\t});\n\t\t}\n\n\t\tfunction showOrderModal() {\n\t\t\tvm.isOrderProcessing = false;\n\t\t\torderModalService.show();\n\t\t}\n\n\t\tfunction createOrder(stripeObj, croppedUrl, originalUrl) {\n\t\t\tvar data = {\n\t\t\t\ttoken: stripeObj.id,\n email: vm.orderMetadata.email,\n phone: vm.orderMetadata.phone,\n\t\t\t\tshipmentAddress: vm.orderMetadata.shippingAddress,\n\t\t\t\tbillingAddress: vm.orderMetadata.billingAddress,\n\t\t\t\tamount: vm.orderCost * 100, // cents\n\t\t\t\ttotalAmount: vm.totalOrderCost * 100, // cents\n\t\t\t\tmetadata: parseMetadata(),\n\t\t\t\tcroppedUrl: croppedUrl,\n\t\t\t\toriginalUrl: originalUrl,\n\t\t\t};\n\t\t\treturn ordersService\n\t\t\t\t.create(data)\n\t\t\t\t.then(function(response) {\n\t\t\t\t\t$log.debug('orderService-success', response);\n $rootScope.$broadcast('orderStateChange', true);\n $state.go('home');\n\t\t\t\t})\n\t\t\t\t.catch(function() {\n\t\t\t\t\t$rootScope.$broadcast('orderStateChange', false);\n\t\t\t\t});\n\t\t}\n\n\t\tfunction parseMetadata() {\n\t\t\tvar metadata = {};\n\t\t\tvar mainFormOptions = orderHelperService.getMainFormOptions();\n\t\t\tvar formOptions = orderHelperService\n\t\t\t\t.getFormOptions()\n\t\t\t\t.concat(mainFormOptions);\n\n\t\t\tvar metadataKeys = orderHelperService.getBaseMetadataKeys();\n\t\t\tvar keys = formOptions.map(function(item) {\n\t\t\t\treturn item.fieldKey;\n }).concat(metadataKeys);\n\n\t\t\tkeys.forEach(function(key) {\n\t\t\t\tmetadata[key] = selectHelperService.parse(vm.orderMetadata[key]);\n\t\t\t});\n\t\t\treturn metadata;\n\t\t}\n\n\t\tfunction triggerFormValidation(form) {\n\t\t\tangular.forEach(form.$error.required, function(field) {\n\t\t\t\tfield.$setDirty();\n\t\t\t});\n\t\t}\n\n\t\tfunction calculateOrderCost() {\n\t\t\tvm.orderCost = orderHelperService.getEstimatedCost(vm.orderMetadata);\n\t\t\tif (!isTaxIncluded()) {\n\t\t\t\tvm.totalOrderCost = vm.orderCost;\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tvm.totalOrderCost = orderHelperService.getTotalOrderCost(\n\t\t\t\tvm.orderCost,\n\t\t\t\tvm.orderMetadata\n\t\t\t);\n\t\t}\n\n\t\tfunction getMotorization() {\n\t\t\treturn vm.orderMetadata.motorization === 'None'\n\t\t\t\t? 'No Motorization'\n\t\t\t\t: vm.orderMetadata.motorization;\n }\n \n function validateStripeFields(error) {\n var code = error.code;\n if (code.includes('number')) {\n vm.stripeErrors = { card: true };\n }\n else if (code.includes('cvc')) {\n vm.stripeErrors = { cvc: true };\n }\n else if (code.includes('expiry')) {\n vm.stripeErrors = { expiry: true };\n }\n }\n\t}\n})();\n\n(function() {\n 'use strict';\n\n angular\n .module('app.services', [\n 'app.services.utility'\n ]);\n\n})();\n\n(function() {\n 'use strict';\n\n angular\n .module('app.filters', []);\n\n})();\n\n(function() {\n 'use strict';\n\n angular\n .module('app.filters')\n .filter('phonenumberFilter', phonenumberFilter);\n\n function phonenumberFilter() {\n\n return function(tel) {\n if (!tel) {\n return '';\n }\n\n var value = tel.toString().trim().replace(/^\\+/, '');\n\n if (value.match(/[^0-9]/)) {\n return tel;\n }\n\n var country, city, number;\n\n switch (value.length) {\n case 10: // +1PPP####### -> C (PPP) ###-####\n country = 1;\n city = value.slice(0, 3);\n number = value.slice(3);\n break;\n\n case 11: // +CPPP####### -> CCC (PP) ###-####\n country = value[0];\n city = value.slice(1, 4);\n number = value.slice(4);\n break;\n\n case 12: // +CCCPP####### -> CCC (PP) ###-####\n country = value.slice(0, 3);\n city = value.slice(3, 5);\n number = value.slice(5);\n break;\n\n default:\n return tel;\n }\n\n if (country == 1) {\n country = \"\";\n }\n\n number = number.slice(0, 3) + '-' + number.slice(3);\n\n return (country + \" (\" + city + \") \" + number).trim();\n }\n }\n\n\n function Ctrl($scope) {\n $scope.phoneNumber = 4085265552;\n }\n\n})();\n\n(function() {\n 'use strict';\n\n angular\n .module('app.filters')\n .filter('gtEventStartDate', gtEventStartDate);\n\n function gtEventStartDate() {\n\n return function ( items, value ) {\n\n var filteredItems = []\n\n angular.forEach(items, function ( item, cnt ) {\n\n //if ( cnt > value ) {\n\n // to add event, must be past 3rd in index AND date must be current\n var today = new Date();\n var eventStartDate = new Date(item.startDate);\n\n if (eventStartDate > today) {\n filteredItems.push(item);\n }\n //}\n });\n\n\n console.log('filteredItems.length', filteredItems.length);\n\n return filteredItems;\n }\n }\n\n\n})();\n\n\n\n // function gtEventStartDate() {\n\n // return function ( items, value ) {\n // var filteredItems = []\n // angular.forEach(items, function ( item, cnt ) {\n\n // //console.log('cnt', cnt);\n\n // var today = new Date();\n // var eventStartDate = new Date(item.startDate);\n\n // if (eventStartDate > today) {\n\n // //console.log('eventStartDate > today');\n\n // if ((value==0) && (cnt > 3)) {\n\n // //console.log('no-value', value);\n\n // // if no value provided, return first 3 (upcoming) events past today\n // filteredItems.push(item); \n // }\n\n // if ((value > 0) && (cnt < 2)) {\n\n // //console.log('value', value);\n\n // // must be greater than 3rd in index AND date must be current\n // filteredItems.push(item); \n // }\n // }\n\n // });\n // return filteredItems;\n\n // }\n // }\n(function() {\n 'use strict';\n\n angular\n .module('app.filters')\n .filter('formatTime', formatTime);\n\n function formatTime() {\n\n return function(timestamp, withtime) {\n if (!timestamp)\n return;\n\n if (withtime) {\n return moment(timestamp).format('lll'); // Jan 12, 2017\n }\n\n return moment(timestamp).format('ll'); // Jan 12, 2017\n\n // below returns eg. 5 days ago\n //var res = moment(timestamp).from();\n //return replace ? res.replace('ago', replace) : res;\n }\n }\n\n\n\n})();\n\n(function() {\n 'use strict';\n\n angular\n .module('app.filters')\n .filter('capitalize', capitalize);\n\n function capitalize() {\n\n return function(input, scope) {\n if (input !=null) {\n if (input.length>=1) {\n input = input.toLowerCase();\n return input.substring(0, 1).toUpperCase() + input.substring(1);\n }\n }\n }\n }\n\n\n\n})();\n\n(function() {\n 'use strict';\n\n angular\n .module('app.filters')\n .filter('addTargetBlank', addTargetBlank);\n\n function addTargetBlank(ENV_VARS) {\n return function(content) {\n var tree = angular.element('
' + content + '
');\n angular.forEach(tree.find('a'), function(element) {\n var anchor = angular.element(element);\n if (isExternalUrl(element.hostname)) {\n anchor.attr('target', '_blank');\n }\n });\n return angular.element('
').append(tree).html(); \n }\n\n function isExternalUrl(hostname) {\n if (!hostname || typeof hostname !== 'string') {\n return false;\n }\n return hostname.search(ENV_VARS.appDomain) < 0;\n }\n }\n})();\n\n(function() {\n 'use strict';\n\n angular\n .module('app.components', []);\n\n})();\n\n(function() {\n 'use strict';\n\n angular\n .module('app.directives')\n // .directive('pageTitle', pageTitle)\n // .directive('sideNavigation', sideNavigation)\n // .directive('iboxTools', iboxTools)\n // .directive('minimalizaSidebar', minimalizaSidebar)\n // .directive('vectorMap', vectorMap)\n // .directive('sparkline', sparkline)\n // .directive('icheck', icheck)\n // .directive('ionRangeSlider', ionRangeSlider)\n // .directive('dropZone', dropZone)\n // .directive('responsiveVideo', responsiveVideo)\n // .directive('chatSlimScroll', chatSlimScroll)\n // .directive('customValid', customValid)\n // .directive('fullScroll', fullScroll)\n // .directive('closeOffCanvas', closeOffCanvas)\n // .directive('clockPicker', clockPicker)\n // .directive('landingScrollspy', landingScrollspy)\n // .directive('fitHeight', fitHeight)\n // .directive('iboxToolsFullScreen', iboxToolsFullScreen)\n // .directive('slimScroll', slimScroll)\n // .directive('truncate', truncate)\n // .directive('touchSpin', touchSpin)\n // .directive('markdownEditor', markdownEditor)\n // .directive('categoryName', categoryName)\n // .directive('categorySelect', categorySelect)\n // .directive('categoryToggle', categoryToggle)\n .directive('topnavcollapse', topNavCollapse)\n .filter('cdn', cdnFilter);\n\n function cdnFilter(ENV_VARS) {\n return function(input) {\n if(!ENV_VARS || !ENV_VARS.s3BucketDomain || !ENV_VARS.cdnDomain) return input;\n return (input || '').replace(ENV_VARS.s3BucketDomain, ENV_VARS.cdnDomain);\n };\n }\n\n // /**\n // * sideNavigation - Directive for run metsiMenu on sidebar navigation\n // */\n // function sideNavigation($timeout) {\n // return {\n // restrict: 'A',\n // link: function(scope, element) {\n // // Call the metsiMenu plugin and plug it to sidebar navigation\n // $timeout(function() {\n // element.metisMenu();\n\n // });\n // }\n // };\n // };\n\n // /**\n // * responsibleVideo - Directive for responsive video\n // */\n // function responsiveVideo() {\n // return {\n // restrict: 'A',\n // link: function(scope, element) {\n // var figure = element;\n // var video = element.children();\n // video\n // .attr('data-aspectRatio', video.height() / video.width())\n // .removeAttr('height')\n // .removeAttr('width')\n\n // //We can use $watch on $window.innerWidth also.\n // $(window).resize(function() {\n // var newWidth = figure.width();\n // video\n // .width(newWidth)\n // .height(newWidth * video.attr('data-aspectRatio'));\n // }).resize();\n // }\n // }\n // }\n\n // /**\n // * iboxTools - Directive for iBox tools elements in right corner of ibox\n // */\n // function iboxTools($timeout) {\n // return {\n // restrict: 'A',\n // scope: true,\n // templateUrl: 'app/main/main-ibox_tools.view.html',\n // controller: function($scope, $element) {\n // // Function for collapse ibox\n // $scope.showhide = function() {\n // var ibox = $element.closest('div.ibox');\n // var icon = $element.find('i:first');\n // var content = ibox.find('div.ibox-content');\n // content.slideToggle(200);\n // // Toggle icon from up to down\n // icon.toggleClass('fa-chevron-up').toggleClass('fa-chevron-down');\n // ibox.toggleClass('').toggleClass('border-bottom');\n // $timeout(function() {\n // ibox.resize();\n // ibox.find('[id^=map-]').resize();\n // }, 50);\n // };\n // // Function for close ibox\n // $scope.closebox = function() {\n // var ibox = $element.closest('div.ibox');\n // ibox.remove();\n // }\n // }\n // };\n // }\n\n // /**\n // * iboxTools with full screen - Directive for iBox tools elements in right corner of ibox with full screen option\n // */\n // function iboxToolsFullScreen($timeout) {\n // return {\n // restrict: 'A',\n // scope: true,\n // templateUrl: 'app/main/main-ibox_tools_full_screen.view.html',\n // controller: function($scope, $element) {\n // // Function for collapse ibox\n // $scope.showhide = function() {\n // var ibox = $element.closest('div.ibox');\n // var icon = $element.find('i:first');\n // var content = ibox.find('div.ibox-content');\n // content.slideToggle(200);\n // // Toggle icon from up to down\n // icon.toggleClass('fa-chevron-up').toggleClass('fa-chevron-down');\n // ibox.toggleClass('').toggleClass('border-bottom');\n // $timeout(function() {\n // ibox.resize();\n // ibox.find('[id^=map-]').resize();\n // }, 50);\n // };\n // // Function for close ibox\n // $scope.closebox = function() {\n // var ibox = $element.closest('div.ibox');\n // ibox.remove();\n // };\n // // Function for full screen\n // $scope.fullscreen = function() {\n // var ibox = $element.closest('div.ibox');\n // var button = $element.find('i.fa-expand');\n // $('body').toggleClass('fullscreen-ibox-mode');\n // button.toggleClass('fa-expand').toggleClass('fa-compress');\n // ibox.toggleClass('fullscreen');\n // setTimeout(function() {\n // $(window).trigger('resize');\n // }, 100);\n // }\n // }\n // };\n // }\n\n // /**\n // * minimalizaSidebar - Directive for minimalize sidebar\n // */\n // function minimalizaSidebar($timeout) {\n // return {\n // restrict: 'A',\n // //template: '',\n // template: '
Printed side of shade faces AWAY from the window glass
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Exterior Facing
Printed side of shade faces TOWARDS from the window glass
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Installation Instructions
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
FAQs
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
Simply put, the image orientation refers to which direction you want your image to face. An interior facing orientation will face inside the room. This orientation allows you to admire your window treatment from inside your home or office. An exterior facing orientation will face the window and be seen from the outside.
Interior Facing
Printed side of shade faces AWAY from the window glass.
Printed side of shade faces AWAY from window glass.
Perfect for creating a unique environment inside your home or office.
Exterior Facing
Printed side of shade faces TOWARDS the window glass.
Printed side faces towards the outside
Perfect for storefronts looking to make a statement to the outside.
Frequently Asked Questions
What is the quality of the printed image?
Our fine art lineage makes OrangePiel a stickler for all things printed. If we wouldn\\'t be proud to hang, install it, or show it off in our own home, we won\\'t let it out of our site. With printing up to 1080 DPI, every print will be beautiful. Our UV Printing technology ensures your print will never fade.
Fits into hard-to-reach window coverings, providing the perfect solution for areas where access to wiring may be a challenge.
“My” feature allows you to set a preferred position for your window treatment, so your favorite setting is one button press away.
Hardwired
Features Somfy Sonesse 50 QUIET motor with smooth and silent movement.
Noise and vibration are absorbed into the motor to ensure high quality acoustic performance.
Provides aesthetically pleasing solutions for almost any interior installation.
Compatible with Radio Technology Somfy (RTS), including hand-held remotes, smartphone & tablet apps, wireless wall switches, table top controls, sensors, timers, and third-party automation systems.
Offers control via power switching.
Wireless Hand Held Remote
Omnidirectional, no need to aim the remote as it operates within a range of 65 ft.
Radio waves travel through walls, allowing you to adjust your window treatment from another room.
Simple programming makes it easy to change your preferences at any time.
Timer allows you to schedule your motorized shades to open and close automatically at your desired time.
Wireless Wall Mount Remote
Personalizable battery powered wall switch.
Features RTS technology.
No wiring required, which means no need for an electrician.
Easy to use and program.
Can be converted from one up to five channel buttons, depending on how many window coverings you want to control.
Available in three colors - black, white, or ivory.
Perfect when you need flexibility or for uniquely shaped windows.
Window treatment will extend past the window box.
Can make small windows appear larger because it gives you the ability to control how wide or how tall the window treatment is and where it is placed on the wall.
Great for layering window treatments or for shallow window frames.
Inside Mount
Shade mounted inside window box.
Perfect for when you want a clean, built-in look.
Can be mounted as deep or shallow as you want, with a minimum depth of 2\\\".
Least impact on woodwork and window frame details.
Great for small spaces or when you want to highlight decorative trim.
Frequently Asked Questions
I want a really clean look. Which mounting style will help me achieve this?
An inside mount will provide you with the cleanest look because the roll will sit inside of your window frame and can be mounted as shallow or deep as you’d like.
My window frame is very shallow. Which mounting style will work best for me?
For window frames with a depth of less than 2\\\", we suggest an outside mount, because there won’t be enough space to securely mount inside the frame.
My window frame is very deep. Which mounting style will work best for me?
If you have a deep window frame, an inside mount will give you the most versatility because the shade will sit closer to the window, leaving space on the sill.
How can I make my small window appear bigger?
An outside mount can enlarge the appearance of a small window, because the shade itself will be larger than the width of the window and you can choose where the window treatment is placed on the wall.
Privacy and/or blocking light is a concern for me. Which mounting style should I choose?
If privacy or blocking light are a concern, an outside mount will be the best choice because the shade will overlap the edge of the window, removing the gap created from the hardware of an inside mount.
Roll is concealed when shade is drawn, providing a sleek, minimalist look.
Allows clearance for door handles or windows with cranks.
Creates a gap between the window treatment and the window, allowing more light through than a regular roll.
Regular Roll
Fabric falls off the BACK of the roll.
Allows fabric to sit close to the window.
Best choice for inside mounting.
Allows slightly less light through than reverse roll.
Frequently Asked Questions
Which roll type should I choose if I have decorative hardware?
If you want to keep your decorative hardware visible, regular roll is the way to go.
Which roll type is best with an inside mount and shallow depth?
Regular roll is best with an inside mount, because the shade sits next to the window instead of protruding out into the room.
Which roll type is best if I want to block the most light possible when the shade is drawn?
Since the regular roll sits next to the glass, this will be your best option. Reverse roll will leave a gap between the window and the shade.
Privacy is a concern to me. Which roll type is best?
Regular roll is best if privacy is a concern, since it allows the shade to sit flush next to the window.
My window shade is going on a door or window with a crank. What is the best roll type for this situation?
Reverse roll would be best, because the fabric falls off the front of the shade, creating a gap between the shade and the window to clear the hardware.
I want to conceal the roll of the shade for a sleeker look. Which roll type is best?
Reverse roll would be best, because the fabric falls off the front of the shade, covering the roll.
Measure the exact window intended for the treatment.
Measure to the nearest 1/8\\\".
Do not take any deductions for clearance. OrangePiel will determine necessary deductions.
Double check your measurements, precision pays!
Consider Mounting Style
Depending on what mounting style best fits your project, the instructions will be slightly different.
Inside Mount
Shade mounted inside window box.
Measure the width inside the window opening at the top, middle, and bottom. Use the narrowest measurement as your \\\"Width\\\".
Measure height inside the window opening at the left, right, and center. Use the longest measurement as your \\\"Height\\\".
Outside Mount
Shade mounted outside and above window box.
Measure the desired width. To minimize light leakage, the shade should overlap the window opening at least 2\\\" on each side. Use this measurement as \\\"Width\\\".
Measure the desired height. Allow for enough space for mounting brackets above the window (3\\\") and enough overlap at the bottom to avoid a light gap. Use this measurement as \\\"Height\\\".
![\\\"\\\"](\\\"assets/images/logo.png\\\"){kind=logo}
![\\\"\\\"](\\\"/assets/images/bank-encryption.png\\\")
![](\\\"/assets/images/upload-rev-sm-2.gif\\\")
![\\\"\\\"](\\\"/assets/images/printed-window.svg\\\")
![\\\"\\\"](\\\"/assets/images/wrapped-fine-art.svg\\\")
![](\\\"/assets/images/white-chain.png\\\")
![](\\\"/assets/images/black-chain.png\\\")
![](\\\"/assets/images/aluminum-chain.png\\\")
![](\\\"/assets/images/left-control.svg\\\")
![](\\\"/assets/images/right-control.svg\\\")
![](\\\"/assets/images/sheerweave.svg\\\")
![](\\\"/assets/images/backlit.svg\\\")
![](\\\"/assets/images/blackout.svg\\\")
![](\\\"/assets/images/white-fascia.svg\\\")
![](\\\"/assets/images/black-fascia.svg\\\")
![](\\\"/assets/images/aluminum-fascia.svg\\\")
![](\\\"/assets/images/interior-facing.png\\\")
![](\\\"/assets/images/exterior-facing.png\\\")
![](\\\"/assets/images/interior-facing.svg\\\")
![](\\\"/assets/images/exterior-facing.svg\\\")
![](\\\"/assets/images/left-motor.svg\\\")
![](\\\"/assets/images/right-motor.svg\\\")
![](\\\"/assets/images/battery-operated.svg\\\")
![](\\\"/assets/images/hardwired.svg\\\")
![](\\\"/assets/images/remote.svg\\\")
![](\\\"/assets/images/wall-mount.svg\\\")
![](\\\"/assets/images/outside-mount.svg\\\")
![](\\\"/assets/images/inside-mount.svg\\\")
![](\\\"/assets/images/reverse-roll.svg\\\")
![](\\\"/assets/images/regular-roll.svg\\\")
![](\\\"/assets/images/measure-overview.svg\\\")
![](\\\"/assets/images/inside-mount-measure.svg\\\")
![](\\\"/assets/images/outside-mount-measure.svg\\\")