├── purchase_buttons
    ├── purchases.json
    ├── pricelist.json
    └── MSC_purchase_buttons.html
├── README.md
├── christmas_buttons.css
├── image_slider
    ├── pkg_description_example
    └── footer_template.html
├── general_CSS_changes.html
└── conditional_banner_display.html


/purchase_buttons/purchases.json:
--------------------------------------------------------------------------------
1 | [
2 |     {
3 |         "appName": "Adium"
4 |     }
5 | ]
6 | 


--------------------------------------------------------------------------------
/purchase_buttons/pricelist.json:
--------------------------------------------------------------------------------
 1 | [
 2 |     {
 3 |         "appName": "Adium",
 4 |         "price": "1.99"
 5 |     },
 6 |     {
 7 |         "appName": "MacPorts",
 8 |         "price": "0.99"
 9 |     },
10 |     {
11 |         "appName": "GoToMeeting",
12 |         "price": "299.00"
13 |     }
14 | ]
15 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # munki_client_resources
 2 | 
 3 | Customisations to client resources
 4 | 
 5 | These include CSS hacks to overide the default MSC look and feel from changing the colour of buttons, background to changing the default behaviour of the buttons.
 6 | 
 7 | copy and paste into one of the standard templates (like footer_template.html) and include in your client customisations zip.
 8 | 
 9 | Everything comes with no warranty or support etc.
10 | 
11 | 


--------------------------------------------------------------------------------
/christmas_buttons.css:
--------------------------------------------------------------------------------
 1 | <style>
 2 | /*
 3 | Changes the buttons to christmas colours with a soft transition
 4 |  - (INSTALL) -> flat green to light green on hover
 5 |  - (REMOVE)  -> flat grey to red on hover
 6 |  - (PURCHASE) -> flat blue to light blue on hover (used with the buy-buttons CSS and JS changes)
 7 |  
 8 |  remove or comment out non :hover elements to keep the default and only go colourful on hover
 9 | */
10 | 
11 | div.msc-button-inner {
12 | 	transition: background-color 0.2s;
13 | }
14 | 
15 | div.msc-button-inner.not-installed:not(.large) {
16 |     background: #53a82f;
17 | }
18 | 
19 | div.msc-button-inner.not-installed:hover {
20 |     background: #7ad85d;
21 | }
22 | 
23 | div.msc-button-inner.buy:not(.large) {
24 |     background: #107EED;
25 | }
26 | 
27 | div.msc-button-inner.buy:hover {
28 |     background: #50a6ff;
29 | }
30 | 
31 | div.msc-button-inner.installed {
32 |     background: #A8AAAF;
33 | }
34 | 
35 | div.msc-button-inner.installed:hover {
36 |     background: #cc1a2f;
37 | }
38 | <style>
39 | 


--------------------------------------------------------------------------------
/image_slider/pkg_description_example:
--------------------------------------------------------------------------------
 1 | // how it would look in a pkginfo
 2 | 
 3 | <key>description</key>
 4 | 	<string>&lt;p&gt;Testing of image slider with popover&lt;/p&gt;
 5 | &lt;span class="imgSlider"&gt;
 6 | &lt;img src="http://foo.org/munki_repo/images/bar1.png" class="productImage imgSmall" onClick="dim(true,this);"&gt;
 7 | &lt;img src="http://foo.org/munki_repo/images/bar2.png" class="productImage imgSmall" onclick="dim(true,this);"&gt;
 8 | &lt;img src="http://foo.org/munki_repo/images/bar3.png" class="productImage imgSmall" onclick="dim(true,this);"&gt;
 9 | &lt;/span&gt;
10 | &lt;p&gt;And theres some more text under here&lt;/p&gt;</string>
11 | 
12 | 
13 | // html
14 | 
15 | <p>Testing of image slider with popover</p>
16 | <span class="imgSlider">
17 | <img src="http://foo.org/munki_repo/images/bar1.png" class="productImage imgSmall" onClick="dim(true,this);">
18 | <img src="http://foo.org/munki_repo/images/bar2.png" class="productImage imgSmall" onclick="dim(true,this);">
19 | <img src="http://foo.org/munki_repo/images/bar3.png" class="productImage imgSmall" onclick="dim(true,this);">
20 | </span>
21 | <p>And theres some more text under here</p>
22 | 


--------------------------------------------------------------------------------
/general_CSS_changes.html:
--------------------------------------------------------------------------------
 1 | <!--
 2 | Changing the colour of things is relatively simple. Everything is controlled by the base.css that 
 3 | comes with MSC. If you want to change something then you just overide it here and add the <style></style> block
 4 | to one of the template.html files (I personally use footer_template.html) and include it in your
 5 | client resources zip bundle.
 6 | 
 7 | Examples here are:
 8 |   - adding a background gradient
 9 |   - changing the INSTALL buttons from grey to green
10 |   
11 | -->
12 | 
13 | <style>
14 | /* give the background a little bit of gradient */
15 | html, body {
16 |     -webkit-background-size: auto;
17 |     background-repeat: repeat-x;
18 |     background-color: #f5f6f7;
19 |     background: -webkit-linear-gradient(top, #d5d6d7 0%, #f5f6f7 40%, #f5f6f7 100%);
20 |     background-attachment: fixed;
21 | }
22 | 
23 | /* change the colour of the install buttons */
24 | div.msc-button-inner.not-installed:not(.large) {
25 |     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#53a82f), color-stop(100%,#7ad85d));
26 | }
27 | div.msc-button-inner.not-installed:hover {
28 |     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#438e1d), color-stop(100%,#53a82f));
29 | }
30 | 
31 | /* make the app icons pop out a little when you hover over them */
32 | div.artwork {
33 | 	transition : all .2s ease-in-out;
34 | }
35 | 
36 | div.artwork:hover {
37 | 	-webkit-transform: scale(1.1);
38 | }
39 | 
40 | </style>
41 | 


--------------------------------------------------------------------------------
/image_slider/footer_template.html:
--------------------------------------------------------------------------------
 1 | <!--
 2 | This presents a simple image slider so you can have multiple images in your applications
 3 | detail page in Managed Softwre Centre and have them not take up a lot of space
 4 | 
 5 | -->
 6 | <div class="bottom-links">
 7 |     <ul class="list" role="presentation">
 8 |         <li><a href="category-all.html">${SoftwareLabel}</a></li>
 9 |         <li><a href="categories.html">${CategoriesLabel}</a></li>
10 |         <li><a href="updates.html">${UpdatesLabel}</a></li>
11 |     </ul>
12 | </div>
13 | 
14 | <style>
15 | html, body {
16 |     -webkit-background-size: auto;
17 |     background-repeat: repeat-x;
18 |     background-color: #f5f6f7;
19 |     background: -webkit-linear-gradient(top, #d5d6d7 0%, #f5f6f7 40%, #f5f6f7 100%);
20 |     background-attachment: fixed;
21 | }
22 | 
23 | div.msc-button-inner.not-installed:not(.large) {
24 |     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#53a82f), color-stop(100%,#7ad85d));
25 | }
26 | 
27 | div.msc-button-inner.not-installed:hover {
28 |     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#438e1d), color-stop(100%,#53a82f));
29 | }
30 | 
31 | .imgSlider {
32 |     display: block;
33 |     max-height:305px; 
34 |     max-width:750px; 
35 |     white-space: nowrap; 
36 |     overflow-x: scroll; 
37 |     overflow-y: hidden; 
38 |     padding:20px; 
39 |     padding-bottom: 20px;
40 | }
41 | 
42 | .productImage {
43 |     padding: 5px;
44 |     vertical-align:middle;
45 | }
46 | .productImage.imgSmall {
47 |     height:300px;
48 | }
49 | 
50 | .productImage.imgLarge {
51 |     height:700px;
52 | }
53 | 
54 | .overlay {
55 |     width:100%;
56 |     height:100%;
57 |     position:fixed;
58 |     top:0;
59 |     left:0;
60 |     display:none;
61 | }
62 | 
63 | .overlay.pageDimmer {
64 |     background:#000;
65 |     opacity:0.5;
66 |     z-index:99;
67 | }
68 | 
69 | .overlay.imgDisplay {
70 |     top:100px;
71 |     text-align: center;
72 |     z-index:100;
73 | }
74 | </style>
75 | 
76 | <div class="overlay pageDimmer" id="pageDimmer"></div>
77 | <div class="overlay imgDisplay" id="imgDisplay" onclick="dim(false);"></div>
78 | 
79 | <script type="text/javascript">
80 | function dim(bool,img)
81 | {
82 |     if (typeof bool=='undefined') bool=true;
83 |     document.getElementById('pageDimmer').style.display=(bool?'block':'none');
84 |     document.getElementById('imgDisplay').style.display=(bool?'block':'none');
85 |     document.getElementById('imgDisplay').innerHTML = '<img class="imgLarge" src="'+img.src+'">';
86 | } 
87 | </script>
88 | 


--------------------------------------------------------------------------------
/purchase_buttons/MSC_purchase_buttons.html:
--------------------------------------------------------------------------------
  1 | // initial version
  2 | // place this in footer_template.html
  3 | 
  4 | // getPriceList, buyApp and checkPurchasedStatus are obviously site dependant and will need
  5 | // some form of backend to support. Could be simple db or other that returns json.
  6 | 
  7 | <style>
  8 | div.msc-button-inner.buy:not(.large) {
  9 |     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(100%,#4096ee));
 10 | }
 11 | 
 12 | div.msc-button-inner.buy:hover {
 13 |     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#42A0FF), color-stop(100%,#107EED));
 14 | }
 15 | </style>
 16 | 
 17 | <div class="overlay pageDimmer" id="pageDimmer"></div>
 18 | <div class="overlay pageDisplay" id="pageDisplay" onclick="displayPage(false);"></div>
 19 | 
 20 | <script type="text/javascript">
 21 | 
 22 | userName = MSCUser();
 23 | purchasesArray =  userPurchasesInit(userName);
 24 | 	
 25 | 
 26 | priceListInit();
 27 | setInterval(function () {priceListInit()}, 120000); // refresh the buttons every 2 minutes - if left alone, MSC can revert these to normal "install"
 28 | 
 29 | function displayPage(bool, url)
 30 | {
 31 |     if (typeof bool=='undefined') bool=true;
 32 |     document.getElementById('pageDimmer').style.display=(bool?'block':'none');
 33 |     document.getElementById('pageDisplay').style.display=(bool?'block':'none');
 34 |     document.getElementById('pageDisplay').innerHTML = '<object type="text/html" data="'+url+'" type="text/html"><embed src="'+url+'" type="text/html" /></object>';
 35 |     //window.open(url,'_self',false);
 36 |     //document.location = url;
 37 | } 
 38 | 
 39 | function priceListInit() {
 40 | 	var url = "http://localhost/munki_repo/pricelist.json"; //custom - call some generator or static file, return json
 41 | 	return getJson(url);
 42 | }
 43 | 	
 44 | function userPurchasesInit(currentUser) {
 45 |     var url = "http://localhost/munki_repo/purchases.aspx?username="+currentUser;
 46 |     return getJson(url);
 47 | }
 48 | 
 49 | function processPrices(pricesArray) {
 50 |     var installButtons = document.getElementsByClassName('msc-button-inner not-installed');
 51 |     for (var i = 0; i < installButtons.length; i++) {
 52 |         var appName = installButtons[i].id.replace('_action_button_text','');
 53 |         for(var p = 0; p < pricesArray.length; p++) {
 54 |             if (pricesArray[p].appName.includes(appName) && checkPurchasedStatus(appName) != true) {
 55 |                 var appButton = document.getElementById(installButtons[i].id);
 56 |                 if (appButton.innerHTML.indexOf("Install") > -1 && appButton.innerHTML.indexOf("Installed") <= 0) {
 57 |                     if (pricesArray[p].type.indexOf("Perpetual") > -1) {
 58 |                         licType = "Purchase"
 59 |                     } else {
 60 |                         licType = pricesArray[p].type
 61 |                     }
 62 |                     appButton.innerHTML = licType+' : $'+pricesArray[p].price;
 63 |                     appButton.parentNode.onclick = function(){ buyApp(this.children[0].id.replace('_action_button_text','')); };
 64 |                     appButton.className = appButton.className + ' buy';
 65 |                 }
 66 |             }
 67 |         }
 68 |     }
 69 | }
 70 | 
 71 | function buyApp(appName) {
 72 |     // opens the app purchase form - integrated auth
 73 |     displayPage(true, 'http://munki.your.org/Purchase/'+appName);
 74 | }
 75 | 
 76 | function checkPurchasedStatus(appName, currentUser) {
 77 |     // verify if the application has been purchased
 78 |     // this portion will need to be deployment specific
 79 |     var result = false;
 80 |     for(var i = 0; i < purchasesArray.length; i++) {
 81 |         if (appName == purchasesArray[i].appName+ purchasesArray[i].appVersion || appName == purchasesArray[i].appName) {
 82 |             result = true;
 83 |         }
 84 |     }
 85 |     return result;
 86 | }
 87 | 
 88 | function getJson(url) {
 89 | 	var request = new XMLHttpRequest();
 90 | 	var appArray = [];
 91 | 	
 92 | 	request.open('GET', url, false);
 93 | 	request.send(null);
 94 | 	if (request.status === 200) {
 95 | 		appArray = JSON.parse(request.responseText);
 96 | 	}
 97 | 	return appArray;
 98 | }
 99 | 	
100 | 
101 | function MSCUser() {
102 |     var pathArray = window.location.pathname.split( '/' )
103 |     var userName = pathArray[2];
104 |     return userName;
105 | }
106 | 
107 | </script>
108 | 


--------------------------------------------------------------------------------
/conditional_banner_display.html:
--------------------------------------------------------------------------------
  1 | <!--
  2 | Let one display banners, conditional if certain items are visible, or alternatly remove them
  3 | To do this it does a simple parse of the current view and runs the conditions dependant if your app
  4 | is present in MSC or not.
  5 | 
  6 | This script uses json structured as follows
  7 | Could be a static file or could be generated from a database - change to whatever you need.
  8 | 
  9 | appame:			The app name as it is in munki. if you use an arbitary name it won't find anything
 10 | 
 11 | appBannerImage:		Can use images included in your client customisations zip prefixed with static/foo.png
 12 | 			otherwise can be a URL
 13 | 
 14 | appBannerLink:		the link you want your banner to go to
 15 | 
 16 | appAvailableRunAction	If the app is availabe (i.e. visible in MSC), true = perform action, false, don't perform action
 17 | 			you can use this to do things like not display a banner if an app is available.
 18 | 			If an app is not available then the action is performed
 19 | 
 20 | appInstalledRunAction: 	If the app is Installed, true = perform action, false, don't perform action
 21 | 			you can use this to do things like not display a banner if an app is already installed or
 22 | 			vice versa. An installed status implies it is visible in MSC
 23 | 			
 24 | action:			The action you want to perform, show or hide a banner based on the conditions set.
 25 | 
 26 | 
 27 | [
 28 |     {
 29 |         "appName": "FoorApp1",
 30 |         "appBannerImage": "static/FooBranding1.png",
 31 |         "appBannerLink": "#",
 32 |         "appAvailableRunAction": true|false,
 33 |         "appInstalledRunAction": true|false,
 34 |         "action": "hide|show"
 35 |     },
 36 |     {
 37 |         "appName": "FooApp2",
 38 |         "appBannerImage": "static/FooBranding1.png",
 39 |         "appBannerLink": "#",
 40 |         "appAvailableRunAction": true|false,
 41 |         "appInstalledRunAction": true|false,
 42 |         "action": "hide|show"
 43 |     }
 44 | ]
 45 | 
 46 | 
 47 | -->
 48 | 
 49 | <script type="text/javascript">
 50 | // place in footer_template.html
 51 | 
 52 | conditionalBannersInit();
 53 | 
 54 | function conditionalBannersInit() {
 55 | 	var displayedAppList = document.getElementsByClassName('name');
 56 | 	var appsToCheck = getJson('http://127.0.0.1/munki_repo/bannertest.json') //replace with your json link
 57 | 	var bannerDiv = document.getElementsByClassName('stage');
 58 | 
 59 | 	setAllInstaledStatus(displayedAppList, appsToCheck);
 60 | 	setAllVisibleStatus(displayedAppList, appsToCheck);
 61 | 	processConditionalBanners(appsToCheck, bannerDiv);
 62 | }
 63 | 
 64 | if (typeof window.getJson === 'undefined') {
 65 | 	function getJson(url) {
 66 | 		var request = new XMLHttpRequest();
 67 | 		var jsonArray = [];
 68 | 	
 69 | 		request.open('GET', url, false);
 70 | 		request.send(null);
 71 | 		if (request.status === 200) {
 72 | 			jsonArray = JSON.parse(request.responseText);
 73 | 		}
 74 | 		return jsonArray;
 75 | 	}
 76 | }
 77 | 
 78 | function addBanner(bannerNode, image, imageLink) {
 79 | 	// check to see if the banner is already visible so we don't have duplicates
 80 | 	for (i=0; i<bannerNode[0].children.length; i++) {
 81 | 		if (bannerNode[0].children[i].src.indexOf(image) > -1) {
 82 | 			return;
 83 | 		}
 84 | 	}
 85 | 	var extraContent = "<img href=\"" + imageLink + "\" alt=\"Branding\" src=\"" + image + "\" />";
 86 | 	bannerNode[0].innerHTML = extraContent + bannerNode[0].innerHTML;
 87 | }
 88 | 
 89 | function removeBanner(bannerNode, image) {
 90 | 	for (i=0; i<bannerNode[0].children.length; i++) {
 91 | 		if (bannerNode[0].children[i].src.indexOf(image) > -1) {
 92 | 			bannerNode[0].removeChild(bannerNode[0].children[i]);
 93 | 		}
 94 | 	}
 95 | }
 96 | 
 97 | function setAllInstaledStatus(displayedAppList, appsToCheck) {
 98 | 	// record status of installed for each app in appsToCheck
 99 | 	for (var i = 0; i < displayedAppList.length; i++) {
100 | 		var currentAppNodeName = displayedAppList[i].title
101 | 		for (var p = 0; p < appsToCheck.length; p++) {
102 | 			if (!appsToCheck[p].hasOwnProperty('installedStatus')) {
103 | 				appsToCheck[p].installedStatus = "not_available";
104 | 			}
105 | 			if (currentAppNodeName == appsToCheck[p].appName) {
106 | 				appsToCheck[p].installedStatus = displayedAppList[i].parentNode.children[2].className;
107 | 			}
108 | 		}
109 | 	}
110 | }
111 | 
112 | function setAllVisibleStatus(displayedAppList, appsToCheck) {
113 | 	// record status of visible for each app in appsToCheck
114 | 	for (var p = 0; p < appsToCheck.length; p++) {
115 | 		var appToCheckName = appsToCheck[p].appName
116 | 		for  (var i = 0; i < displayedAppList.length; i++){
117 | 			if (!appsToCheck[p].hasOwnProperty('visible')) {
118 | 				appsToCheck[p].visible=false;
119 | 			}
120 | 			if (appToCheckName == displayedAppList[i].title) {
121 | 				appsToCheck[p].visible=true;
122 | 			}				
123 | 		}
124 | 	}
125 | }
126 | 
127 | function processConditionalBanners(appsToCheck, bannerDiv) {
128 | 	for (var p = 0; p < appsToCheck.length; p++) {
129 | 		if (appsToCheck[p].action == "show") {
130 | 			if (appsToCheck[p].visible == true) {
131 | 				if (appsToCheck[p].installedStatus == 'installed') {
132 | 					if (appsToCheck[p].appInstalledRunAction == true) {
133 | 						addBanner(bannerDiv, appsToCheck[p].appBannerImage, appsToCheck[p].appBannerLink);
134 | 					}
135 | 				} else {
136 | 					if (appsToCheck[p].appAvailableRunAction == true) {
137 | 						addBanner(bannerDiv, appsToCheck[p].appBannerImage, appsToCheck[p].appBannerLink);
138 | 					}
139 | 				}
140 | 			} else {
141 | 				addBanner(bannerDiv, appsToCheck[p].appBannerImage, appsToCheck[p].appBannerLink);
142 | 			}
143 | 					
144 | 		} else if (appsToCheck[p].action == "hide") {
145 | 
146 | 			if (appsToCheck[p].visible == true) {
147 | 				if (appsToCheck[p].installedStatus == 'installed') {
148 | 					if (appsToCheck[p].appInstalledRunAction == true) {
149 | 						removeBanner(bannerDiv, appsToCheck[p].appBannerImage);
150 | 					}
151 | 				} else  {
152 | 					if (appsToCheck[p].appAvailableRunAction == true) {
153 | 						removeBanner(bannerDiv, appsToCheck[p].appBannerImage);
154 | 					}
155 | 				}
156 | 			} else {
157 | 				removeBanner(bannerDiv, appsToCheck[p].appBannerImage);
158 | 			}
159 | 		}	
160 | 	}
161 | }
162 | 


--------------------------------------------------------------------------------