https://senyetyoung.com/_jsapps/api/_cargo/_core/inspector3.js

1Cargo.Core.Inspector3 = {
2
3	files: {
4		corePackage        	: '/_jsapps/inspector/3.0.7/inspector-core.min.js?02.16.17',
5		styleSheet 			: '/_jsapps/inspector/3.0.7/inspector-frontend.min.css?02.16.17',
6		frontendPackage 	: '/_jsapps/inspector/3.0.7/inspector-frontend.backbone.min.js?02.16.17'
7	},
8	
9	load: function(customOptions){
10
11		var self = this;
12
13		var injectFrontendPackage = function(){
14			if(window.frameElement !== null && window.frameElement !== undefined){
15					// we're in a frame. That's ok but test if it's
16					// not a frame that we just created.
17					
18					if(window.frameElement.getAttribute('data-inspector') !== null){
19
20						// we are in the frame that we've created in this frame's parent. 
21						// No need to do anything.
22						return false;
23					} else {
24
25						parent.location = document.location.href.replace(/\/adminedit/gi, '') + '?inspector';
26						
27					}
28				}
29
30				var script = document.createElement('script');
31				script.src = self.files.frontendPackage;
32				document.head.appendChild(script);
33
34				//document.body.style.visibility = 'hidden';
35
36				script.onload = function(){
37
38					setupInspectorFrame();
39					
40				}
41		}
42
43		var setupInspectorFrame = function(){
44			// only do this when we're not in an iframe.
45			document.body.setAttribute('style', '');
46			document.body.innerHTML = '';
47
48			$(document.body).append('<img class="ci-loader" style="left: 40px; top: 40px; position: absolute;" src="/_gfx/loadingAnim.gif" />');
49
50			if(Cargo.ReplaceLoadingAnims === undefined){
51				Cargo.Core.ReplaceLoadingAnims.init();
52			} else {
53				Cargo.ReplaceLoadingAnims();
54			}
55
56			// remove styleSheets
57			var styles = document.head.querySelectorAll('link, style');
58
59			for(var i = 0; i < styles.length; i++){
60				document.head.removeChild(styles[i]);
61			}
62
63			// add our styleSheet
64			var style = document.createElement('link');
65			style.href = self.files.styleSheet;
66			style.rel = 'stylesheet';
67			document.head.appendChild(style);
68
69
70			var frame = document.createElement('iframe');
71
72			frame.className = 'bodyframe';
73			frame.setAttribute('data-inspector', 'true');
74			frame.setAttribute('frameborder', '0');
75
76			document.body.appendChild(frame);
77
78			$(frame).css('opacity', 0);
79
80			// url must be different from the current one to make it work in FF. 
81			var newSrc = window.location.href.replace(/\?inspector|\/admin\/css/gi, '');
82
83			if(newSrc.indexOf('?') === -1){
84				newSrc += '?inspecting';
85			} else {
86				newSrc += '&inspecting';
87			}
88
89			frame.src = newSrc;
90
91			// frame loaded. We can access it's DOM now.
92			frame.onload = function(){
93
94				injectInspectorCore(frame);
95
96				//frame.style.visibility = 'hidden';
97			}
98
99		}
100
101		var injectInspectorCore = function(frame){
102			// inject the inspector API into the frame
103			var script = frame.contentDocument.createElement('script');
104			script.src = self.files.corePackage;
105			frame.contentDocument.head.appendChild(script);
106
107			// once the API has loaded we can instanciate the editor.
108			script.onload = function(){
109				
110				if(window.editor === undefined){
111					initializeInspector(frame);
112				} else {
113					window.editor.reloadFrameReferences();
114				}
115			}
116		}
117
118		var initializeInspector = function(frame){
119			 // instanciate the editor and tell it to inspect the frame instead of the 
120			// current document by passing the iframe object.
121			
122			$("#follow_popup, .ci-loader").remove();
123
124			var options = $.extend({
125
126				iframe: frame,
127
128				styleSheetFilter: function(styleSheet){
129
130					/*if(styleSheet.ownerNode.nodeName === "STYLE"){
131						return false;
132					}
133
134					// adblock inserts style nodes with script tags in it...
135					if(styleSheet.ownerNode !== null){
136						if($(styleSheet.ownerNode).find('script').length > 0){
137							return false;
138						}
139					}
140
141					if(styleSheet.href !== null) {
142						if(styleSheet.href.indexOf('global.css') !== -1){
143							return false;
144						}
145					}*/
146
147					if(styleSheet.ownerNode !== null){
148						if(styleSheet.ownerNode.id.indexOf('member_stylesheet') !== -1 || styleSheet.ownerNode.id.indexOf('user_stylesheet') !== -1 ){
149							return true;
150						}
151					}
152
153					return false;

154				},
155
156				styleSheetSavableFilter: function(styleSheet){
157					
158					if(styleSheet.ownerNode !== null){
159						if(styleSheet.ownerNode.id.indexOf('member_stylesheet') !== -1 || styleSheet.ownerNode.id.indexOf('user_stylesheet') !== -1 ){
160							return true;
161						}
162					}
163					
164					return false;
165				},
166
167				onResize: function(){
168					$(window).resize();
169				},
170
171				onInspectorClick: function(e){
172
173					// don't preventDefault if a splash page has been clicked.
174					if(e.target.id !== "splash"){
175						e.preventDefault();
176					}
177
178					if( $(e.target).closest('#toolset').length > 0 ) {
179						return false;
180					}
181
182					if(e.target.nodeName === "HTML") {
183						e.target = document.body;
184					}
185					
186					// return the element that is going to be inspected.
187					return e.target;
188				},
189
190				onSave: function(button, modifiedFiles){
191
192					var styleSheetPostArray = [];
193
194					var self = this;
195
196					for(var i = 0; i < modifiedFiles.length; i++){
197						styleSheetPostArray.push({
198							filename: encodeURIComponent(modifiedFiles[i].filename),
199							stylesheet: modifiedFiles[i].cssString,
200						});
201					}
202
203					$.ajax({
204						type: "POST",
205						url: '/dispatch/admin/saveInspectorCSS',
206						data: {
207							stylesheet: JSON.stringify( styleSheetPostArray ),
208							url: ( Cargo.Helper ? Cargo.Helper.GetUrl() : frame.contentWindow.Cargo.Location.GetCargoUrl() )
209						},
210						success: function(response){
211							if(response.error.length > 0){
212								button.$el.removeClass('saving');
213								
214								if(response.error[0].message) {
215									alert(response.error[0].message);
216								} else  {
217									alert('Save failed');
218								}
219							} else {
220
221								for(var i = 0; i < modifiedFiles.length; i++){
222									modifiedFiles[i].CSSStyleSheet.markAsSaved();
223								}
224
225							}
226						},
227						always: function(){
228							button.$el.removeClass('saving');
229						},
230						dataType: 'json'
231					});
232
233				}
234
235			}, customOptions);
236
237			window.editor = new CSSEditor(options);
238
239			document.body.appendChild(window.editor.getEditorElement());
240			
241			window.editor.getEditorElement().style.setProperty('visibility', 'hidden', 'important');
242
243			var init = true;
244
245			$(window).resize(function(){
246				
247				var editorWidth = editor.getEditorElement().offsetWidth;
248				windowWidth = document.documentElement.offsetWidth;
249
250				frame.style.width = (windowWidth - editorWidth) + 'px';
251				frame.style.left = editorWidth + 'px';
252
253				if(init){
254					$(frame).css('opacity', '');
255					window.editor.getEditorElement().style.removeProperty('visibility');
256					init = false;
257				}
258
259			});
260			
261			$(window).resize();
262			//frame.style.visibility = '';
263			//
264			var c = window.editor.options.coreWindow.Cargo;
265
266			if(c.hasOwnProperty('Event')){
267				c.Event.trigger('inspector_open');
268			}
269
270		}
271
272		
273		var adminURLIndex = document.location.href.indexOf('/admin/css');
274
275		if( (Cargo.Helper ? Cargo.Helper.isMobile() : Cargo.Config.isMobile()) ) {
276
277			alert('Sorry, the Inspector does not support iOS (yet).');
278
279			if(adminURLIndex !== -1){
280				document.location.href = document.location.href.substring(0, adminURLIndex);
281			}
282
283			return false;
284			
285		}
286
287		if( (Cargo.Helper ? Cargo.Helper.isIE8() : Cargo.Config.isIE8()) ) {
288
289			alert('Sorry, the Inspector does not support your browser version.');
290
291			if(adminURLIndex !== -1){
292				document.location.href = document.location.href.substring(0, adminURLIndex);
293			}
294
295			return false;
296			
297		}
298
299		Cargo.InspectorLoading = true;
300		$("#follow_popup").remove();
301
302		$.post("/dispatch/admin/authenticateInspector", {url: ( Cargo.Helper ? Cargo.Helper.GetUrl() : Cargo.Location.GetCargoUrl() ) }, function(authenticationData) {
303
304			if(authenticationData.error.length === 0) {
305
306				injectFrontendPackage();
307
308			} else if(authenticationData.error[0].message) {
309				alert(authenticationData.error[0].message);
310
311			} else {
312				alert("You must be logged in to use the Inspector.");
313
314				if(adminURLIndex !== -1){
315					document.location.href = document.location.href.substring(0, adminURLIndex);
316				}
317			}
318		}, 'json');
319
320		//injectFrontendPackage();
321
322	}
323}