/lib/views/filter_store_view.js

  1/*
  2 * Copyright (c) 2012 Adobe Systems Incorporated. All rights reserved.
  3 * 
  4 * Licensed under the Apache License, Version 2.0 (the "License");
  5 * you may not use this file except in compliance with the License.
  6 * You may obtain a copy of the License at
  7 * 
  8 *     http://www.apache.org/licenses/LICENSE-2.0
  9 * 
 10 * Unless required by applicable law or agreed to in writing, software
 11 * distributed under the License is distributed on an "AS IS" BASIS,
 12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 13 * See the License for the specific language governing permissions and
 14 * limitations under the License.
 15 */
 16
 17(function(){
 18    function FilterStoreView(filterStore, filterList, filterListView, shaderEditor, type) {
 19        FilterStoreView.$super.call(this);
 20        
 21        this.type = this.filterTypes[type];
 22        this.filterStore = filterStore;
 23        this.filterStore.on("filterAdded", this.onFilterAdded.bind(this));
 24        this.filterStore.on("filterDeleted", this.onFilterDeleted.bind(this));
 25        
 26        this.filterList = filterList;
 27        this.filterListView = filterListView;
 28        this.shaderEditor = shaderEditor; 
 29
 30        this.dockPanel = new Global.DockPanel(this.type.name);
 31        
 32        this.filterStockListEl = $("<div />").addClass("filter-stock-list");
 33        this.filterStockEl = $("<div />")
 34                    .addClass("filter-stock")
 35                    .append(this.filterStockListEl)
 36                    .appendTo(this.dockPanel.el);
 37
 38        this.filters = []; 
 39
 40    }
 41      
 42    Global.Utils.extend(FilterStoreView).from(Global.EventDispatcher);
 43    
 44    $.extend(FilterStoreView.prototype, {
 45
 46        filterTypes: {
 47            "builtins": {
 48                name: "Built-in",
 49                check: function(filterConfig) {
 50                    return filterConfig.isBuiltin;
 51                }
 52            },
 53            "custom": {
 54                name: "Custom",
 55                check: function(filterConfig) {
 56                    return !filterConfig.isBuiltin && !filterConfig.isFork;
 57                }
 58            },
 59            "forked": {
 60                name: "Forked Custom",
 61                check: function(filterConfig) {
 62                    return !filterConfig.isBuiltin && filterConfig.isFork;
 63                }
 64            }
 65        },
 66
 67        onFilterAdded: function(filterConfig, loadedFromPreset) {
 68            if (!this.type.check(filterConfig))
 69                return;                
 70                
 71            function addFilter(e){
 72                e.preventDefault()
 73                self.filterListView.dockPanel.setActive(true);
 74                var filter = self.filterList.addFilter(filterConfig);
 75                filter.setActive(true);
 76                self.fire("filterSelected", [filter]);
 77            }
 78
 79            var self = this;
 80            var el = $("<div />")
 81                    .addClass("filter-item")
 82                    .addClass(filterConfig.isBuiltin ? "builtin-filter" : "custom-filter")
 83                    .data("filterConfig", filterConfig)
 84                    .attr("data-filterName", encodeURIComponent(filterConfig.name))
 85                    .click(addFilter);
 86            
 87            if (filterConfig.isFork)
 88                el.addClass("forked-filter");
 89
 90            var cssPreview = filterConfig.generatePreviewCode(),
 91                previewEl = $("<div />")
 92                            .addClass("filter-preview")
 93                            .css("-webkit-filter", cssPreview)
 94                            .appendTo(el);
 95
 96            var titleEl = $("<div />")
 97                            .addClass("filter-label")
 98                            .text(filterConfig.label)
 99                            .appendTo(el);
100                             
101            var buttonBox = $("<div class='button-box'>");
102            el.append(buttonBox)
103                
104            if (!filterConfig.isBuiltin) { 
105                if (!filterConfig.isFork) {
106                    buttonBox.append($("<a href='#' />")
107                        .addClass("customize-link icon icon-fork")
108                        .text("Fork")
109                        .attr("title", "Fork filter")
110                        .click(function(e) {
111                            e.stopPropagation();
112                            e.preventDefault();
113                            self.forkFilter(filterConfig);
114                        }));
115                } else {
116                    buttonBox.append($("<a href='#' />")
117                        .addClass("customize-link icon icon-edit")
118                        .text("Edit")
119                        .attr("title", "Edit filter")
120                        .click(function(e) {
121                            e.stopPropagation();  
122                            e.preventDefault();
123                            self.customizeFilter(el, filterConfig);
124                        }));
125                    buttonBox.append($("<a href='#'/>")
126                        .addClass("icon icon-remove")
127                        .text("Delete")
128                        .attr("title", "Delete filter")
129                        .click(function(e) {
130                            e.stopPropagation();
131                            e.preventDefault();
132                            var message = "Are you sure you want to delete the '"+ filterConfig.label +"' filter?";
133                            
134                            if(window.confirm(message))
135                                self.deleteFilter(filterConfig);
136                        }));
137                }
138            }
139
140            filterConfig.on("configChanged", this.onFilterConfigChanged.bind(this, filterConfig, titleEl, previewEl));
141
142            this.insertFilterElement(el, filterConfig);
143
144            if (filterConfig.isFork && !loadedFromPreset) {
145                this.dockPanel.setActive(true);
146                el[0].scrollIntoView();
147                el.hide().effect("highlight", {}, 400);
148                this.customizeFilter(el, filterConfig);
149                var filter = self.filterList.addFilter(filterConfig);
150                filter.setActive(true);
151            }
152        },
153        
154        onFilterDeleted: function(filterConfig){  
155            this.filters.forEach(function(filter, index){
156                if (filter.data("filterConfig").name === filterConfig.name){
157                    filter.remove()
158                    this.filters.splice(index, 1)
159                }
160            }.bind(this))
161            
162            if (this.shaderEditor.filter && this.shaderEditor.filter.name === filterConfig.name){
163                this.shaderEditor.hide()
164            }
165        },
166
167        insertFilterElement: function(el, filterConfig) {
168            this.filters.push(el);
169
170            this.filters.sort(function(elA, elB) {
171                var a = elA.data("filterConfig"),
172                    b = elB.data("filterConfig");
173                return a.name.localeCompare(b.name);
174            });
175
176            var index = this.filters.indexOf(el);
177            if (index == this.filters.length - 1)
178                this.filterStockListEl.append(el);
179            else
180                this.filters[index + 1].before(el);
181        },
182
183        forkFilter: function(filterConfig) {
184            this.filterStore.forkFilter(filterConfig);
185        },
186        
187        deleteFilter: function(filterConfig){
188            this.filterStore.deleteFilter(filterConfig)
189        },
190
191        customizeFilter: function(el, filterConfig) {
192            $.each(this.filters, function(i, el) { el.removeClass("current"); });
193            el.addClass("current");
194            this.shaderEditor.loadFilter(filterConfig);
195        },
196
197        onFilterConfigChanged: function(filterConfig, titleEl, previewEl) {
198            titleEl.text(filterConfig.label);
199            previewEl.css("-webkit-filter", filterConfig.generatePreviewCode());
200        },
201
202        insertUnsupportedPopup: function(el) {
203            this.unsupportedPopupEl = el.clone(true);
204            this.filterStockListEl.before(this.unsupportedPopupEl);
205        }
206    });
207
208    Global.FilterStoreView = FilterStoreView;
209})();