https://sarahrhodesdesign.com/_js/cargo.tracemarklet.js

1/**
2 * Cargo traceMark
3 * Currently used for the team image blog
4 */
5
6/**
7 *	Only allow this to be added once, prevents memory errors
8 */
9if (typeof (TraceMarklet) === "undefined") {
10	
11	var TraceMarklet = {
12		
13		/**
14		 *	Store some data
15		 */
16		Data : {
17			// Seperate the data that will be passed to Ajax
18			Ajax : {
19				"uid"		 : window.tracemark_id || 0,
20				"mid"		 : 0,
21				"collection" : $("tracemark_data").attr("collection"),
22				"type"		 : ( Cargo.Location.IsTraceMarks() ) ? "remove" : "add"
23			},
24			"ajax_route"	 : Cargo.Dispatcher.GetUrl("tracemark/trace"), // What the ajax route is
25			
26			"min_height" 	 : 200,	// Don't tracemark images below this size
27			"min_width"  	 : 200,
28			"add_icon"   	 : "✶",	// When adding a tracemark
29			"remove_icon"	 : "✕",	// When removing a tracemark
30			"dupe_icon"		 : "✕",	// Where a tracemark has already been added
31			"saved_icon"	 : "✓",	// Once done, show this
32			"start_icon"	 : "", 	// Left blank, it will be filled in later
33			
34			"network_image_class" : "featured_img_parent",
35		},
36		
37		/**
38		 *	The selected element, deinfed later
39		 */
40		Element : { },
41		
42		/**
43		 *	Start the tracemarklet
44		 */
45		Init : function() {
46			// Setup the page
47			$("body").append('<div id="tracemark_container"><div id="tracemark_load" />');
48			
49			// Set what the start icon will be, based on what page we are on
50			this.Data.start_icon = ( Cargo.Location.IsTraceMarks() ) ? this.Data.remove_icon : this.Data.add_icon;
51
52			// When lacking a user ID, only tracemark within network
53			if (this.Data.Ajax.uid == 0)
54				this.Data.Ajax.collection = $("tracemark_data").attr("collection") || Cargo.Location.GetNetworkId();
55
56			// Send the image on click
57			$("a.tracemark_icon").live("click", function() {
58				// Update the AJAX data
59				TraceMarklet.Data.Ajax.type = TraceMarklet.ActionForIcon($(this).text());
60
61				// Verify that we want to remove this
62				if(TraceMarklet.Data.Ajax.type == "remove") {
63					if( !confirm("Delete?") ) {
64						TraceMarklet.Unload();
65						return false;
66					}
67				}
68
69				TraceMarklet.Data.Ajax.mid = $(this).attr("id");
70
71				// Define the Element, hide the icon, and display the load spinner
72				TraceMarklet.Element = $(this);
73				$(this).text("");			
74				$("#tracemark_load").css({
75					"display" : "block",
76					"left"    : $(this).offset().left,
77					"top"     : $(this).offset().top,
78				});
79
80				// Make the AJAX call
81				TraceMarklet.Post();
82				
83				return false;
84			});
85
86			this.IMG.Locate();
87			
88		}, // end Init
89
90		HasNetworkClass : function(element_class) {
91			return (element_class.indexOf(this.Data.network_image_class) > -1);
92		},
93
94		/**
95		 * IconForIMG
96		 *
97		 * Handle the special case of showing a removal icon when viewing a network feature,
98		 * otherwise return the icon as determined at Init().
99		 */
100		IconForIMG : function(parent_class) {
101			// When in a network, the removal icon is shown based upon the parent class of the image
102			if (this.HasNetworkClass(parent_class))
103				return this.Data.remove_icon;
104
105			return this.Data.start_icon;
106		},
107
108		/**
109		 * ActionForIcon
110		 *
111		 * Discern the 'type' variable to pass via AJAX based upon the current icon.
112		 */
113		ActionForIcon : function(icon_text) {
114			if (icon_text == this.Data.add_icon)
115				return 'add';
116
117			return 'remove';
118		},
119
120		/**
121		 *	Send this to AJAX
122		 */
123		Post : function() {
124			$.post(
125				TraceMarklet.Data.ajax_route, 
126				TraceMarklet.Data.Ajax, 
127				function(data, text_status) { TraceMarklet.Callback(data); }
128			);
129		},
130		
131		/**
132		 *	Handles the return callback from AJAX
133		 */
134		Callback : function(data) {
135			var return_data = $.parseJSON(data);
136			
137			// Reformat the icon
138			$("#tracemark_load").css("display", "none");	
139					
140			// If there is an error
141			if (return_data.error == "mid_dupe") {
142			
143				$(this.Element).html(this.Data.dupe_icon);
144				alert("This was already Tracemarked");
145				
146			}
147			// Project was already featured
148			else if(return_data.error == "pid_dupe") {
149				$(this.Element).html(this.Data.dupe_icon);
150				alert("Project has already been featured");
151				
152			} 
153			// Not part of the network
154			else if (return_data.error == "not_in_network") {
155				this.Unload();
156				alert("You're not a member of this network");
157				
158			}
159			// Not logged in
160			else if (return_data.error == "login") {
161				this.Unload();
162				alert("You must be logged in");
163				
164			}
165			// If the image was saved
166			else {
167			
168				$(this.Element).html(this.Data.saved_icon);
169				
170				// Wait a second, then unload
171				setTimeout('TraceMarklet.Unload()', 2000);
172				
173				// Check to see if we are on the tracemark page, if so, remove the image
174				if( Cargo.Location.IsTraceMarks() ) {
175					$("#tracemark_"+TraceMarklet.Data.Ajax.mid).fadeOut(function() {
176						
177					});
178				
179				} 
180				// If this is a network, reload the page
181				else if( Cargo.Location.IsNetwork() ) {
182					document.location.href = Cargo.Location.MakeDirectLink();
183				}
184				
185			}
186			
187		},
188		
189		/**
190		 *	Get rid of this thing
191		 */
192		Unload : function() {
193	
194			$("#tracemark_container").remove();	
195			
196		}
197			
198	};
199	
200	/**
201	 *	Tracemarklet class that deals with image handling 
202	 */
203	/*! IMG */
204	TraceMarklet.IMG = {
205	
206		Data : {
207			
208		},
209		
210		/**
211		 * Find all of the potentially loggable images on the page
212		 */
213		Locate : function() {
214		
215			// Loop through all of the images on the page
216			$("img").each(function() {
217			
218				var height       = $(this).height(),
219					parent_class = $(this).parent().attr("class"),
220					parent_id    = $(this).parent().attr("id"),
221					width        = $(this).width();
222					
223				// If the image is larger than 200px, has a Media ID
224				if ( 
225					height > TraceMarklet.Data.min_height 
226					&& width > TraceMarklet.Data.min_width
227					&& $(this).attr("data-mid") !== undefined
228					&& parent_class.indexOf("cardimgcrop") < 0 
229				) {
230					var img_src = $(this).attr("src"),
231						mid	    = $(this).attr("data-mid"),
232						element = mid,
233						pos_x   = $(this).offset().left,
234						pos_y   = $(this).offset().top;
235
236					// Create the icon
237					$("#tracemark_container").append('<a href="#" id="' + element + '" class="tracemark_icon">' + TraceMarklet.IconForIMG(parent_class) + '</a>');
238
239					// Network feature tracemarks have icons top right
240					if (TraceMarklet.HasNetworkClass(parent_class)) {
241						var positioned = $(this).position();
242						if (positioned.top !== 0)
243							pos_y += Math.abs(positioned.top);
244
245						if (positioned.left !== 0)
246							pos_x += Math.abs(positioned.left);
247
248						pos_x += (width - $('#' + element).width());
249					}
250
251					$("#" + element).css({
252						"left"        : pos_x,
253						"top"         : pos_y
254					})
255
256				} // end size check
257			
258			}); // end image loop
259			
260		} // end Locate
261		
262	}; // end FindIMGs
263	
264
265} // end if == undefined
266
267
268/*
269 * Unload possible previous instances
270 * Fire the traceMarker
271 */
272
273TraceMarklet.Unload();
274TraceMarklet.Init();
275
276
277/*
278 *	On slideshow transition, update the position of the img reg tags
279 */ 
280$(document).bind("slideshowTransitionFinish", function(e, nextSlide) {
281	TraceMarklet.IMG.Locate();
282});
283
284/*
285 * Event handling for designs
286 */
287$(document).bind("projectLoadComplete", function() { TraceMarklet.Unload() });
288$(document).bind("projectClose", function()		   { TraceMarklet.Unload() });