Minor update

- Change codebox from a helper to a partial
- Should have no user visible effect but will be much easier to maintain

Author: rickkas7

src/assets/js/collapse.js

@@ -15,20 +15,93 @@ $(document).ready(function() {
     	collapseSelector(genericCssClass, defaultValue);
 	});
 
-	$('code.codebox').each(function(index) {
-		var content = $(this).attr('data-content');
+	$('div.codebox').each(function(index) {
+		const codeboxElem = $(this);
 
-		var elem = $(this);
-
-		$.ajax({url:content, dataType:'text'})
+		$.ajax({url:$(codeboxElem).attr('data-content'), dataType:'text'})
   			.done(function(data) {
-				elem.text(data);
-				elem.removeClass('prettyprinted');
+				const thisCodeElem = $(codeboxElem).find('code');
+				$(thisCodeElem).text(data);
+				$(thisCodeElem).removeClass('prettyprinted');
 				if (prettyPrint) {
 					prettyPrint();
 				}
-			})
+		})
+
+		$(codeboxElem).find('.codeboxDownloadButton').on('click', function() {
+			const contentUrl = $(codeboxElem).attr('data-content');
+	
+			var a = document.createElement('a');
+			a.href = contentUrl;
+			a.download = contentUrl.split('/').pop();
+			document.body.appendChild(a);
+			a.click();
+			document.body.removeChild(a);
+		});
+
+		$(codeboxElem).find('.codeboxCopyButton').on('click', function() {
+			const thisCodeElem = $(codeboxElem).find('code');
+			
+			console.log('copy', thisCodeElem);
+
+			var t = document.createElement('textarea');
+			document.body.appendChild(t);
+			$(t).text($(thisCodeElem).text());
+			t.select();
+			document.execCommand("copy");
+			document.body.removeChild(t);
+		});
+
+		$(codeboxElem).find('.codeboxWebIdeButton').on('click', function() {
+			var a = document.createElement('a');
+			a.href = 'https://go.particle.io/shared_apps/' + $(this).attr('data-appid');
+			a.target = '_blank';
+			document.body.appendChild(a);
+			a.click();
+			document.body.removeChild(a);
+		});
+		
+
+		$(codeboxElem).find('.codeboxFlashDeviceButton').on('click', function() {
+			const thisCodeElem = $(codeboxElem).find('code');
+
+			const device = $(codeboxElem).find('select.codeboxFlashDeviceSelect').val();
+			if (!device || device == 'select') {
+				return;
+			}
+		
+			if (!apiHelper.flashConfirmed) {
+				const warning = 'Flashing firmware to a device replaces the existing user firmware binary on the device. This can only be undone by locating and flashing the previous firmware on the device.';
+		
+				if (!confirm(warning)) {
+					return;
+				}
+			
+				apiHelper.flashConfirmed = true;
+			}
+				
+			apiHelper.flashDevice(device, $(thisCodeElem).text(), codeboxElem);		
 		});
+
+		$(codeboxElem).find('.codeboxUploadSchemaButton').on('click', function() {
+			const thisCodeElem = $(codeboxElem).find('code');
+
+			const product = $(codeboxElem).find('select.codeboxConfigSchemaProductSelect').val();
+
+			const warning = 'Uploading a configuration schema replaces the existing configuration schema for all users of this product! An incorrect schema can cause errors opening your product in the console. A backup will be saved in your Downloads directory but you should still exercise caution.';
+			
+			if (!confirm(warning)) {
+				return;
+			}
+		
+			const schema = $(thisCodeElem).text();
+		
+			apiHelper.uploadSchemaCodebox(schema, product, 'default', function() {
+				
+			});
+		});
+		
+	});
 });
 
 function collapseToggle(id) {	 
@@ -104,72 +177,4 @@ function hideOverlay() {
 	$('#imageOverlay').hide();
 }
 
-function codeboxDownload(url) {
-	var a = document.createElement('a');
-	a.href = url;
-	a.download = url.split('/').pop();
-	document.body.appendChild(a);
-	a.click();
-	document.body.removeChild(a);
-}
-
-function codeboxCopy(id) {	
-	var t = document.createElement('textarea');
-	document.body.appendChild(t);
-	$(t).text($('#' + id).text());
-	t.select();
-	document.execCommand("copy");
-	document.body.removeChild(t);
-}
-
-function codeboxOpenWebIDE(appid) {
-	var a = document.createElement('a');
-	a.href = 'https://go.particle.io/shared_apps/' + appid;
-	a.target = '_blank';
-	document.body.appendChild(a);
-	a.click();
-	document.body.removeChild(a);
-}
-
-function codeboxFlash(id) {	
-	const codebox = $('#' + id).closest('div.codebox');
-
-	const device = $(codebox).find('select.codeboxFlashDeviceSelect').val();
-	if (!device || device == 'select') {
-		return;
-	}
-
-	if (!apiHelper.flashConfirmed) {
-		const warning = 'Flashing firmware to a device replaces the existing user firmware binary on the device. This can only be undone by locating and flashing the previous firmware on the device.';
-
-		if (!confirm(warning)) {
-			return;
-		}
-	
-		apiHelper.flashConfirmed = true;
-	}
-
-	const code = $('#' + id).text();
-
-	apiHelper.flashDevice(device, code, codebox);
-}
-
-
-function codeboxUploadSchema(id) {
-	const codebox = $('#' + id).closest('div.codebox');
-
-	const product = $(codebox).find('select.codeboxConfigSchemaProductSelect').val();
-
-	const warning = 'Uploading a configuration schema replaces the existing configuration schema for all users of this product! An incorrect schema can cause errors opening your product in the console. A backup will be saved in your Downloads directory but you should still exercise caution.';
-	
-	if (!confirm(warning)) {
-		return;
-	}
-
-	const schema = $('#' + id).text();
-
-	apiHelper.uploadSchemaCodebox(schema, product, 'default', function() {
-		
-	});
 
-}

src/content/datasheets/app-notes/an002-device-powerdown.md

@@ -20,7 +20,7 @@ The idea works like this:
 
 Full Code:
 
-{{codebox content="/assets/files/app-notes/AN002/firmware/powerdown.cpp" format="cpp" height="500"}}
+{{> codebox content="/assets/files/app-notes/AN002/firmware/powerdown.cpp" format="cpp" height="500"}}
 
 
 Author: Rick

src/content/datasheets/app-notes/an010-finite-state-machines.md

@@ -27,7 +27,7 @@ Author: Rick
 
 This is the simplest example of a state machine, which we'll walk through:
 
-{{codebox content="/assets/files/app-notes/AN010/01-Simple/01-Simple.cpp" format="cpp" height="500"}}
+{{> codebox content="/assets/files/app-notes/AN010/01-Simple/01-Simple.cpp" format="cpp" height="500"}}
 
 
 This is just the standard stuff to set the modes:
@@ -234,15 +234,15 @@ Upon waking up from sleep, we go into `STATE_WAIT_CONNECTED` state. We'll almost
 
 This example just shows what the code would look like if we didn't use a state machine. For a simple example like this it may look cleaner, but as your code gets more complex it can get unwieldy quickly!
 
-{{codebox content="/assets/files/app-notes/AN010/02-Linear/02-Linear.cpp" format="cpp" height="500"}}
+{{> codebox content="/assets/files/app-notes/AN010/02-Linear/02-Linear.cpp" format="cpp" height="500"}}
 
 One example of the subtle gotchas that can occur: Say you decide to enable the `ApplicationWatchdog`. In each of the two inner delay loops you'd also have to add a call to `checkin()` otherwise the device could end up resetting if it was having trouble connecting. That's not necessary in the state machine examples because the code returns from `loop()` frequently.
 
 ## 03-If-Statement
 
 This is basically the same as the **01-Simple** example except if uses an `if` statement instead of switch.
 
-{{codebox content="/assets/files/app-notes/AN010/03-If-Statement/03-If-Statement.cpp" format="cpp" height="500"}}
+{{> codebox content="/assets/files/app-notes/AN010/03-If-Statement/03-If-Statement.cpp" format="cpp" height="500"}}
 
 
 ```
@@ -270,7 +270,7 @@ It's mostly just a matter of preference.
 
 While this example is pretty simple, you can imagine if you have a complex program, putting everything in `loop()` with a `switch` or `if` statement can get unwieldy!
 
-{{codebox content="/assets/files/app-notes/AN010/04-Case-Function/04-Case-Function.cpp" format="cpp" height="500"}}
+{{> codebox content="/assets/files/app-notes/AN010/04-Case-Function/04-Case-Function.cpp" format="cpp" height="500"}}
 
 One common solution to this is to separate every state out into a separate function.
 
@@ -316,7 +316,7 @@ void stateWaitConnected() {
 
 One annoyance of the **04-Case-Function** example is that every time you add a new state you need to add an enum value, a case in the switch statement, and a function.
 
-{{codebox content="/assets/files/app-notes/AN010/05-Function-Pointer/05-Function-Pointer.cpp" format="cpp" height="500"}}
+{{> codebox content="/assets/files/app-notes/AN010/05-Function-Pointer/05-Function-Pointer.cpp" format="cpp" height="500"}}
 
 One solution to this is to just dispense with the enum and use function pointers. This is used instead of the `State` variable in the previous examples.
 
@@ -368,7 +368,7 @@ void loop() {
 
 We have a new header file `MainStateMachine.h`. Here's what's in it:
 
-{{codebox content="/assets/files/app-notes/AN010/06-Class/MainStateMachine.h" format="cpp" height="500"}}
+{{> codebox content="/assets/files/app-notes/AN010/06-Class/MainStateMachine.h" format="cpp" height="500"}}
 
 You normally declare the `MainStateMachine` as a global variable in your main source file. You should avoid doing much in the constructor, as there are limitations on what is safe at [global object construction time](https://docs.particle.io/reference/device-os/firmware/#global-object-constructors).
 
@@ -425,7 +425,7 @@ std::function<void(MainStateMachine&)> stateHandler = 0;
 
 ### MainStateMachine.cpp
 
-{{codebox content="/assets/files/app-notes/AN010/06-Class/MainStateMachine.cpp" format="cpp" height="500"}}
+{{> codebox content="/assets/files/app-notes/AN010/06-Class/MainStateMachine.cpp" format="cpp" height="500"}}
 
 The **MainStateHander.cpp** file has as few interesting features.
 

src/content/datasheets/app-notes/an012-tracker-1wire.md

@@ -164,7 +164,7 @@ The documentation for the library can be found [here](https://github.com/rickkas
 
 ### Customize main.cpp
 
-{{codebox content="/assets/files/app-notes/AN012/firmware/main.cpp" format="cpp" height="500"}}
+{{> codebox content="/assets/files/app-notes/AN012/firmware/main.cpp" format="cpp" height="500"}}
 
 
 ### Digging In

src/content/datasheets/app-notes/an013-tracker-gpio.md

@@ -214,4 +214,4 @@ The documentation for the library can be found [here](https://github.com/rickkas
 
 ### Customize main.cpp
 
-{{codebox content="/assets/files/app-notes/AN013/firmware/main.cpp" format="cpp" height="500"}}
+{{> codebox content="/assets/files/app-notes/AN013/firmware/main.cpp" format="cpp" height="500"}}

src/content/datasheets/app-notes/an016-tracker-keypad-lcd.md

@@ -201,11 +201,11 @@ From the command palette in Workbench, **Particle: Install Library** then enter
 
 If you prefer to edit project.properties directly, add these:
 
-{{codebox content="/assets/files/app-notes/AN016/firmware/AN016.dep" height="120"}}
+{{> codebox content="/assets/files/app-notes/AN016/firmware/AN016.dep" height="120"}}
 
 ### The full source
 
-{{codebox content="/assets/files/app-notes/AN016/firmware/main.cpp" format="cpp" height="500"}}
+{{> codebox content="/assets/files/app-notes/AN016/firmware/main.cpp" format="cpp" height="500"}}
 
 
 ### Explanation

src/content/datasheets/app-notes/an017-tracker-can.md

@@ -95,7 +95,7 @@ CAN support requires Tracker Edge v10 or later, which requires 2.0.0-rc.3 or lat
 
 ## Full Source
 
-{{codebox content="/assets/files/app-notes/AN017/firmware/main.cpp" format="cpp" height="400"}}
+{{> codebox content="/assets/files/app-notes/AN017/firmware/main.cpp" format="cpp" height="400"}}
 
 
 ## Digging In
@@ -433,15 +433,15 @@ The configuration data that is sent between the device and cloud is described by
 
 These are the fields that will be added. This not only describe the data, but match the configuration data in the user firmware, and are also used to describe the console user interface.
 
-{{codebox content="/assets/files/tracker/engine-schema-fragment.json" format="json" height="400"}}
+{{> codebox content="/assets/files/tracker/engine-schema-fragment.json" format="json" height="400"}}
 
 ---
 
 The easiest way to set the schema is using the control here.
 
 {{> sso}}
 
-{{codebox content="/assets/files/tracker/engine-schema.json" format="json" height="300" configSchema="true"}}
+{{> codebox content="/assets/files/tracker/engine-schema.json" format="json" height="300" configSchema="true"}}
 
 
 You can also set the schema manually using curl:

src/content/datasheets/app-notes/an018-tracker-level.md

@@ -203,12 +203,12 @@ From the command palette in Workbench, **Particle: Install Library** then enter
 
 If you prefer to edit project.properties directly, add these:
 
-{{codebox content="/assets/files/app-notes/AN018/firmware/AN018.dep" height="100"}}
+{{> codebox content="/assets/files/app-notes/AN018/firmware/AN018.dep" height="100"}}
 
 
 ### The Source
 
-{{codebox content="/assets/files/app-notes/AN018/firmware/main.cpp" format="cpp" height="500"}}
+{{> codebox content="/assets/files/app-notes/AN018/firmware/main.cpp" format="cpp" height="500"}}
 
 
 ### Digging in

src/content/datasheets/app-notes/an019-tracker-prototype.md

@@ -93,14 +93,14 @@ From the command palette in Workbench, **Particle: Install Library** then enter
 
 If you prefer to edit project.properties directly, add:
 
-{{codebox content="/assets/files/app-notes/AN019/firmware/AN019.dep" height="120"}}
+{{> codebox content="/assets/files/app-notes/AN019/firmware/AN019.dep" height="120"}}
 
 
 ### The Source
 
 This is the modified main.cpp to implement thermocouple support:
 
-{{codebox content="/assets/files/app-notes/AN019/firmware/main.cpp" format="cpp" height="500"}}
+{{> codebox content="/assets/files/app-notes/AN019/firmware/main.cpp" format="cpp" height="500"}}
 
 ### Digging In
 

src/content/datasheets/app-notes/an020-tracker-4-20ma.md

@@ -149,11 +149,11 @@ Make sure you've used the [**Mark As Development Device**](https://docs.particle
 From the command palette in Workbench, **Particle: Install Library** then enter **Sensor_4_20mA_RK**.
 If you prefer to edit project.properties directly, add this:
 
-{{codebox content="/assets/files/app-notes/AN020/firmware/AN020.dep" height="100"}}
+{{> codebox content="/assets/files/app-notes/AN020/firmware/AN020.dep" height="100"}}
 
 ### The full source
 
-{{codebox content="/assets/files/app-notes/AN020/firmware/main.cpp" format="cpp" height="500"}}
+{{> codebox content="/assets/files/app-notes/AN020/firmware/main.cpp" format="cpp" height="500"}}
 
 ## Digging In