closes #3 (added design for "event" model)

JohnnyTheTank · Dec 2, 2015 · 0d91f6f · 0d91f6f
1 parent 65092c6
commit 0d91f6f
Show file tree

Hide file tree

Showing 11 changed files with 333 additions and 25 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -41,6 +41,10 @@ module.exports = function(grunt) {
                 src: 'src/aping_design_default_image.html',
                 dest: 'dist/aping_design_default_image.html',
             },
+            event: {
+                src: 'src/aping_design_default_event.html',
+                dest: 'dist/aping_design_default_event.html',
+            },
         },
         watch: {
             minifiyJs: {

diff --git a/bower.json b/bower.json
@@ -4,7 +4,7 @@
   "authors": [
     "Jonathan Hornung <jonathan.hornung@gmail.com>"
   ],
-  "version": "0.3.3",
+  "version": "0.3.4",
   "description": "design for apiNG (default)",
   "main": "dist/aping-design-default.min.js",
   "moduleType": [],

diff --git a/demo/event.html b/demo/event.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>apiNG Default Design Demo</title>
+
+    <!-- CSS -->
+    <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css">
+    <link rel="stylesheet" href="css/main.css">
+    <link rel="stylesheet" href="../dist/aping-design-default.min.css">
+
+    <link href='//fonts.googleapis.com/css?family=Economica' rel='stylesheet' type='text/css'>
+
+    <!-- JS -->
+    <script src="../bower_components/jquery/dist/jquery.min.js"></script>
+    <script src="../bower_components/angular/angular.min.js"></script>
+    <script src="../bower_components/angular-sanitize/angular-sanitize.min.js"></script>
+
+    <!-- apiNG -->
+    <script src="../bower_components/apiNG/dist/aping.min.js"></script>
+    <script src="js/aping-config.js"></script>
+
+    <!-- apiNG plugins -->
+    <script src="../bower_components/apiNG-plugin-youtube/dist/aping-plugin-youtube.min.js"></script>
+    <script src="../bower_components/apiNG-plugin-instagram/dist/aping-plugin-instagram.min.js"></script>
+    <script src="../bower_components/apiNG-plugin-facebook/dist/aping-plugin-facebook.min.js"></script>
+    <script src="../bower_components/apiNG-plugin-codebird/dist/aping-plugin-codebird.min.js"></script>
+
+    <!-- apiNG design dependencies -->
+    <script src="../bower_components/angular-masonry-packed/dist/angular-masonry-packed.min.js"></script>
+    <script src="../bower_components/angular-linkify/angular-linkify.min.js"></script>
+    <script src="../bower_components/moment/moment.js"></script>
+    <script src="../bower_components/angular-moment/angular-moment.min.js"></script>
+    <script src="../bower_components/moment/locale/de.js"></script>
+
+    <!-- apiNG design -->
+    <script src="../src/aping-design-default.js"></script>
+
+
+    <script src="js/app.js"></script>
+
+</head>
+<body ng-app="app">
+<div class="container">
+    <br>
+
+    <h1>Events</h1>
+    <br>
+
+    <aping
+            template-url="../src/aping_design_default_event.html"
+            type="event"
+            items="7"
+            order-by="start_timestamp"
+            order-reverse="true"
+            aping-facebook="[{'page':'frittenbubu'}, {'page':'freundevonniemand'}]">
+    </aping>
+
+    <div class="clearfix"></div>
+
+</div>
+
+
+</body>
+</html>
diff --git a/demo/image.html b/demo/image.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>apiNG Default Design Demo</title>
+
+    <!-- CSS -->
+    <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css">
+    <link rel="stylesheet" href="css/main.css">
+    <link rel="stylesheet" href="../dist/aping-design-default.min.css">
+
+    <link href='//fonts.googleapis.com/css?family=Economica' rel='stylesheet' type='text/css'>
+
+    <!-- JS -->
+    <script src="../bower_components/jquery/dist/jquery.min.js"></script>
+    <script src="../bower_components/angular/angular.min.js"></script>
+    <script src="../bower_components/angular-sanitize/angular-sanitize.min.js"></script>
+
+    <!-- apiNG -->
+    <script src="../bower_components/apiNG/dist/aping.min.js"></script>
+    <script src="js/aping-config.js"></script>
+
+    <!-- apiNG plugins -->
+    <script src="../bower_components/apiNG-plugin-youtube/dist/aping-plugin-youtube.min.js"></script>
+    <script src="../bower_components/apiNG-plugin-instagram/dist/aping-plugin-instagram.min.js"></script>
+    <script src="../bower_components/apiNG-plugin-facebook/dist/aping-plugin-facebook.min.js"></script>
+    <script src="../bower_components/apiNG-plugin-codebird/dist/aping-plugin-codebird.min.js"></script>
+
+    <!-- apiNG design dependencies -->
+    <script src="../bower_components/angular-masonry-packed/dist/angular-masonry-packed.min.js"></script>
+    <script src="../bower_components/angular-linkify/angular-linkify.min.js"></script>
+    <script src="../bower_components/moment/moment.js"></script>
+    <script src="../bower_components/angular-moment/angular-moment.min.js"></script>
+    <script src="../bower_components/moment/locale/de.js"></script>
+
+    <!-- apiNG design -->
+    <script src="../src/aping-design-default.js"></script>
+
+
+    <script src="js/app.js"></script>
+
+</head>
+<body ng-app="app">
+    <div class="container">
+        <br>
+
+        <h1>Images</h1>
+        <br>
+        <aping
+                template-url="../src/aping_design_default_image.html"
+                type="image"
+                items="5"
+                aping-instagram="[{'tag':'dortmund'}]"
+                aping-facebook="[{'page':'frittenbubu'}]"
+                aping-codebird="[{'search':'weltwunder', 'result_type':'popular'}]">
+        </aping>
+    </div>
+
+
+</body>
+</html>
diff --git a/demo/index.html b/demo/index.html
@@ -43,30 +43,19 @@
 <body ng-app="app">
     <div class="container">
         <br>
-
-        <h1>model "social"</h1>
-        <aping
-                template-url="../src/aping_design_default_social.html"
-                type="social"
-                items="2"
-                aping-youtube="[{'search':'thomasmüller'}]"
-                aping-instagram="[{'tag':'fcbayern'}]"
-                aping-facebook="[{'page':'namikamusik'}]"
-                aping-codebird="[{'search':'ocean', 'result_type':'popular'}]">
-        </aping>
-
+        <h1>Demo page for apiNG-design-default</h1>
+        <br>
+        <h2>Models</h2>
         <br>
+        <ul class="list-group">
+            <li class="list-group-item"><a href="social.html">Model "social"</a></li>
+            <li class="list-group-item"><a href="image.html">Model "image"</a></li>
+            <li class="list-group-item"><a href="event.html">Model "event"</a></li>
+        </ul>
+
 
-        <h1>model "image"</h1>
-        <aping
-                template-url="../src/aping_design_default_image.html"
-                type="image"
-                items="5"
-                aping-instagram="[{'tag':'fcbayern'}]"
-                aping-facebook="[{'page':'namikamusik'}]"
-                aping-codebird="[{'search':'ocean', 'result_type':'popular'}]">
-        </aping>
     </div>
 
+
 </body>
 </html>
diff --git a/demo/social.html b/demo/social.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>apiNG Default Design Demo</title>
+
+    <!-- CSS -->
+    <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css">
+    <link rel="stylesheet" href="css/main.css">
+    <link rel="stylesheet" href="../dist/aping-design-default.min.css">
+
+    <link href='//fonts.googleapis.com/css?family=Economica' rel='stylesheet' type='text/css'>
+
+    <!-- JS -->
+    <script src="../bower_components/jquery/dist/jquery.min.js"></script>
+    <script src="../bower_components/angular/angular.min.js"></script>
+    <script src="../bower_components/angular-sanitize/angular-sanitize.min.js"></script>
+
+    <!-- apiNG -->
+    <script src="../bower_components/apiNG/dist/aping.min.js"></script>
+    <script src="js/aping-config.js"></script>
+
+    <!-- apiNG plugins -->
+    <script src="../bower_components/apiNG-plugin-youtube/dist/aping-plugin-youtube.min.js"></script>
+    <script src="../bower_components/apiNG-plugin-instagram/dist/aping-plugin-instagram.min.js"></script>
+    <script src="../bower_components/apiNG-plugin-facebook/dist/aping-plugin-facebook.min.js"></script>
+    <script src="../bower_components/apiNG-plugin-codebird/dist/aping-plugin-codebird.min.js"></script>
+
+    <!-- apiNG design dependencies -->
+    <script src="../bower_components/angular-masonry-packed/dist/angular-masonry-packed.min.js"></script>
+    <script src="../bower_components/angular-linkify/angular-linkify.min.js"></script>
+    <script src="../bower_components/moment/moment.js"></script>
+    <script src="../bower_components/angular-moment/angular-moment.min.js"></script>
+    <script src="../bower_components/moment/locale/de.js"></script>
+
+    <!-- apiNG design -->
+    <script src="../src/aping-design-default.js"></script>
+
+
+    <script src="js/app.js"></script>
+
+</head>
+<body ng-app="app">
+    <div class="container">
+        <br>
+
+
+        <h1>Social Feed</h1>
+        <br>
+
+        <aping
+                template-url="../src/aping_design_default_social.html"
+                type="social"
+                items="2"
+                aping-youtube="[{'search':'thomasmüller'}]"
+                aping-instagram="[{'tag':'fcbayern'}]"
+                aping-facebook="[{'page':'namikamusik'}]"
+                aping-codebird="[{'search':'ocean', 'result_type':'popular'}]">
+        </aping>
+
+        <div class="clearfix"></div>
+
+    </div>
+
+
+</body>
+</html>
diff --git a/dist/aping_design_default_event.html b/dist/aping_design_default_event.html
@@ -0,0 +1,61 @@
+<div class="aping-design-default aping-design-default-event">
+    <div ng-controller="apingDefaultDesignController">
+        <div data-images-loaded masonry class="row" preserve-order reload-on-show ng-show="workingCopy">
+            <div class="masonry-brick col-lg-4 col-sm-6" ng-repeat="feed in workingCopy | orderBy: 'start_timestamp': true"
+                 ng-cloak>
+
+                <div class="box">
+                    <div class="box-content text-center"><h4 ng-if="feed.caption">{{::feed.caption}}</h4></div>
+                    <div class="box-header" ng-if="feed.img_url">
+                        <a ng-if="feed.ticket_url" ng-href="{{::feed.ticket_url}}" target="_blank" class="aping-picture-link">
+                            <img ng-src="{{::feed.img_url}}" class="main-image img-responsive" alt="{{::feed.caption}}" title="{{::feed.caption}}">
+                        </a>
+                        <img ng-if="!feed.ticket_url" ng-src="{{::feed.img_url}}" class="main-image img-responsive" alt="{{::feed.caption}}" title="{{::feed.caption}}">
+                    </div>
+                    <div class="box-content">
+                        <div>
+                            <strong>Date</strong>
+                            <br>
+                            {{::feed.start_timestamp | date}}
+                            <span ng-if="feed.end_timestamp">- {{::feed.end_timestamp | date}}</span>
+                        </div>
+                        <br>
+                        <strong>Location</strong>
+                        <br>
+                        <span ng-if="feed.place_name">
+                            <span ng-if="!feed.latitude || !feed.longitude">{{::feed.place_name | uppercase}}</span>
+                            <span ng-if="feed.latitude && feed.longitude"><a target="_blank" ng-href="http://www.google.com/maps/place/{{feed.latitude}},{{feed.longitude}}/@{{feed.latitude}},{{feed.longitude}}">{{::feed.place_name | uppercase}}</a></span>
+                        </span>
+                        <span ng-if="feed.city || feed.country">
+                            in <span ng-if="feed.city">{{::feed.city}}</span><span ng-if="feed.country"><span ng-if="feed.city">, </span>{{::feed.country}}</span>
+                        </span>
+
+                        <br><br>
+
+                        <div ng-if="feed.text" linkify>
+                            {{::feed.text | limitTo: 245}}{{::feed.text.length > 245 ? '...' : ''}}
+                        </div>
+
+                        <br>
+
+                        <div class="pull-left text-left">
+                            <div ng-if="feed.ticket_url || feed.event_url">
+                                <div><a ng-if="feed.ticket_url "href="{{::feed.ticket_url}}" target="_blank">Ticketlink</a></div>
+                                <div><a ng-if="feed.event_url" href="{{::feed.event_url}}" target="_blank">Eventlink</a></div>
+                            </div>
+                            <div am-time-ago="{{::feed.timestamp}}"></div>
+                        </div>
+
+                        <div class="pull-right platform-box">
+                            <a ng-href="{{::feed.event_url}}" target="_blank" class="platform-link">
+                                <img ng-src="{{getPlatformIcon(feed.platform)}}" alt="{{feed.platform}}"
+                                     title="{{feed.platform}}" class="platform-icon">
+                            </a>
+                        </div>
+                        <div class="clearfix"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/dist/aping_design_default_social.html b/dist/aping_design_default_social.html
@@ -12,7 +12,7 @@
                         <h4 class="" ng-if="feed.caption">{{::feed.caption}}</h4>
 
                         <div class="" ng-if="feed.text" linkify>
-                            {{::feed.text | limitTo: 250}}{{::feed.text.length > 350 ? '...' : ''}}
+                            {{::feed.text | limitTo: 250}}{{::feed.text.length > 250 ? '...' : ''}}
                         </div>
 
                         <div class="clearfix"><br></div>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "aping-design-default",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "description": "design for apiNG (default)",
   "main": "Gruntfile.js",
   "scripts": {