Merge pull request #110 from Gluejar/sharing_text

Sharing text

frontend/templates/download.html

@@ -7,6 +7,7 @@
 
 {% block extra_js %}
 <script type="text/javascript" src="/static/js/readmill.js"></script>
+<script type="text/javascript" src="/static/js/embed.js"></script>
 {% endblock %}
 
 {% block content %}
@@ -14,6 +15,18 @@
 <div id="lightbox_content">
 <div class="border">
     <h2>Downloads for <I><a href="{% url work work.id %}">{{ work.title }}</a></i></h2>
+    <div class="sharing not_unglued">
+        <h3 class="jsmod-title"><span>Share</span></h3>
+        <ul class="social menu">
+            {% with site.domain as domain %}
+            <a href="https://www.facebook.com/sharer.php?u=https://{{ site.domain }}{% url work work.id|urlencode:"" %}"><li class="facebook first"><span>Facebook</span></li></a>
+            <a href="https://twitter.com/intent/tweet?url={{request.build_absolute_uri|urlencode:"" }}&amp;text=I%27m%20enjoying%20{{ work.title|urlencode }}%2C%20a%20free%2C%20non%2DDRM%20ebook%2E%20You%20can%20too%21"><li class="twitter"><span>Twitter</span></li></a>
+            {% endwith %}
+            <a href="{% url emailshare '' %}?next={% url work work.id|urlencode:"" %}"><li class="email"><span>Email</span></li></a>
+            <a href="#" id="embed2"><li class="embed"><span>Embed</span></li></a>
+            <div id="widgetcode2">Copy/paste this into your site:<br /><textarea rows="7" cols="22">&lt;iframe src="https://{{ request.META.HTTP_HOST }}/api/widget/{{ work.first_isbn_13 }}/" width="152" height="325" frameborder="0"&gt;&lt;/iframe&gt;</textarea></div>
+        </ul>
+    </div>
     {% if unglued_ebooks %}
     <div class="unglued">
         <h3>Read the unglued edition!</h3>
@@ -48,6 +61,7 @@
             {% endfor %}		
     </div>
     {% endif %}
+    <div class="clearfix"></div>
 </div>
 {% if unglued_ebooks or other_ebooks %}
     <div class="border">

frontend/templates/emails/read_this.txt

@@ -0,0 +1,3 @@
+Thanks to Unglue.it, I'm reading a free, non-DRM ebook of {{ work.title }}.  I think you'd enjoy reading it too.  You can download it at https://{{site}}{% url download work.id %}  You can also copy it, put it on your favorite ereader, and shift it to different formats, freely and legally.
+
+Unglue.it helps book lovers pay creators to make their ebooks free to everyone on earth.  You can help too at https://unglue.it/ .

frontend/templates/front_matter.html

@@ -92,6 +92,15 @@
     <p>
         You can say thank you by supporting the ungluing of more books at <a href="https://unglue.it/">https://unglue.it/</a> .
     </p>
+    <p>
+        If you're reading this book on an internet-connected device, you can also share it with your friends:
+        <ul>
+            {% url work campaign.work.id as work_url %}
+            <a href="mailto:?to=&subject=I%27m%20enjoying%20{{ campaign.work.title|urlencode }}%2C%20a%20free%2C%20DRM%2Dfree%20ebook%2E%20You%20can%20too%21&body=You%20can%20download%20it%20from%20Unglue%2Eit%20here%3A%20https://unglue.it{{ work_url|urlencode:"" }}%20%2E"><li>Email it</li></a>
+            <a href="https://twitter.com/intent/tweet?url=https://unglue.it{{ work_url|urlencode:"" }}&text=I%27m%20enjoying%20{{ campaign.work.title|urlencode:"" }}%2C%20a%20free%2C%20DRM%2Dfree%20ebook%2E%20You%20can%20too%21"><li>Tweet it</li></a>
+            <a href="https://www.facebook.com/sharer.php?u=https://unglue.it{{ work_url|urlencode:"" }}"><li>Share it on Facebook</li></a>
+        </ul>
+	</p>
 </section>
 <!-- trim here -->
 

frontend/templates/work.html

@@ -418,7 +418,15 @@ $j(document).ready(function(){
                 <div class="jsmod-content">
                     <ul class="social menu">
                         <a href="https://www.facebook.com/sharer.php?u={{request.build_absolute_uri|urlencode:"" }}"><li class="facebook first"><span>Facebook</span></li></a>
-                        <a href="https://twitter.com/intent/tweet?url={{request.build_absolute_uri|urlencode:"" }}&amp;text=I%27m%20ungluing%20{{ work.title|urlencode }}%20at%20%40unglueit.%20Join%20me%21"><li class="twitter"><span>Twitter</span></li></a>
+                        {% if work.first_ebook %}
+                            <a href="https://twitter.com/intent/tweet?url={{request.build_absolute_uri|urlencode:"" }}&amp;text=I%27m%20enjoying%20{{ work.title|urlencode }}%2C%20a%20free%2C%20DRM%2Dfree%20ebook%2E%20You%20can%20too%21"><li class="twitter"><span>Twitter</span></li></a>
+                        {% else %}
+                            {% ifequal status 'SUCCESSFUL' %}
+                                <a href="https://twitter.com/intent/tweet?url={{request.build_absolute_uri|urlencode:"" }}&amp;text=I%27m%20looking%20forward%20to the%20free%2C%20non%2DDRM%20ebook%20of%20{{ work.title|urlencode }}%2E%20You%20can%20too%21 "><li class="twitter"><span>Twitter</span></li></a>
+                            {% else %}
+                                <a href="https://twitter.com/intent/tweet?url={{request.build_absolute_uri|urlencode:"" }}&amp;text=I%27m%20ungluing%20{{ work.title|urlencode }}%20at%20%40unglueit.%20Join%20me%21"><li class="twitter"><span>Twitter</span></li></a>
+                            {% endifequal %}
+                        {% endif %}
                         {% if request.user.is_authenticated %}<a href="{% url emailshare '' %}?next={{request.build_absolute_uri|urlencode:""}}"><li class="email"><span>Email</span></li></a>{% endif %}
                         <a href="#" id="embed"><li class="embed"><span>Embed</span></li></a>
                     </ul>

frontend/views.py

@@ -2011,11 +2011,15 @@ def emailshare(request, action):
                     status = None
             
                 # customize the call to action depending on campaign status
-                if status == 'ACTIVE':
+                if status == 'SUCCESSFUL' or work.first_ebook():
+                    message = render_to_string('emails/read_this.txt',{'request':request,'work':work,'site': Site.objects.get_current()})
+                    subject = 'I think you\'d like this book I\'m reading'
+                elif status == 'ACTIVE':
                     message = render_to_string('emails/pledge_this.txt',{'request':request,'work':work,'site': Site.objects.get_current()})
+                    subject = 'Please help me give this book to the world'
                 else:
                     message = render_to_string('emails/wish_this.txt',{'request':request,'work':work,'site': Site.objects.get_current()})
-                subject = 'Come see one of my favorite books on Unglue.it'
+                    subject = 'Come see one of my favorite books on Unglue.it'
             
             form = EmailShareForm(initial={ 'next':next, 'subject': subject, 'message': message})
         except:
@@ -2109,7 +2113,8 @@ def lockss_manifest(request, year):
 def download(request, work_id):
     context = {}
     work = safe_get_work(work_id)
-    context.update({'work': work})
+    site = Site.objects.get_current()
+    context.update({'work': work, 'site': site})
 
     unglued_ebooks = work.ebooks().filter(edition__unglued=True)
     other_ebooks = work.ebooks().filter(edition__unglued=False)

static/css/download.css

@@ -1 +1 @@
-.header-text{height:36px;line-height:36px;display:block;text-decoration:none;font-weight:bold;letter-spacing:-0.05em}.panelborders{border-width:1px 0;border-style:solid none;border-color:#fff}.roundedspan{border:1px solid #d4d4d4;-moz-border-radius:7px;-webkit-border-radius:7px;border-radius:7px;padding:1px;color:#fff;margin:0 8px 0 0;display:inline-block}.roundedspan>span{padding:7px 7px;min-width:15px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;text-align:center;display:inline-block}.roundedspan>span .hovertext{display:none}.roundedspan>span:hover .hovertext{display:inline}.mediaborder{padding:5px;border:solid 5px #edf3f4}.actionbuttons{width:auto;height:36px;line-height:36px;background:#8dc63f;-moz-border-radius:32px;-webkit-border-radius:32px;border-radius:32px;color:white;cursor:pointer;font-size:13px;font-weight:bold;padding:0 15px;border:0;margin:5px 0}.errors{-moz-border-radius:16px 16px 0 0;-webkit-border-radius:16px 16px 0 0;border-radius:16px 16px 0 0;border:solid #e35351 3px;clear:both;width:90%;height:auto;line-height:16px;padding:7px 0;font-weight:bold;font-size:13px;text-align:center}.errors li{list-style:none;border:0}.download_container{width:50%;margin:auto}#lightbox_content a{color:#6994a3}#lightbox_content .signuptoday a{color:white}#lightbox_content h2,#lightbox_content h3,#lightbox_content h4{margin-top:15px}#lightbox_content h2 a{font-size:18.75px}#lightbox_content .ebook_download a{margin:auto 5px auto 0;font-size:15px}#lightbox_content .ebook_download img{vertical-align:middle}#lightbox_content .logo{font-size:15px}#lightbox_content .logo img{-moz-border-radius:7px;-webkit-border-radius:7px;border-radius:7px;height:50px;width:50px;margin-right:5px}#lightbox_content .unglued,#lightbox_content .not_unglued{-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;margin-left:-2px;padding:5px;padding-bottom:15px;margin-bottom:5px}#lightbox_content .unglued h3,#lightbox_content .not_unglued h3{margin-top:5px}#lightbox_content .unglued{border:solid 2px #8dc63f}#lightbox_content .not_unglued{border:solid 2px #d6dde0}#lightbox_content a.add-wishlist .on-wishlist,#lightbox_content a.success,a.success:hover{text-decoration:none;color:#3d4e53}#lightbox_content a.success,a.success:hover{cursor:default}#lightbox_content ul{padding-left:50px}#lightbox_content ul li{margin-bottom:4px}.border{-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;border:solid 2px #d6dde0;margin:5px auto;padding-right:5px;padding-left:5px}
+.header-text{height:36px;line-height:36px;display:block;text-decoration:none;font-weight:bold;letter-spacing:-0.05em}.panelborders{border-width:1px 0;border-style:solid none;border-color:#fff}.roundedspan{border:1px solid #d4d4d4;-moz-border-radius:7px;-webkit-border-radius:7px;border-radius:7px;padding:1px;color:#fff;margin:0 8px 0 0;display:inline-block}.roundedspan>span{padding:7px 7px;min-width:15px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;text-align:center;display:inline-block}.roundedspan>span .hovertext{display:none}.roundedspan>span:hover .hovertext{display:inline}.mediaborder{padding:5px;border:solid 5px #edf3f4}.actionbuttons{width:auto;height:36px;line-height:36px;background:#8dc63f;-moz-border-radius:32px;-webkit-border-radius:32px;border-radius:32px;color:white;cursor:pointer;font-size:13px;font-weight:bold;padding:0 15px;border:0;margin:5px 0}.errors{-moz-border-radius:16px 16px 0 0;-webkit-border-radius:16px 16px 0 0;border-radius:16px 16px 0 0;border:solid #e35351 3px;clear:both;width:90%;height:auto;line-height:16px;padding:7px 0;font-weight:bold;font-size:13px;text-align:center}.errors li{list-style:none;border:0}ul.social a:hover{text-decoration:none}ul.social li{padding:5px 0 5px 30px!important;height:28px;line-height:28px!important;margin:0!important;-moz-border-radius:0;-webkit-border-radius:0;border-radius:0}ul.social li.facebook{background:url("/static/images/icons/facebook.png") 10px center no-repeat;cursor:pointer}ul.social li.facebook span{padding-left:10px}ul.social li.facebook:hover{background:#8dc63f url("/static/images/icons/facebook-hover.png") 10px center no-repeat}ul.social li.facebook:hover span{color:#fff}ul.social li.twitter{background:url("/static/images/icons/twitter.png") 10px center no-repeat;cursor:pointer}ul.social li.twitter span{padding-left:10px}ul.social li.twitter:hover{background:#8dc63f url("/static/images/icons/twitter-hover.png") 10px center no-repeat}ul.social li.twitter:hover span{color:#fff}ul.social li.email{background:url("/static/images/icons/email.png") 10px center no-repeat;cursor:pointer}ul.social li.email span{padding-left:10px}ul.social li.email:hover{background:#8dc63f url("/static/images/icons/email-hover.png") 10px center no-repeat}ul.social li.email:hover span{color:#fff}ul.social li.embed{background:url("/static/images/icons/embed.png") 10px center no-repeat;cursor:pointer}ul.social li.embed span{padding-left:10px}ul.social li.embed:hover{background:#8dc63f url("/static/images/icons/embed-hover.png") 10px center no-repeat}ul.social li.embed:hover span{color:#fff}.download_container{width:75%;margin:auto}#lightbox_content a{color:#6994a3}#lightbox_content .signuptoday a{color:white}#lightbox_content h2,#lightbox_content h3,#lightbox_content h4{margin-top:15px}#lightbox_content h2 a{font-size:18.75px}#lightbox_content .ebook_download a{margin:auto 5px auto 0;font-size:15px}#lightbox_content .ebook_download img{vertical-align:middle}#lightbox_content .logo{font-size:15px}#lightbox_content .logo img{-moz-border-radius:7px;-webkit-border-radius:7px;border-radius:7px;height:50px;width:50px;margin-right:5px}#lightbox_content .unglued,#lightbox_content .not_unglued{-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;margin-left:-0.25%;padding:.5%;padding-bottom:15px;margin-bottom:5px;width:74%}#lightbox_content .unglued h3,#lightbox_content .not_unglued h3{margin-top:5px}#lightbox_content .unglued{border:solid 2px #8dc63f}#lightbox_content .not_unglued{border:solid 2px #d6dde0}#lightbox_content a.add-wishlist .on-wishlist,#lightbox_content a.success,a.success:hover{text-decoration:none;color:#3d4e53}#lightbox_content a.success,a.success:hover{cursor:default}#lightbox_content ul{padding-left:50px}#lightbox_content ul li{margin-bottom:4px}.border{-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;border:solid 2px #d6dde0;margin:5px auto;padding-right:5px;padding-left:5px}.sharing{float:right;padding:.5%!important;width:23%!important;min-width:105px}.sharing ul{padding:.5%!important}.sharing .jsmod-title{-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;height:auto}.sharing .jsmod-title span{padding:5%!important;color:white!important;font-style:normal}#widgetcode2{display:none;border:1px solid #d6dde0;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;padding:10px}#widgetcode2 textarea{max-width:90%}

static/js/embed.js

@@ -3,4 +3,7 @@ $j(document).ready(function(){
     $j('#embed').click(function(){
         $j('div#widgetcode').toggle();
     });
+    $j('#lightbox').on('click', '#embed2', function(){
+        $j('div#widgetcode2').toggle();
+    });
 });

static/less/campaign.less

@@ -1,24 +1,7 @@
 @import "variables.less";
 @import "campaign_tabs.less";
 @import "book_detail.less";
-
+@import "social_share.less";
-/* Common elements of share links -- just swap in the background image */
-.shareclass(@sharewhere) {
-	background:url("@{image-base}icons/@{sharewhere}.png") 10px center no-repeat;
-	cursor: pointer;
-		
-	span {
-		padding-left:10px;
-	}
-		
-	&:hover {
-		background:@call-to-action url("@{image-base}icons/@{sharewhere}-hover.png") 10px center no-repeat;
-	
-		span {
-			color: #fff;
-			}
-	}
-}
 
 /* Page layout */
 #js-page-wrap {
@@ -318,37 +301,6 @@ div#content-block-content {
 	padding:10px;
 } 
 
-/* Right column - sharing */
-ul.social {
-	a:hover {
-		text-decoration: none;
-	}
-
-	li {
-		padding:5px 0 5px 30px !important;
-		height: 28px;
-		line-height: 28px !important;
-		margin: 0 !important;
-		.one-border-radius(0px);
-	
-		&.facebook {
-			.shareclass("facebook");
-		}
-	
-		&.twitter {
-			.shareclass("twitter");
-		}
-	
-		&.email {
-			.shareclass("email");
-		}
-	
-		&.embed {
-			.shareclass("embed");
-		}
-	}
-}
-
 #widgetcode {
 	display: none;
 	border:1px solid @blue-grey;

static/less/download.less

@@ -1,7 +1,8 @@
 @import "variables.less";
+@import "social_share.less";
 
 .download_container {
-	width: 50%;
+	width: 75%;
 	margin: auto;
 }
 
@@ -46,10 +47,11 @@
 
 #lightbox_content .unglued, #lightbox_content .not_unglued {
     .one-border-radius(5px);
-	margin-left: -2px;
+	margin-left: -.25%;
-	padding: 5px;
+	padding: 0.5%;
 	padding-bottom: 15px;
 	margin-bottom: 5px;
+	width: 74%;
 	
 	h3 {
 		margin-top: 5px;
@@ -87,4 +89,37 @@
     margin: 5px auto;
     padding-right: 5px;
     padding-left: 5px;
+}
+
+.sharing {
+    float: right;
+    padding: 0.5% !important;
+    width: 23% !important;
+    min-width: 105px;
+    
+    ul {
+        padding: 0.5% !important;
+    }
+    
+    .jsmod-title {
+        .one-border-radius(10px);
+        height: auto;
+        
+        span {
+            padding: 5% !important;
+            color: white !important;
+            font-style: normal;
+        }
+    }
+}
+
+#widgetcode2 {
+    display: none;
+	border:1px solid @blue-grey;
+	.one-border-radius(10px);
+	padding:10px;
+	
+	textarea {
+	    max-width: 90%;
+	}
 }

static/less/social_share.less

@@ -0,0 +1,46 @@
+.shareclass(@sharewhere) {
+	background:url("@{image-base}icons/@{sharewhere}.png") 10px center no-repeat;
+	cursor: pointer;
+		
+	span {
+		padding-left:10px;
+	}
+		
+	&:hover {
+		background:@call-to-action url("@{image-base}icons/@{sharewhere}-hover.png") 10px center no-repeat;
+	
+		span {
+			color: #fff;
+			}
+	}
+}
+
+ul.social {
+	a:hover {
+		text-decoration: none;
+	}
+
+	li {
+		padding:5px 0 5px 30px !important;
+		height: 28px;
+		line-height: 28px !important;
+		margin: 0 !important;
+		.one-border-radius(0px);
+	
+		&.facebook {
+			.shareclass("facebook");
+		}
+	
+		&.twitter {
+			.shareclass("twitter");
+		}
+	
+		&.email {
+			.shareclass("email");
+		}
+	
+		&.embed {
+			.shareclass("embed");
+		}
+	}
+}