← Back to branch summary

~johnsca/charms/trusty/cloudfoundry/better-basic-reconciler-status

« back to all changes in this revision

Viewing changes to reconciler/ui/static/semantic/less/modules/behavior/colorize.js

  • Committer: Whit Morriss
  • Date: 2014-10-13 06:50:17 UTC
  • mto: (132.2.1 reconciler) (145.1.1 trunk)
  • mto: This revision was merged to the branch mainline in revision 156.
  • Revision ID: whit.morriss@canonical.com-20141013065017-0feo2ku3yllymkol
reorg reconciler

Show diffs side-by-side

added added

removed removed

Lines of Context:
reconciler/ui/static/semantic/less/modules/behavior/colorize.js
 
1
/*
 
2
 * # Semantic - Colorize
 
3
 * http://github.com/jlukic/semantic-ui/
 
4
 *
 
5
 *
 
6
 * Copyright 2014 Contributors
 
7
 * Released under the MIT license
 
8
 * http://opensource.org/licenses/MIT
 
9
 *
 
10
 */
 
11
 
 
12
;(function ( $, window, document, undefined ) {
 
13
 
 
14
  $.fn.colorize = function(parameters) {
 
15
    var
 
16
      settings        = $.extend(true, {}, $.fn.colorize.settings, parameters),
 
17
      // hoist arguments
 
18
      moduleArguments = arguments || false
 
19
    ;
 
20
    $(this)
 
21
      .each(function(instanceIndex) {
 
22
 
 
23
        var
 
24
          $module         = $(this),
 
25
 
 
26
          mainCanvas      = $('<canvas />')[0],
 
27
          imageCanvas     = $('<canvas />')[0],
 
28
          overlayCanvas   = $('<canvas />')[0],
 
29
 
 
30
          backgroundImage = new Image(),
 
31
 
 
32
          // defs
 
33
          mainContext,
 
34
          imageContext,
 
35
          overlayContext,
 
36
 
 
37
          image,
 
38
          imageName,
 
39
 
 
40
          width,
 
41
          height,
 
42
 
 
43
          // shortucts
 
44
          colors    = settings.colors,
 
45
          paths     = settings.paths,
 
46
          namespace = settings.namespace,
 
47
          error     = settings.error,
 
48
 
 
49
          // boilerplate
 
50
          instance   = $module.data('module-' + namespace),
 
51
          module
 
52
        ;
 
53
 
 
54
        module = {
 
55
 
 
56
          checkPreconditions: function() {
 
57
            module.debug('Checking pre-conditions');
 
58
 
 
59
            if( !$.isPlainObject(colors) || $.isEmptyObject(colors) ) {
 
60
              module.error(error.undefinedColors);
 
61
              return false;
 
62
            }
 
63
            return true;
 
64
          },
 
65
 
 
66
          async: function(callback) {
 
67
            if(settings.async) {
 
68
              setTimeout(callback, 0);
 
69
            }
 
70
            else {
 
71
              callback();
 
72
            }
 
73
          },
 
74
 
 
75
          getMetadata: function() {
 
76
            module.debug('Grabbing metadata');
 
77
            image     = $module.data('image') || settings.image || undefined;
 
78
            imageName = $module.data('name')  || settings.name  || instanceIndex;
 
79
            width     = settings.width        || $module.width();
 
80
            height    = settings.height       || $module.height();
 
81
            if(width === 0 || height === 0) {
 
82
              module.error(error.undefinedSize);
 
83
            }
 
84
          },
 
85
 
 
86
          initialize: function() {
 
87
            module.debug('Initializing with colors', colors);
 
88
            if( module.checkPreconditions() ) {
 
89
 
 
90
              module.async(function() {
 
91
                module.getMetadata();
 
92
                module.canvas.create();
 
93
 
 
94
                module.draw.image(function() {
 
95
                  module.draw.colors();
 
96
                  module.canvas.merge();
 
97
                });
 
98
                $module
 
99
                  .data('module-' + namespace, module)
 
100
                ;
 
101
              });
 
102
            }
 
103
          },
 
104
 
 
105
          redraw: function() {
 
106
            module.debug('Redrawing image');
 
107
            module.async(function() {
 
108
              module.canvas.clear();
 
109
              module.draw.colors();
 
110
              module.canvas.merge();
 
111
            });
 
112
          },
 
113
 
 
114
          change: {
 
115
            color: function(colorName, color) {
 
116
              module.debug('Changing color', colorName);
 
117
              if(colors[colorName] === undefined) {
 
118
                module.error(error.missingColor);
 
119
                return false;
 
120
              }
 
121
              colors[colorName] = color;
 
122
              module.redraw();
 
123
            }
 
124
          },
 
125
 
 
126
          canvas: {
 
127
            create: function() {
 
128
              module.debug('Creating canvases');
 
129
 
 
130
              mainCanvas.width     = width;
 
131
              mainCanvas.height    = height;
 
132
              imageCanvas.width    = width;
 
133
              imageCanvas.height   = height;
 
134
              overlayCanvas.width  = width;
 
135
              overlayCanvas.height = height;
 
136
 
 
137
              mainContext    = mainCanvas.getContext('2d');
 
138
              imageContext   = imageCanvas.getContext('2d');
 
139
              overlayContext = overlayCanvas.getContext('2d');
 
140
 
 
141
              $module
 
142
                .append( mainCanvas )
 
143
              ;
 
144
              mainContext    = $module.children('canvas')[0].getContext('2d');
 
145
            },
 
146
            clear: function(context) {
 
147
              module.debug('Clearing canvas');
 
148
              overlayContext.fillStyle = '#FFFFFF';
 
149
              overlayContext.fillRect(0, 0, width, height);
 
150
            },
 
151
            merge: function() {
 
152
              if( !$.isFunction(mainContext.blendOnto) ) {
 
153
                module.error(error.missingPlugin);
 
154
                return;
 
155
              }
 
156
              mainContext.putImageData( imageContext.getImageData(0, 0, width, height), 0, 0);
 
157
              overlayContext.blendOnto(mainContext, 'multiply');
 
158
            }
 
159
          },
 
160
 
 
161
          draw: {
 
162
 
 
163
            image: function(callback) {
 
164
              module.debug('Drawing image');
 
165
              callback = callback || function(){};
 
166
              if(image) {
 
167
                backgroundImage.src    = image;
 
168
                backgroundImage.onload = function() {
 
169
                  imageContext.drawImage(backgroundImage, 0, 0);
 
170
                  callback();
 
171
                };
 
172
              }
 
173
              else {
 
174
                module.error(error.noImage);
 
175
                callback();
 
176
              }
 
177
            },
 
178
 
 
179
            colors: function() {
 
180
              module.debug('Drawing color overlays', colors);
 
181
              $.each(colors, function(colorName, color) {
 
182
                settings.onDraw(overlayContext, imageName, colorName, color);
 
183
              });
 
184
            }
 
185
 
 
186
          },
 
187
 
 
188
          debug: function(message, variableName) {
 
189
            if(settings.debug) {
 
190
              if(variableName !== undefined) {
 
191
                console.info(settings.name + ': ' + message, variableName);
 
192
              }
 
193
              else {
 
194
                console.info(settings.name + ': ' + message);
 
195
              }
 
196
            }
 
197
          },
 
198
          error: function(errorMessage) {
 
199
            console.warn(settings.name + ': ' + errorMessage);
 
200
          },
 
201
          invoke: function(methodName, context, methodArguments) {
 
202
            var
 
203
              method
 
204
            ;
 
205
            methodArguments = methodArguments || Array.prototype.slice.call( arguments, 2 );
 
206
 
 
207
            if(typeof methodName == 'string' && instance !== undefined) {
 
208
              methodName = methodName.split('.');
 
209
              $.each(methodName, function(index, name) {
 
210
                if( $.isPlainObject( instance[name] ) ) {
 
211
                  instance = instance[name];
 
212
                  return true;
 
213
                }
 
214
                else if( $.isFunction( instance[name] ) ) {
 
215
                  method = instance[name];
 
216
                  return true;
 
217
                }
 
218
                module.error(settings.error.method);
 
219
                return false;
 
220
              });
 
221
            }
 
222
            return ( $.isFunction( method ) )
 
223
              ? method.apply(context, methodArguments)
 
224
              : false
 
225
            ;
 
226
          }
 
227
 
 
228
        };
 
229
        if(instance !== undefined && moduleArguments) {
 
230
          // simpler than invoke realizing to invoke itself (and losing scope due prototype.call()
 
231
          if(moduleArguments[0] == 'invoke') {
 
232
            moduleArguments = Array.prototype.slice.call( moduleArguments, 1 );
 
233
          }
 
234
          return module.invoke(moduleArguments[0], this, Array.prototype.slice.call( moduleArguments, 1 ) );
 
235
        }
 
236
        // initializing
 
237
        module.initialize();
 
238
      })
 
239
    ;
 
240
    return this;
 
241
  };
 
242
 
 
243
  $.fn.colorize.settings = {
 
244
    name      : 'Image Colorizer',
 
245
    debug     : true,
 
246
    namespace : 'colorize',
 
247
 
 
248
    onDraw    : function(overlayContext, imageName, colorName, color) {},
 
249
 
 
250
    // whether to block execution while updating canvas
 
251
    async     : true,
 
252
    // object containing names and default values of color regions
 
253
    colors    : {},
 
254
 
 
255
    metadata: {
 
256
      image : 'image',
 
257
      name  : 'name'
 
258
    },
 
259
 
 
260
    error: {
 
261
      noImage         : 'No tracing image specified',
 
262
      undefinedColors : 'No default colors specified.',
 
263
      missingColor    : 'Attempted to change color that does not exist',
 
264
      missingPlugin   : 'Blend onto plug-in must be included',
 
265
      undefinedHeight : 'The width or height of image canvas could not be automatically determined. Please specify a height.'
 
266
    }
 
267
 
 
268
  };
 
269
 
 
270
})( jQuery, window , document );