1 2var SubaCrop = SubaCrop || {}; 3 4 5SubaCrop.animate_svg = function(svganimate) { 6 'use strict'; 7 // load svg images 8 var deferred = []; 9 var remove = []; 10 svganimate.find('[data-svg]').each(function() { 11 var target = this.dataset.svg; 12 //console.log('found', target) 13 if (target[0] == '#') { 14 $(this).append($(target).clone().removeAttr('id')); 15 remove.push(target); 16 } else { 17 var self = $(this); 18 deferred.push((function() { 19 var $def = $.Deferred(); 20 //console.log('loading', self, target) 21 self.load(target, function() { 22 self.find('[id]').first().removeAttr('id'); 23 //console.log('loaded', self) 24 $def.resolve(); 25 }); 26 return $def.promise(); 27 })()); 28 } 29 30 }); // /[data-svg] 31 32 $.each(remove, function() { 33 $(this).remove(); 34 }); 35 remove = []; 36 if (deferred.length === 0) { 37 animate_cartoons(); 38 } else { 39 // wait for all the images to load 40 $.when.apply(this, deferred).done(function() { 41 // console.log('done loading...') 42 animate_cartoons(); 43 deferred = null; 44 }); 45 } 46 47 function animate_cartoons() { 48 // now animate svg cartoon 49 50 // jquery delegation doesn't work on svg 51 // set up cartoons to trigger an event "cartoon:change" on change of state 52 svganimate.find('.svg-cartoon').each(function() { 53 var $cartoon = $(this); 54 var target = '[peb\\:location]'; 55 //var target = '.organelle'; 56 $cartoon.find(target).on('click', function(e) { // $.addClass doesn't work for svg :( 57 var self = $(this); 58 var location = self.attr('peb:location'); 59 if (!location) { 60 return; 61 } 62 63 64 var cls = self.attr('class'); 65 var highlighted = /highlight/.test(cls); 66 var updated = false; 67 //console.log('click svg-cartoon',this.id, loc, cls, highlighted); 68 69 var locs = $cartoon.data('locations') || {}; 70 71 if (highlighted) { 72 self.attr('class', cls.replace(/highlight/g, '').trim()); 73 updated = location in locs; 74 delete locs[location]; 75 } else { 76 self.attr('class', cls + ' highlight'); 77 updated = !(location in locs); 78 locs[location] = true; 79 } 80 if (updated) { 81 $cartoon.data('locations', locs); 82 $cartoon.trigger('cartoon:change', this); 83 } 84 //console.log(this,$cartoon,locs); 85 }); // click 86 }); // .svg-cartoon 87 88 var ARM = { 89 'location-svg': sync_locations, 90 'location-input': sync_location_input 91 }; 92 // query specific functionality 93 94 svganimate.find('[data-arm]').each(function() { 95 var method = this.dataset.arm; 96 if (method in ARM) { 97 ARM[method](this); 98 } 99 100 }); 101 102 function sync_location_input(id) { 103 var $q = $(id); 104 var $cv = $q.find('.cartoon-value'); 105 if ($cv.length === 0) { return; } 106 var $cartoon = $q.find('.svg-cartoon'); 107 $cartoon.on('cartoon:change', function() { 108 var locs = $(this).data('locations'); 109 var locs_list = $.map(locs, function(location, k) { 110 return k; 111 }); 112 $cv.val('[' + locs_list.join(',') + ']'); 113 }); 114 } 115 // keep checkboxes and svg cartoon in-sync 116 function sync_locations(id) { 117 var $q = $(id); 118 var $checkboxes = $q.find('[data-name="val"] input[type="checkbox"]'); 119 var $cartoon = $q.find('.svg-cartoon'); 120 121 init_sync(); // presync 122 123 // first sync the checkboxes and the image.... 124 function init_sync() { 125 var locs = {}; 126 $checkboxes.each(function() { 127 var $cb = $(this); 128 var checked = $cb.prop('checked'); 129 var location = $cb.attr('value'); //this.dataset.view; 130 var group = this.dataset.group || location; 131 if (checked) { 132 locs[group] = true; 133 } 134 }); 135 136 $.each(locs, function(location) { 137 var target = '[peb\\:location="'+location+'"]'; 138 //var target = '.organelle.' + location.replace(/ /g, '-') 139 $cartoon.find(target).each(function() { 140 var cls = $(this).attr('class'); 141 cls += ' highlight';
142 143 $(this).attr('class', cls); 144 }); 145 }); 146 147 $cartoon.data('locations', locs); 148 } 149 150 // now keep them in sync 151 $cartoon.on('cartoon:change', function() { // triggered by user click 152 var locs = $(this).data('locations'); 153 $checkboxes.each(function() { 154 var $cb = $(this); 155 var location = $cb.attr('value'); // this.dataset.view 156 var group = this.dataset.group || null; // only check group 157 if (group && group == location && group in locs) { 158 $cb.prop('checked', true); 159 } else { 160 $cb.prop('checked', false); 161 } 162 }); 163 164 }); 165 166 $checkboxes.on('change', function() { // triggered by user click 167 var $cb = $(this); 168 var checked = $cb.prop('checked'); 169 var location = $cb.attr('value'); //this.dataset.view; 170 var group = this.dataset.group || location; 171 var locs = $cartoon.data('locations') || {}; 172 // console.log('changed',this, location,checked); 173 if (checked) { 174 locs[group] = true; 175 } else { 176 var all_unchecked = $q.find('input[data-group="'+group+'"]:checked').length > 0; 177 if (!all_unchecked && group in locs) { 178 delete locs[group]; 179 180 } else { 181 checked = true; 182 } 183 184 } 185 // can't use [peb:location] :( 186 // find('[peb\\:location]') works! 187 var target = '[peb\\:location="'+group+'"]'; 188 //var target = '.organelle.' + location.replace(/ /g, '-') 189 $cartoon.find(target).each(function() { 190 var cls = $(this).attr('class'); 191 if (checked) { 192 cls += ' highlight';
193 } else { 194 cls = cls.replace(/highlight/g, '').trim(); 195 } 196 197 // console.log('changed...',location,cls) 198 $(this).attr('class', cls); 199 }); 200 201 $cartoon.data('locations', locs); 202 }); // change 203 } // sync_locations 204 } // animate_cartoons 205 }
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.