V2.2

- Updated naming conventions for classes - Updated naming conventions for postData - Used node_modules for dependency js files - Added callback function - Used doT as a Template Engine - Added template options - Added Layout namespace - Updated package.json - Updated README.md
OmarElgabry · Apr 15, 2016 · 3d45f32 · 3d45f32
1 parent de4066a
commit 3d45f32
Show file tree

Hide file tree

Showing 324 changed files with 50,073 additions and 347 deletions.
diff --git a/README.md b/README.md
@@ -22,6 +22,7 @@ Check [Demo](http://omarelgabry.github.io/Hashtegny/)
 ## Features
 + Aggregates hashtags from different social media networks.
 + Displays the posts in a grid and animated layout.
++ You can define your own template for posts.
 + Works on different screen sizes.
 + It automatically updates the time stamp of each post.
 + It automatically adds recent posts if any.
@@ -54,14 +55,16 @@ Add CSS Files:
 Add JS Files:
 ```html
  <!-- jQuery -->
- <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
+ <script type="text/javascript" src="node_modules/jquery/dist/jquery.min.js"></script>
+ <!-- Grid Layout -->
+ <script type="text/javascript" src="node_modules/masonry-layout/dist/masonry.pkgd.min.js"></script>
+ <!-- doT.js Template Engine -->
+ <script type="text/javascript" src="node_modules/dot/doT.min.js"></script>
+ <!-- Twitter JS library -->
+ <script type="text/javascript" src="node_modules/codebird/codebird.js"></script>
  <!-- Animation -->
  <script type="text/javascript" src="js/animations.min.js"></script>
  <script type="text/javascript" src="js/appear.min.js"></script>
- <!-- Grid Layout -->
- <script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js"></script>
- <!-- Twitter JS library -->
- <script type="text/javascript" src="js/codebird.js"></script>
  <!-- Hashtegny -->
  <script type="text/javascript" src="js/hashtegny.js"></script>
 ```
@@ -74,10 +77,9 @@ Finally, Run the plugin:
 ```js
  <script>
         $(document).ready(function(){
-
-			// this line of code because GitHub Pages(or something else weird) changes the link tags to style tags.
-			$("style#style").after('<link id="style" rel="stylesheet" href="css/main.grid.css" type="text/css" />').remove(); 
-
+            // this line of code because GitHub Pages(or something else weird) changes the link tags to style tags.
+            $("style#main-style").after('<link id="main-style" rel="stylesheet" href="css/main.grid.css" type="text/css" />').remove(); 
+
             // start the plugin & pass your options
             $('#hashtegny-container').hashtegny({
                 twitter:{
@@ -100,18 +102,30 @@ Finally, Run the plugin:
                     hashtag: "зима",
                     count: 5
                 },
-                textLength: 300,    // max length of post content
-                animate: 8,         // time of animation for each post in seconds
-                refresh: 60,        // add recent posts if any every 60 seconds 
-                updateTime: 60,     // update post time every 60 second(1 min)
-                background: false,  // add background image
-                showError: false    // show error alert box if any error encountered
+                textLength: 300,            // max length of post content
+                animate: 8,                 // time of animation for each post in seconds
+                refresh: 60,                // add recent posts if any evey 60 seconds
+                updateTime: 60,             // update post time every 60 second(1 min)
+                template: "default.html",   // filename for the post template. The 'template' has a priority over 'template_html' if not assigned to null
+                template_html:              // HTML for the post template
+                '<div> \
+                    <img src="{{=post.attachement_src}}" width="{{=post.attachement_width}}" height="{{=post.attachement_height}}">  \
+                    <div> \
+                        <img src="{{=post.user_image}}"> \
+                        <h4>{{=post.user_name}}</h4> \
+                        <div onclick="window.open(\'{{=post.url}}\');"><p>{{=post.text}}</p></div> \
+                        <p><i class="fa fa-clock-o"></i><span> {{=post.time}}</span></p> \
+                    </div> \
+                </div>',        
+                callback: function() {          // A callback function which will fire when all the posts are fetched and displayed
+                    console.log("Posts have been fetched and displayed");
+                },             
+                background: false,               // add background image(i.e 'background.jpg'). Images are inside img folder.
+                showError: false                 // show error alert box if any error encountered
             });
         });
  </script>
 ```
-#### Want to add image background?
-Add your image in _img_ directory, then assign ```background``` to ```imagefilename.extension```. 
 
 ## Support
 I've written this script in my free time during my studies. This is for free, unpaid. If you find it useful, please support the project by spreading the word.
@@ -122,9 +136,10 @@ Contribute by creating new issues, sending pull requests on Github or you can se
 
 ## Dependencies
 + [Twitter JS Library](https://github.com/jublonet/codebird-js)
++ [Template Engine](https://github.com/olado/doT)
 + [Animations](https://github.com/joemottershaw/animations)
 + [Grid Layout](https://github.com/desandro/masonry)
 + [Font Awesome](https://github.com/FortAwesome/Font-Awesome)
 
 ## License
-Built under [MIT](http://www.opensource.org/licenses/mit-license.php) license.
+Built under [MIT](http://www.opensource.org/licenses/mit-license.php) license.
diff --git a/css/main.animation.css b/css/main.animation.css
@@ -17,28 +17,28 @@ body {
 }
 
 /* ==== Main Post Container === */
-.mainPost{
+.main-post{
    margin: 0 auto;
    margin-top: 2%;
    width: 85%;
    text-align: center;
    display: none;
 }
-.mainPost.no-image{
+.main-post.no-image{
     width: 65%;
     margin-top: 6%;
 }
 
 /* ==== Main Image Container === */
-.mainImgDiv {
+.attachement-div {
     display: inline-block;
     vertical-align:middle;
     width: 45%;
     margin-right: 1%;
 }
 
 /* ==== Main Image === */
-.mainImg{
+.main-attachement{
     min-width: 90%;
     max-width: 100%;
     min-height: 30em;
@@ -48,23 +48,23 @@ body {
     moz-border-radius: 5px;
     webkit-border-radius: 5px;
 }
-.no-image .mainImgDiv{
+.no-image .attachement-div{
     display: none;
 }
 
 /* ==== User Info Container === */
-.userInfo{
+.user-data{
     display:inline-block;
     vertical-align:middle;
     width: 45%;
     text-align: left;
 }
-.no-image .userInfo{
+.no-image .user-data{
     width: 100%;
 }
 
 /* ==== User Info === */
-.userImg{
+.user-image{
     display: inline-block;
     vertical-align:middle;
     padding: 0.7%;
@@ -75,13 +75,13 @@ body {
     moz-border-radius: 3px;
     webkit-border-radius: 3px;
 }
-.no-image .userImg{
+.no-image .user-image{
     padding: 0.3%;
     border: none;
     min-height: 10em;
     max-height: 10em;   
 }
-.userName{
+.user-name{
     display: inline-block;
     vertical-align:middle;
     margin-left: 1%;
@@ -91,43 +91,43 @@ body {
     overflow: hidden;
     text-overflow: ellipsis;
 }
-.no-image .userName{
+.no-image .user-name{
     font-size: 1.2em;
 }
-.snImage{
+.network-image{
     display: inline-block;
     vertical-align:middle;
     width: 12%;
     margin-left: 25%;
 }
-.no-image .snImage{
+.no-image .network-image{
     width: 15%;
     margin-left: 22%;
 }
-.postText{
+.post-text{
     cursor:pointer;
     position: relative;
     margin-top: 5%;
     border: 1px solid black;
     box-shadow: 0 0 20px 0 rgba(10, 10, 10, 0.4);
 }
-.postText:hover{
+.post-text:hover{
     box-shadow: 0 0 20px 0 rgba(15, 15, 15, 0.6);
     -webkit-transform: scale(1.1);
     transform: scale(1.1);
 }
-.postText  p{
+.post-text  p{
     line-height: 1.5em;
     word-wrap: break-word;
     text-indent: 2.2em;
     padding: 2%;
     margin: 0;
     overflow: hidden;
 }
-.no-image .postText p{
+.no-image .post-text p{
     font-size: 1.4em;
 }
-.postText span{
+.post-text span{
     display: inline-block;
     position: absolute;
     top: -0.3em;
@@ -136,30 +136,30 @@ body {
     font-family: Cambria, Georgia, serif;
     font-size: 8em;
 }
-.no-image .postText span{
+.no-image .post-text span{
     font-size: 12em;
 }
-.postTime{
+.post-time{
     padding: 1.5%;
 }
 
 /* ==== Social Networks === */
-.instagram .userImg,.instagram .userName,.instagram .postText,.instagram .postTime{
+.instagram .user-image,.instagram .user-name,.instagram .post-text,.instagram .post-time{
     background-color: #306088;
     border-color: #306088;
     color: white;
 }
-.twitter .userImg,.twitter .userName,.twitter .postText,.twitter .postTime{
+.twitter .user-image,.twitter .user-name,.twitter .post-text,.twitter .post-time{
     background-color: #0084B4;
     border-color: #0084B4;
     color: white;
 }
-.google .userImg,.google .userName,.google .postText,.google .postTime{
+.google .user-image,.google .user-name,.google .post-text,.google .post-time{
     background-color: #DD4B39;
     border-color: #DD4B39;
     color: white;
 }
-.vk .userImg,.vk .userName,.vk .postText,.vk .postTime{
+.vk .user-image,.vk .user-name,.vk .post-text,.vk .post-time{
     background-color: #45668e;
     border-color: #45668e;
     color: white;
@@ -228,10 +228,10 @@ body {
     border: solid 1px #3498db;
     font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;
 }
-.header .snIcons{
+.header .network-icons{
     padding: 1%;
 }
-.snIcons, .snIcons div{
+.network-icons, .network-icons div{
     display: inline-block;
     vertical-align: middle;
 }
@@ -269,52 +269,52 @@ body {
 
 /* ==== @media Query === */
 @media screen and (max-width: 1024px) {
-    .mainImgDiv {
+    .attachement-div {
         width: 70%;
     }
-    .with-image .userInfo{
+    .with-image .user-data{
         width: 70%;
     }
-    .no-image .userImg{
+    .no-image .user-image{
         min-height: 7em;
         max-height: 7em;   
     }
-    .no-image .userName, .no-image .postText p{
+    .no-image .user-name, .no-image .post-text p{
         font-size: 1em;
     }
-    .no-image  .postText span{
+    .no-image  .post-text span{
         font-size: 8em;
     }
     .error{
         font-size: 0.9em;
     }
 }
 @media screen and (max-width: 480px) {
-    .mainPost, .mainPost.no-image{
+    .main-post, .main-post.no-image{
         width: 100%;
     }
-    .mainImgDiv {
+    .attachement-div {
         min-width: 100%;
         margin-right: 0;
     }
-    .userInfo{
+    .user-data{
         min-width: 100%;
     }
-    .mainImg{
+    .main-attachement{
         max-height: 20em;
         min-height: 20em;
     }
-    .userImg,.no-image .userImg{
+    .user-image,.no-image .user-image{
         max-height: 4.5em;
         min-height: 4.5em;
     }
-    .userName,.postText  p, .postTime, .no-image .userName, .no-image .postText p,.header{
+    .user-name,.post-text  p, .post-time, .no-image .user-name, .no-image .post-text p,.header{
         font-size: 0.8em;
     }
-    .postText span, .no-image  .postText span{
+    .post-text span, .no-image  .post-text span{
         font-size: 6em;
     }
-    .postText:hover{
+    .post-text:hover{
         -webkit-transform: scale(1);
         transform: scale(1);
     }