aroc · dcondrey · Jun 29, 2014
diff --git a/README.md b/README.md
@@ -30,7 +30,19 @@ You'll need to include the following single JavaScript file and two CSS files to
 - `release/side-comments.css`
 - `release/themes/default-theme.css`
 
-You can choose **not** to include `default-theme.css`, but you'll need to style SideComments youself if you choose not to include it, as `side-comments.css` handles only the basic layout styling and not making it all pretty and looking like Medium.com.
+You can choose **not** to include `default-theme.css`, but you'll need to style SideComments yourself if you choose not to include it, as `side-comments.css` handles only the basic layout styling and not making it all pretty and looking like Medium.com.
+
+#### 2.1 Include SideComments.js in your Wordpress theme.
+
+You must ensure that jQuery is enqueued by your theme before loading SideComments.js and that the directory paths are set appropriately.
+
+It's currently set to look for the SideComments.js and SideComments.css file in your root theme directory.
+
+Include the PHP functions in wordpress/functions.php to
+- Register and enqueue SideComments.js and SideComments.css
+- Append the commentable-container class to each articles container using the post_class function
+- Create commentable sections from each paragraph in the post appendinng the commentable-section class
+- Append section_id to each paragraph incrementally starting at 1
 
 ### 3. Set up your HTML.
 

diff --git a/wordpress/functions.php b/wordpress/functions.php
@@ -0,0 +1 @@
+<?php/** * The MIT License (MIT) * Copyright (c) 2014 David Condrey *  * Permission is hereby granted, free of charge, to any person obtaining a copy * of this software and associated documentation files (the "Software"), to deal * in the Software without restriction, including without limitation the rights * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell * copies of the Software, and to permit persons to whom the Software is * furnished to do so, subject to the following conditions: *  * The above copyright notice and this permission notice shall be included in * all copies or substantial portions of the Software. *  * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, * FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN * THE SOFTWARE. *//** * Enqueue CSS and JS */if ( ! function_exists( 'side_comments_init_scripts' ) ) {	function side_comments_init_scripts() {		wp_register_style( 'side-comments-style', ( get_template_directory_uri() . '/side-comments.css' ) );		wp_register_script( 'side-comments-script', ( get_template_directory_uri() . '/side-comments.js' ), array ( 'jquery' ) );		wp_enqueue_style( 'side-comments-style');		wp_enqueue_script( 'side-comments-script');	}	add_action( 'wp_enqueue_scripts', 'side_comments_init_scripts' );}/** * Add classes to post container * @param $classes * * @return array */if ( ! function_exists( 'side_comments_post_class' ) ) {	function side_comments_post_class($classes) {		$classes = array(			'commentable-container',			'container'		);		return $classes;	}	add_filter('post_class', 'side_comments_post_class');}/** * Filter paragraphs in the_content add class * and incremental id to each paragraph * * @param $content * @return mixed */if ( ! function_exists( 'side_comments_post_class' ) ) {	function side_comments_incrementparagraphs( $content ) {		return preg_replace_callback(			'|<p>|', function ( $matches ) {				static $i = 1;				return sprintf( '<p class="commentable-section" data-section-id="%d">', $i++ );			}, $content		);	}	add_filter( 'the_content', 'incrementparagraphs', 10, 1 );}

diff --git a/wordpress/side-comments.css b/wordpress/side-comments.css
@@ -0,0 +1,205 @@
+@-webkit-keyframes fadein {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes fadein {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+.commentable-container {
+  -webkit-transition: all 0.22s ease;
+  transition: all 0.22s ease;
+}
+.side-comments-open {
+  -webkit-transform: translate(-300px, 0);
+  -ms-transform: translate(-300px, 0);
+  transform: translate(-300px, 0);
+}
+.commentable-section {
+  position: relative;
+}
+.commentable-section:hover .side-comment .marker {
+  display: block;
+}
+.side-comment {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 20px;
+  min-height: 100%;
+  height: 100%;
+}
+.side-comment * {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.side-comment .hide {
+  display: none;
+}
+.side-comment .marker {
+  display: none;
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 20px;
+  height: 18px;
+  cursor: pointer;
+  background: #DEDEDC;
+  border-radius: 2px;
+  text-decoration: none;
+}
+.side-comment .marker:before,
+.side-comment .marker span {
+  content: "+";
+  display: block;
+  position: absolute;
+  width: 20px;
+  height: 18px;
+  line-height: 16px;
+  font-size: 14px;
+  color: #FFF;
+  text-align: center;
+}
+.side-comment .marker span {
+  display: none;
+  line-height: 20px;
+  font-size: 12px;
+}
+.side-comment.active .marker,
+.side-comment.has-comments .marker,
+.side-comment.has-comments ul.comments {
+  display: block;
+}
+.side-comment .marker:after {
+  content: "";
+  display: block;
+  position: absolute;
+  bottom: -7px;
+  left: 5px;
+  width: 0;
+  border-width: 7px 8px 0 0;
+  border-style: solid;
+  border-color: #DEDEDC transparent;
+}
+.side-comment .marker:hover,
+.side-comment.active .marker {
+  background: #4FAF62;
+}
+.side-comment .marker:hover:after,
+.side-comment.active .marker:after {
+  border-color: #4FAF62 transparent;
+}
+.side-comment .add-comment {
+  display: none;
+}
+.side-comment.has-comments .add-comment,
+.side-comment.no-current-user .add-comment {
+  display: block;
+}
+.side-comment.no-current-user .add-comment {
+  margin-top: 20px;
+}
+.side-comment.has-comments .marker:before {
+  content: "";
+}
+.side-comment.has-comments .marker span {
+  display: block;
+}
+.side-comment.has-comments .add-comment.hide {
+  display: none;
+}
+.side-comment.has-comments .comment-form {
+  display: none;
+}
+.side-comment .comments-wrapper {
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 40px;
+  width: 280px;
+  padding-bottom: 120px;
+}
+.side-comment .comments {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: none;
+  width: 100%;
+}
+.side-comment .comments li {
+  width: 100%;
+  overflow: hidden;
+}
+.side-comment .author-avatar {
+  float: left;
+  width: 32px;
+  height: 32px;
+  margin-right: 10px;
+}
+.side-comment .author-avatar img {
+  width: 100%;
+  height: 100%;
+}
+.side-comment .right-of-avatar {
+  float: left;
+  width: 238px;
+}
+.side-comment .comment-box:empty:not(:focus):before {
+  content: attr(data-placeholder-content);
+  float: left;
+}
+.side-comment .comment,
+.side-comment .comment-box,
+.side-comment .actions {
+  margin: 0;
+}
+.side-comment .actions,
+.side-comment .delete {
+  margin-left: 42px;
+}
+.side-comment .comment-box {
+  outline: none;
+}
+.side-comment .add-comment.active {
+  display: block;
+}
+.side-comment .comment-form {
+  overflow: hidden;
+}
+.side-comment .comment-form.active {
+  display: block;
+}
+.side-comment.active .comments-wrapper {
+  display: block;
+  -webkit-animation: fadein 0.2s;
+  animation: fadein 0.2s;
+}
+@media (max-width: 768px) {
+  body {
+    -webkit-overflow-scrolling: touch;
+    overflow-x: hidden;
+  }
+  .side-comments-open {
+    -webkit-transform: translate(-220px, 0);
+    -ms-transform: translate(-220px, 0);
+    transform: translate(-220px, 0);
+  }
+  .side-comment .comments-wrapper {
+    width: 200px;
+  }
+  .side-comment .right-of-avatar {
+    width: 158px;
+  }
+  .side-comment .marker {
+    display: block;
+  }
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<?php/** * The MIT License (MIT) * Copyright (c) 2014 David Condrey * * Permission is hereby granted, free of charge, to any person obtaining a copy * of this software and associated documentation files (the "Software"), to deal * in the Software without restriction, including without limitation the rights * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell * copies of the Software, and to permit persons to whom the Software is * furnished to do so, subject to the following conditions: * * The above copyright notice and this permission notice shall be included in * all copies or substantial portions of the Software. * * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, * FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN * THE SOFTWARE. //* * Enqueue CSS and JS /if ( ! function_exists( 'side_comments_init_scripts' ) ) { function side_comments_init_scripts() { wp_register_style( 'side-comments-style', ( get_template_directory_uri() . '/side-comments.css' ) ); wp_register_script( 'side-comments-script', ( get_template_directory_uri() . '/side-comments.js' ), array ( 'jquery' ) ); wp_enqueue_style( 'side-comments-style'); wp_enqueue_script( 'side-comments-script'); } add_action( 'wp_enqueue_scripts', 'side_comments_init_scripts' );}/* * Add classes to post container * @param $classes * * @return array /if ( ! function_exists( 'side_comments_post_class' ) ) { function side_comments_post_class($classes) { $classes = array( 'commentable-container', 'container' ); return $classes; } add_filter('post_class', 'side_comments_post_class');}/* * Filter paragraphs in the_content add class * and incremental id to each paragraph * * @param $content * @return mixed */if ( ! function_exists( 'side_comments_post_class' ) ) { function side_comments_incrementparagraphs( $content ) { return preg_replace_callback( '\|<p>\|', function ( $matches ) { static $i = 1; return sprintf( '<p class="commentable-section" data-section-id="%d">', $i++ ); }, $content ); } add_filter( 'the_content', 'incrementparagraphs', 10, 1 );}
Expand Down