1. Mathias Panzenböck
  2. Greattune Player

Commits

Mathias Panzenböck  committed 631fa10

style++

  • Participants
  • Parent commits 20690a9
  • Branches default

Comments (0)

Files changed (5)

File index.html

View file
 <script type="text/javascript" src="javascripts/jquery.dataset.js"></script>
 <script type="text/javascript" src="javascripts/jQueryRotateCompressed.2.1.js"></script>
 <script type="text/javascript" src="javascripts/shims.js"></script>
-<script type="text/javascript" src="javascripts/magnatune.js"></script>
-<!--[if IE]>
-<script type="text/javascript" src="javascripts/magnatune-ie.js"></script>
-<![endif]-->
 <script type="text/javascript" src="javascripts/jquery.socialshareprivacy.js"></script>
 <script type="text/javascript" src="javascripts/jquery.socialshareprivacy.facebook.js"></script>
 <script type="text/javascript" src="javascripts/jquery.socialshareprivacy.gplus.js"></script>
-<script type="text/javascript" src="javascripts/jquery.socialshareprivacy.localstorage.js"></script>
 <script type="text/javascript" src="javascripts/jquery.socialshareprivacy.mail.js"></script>
 <script type="text/javascript" src="javascripts/jquery.socialshareprivacy.pinterest.js"></script>
 <script type="text/javascript" src="javascripts/jquery.socialshareprivacy.reddit.js"></script>
   })();
 
 </script>
+<script type="text/javascript" src="javascripts/magnatune.js"></script>
+<!--[if IE]>
+<script type="text/javascript" src="javascripts/magnatune-ie.js"></script>
+<![endif]-->
 </head>
 <body>
 <div class="about" id="description" style="display:none;">
 	</div>
 	<p><a id="start-tour" href="javascript:Magnatune.Tour.start();void(0)">Take a Tour</a> to
 	get an overview of the features.</p>
+	<div class="share"></div>
 	<hr/>
 	<h3>Technical Info</h3>
 	<p>This is a music player that is backed by the collection of songs from
 	GNU GPL version 2 or later</p>
 	<p>This is free software; you are free to change and redistribute it.<br/>
 	There is NO WARRANTY, to the extent permitted by law.</p>
-	<div class="share"></div>
 </div>
 <div id="main">
 	<div id="player-wrapper">

File javascripts/jquery.socialshareprivacy.localstorage.js

-/*
- * jquery.socialshareprivacy.js | 2 Klicks fuer mehr Datenschutz
- *
- * Copiright (c) 2012 Mathias Panzenböck
- *
- * is released under the MIT License http://www.opensource.org/licenses/mit-license.php
- *
- * Spread the word, link to us if you can.
- */
-(function ($, undefined) {
-	"use strict";
-
-	$.extend($.fn.socialSharePrivacy.settings, {
-		// Set perma_option to "on".
-		// Initially it is only set to "on" if jQuery.cookie is available.
-		perma_option: 'on',
-		set_perma_option: function (service_name) {
-			localStorage.setItem('socialSharePrivacy_'+service_name, 'perma_on');
-		},
-		del_perma_option: function (service_name) {
-			localStorage.removeItem('socialSharePrivacy_'+service_name);
-		},
-		// Only one of the two methods "get_perma_options" and "get_perma_option" has
-		// to be implemented. Though the other has to be set to null, so the default
-		// cookie based method is not used.
-		get_perma_options: null,
-		get_perma_option: function (service_name) {
-			return localStorage.getItem('socialSharePrivacy_'+service_name) === 'perma_on';
-		}
-	});
-})(jQuery);

File javascripts/magnatune.js

View file
 	});
 };
 
+$.extend($.fn.socialSharePrivacy.settings, {
+	order: ['facebook', 'gplus', 'twitter', 'reddit', 'pinterest', 'tumblr', 'mail'],
+	info_link_target: '_blank'
+});
+
+if (typeof(localStorage) !== "undefined") {
+	$.extend($.fn.socialSharePrivacy.settings, {
+		perma_option: 'on',
+		set_perma_option: function (service_name) {
+			var perma = this.get_perma_options();
+			perma[service_name] = true;
+			localStorage.setItem('social-share-privacy', JSON.stringify(perma));
+		},
+		del_perma_option: function (service_name) {
+			var perma = this.get_perma_options();
+			delete perma[service_name];
+			localStorage.setItem('social-share-privacy', JSON.stringify(perma));
+		},
+		get_perma_options: function () {
+			var perma = localStorage.getItem('social-share-privacy');
+			if (perma) {
+				try {
+					return JSON.parse(perma);
+				}
+				catch (e) {}
+			}
+			return {};
+		},
+		get_perma_option: null
+	});
+}
+
 // scrollIntoView and scrollIntoViewIfNeeded "plugin":
 (function ($, undefined) {
 	$.fn.scrollIntoView = function () {
 							cover_class = 'cover huge';
 						}
 						var magnatune_album_url = 'http://magnatune.com/artists/albums/'+sku+'/';
-						var page = tag('div',{'class':'album'},
+						var page = tag('div',{'class':authenticated ? 'album authenticated' : 'album'},
 							tag('h2', tag('a', {'class':'albumname',
 								href:magnatune_album_url,
 								target:'_blank'},
 								album.albumname)),
 							tag('div',{'class':'launchdate'}, launchdate.toLocaleDateString()),
 							genres,
-							tag('table', {'class':'license'},
-								tag('tbody',
-									tag('tr',
-										authenticated ? null :
+							tag('div',{'class':'links'},
+								tag('table',{'class':'license'},
+									tag('tbody',
+										tag('tr',
+											authenticated ? null :
+												tag('td',
+													tag('a',{
+														'class':'buy button',
+														title:'Join to download music from Magnatune',
+														href:'https://magnatune.com/buy/choose?sku='+sku,
+														target:'_blank'},'Download')),
 											tag('td',
 												tag('a',{
-													'class':'buy button',
-													title:'Join to download music from Magnatune',
-													href:'https://magnatune.com/buy/choose?sku='+sku,
-													target:'_blank'},'Download')),
-										tag('td',
-											tag('a',{
-												rel: 'license',
-												target:'_blank',
-												href: 'http://creativecommons.org/licenses/by-nc-sa/1.0/'},
-												tag('img',{
-													alt:'Creative Commons License',
-													width:'88',
-													height:'31',
-													title:'This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 1.0 Generic License',
-													src:'http://i.creativecommons.org/l/by-nc-sa/1.0/88x31.png'})))))),
-							$('<span class="share">').socialSharePrivacy({
-								services: {
-									tumblr:  {type: 'video'},
-									twitter: {hashtags: 'magnatune'}
-								},
-								uri:         magnatune_album_url,
-								title:       album.albumname,
-								description: data.body.description || album.albumname,
-								embed:       Magnatune.Info.embedCode(album.albumname,sku,640,480,true,false),
-								image:       'http://he3.magnatune.com/music/'+
-									encodeURIComponent(artist)+'/'+
-									encodeURIComponent(album.albumname)+'/cover_600.jpg'
-							}),
+													rel: 'license',
+													target:'_blank',
+													href: 'http://creativecommons.org/licenses/by-nc-sa/1.0/'},
+													tag('img',{
+														alt:'Creative Commons License',
+														width:'88',
+														height:'31',
+														title:'This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 1.0 Generic License',
+														src:'http://i.creativecommons.org/l/by-nc-sa/1.0/88x31.png'})))))),
+								$('<div class="share"></div>').socialSharePrivacy({
+									services: {
+										tumblr:  {type: 'video'},
+										twitter: {hashtags: 'magnatune'}
+									},
+									uri:         magnatune_album_url,
+									title:       album.albumname,
+									description: data.body.description || album.albumname,
+									embed:       Magnatune.Info.embedCode(album.albumname,sku,640,480,true,false),
+									image:       'http://he3.magnatune.com/music/'+
+										encodeURIComponent(artist)+'/'+
+										encodeURIComponent(album.albumname)+'/cover_600.jpg'
+								})),
 							tag('img', {'class':cover_class,
 								src: 'http://he3.magnatune.com/music/'+
 									encodeURIComponent(artist)+'/'+
 								src: photo_url,
 								alt: 'Bandphoto'}),
 							tag('table', {'class':'albums'}, tbody),
-							$('<span class="share">').socialSharePrivacy({
+							$('<div class="share"></div>').socialSharePrivacy({
 								services: {
 									tumblr:  {type: 'photo'},
 									twitter: {hashtags: 'magnatune'}

File socialshareprivacy/socialshareprivacy.css

View file
 .social_share_privacy_area {
     clear: both;
-    margin: 20px 0 !important;
+    margin: 5px 0 !important;
 	list-style-type: none;
-	padding: 0 !important;
+	padding: 0;
 	width: auto;
 	display: block;
 }
-.social_share_privacy_area.line {
-	height: 25px;
-}
 .social_share_privacy_area.box {
 	width: 95px;
 }
 	text-align: center;
 }
 .social_share_privacy_area.line li {
-	height: 21px;
+	height: 25px;
 	float: left;
 }
 .social_share_privacy_area li .dummy_btn {
 /* Switch end */
 /* Tooltips begin */
 .social_share_privacy_area li.help_info {
-    position: relative; 
+    position: relative;
+	white-space: nowrap;
+}
+.social_share_privacy_area li.help_info .info {
+	white-space: normal;
 }
 .social_share_privacy_area li.settings_info,
 .social_share_privacy_area li.help_info .info {
     font-size: 12px;
     line-height: 16px;
     font-weight: bold;
-    border: 1px solid #ccc;
     -moz-border-radius: 4px;
     -webkit-border-radius: 4px;
     border-radius: 4px;
-    -moz-box-shadow: 0 3px 4px #999;
-    -webkit-box-shadow: 0 3px 4px #999;
-    box-shadow: 0 3px 4px #999;
+    -moz-box-shadow: 0 0px 8px rgba(0,0,0,0.5);
+    -webkit-box-shadow: 0 0px 8px rgba(0,0,0,0.5);
+    box-shadow: 0 0px 8px rgba(0,0,0,0.5);
     background-color: #fdfbec;
     color: #000;
     z-index: 500;
 	-moz-border-radius: 5px;
 	-webkit-border-radius: 5px;
     border-radius: 5px;
-	-moz-box-shadow: 2px 2px 3px #c1c1c1;
-	-webkit-box-shadow: 2px 2px 3px #c1c1c1;
-    box-shadow: 3px 3px 3px #c1c1c1;
+	-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.5);
+	-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.5);
+    box-shadow: 0px 0px 8px rgba(0,0,0,0.5);
     left: 0;
     position: absolute;
     top: 0;
 	width: 115px;
 }
 .social_share_privacy_area li.settings_info .settings_info_menu form fieldset input {
-	clear: both;
-    float: left;
     margin: 4px 10px 4px 0;
     padding: 0;
 }

File style.css

View file
 	background: url("images/dragicon.png");
 }
 
+#embed-container {
+	min-width: 300px;
+}
+
 #info-content .social_share_privacy_area {
 	clear: none;
 }
 
-#info-content table.license {
-	float: left;
-	margin-right: 20px;
-}
-
 .social_share_privacy_area .settings_info {
 	width: 135px;
 }
+
+.album .links {
+	position: relative;
+	height: 45px;
+}
+
+.album .links .license {
+	position: absolute;
+	top: 0px;
+	left: 0px;
+}
+
+.share {
+	position: relative;
+	height: 32px;
+	overflow: hidden;
+}
+
+.album .share {
+	margin-left: 240px;
+}
+
+.album.authenticated .share {
+	margin-left: 100px;
+}
+
+.share:hover {
+	overflow: visible;
+}
+
+.share .social_share_privacy_area {
+	padding: 5px;
+	height: 25px;
+}
+
+.share:hover .social_share_privacy_area {
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	z-index: 1;
+	display: block;
+	background-color: #212733;
+	background-color: rgba(33,39,51,0.9);
+	height: auto;
+	border-radius: 10px;
+}