Major Update

See Read me for details on upgrades and changes.
JonMasterson · Oct 29, 2015 · 67727bb · 67727bb
1 parent 8081c39
commit 67727bb
Show file tree

Hide file tree

Showing 17 changed files with 506 additions and 1,042 deletions.
diff --git a/README.md b/README.md
@@ -3,32 +3,46 @@ WordPress-Post-Like-System
 
 A simple and efficient post like system for WordPress. <a href="http://jonmasterson.com/post-like-demo/" target="_blank">View the demo.</a> 
 
-Check out <a href="http://hofmannsven.com/2013/laboratory/wordpress-post-like-system/" target="_blank">this post</a> on <a href="https://twitter.com/hofmannsven" target="_blank">Sven Hofmann's</a> site for more information.
+It's a bit outdated at this point, but check out <a href="http://hofmannsven.com/2013/laboratory/wordpress-post-like-system/" target="_blank">this post</a> on <a href="https://twitter.com/hofmannsven" target="_blank">Sven Hofmann's</a> site for more information.
 
 Originally, this system utilized <a href="http://fontawesome.io/" target="_blank">Font Awesome</a> for the heart and gear icons. The Font Awesome version is still available in the <em>vendor</em> folder for those who are already using Font Awesome in their theme.
 
-<h3>Five Steps to Glory</h3>
+<h3>Four Steps to Glory</h3>
 <ol>
   <li>Add the CSS to your theme's main stylesheet.</li>
   <li>Add <em>post-like.min.js</em> to your theme's <em>js</em> folder (if it exists). If there is no <em>js</em> folder at your theme's root level, create one and add <em>post-like.min.js</em> to it.</li>
-  <li>Add all the fonts to your theme's <em>fonts</em> folder (if it exists). If there is no <em>fonts</em> folder at your theme's root level, create one and add all the fonts to it.</li>
   <li>Add the contents of post-like.php to your theme's functions.php file.</li>
-  <li>Implement the button by doing one of the following:
-    <ol>
-      <li>Add the button function to your theme's single page template (typically content-single.php) — <em>echo getPostLikeLink( get_the_ID() );</em></li>
+  <li>Output the button by doing the following:
+    <ul>
+      <li>Add the button to any posts in your theme by adding the following function, <a href="https://developer.wordpress.org/themes/basics/the-loop/" target="_blank">within the loop</a> — <code>echo get_simple_likes_button( get_the_ID() );</code></li>
+	  <li>Add the button to any comments in your theme by making sure the second parameter in the button function is set to "1" — <code>echo get_simple_likes_button( get_comment_ID(), 1 );</code></li>
       <li>Include the [jmliker] shortcode in your posts</li>
-    </ol>
+    </ul>
   </li>
 </ol>
 
-<h3>Most Liked Lists</h3>
-This system does not currently offer AJAX updates for functions 7-11. Originally, these functions were offered to show what could be done with this system, and were an afterthought. PHP functions are provided, but they will not update without a screen refresh.
+<h3>Upgrades</h3>
+I've cleaned up a lot here, fixing a few errors, and making it easier to revise this system to suit your theme. Here are the highlights:
+<ul>
+  <li>You can now add the button to comments.</li>
+  <li>You can now add multiple buttons for each post, and they will all update at once when you click any of them.</li>
+  <li>SVG icons, so no more icon fonts. In an effort to keep things light, the SVG has been added inline, with a simple html entity as a fallback. This way, we don't have to include a javascript fallback. The trade-off is that these inline icons are not cached. They are rather small, though. If you prefer to use Font Awesome or another icon solution, swap out the svgs in the <code>get_liked_icon()</code> and <code>get_unliked_icon()</code> functions with your own solution. Since it is a popular solution, I've included commented code for Font Awesome icons.</li>
+  <li>The button will now work with or without javascript. Hooray for graceful degradation!</li>
+  <li>All the text is now translatable. Find and replace 'YourThemesTextDomain' with your theme's text domain.</li>
+  <li>Number formatting now included. For example, a like count of "1,250" will output as "1.25K". If you would prefer a different number format, update <code>sl_format_count();</code> to your preference.</li>
+  <li>Better IP address handling</li>
+  <li>The time of the post/comment like is now recorded as post/comment meta. This allows us to properly perform proper meta queries to determine which posts have the most likes for a given time period.</li>
+</ul>
 
-<h3>Issues</h3>
+<h3>Removed</h3>
+I've removed some functions and changed the way this system works a bit. None are breaking changes. These were for efficiency.
 <ul>
-<li>This post like system is pretty simple, and does not have many moving parts. Some folks have encountered issues with AJAX-loaded content, and others have had some trouble with plugin conflicts. Feel free to open an issue if your stuck, and I will do my best to help you solve it.</li>
-<li>Time-based retrieval of most liked lists (ex. "Most Popular Post This Week"), returns posts based on the time the post was published. This is inadequate — posts should be returned based on the time the post was liked.</li>
+	<li>The functions that formerly appeared here to output most liked lists have been removed. Time-based retrieval of most liked lists (ex. "Most Popular Post This Week"), returned posts based on the time the post was published. This was inadequate — posts should have been returned based on the time the post was liked. If you should happen to need these older functions for some reason, they are still available in past versions.</li>
+	<li>We no longer store an array of liked posts in user meta. As time goes by, this can lead to inconsistencies if posts are deleted. I could have built a clean-up function to find and remove deleted post ids from user meta, but it made more sense to stop adding this data to user meta. Especially since these posts can be retrieved with a meta query for all posts that have the user's ID attached (see <code>show_user_likes();</code> for this query).</li>
 </ul>
 
-<h3>Coming Soon</h3>
-This Post Like System will soon be offered as a free and premium plugin. The free plugin will have everything the current system does, but will be easier to manage from the WordPress admin (no more implementation errors). The premium plugin will offer AJAX widgets for functions 7-11 (and beyond) that will update & respond to likes without a screen refresh, and can be managed from the WordPress admin.
+<h3>Issues</h3>
+This post like system is pretty simple, and does not have many moving parts. Some folks have encountered issues with AJAX-loaded content, and others have had some trouble with plugin conflicts. Feel free to open an issue if your stuck, and I will do my best to help you solve it.
+
+<h3>Coming in November</h3>
+This Post Like System will soon be offered as a free and premium plugin. The free plugin will have everything the current system does, but will be easier to manage from the WordPress admin (no more implementation errors). The premium plugin will offer AJAX widgets for Most Liked Lists that will update & respond to likes without a screen refresh, and can be managed from the WordPress admin.
diff --git a/css/like-styles.css b/css/like-styles.css
diff --git a/css/like-styles.min.css b/css/like-styles.min.css
diff --git a/css/simple-likes-public.css b/css/simple-likes-public.css
@@ -0,0 +1,114 @@
+/* Wrapper */
+.sl-wrapper a {
+	border-bottom: 0 !important;
+	text-decoration: none !important;
+}
+.sl-button {
+	padding: 0.375em 0.625em;
+	font-size: 1em;
+	line-height: 1;
+	font-weight: normal;
+}
+
+/* Colors */
+a.liked {
+	color: #da1b1b;
+}
+a.liked:hover,
+a.liked:active,
+a.liked:focus {
+	color: #666666;
+}
+a.liked span.sl-count,
+.sl-count {
+	color: #666666;
+}
+
+/* Icon */
+.sl-icon {
+	margin-right: 0.3125em;
+	font-family: 'Arial Unicode MS', Arial, sans-serif;
+	vertical-align: middle;
+}
+.sl-icon svg {
+	fill: currentColor;
+	width: 1em;
+	height: 1em;
+}
+.sl-icon svg:after {
+	content: "";
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left:0;
+}
+
+/* Count */
+.sl-count {
+	font-size: 0.625em;
+	font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
+	text-transform: uppercase;
+	vertical-align: middle;
+}
+
+/* Loader */
+.loader,
+.loader:before,
+.loader:after {
+  background: rgba(0, 0, 0, 0.2);
+  -webkit-animation: load1 1s infinite ease-in-out;
+  animation: load1 1s infinite ease-in-out;
+  width: .2em;
+  height: .6em;
+}
+.loader:before,
+.loader:after {
+  position: absolute;
+  top: 0;
+  content: '';
+}
+.loader:before {
+  left: -.375em;
+  -webkit-animation-delay: -0.32s;
+  animation-delay: -0.32s;
+}
+.loader {
+  text-indent: -9999em;
+  display: inline-block;
+  position: relative;
+  vertical-align: middle;
+  font-size: 1em;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
+  -webkit-animation-delay: -0.16s;
+  animation-delay: -0.16s;
+}
+.loader:after {
+  left: .375em;
+}
+@-webkit-keyframes load1 {
+  0%,
+  80%,
+  100% {
+    box-shadow: 0 0 rgba(0, 0, 0, 0.2);
+    height: .6em;
+  }
+  40% {
+    box-shadow: 0 -.3em rgba(0, 0, 0, 0.2);
+    height: 1em;
+  }
+}
+@keyframes load1 {
+  0%,
+  80%,
+  100% {
+    box-shadow: 0 0 rgba(0, 0, 0, 0.2);
+    height: .6em;
+  }
+  40% {
+    box-shadow: 0 -.3em rgba(0, 0, 0, 0.2);
+    height: 1em;
+  }
+}
diff --git a/fonts/like_font.eot b/fonts/like_font.eot
diff --git a/fonts/like_font.svg b/fonts/like_font.svg
diff --git a/fonts/like_font.ttf b/fonts/like_font.ttf
diff --git a/fonts/like_font.woff b/fonts/like_font.woff
diff --git a/js/post-like.js b/js/post-like.js
diff --git a/js/post-like.min.js b/js/post-like.min.js