https://control2k.co.uk/scripts/flexewebCommerce/product/directives/attr-ddl.directive.js

1flxCommerceApp.directive('attrDdl', function ($http, $timeout) {
2    return {
3        restrict: 'AEC',
4        require: '^attrParent',
5        compile: function (tElem, tAttrs) {
6            return {
7                post: function ($scope, iElem, iAttrs, controller) {
8                    //Initilase event
9                    $scope.CurrentAttrType = iAttrs.name;
10
11                    //On click event
12                    iElem.bind('change', function (e) {
13                        if (!this.disabled) {
14
15                            $timeout(function () {
16                                $scope.$digest();
17                            });
18
19                            $scope.$broadcast('setIsSelectedToTrue-OptionElem', $scope.CurrentAttrType, this.value);
20                            controller.callBroadCast(this.value, $scope.CurrentAttrType, true);
21
22
23                        }
24                    });
25                    $scope.$on('sendOption', function (e, optionScope) {
26
27                        if (optionScope.isInStock) {
28                            controller.callBroadCast(optionScope.CurrentAttrValue, optionScope.CurrentAttrType, true);
29                        }
30                    });
31
32                }
33            }
34        },
35
36        controller: function ($scope) {
37
38            //Properties
39            $scope.CurrentAttrValue = null;
40            $scope.CurrentAttrType = null;
41
42        },
43    };
44});
45flxCommerceApp.directive('attrOption', function ($http, $timeout) {
46    return {
47        restrict: 'AEC',
48        require: '^attrDdl',
49        scope: [],
50        compile: function (tElem, tAttrs) {
51            window['flxAttributeDataCollection'].push({ AttrType: tAttrs.name, AttrValue: tAttrs.id, AttrElem: tElem[0] });
52            return {
53                post: function ($scope, iElem, iAttrs, controller) {
54                    //Initilase event
55                    $scope.CurrentAttrType = iAttrs.name;
56                    $scope.CurrentAttrValue = iAttrs.id;
57
58                    $scope.$on('calculateStock', function (e, data, inventoryService) {
59
60                        data.CurrentAttrValue = $scope.CurrentAttrValue;
61                        data.CurrentAttrType = $scope.CurrentAttrType;
62
63                        if (data.AttrTypeCount == 1) {
64                            $scope.isInStock = inventoryService.isInStock(data);
65                        }
66                        else {
67                            if (data.CurrentAttrType != data.InitAttrType) {
68                                if (data.CurrentAttrType != data.SelectedAttrType) {
69                                    $scope.isInStock = inventoryService.isInStock(data);
70                                }
71                            }
72                        }
73
74                        if (!$scope.isInStock) {
75                            iElem[0].innerHTML = iElem[0].value.concat(' - Out of stock');
76                            iElem[0].setAttribute('style', 'color: red;');
77                            iElem[0].setAttribute('disabled', 'true');
78                        }
79                        else {
80                            iElem[0].innerHTML = iElem[0].value;
81                            iElem[0].removeAttribute('style');
82                            iElem[0].removeAttribute('disabled');
83
84                            if (iElem[0].index == 0) {
85
86                                //Pre-select first element in selection if in stock
87                                $scope.isSelected = true;
88                                $scope.$emit('sendOption', $scope);
89                            }
90
91                        };
92
93
94                    });
95                    $scope.$on('setIsSelectedToFalse-AllTypes', function (e, attrType, selectedAttrValue) {
96
97                        if (selectedAttrValue != $scope.CurrentAttrValue) {
98                            iElem[0].selected = false;
99                            iElem[0].parentElement.selectedIndex = 0;
100                            $scope.isSelected = false;
101                            $timeout(function () {
102                                $scope.$digest();
103                            })
104                        }
105                    });
106                    $scope.$on('setIsSelectedToFalse-SingleType', function (e, attrType, selectedAttrValue) {
107
108                        if (attrType == $scope.CurrentAttrType) {
109                            if (selectedAttrValue != $scope.CurrentAttrValue) {
110                                iElem[0].selected = false;
111                                $scope.isSelected = false;
112                                $timeout(function () {
113                                    $scope.$digest();
114                                })
115
116                            }
117                        }
118                    });
119  
120                    $scope.$on('setIsSelectedToTrue-OptionElem', function (e, attrType, selectedAttrValue) {
121
122                        if (attrType == $scope.CurrentAttrType) {
123                            if (selectedAttrValue == $scope.CurrentAttrValue) {
124                                $scope.isSelected = true;
125
126                                //Update the view
127                                iElem[0].selected = 'selected';
128                            }
129                            else {
130                                $scope.isSelected = false;
131
132                                //Update the view
133                                iElem[0].selected = false;
134                            }
135                        }
136                    });
137                    $scope.$on('getSelectedValue', function (e) {
138
139                        if ($scope.isSelected) {
140                            window['flxSelectedAttribute'][$scope.CurrentAttrType] = $scope.CurrentAttrValue;
141                        }
142
143                    });
144
145                }
146            }
147        },
148
149        controller: function ($scope) {
150
151            //Properties
152            $scope.isInStock = true;
153            $scope.isSelected = false;
154            $scope.CurrentAttrValue = null;
155            $scope.CurrentAttrType = null;
156        },
157    };
158});