Permalink
Browse files

Added a jcarousel view at /carousel

New constants at config.js (see config-example.js).
/carousel doesn't show the post's title, and doesn't link to the post.
If you want to link somewhere - just do it in the content.
Long posts are mercilessly truncated.
This is an ad-hoc trick to have inside your blog an iframe
with scrollable random tips (i.e. all posts are short tips).
This won't look to good on my blog, so see [Hebrew RTL] example at
http://tipsanook.thedod.iriscouch.com/carousel
  • Loading branch information...
1 parent 1ebcefa commit 876547b0de37d3873f6638f753baa92c94f94f31 Nimrod S. Kerrett committed Sep 17, 2011
View
@@ -4,3 +4,6 @@
[submodule "deps/jwysiwyg"]
path = deps/jwysiwyg
url = https://github.com/akzhan/jwysiwyg.git
+[submodule "deps/jcarousel"]
+ path = deps/jcarousel
+ url = https://github.com/jsor/jcarousel.git
Submodule jcarousel added at c5fafe
View
@@ -1,6 +1,10 @@
exports.site_name = 'My Kanso blog';
exports.staff_role = 'bloggers'; // should be [one of] the admin role[s] at the database's security
+// For the /carousel jcarousel tweak
+exports.carousel_query_limit = "23"; // should be a string representation of an integer
+exports.carousel_skin = "mango";
+
// rtl: whether to use style-rtl.css instead of style.css, and other side effects
//exports.rtl = true;
View
@@ -31,18 +31,33 @@ exports.homepage = function (head, req) {
};
exports.carousel = function (head, req) {
-
- start({code: 200, headers: {'Content-Type': 'text/html'}});
-
- // fetch all the rows
- var row, rows = [];
+ start({code: 200, headers: {'Content-Type': 'text/html'}});
+ if (req.client) {
+ document.title = config.site_name;
+ var cfg = require('./sanitize/sanitize_cfg_relaxed').Config;
+ // Add rel and target to all links
+ cfg.add_attributes={a:{rel:'nofollow', target:'_blank'}};
+ var Sanitize = require('./sanitize/sanitize').Sanitize;
+ var stz = new Sanitize(cfg);
+ var row,rows = [];
while (row = getRow()) {
- rows.push(row);
- }
-
- // generate the markup for a list of blog posts
- return templates.render('carousel.html', req, {
- rows: rows,
- config: config
+ // We need to defuse script tags before sanitizing, because $('<script/>') *would* execute
+ var raw_node = $('<span>'+unescape(row.value).replace(/<script/gi,'&lt;script')+'</span>').get(0)
+ var clean_node = stz.clean_node(raw_node);
+ rows.push($(clean_node));
+ };
+ // Randomize order
+ rows = rows.sort(function() {return (Math.round(Math.random())>0.5?1:-1);});
+ $("#carousel-container").html('<ul id="carousel" class="jcarousel-skin-'+config.carousel_skin+'"/>');
+ var ul=$('#carousel');
+ for (i in rows){
+ ul.append($('<li/>').append(rows[i]));
+ };
+ ul.jcarousel({
+ scroll: 1, visible: 1, wrap:'circular', rtl: config.rtl?true:false
});
+ } else {
+ return templates.render('carousel.html',req,{config:config});
+ };
};
+
@@ -0,0 +1,2 @@
+Mango is a variation on the Tango skin that comes with jcarousel (http://sorgalla.com/jcarousel/)
+Button images copyright by Tango Icon Library Team (http://tango.freedesktop.org/Tango_Icon_Library)
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -0,0 +1,186 @@
+.jcarousel-skin-mango .jcarousel-container {
+ -moz-border-radius: 10px;
+ -webkit-border-radius: 10px;
+ border-radius: 10px;
+ background: #F9F6F0;
+ border: 1px solid #976F34;
+}
+
+.jcarousel-skin-mango .jcarousel-direction-rtl {
+ direction: rtl;
+}
+
+.jcarousel-skin-mango .jcarousel-container-horizontal {
+ width: 318px;
+ padding: 20px 40px;
+}
+
+.jcarousel-skin-mango .jcarousel-container-vertical {
+ width: 208px;
+ height: 318px;
+ padding: 40px 20px;
+}
+
+.jcarousel-skin-mango .jcarousel-clip {
+ overflow: hidden;
+}
+
+.jcarousel-skin-mango .jcarousel-clip-horizontal {
+ width: 318px;
+ height: 208px;
+}
+
+.jcarousel-skin-mango .jcarousel-clip-vertical {
+ width: 208px;
+ height: 318px;
+}
+
+.jcarousel-skin-mango .jcarousel-item {
+ width: 208px;
+ height: 208px;
+}
+
+.jcarousel-skin-mango .jcarousel-item-horizontal {
+ margin-left: 0;
+ margin-right: 10px;
+}
+
+.jcarousel-skin-mango .jcarousel-direction-rtl .jcarousel-item-horizontal {
+ margin-left: 10px;
+ margin-right: 0;
+}
+
+.jcarousel-skin-mango .jcarousel-item-vertical {
+ margin-bottom: 10px;
+}
+
+.jcarousel-skin-mango .jcarousel-item-placeholder {
+ background: #fff;
+ color: #000;
+}
+
+/**
+ * Horizontal Buttons
+ */
+.jcarousel-skin-mango .jcarousel-next-horizontal {
+ position: absolute;
+ top: 43px;
+ right: 5px;
+ width: 32px;
+ height: 32px;
+ cursor: pointer;
+ background: transparent url(next-horizontal.png) no-repeat 0 0;
+}
+
+.jcarousel-skin-mango .jcarousel-direction-rtl .jcarousel-next-horizontal {
+ left: 5px;
+ right: auto;
+ background-image: url(prev-horizontal.png);
+}
+
+.jcarousel-skin-mango .jcarousel-next-horizontal:hover,
+.jcarousel-skin-mango .jcarousel-next-horizontal:focus {
+ background-position: -32px 0;
+}
+
+.jcarousel-skin-mango .jcarousel-next-horizontal:active {
+ background-position: -64px 0;
+}
+
+.jcarousel-skin-mango .jcarousel-next-disabled-horizontal,
+.jcarousel-skin-mango .jcarousel-next-disabled-horizontal:hover,
+.jcarousel-skin-mango .jcarousel-next-disabled-horizontal:focus,
+.jcarousel-skin-mango .jcarousel-next-disabled-horizontal:active {
+ cursor: default;
+ background-position: -96px 0;
+}
+
+.jcarousel-skin-mango .jcarousel-prev-horizontal {
+ position: absolute;
+ top: 43px;
+ left: 5px;
+ width: 32px;
+ height: 32px;
+ cursor: pointer;
+ background: transparent url(prev-horizontal.png) no-repeat 0 0;
+}
+
+.jcarousel-skin-mango .jcarousel-direction-rtl .jcarousel-prev-horizontal {
+ left: auto;
+ right: 5px;
+ background-image: url(next-horizontal.png);
+}
+
+.jcarousel-skin-mango .jcarousel-prev-horizontal:hover,
+.jcarousel-skin-mango .jcarousel-prev-horizontal:focus {
+ background-position: -32px 0;
+}
+
+.jcarousel-skin-mango .jcarousel-prev-horizontal:active {
+ background-position: -64px 0;
+}
+
+.jcarousel-skin-mango .jcarousel-prev-disabled-horizontal,
+.jcarousel-skin-mango .jcarousel-prev-disabled-horizontal:hover,
+.jcarousel-skin-mango .jcarousel-prev-disabled-horizontal:focus,
+.jcarousel-skin-mango .jcarousel-prev-disabled-horizontal:active {
+ cursor: default;
+ background-position: -96px 0;
+}
+
+/**
+ * Vertical Buttons
+ */
+.jcarousel-skin-mango .jcarousel-next-vertical {
+ position: absolute;
+ bottom: 5px;
+ left: 43px;
+ width: 32px;
+ height: 32px;
+ cursor: pointer;
+ background: transparent url(next-vertical.png) no-repeat 0 0;
+}
+
+.jcarousel-skin-mango .jcarousel-next-vertical:hover,
+.jcarousel-skin-mango .jcarousel-next-vertical:focus {
+ background-position: 0 -32px;
+}
+
+.jcarousel-skin-mango .jcarousel-next-vertical:active {
+ background-position: 0 -64px;
+}
+
+.jcarousel-skin-mango .jcarousel-next-disabled-vertical,
+.jcarousel-skin-mango .jcarousel-next-disabled-vertical:hover,
+.jcarousel-skin-mango .jcarousel-next-disabled-vertical:focus,
+.jcarousel-skin-mango .jcarousel-next-disabled-vertical:active {
+ cursor: default;
+ background-position: 0 -96px;
+}
+
+.jcarousel-skin-mango .jcarousel-prev-vertical {
+ position: absolute;
+ top: 5px;
+ left: 43px;
+ width: 32px;
+ height: 32px;
+ cursor: pointer;
+ background: transparent url(prev-vertical.png) no-repeat 0 0;
+}
+
+.jcarousel-skin-mango .jcarousel-prev-vertical:hover,
+.jcarousel-skin-mango .jcarousel-prev-vertical:focus {
+ background-position: 0 -32px;
+}
+
+.jcarousel-skin-mango .jcarousel-prev-vertical:active {
+ background-position: 0 -64px;
+}
+
+.jcarousel-skin-mango .jcarousel-prev-disabled-vertical,
+.jcarousel-skin-mango .jcarousel-prev-disabled-vertical:hover,
+.jcarousel-skin-mango .jcarousel-prev-disabled-vertical:focus,
+.jcarousel-skin-mango .jcarousel-prev-disabled-vertical:active {
+ cursor: default;
+ background-position: 0 -96px;
+}
View
@@ -461,7 +461,7 @@ td.actions .button {
padding:8px;
}
-#content img {
+#content img, #carousel-container img {
clear: both;
float: right;
border: none;
View
@@ -458,7 +458,7 @@ td.actions .button {
padding:8px;
}
-#content img {
+#content img, #carousel-container img {
clear: both;
float: left;
border: none;
View
@@ -1,36 +1,19 @@
<!DOCTYPE html>
<html>
<head>
- <title>{config.site_name} - carousel</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="{baseURL}/static/{?config.rtl}style-rtl.css{:else}style.css{/config.rtl}" />
{#config.extra_css}<link rel="stylesheet" type="text/css" href="{baseURL}/static/{.}" />{~n}{/config.extra_css}
- <script src="{baseURL}/static/js/jquery-1.6.2.js"></script>
- <script src="{baseURL}/kanso.js"></script>
- <script src="{baseURL}/static/js/sanitize_js/sanitize.js"></script>
- <script src="{baseURL}/static/js/sanitize_js/sanitize/config/relaxed.js"></script>
- <script type="text/javascript">
- // Add nofollow and _blank to all links coming from user input
- Sanitize.Config.RELAXED.add_attributes={a:{rel:'nofollow', target:'_blank'}};
- </script>
+ <title>{config.site_name} - carousel</title>
</head>
<body>
-{?rows}
- <ul>
- {#rows}
- <li id="{id}"><img src="{baseURL}/static/images/spinner-small.gif"></li>
- <script type="text/javascript">
- $(function() {
- $('#{id}').html(new Sanitize(Sanitize.Config.RELAXED).clean_node(
- $('<span>'+unescape('{value|s}').replace(/<script/gi,'&lt;script')+'</span>').get(0)
- ));
- });
- </script>
- {/rows}
- </ul>
- {:else}
- <p>No blog posts</p>
-{/rows}
+ <div id="carousel-container">
+ <img src="{baseURL}/static/images/spinner-small.gif">
+ </div>
+ <script src="{baseURL}/static/js/jquery-1.6.2.js"></script>
<script src="{baseURL}/static/js/json2.js"></script>
+ <script type="text/javascript" src="{baseURL}/static/jcarousel/lib/jquery.jcarousel.min.js"></script>
+ <link rel="stylesheet" type="text/css" href="{baseURL}/static/jcarousel/skins/{config.carousel_skin}/skin.css" />
+ <script type="text/javascript" src="{baseURL}/kanso.js"></script>
</body>
</html>

0 comments on commit 876547b

Please sign in to comment.