Permalink
Browse files

Added examples from website

  • Loading branch information...
Johannes Tiefenbrunner
Johannes Tiefenbrunner committed Oct 22, 2013
1 parent 0e0ccc1 commit d61bbcb08fe491180ed4343d41279739f14dc177
Binary file not shown.
@@ -0,0 +1,92 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>WebYep Examples - Accordion Effekt with WebYep</title>
<link rel="stylesheet" href="common.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
<link rel='stylesheet' href='examples.css' type='text/css' />
</head>
<body>
<div class="box pageContent">
<a href="index.html" class="backlink">&lt;&lt; back to overview</a>
<img src="logo+claim.gif" alt="WebYep - The Shiny Tiny WebCMS" alt-de="WebYep - Das feine kleine WebCMS">
<div class="introduction" style="width:730px">
This is one of a series of articles about WebYep and web design. Things are under development right now, so appearance and content may change over time.
</div>
<div id="page">
<h1>Accordion Effekt with WebYep</h1>
<h2>The basic idea</h2>
<p>This tutorial will show you how to create an accordion effect with WebYep and a few lines of JavaScript.</p>
<p>An "accordion" is a bunch of pairs of elements like for example a headline and some accompanying text. After loading the page only the headlines are visible. When you click on a headline, the corresponding text entry expands (like an accordion - hence the name). When you click another headline, the new text expands while the other entry contracts simultaneously. Here is an <a href="example-accordion.html" target="_blank">example page</a> for those who want to see it in action.</p>
<h2>The HTML part</h2>
<p>In our example we'll use several <code>&lt;div&gt;</code>s to separate the elements:</p>
<p>One for the header (a WebYep ShortText element) and one for the actual content (WebYep RichText). In order to let the user add, remove and reorder each entry, we'll wrap them in another <code>&lt;div&gt;</code> to clearly separate each entry and put this inside a WebYep Loop. Finally we wrap the whole thing in another <code>&lt;div&gt;</code> so we can easily address everything related to our accordion effect.</p>
<p>The HTML part should now look like this:</p>
<pre class="css">&lt;div class="<span class="green">accordion</span>"&gt;
&lt;?php foreach (WYLoopElement::aLoopIDs("<span class="red">newsLoop</span>") as $webyep_oCurrentLoop-&gt;iLoopID) {
$webyep_oCurrentLoop-&gt;loopStart(true); ?&gt;
&lt;div&gt;
&lt;div class="<span class="green">accordionHeader</span>"&gt;&lt;?php webyep_shortText("<span class="red">newsHeader</span>", false); ?&gt;&lt;/div&gt;
&lt;div class="<span class="green">accordionContent</span>"&gt;&lt;?php webyep_richText("<span class="red">newsContent</span>", false, "", true); ?&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;?php $webyep_oCurrentLoop-&gt;loopEnd(); } ?&gt;
&lt;/div&gt;</pre>
<p>The WebYep field names are marked in red. You may want to change them to suit your needs. The CSS classes are marked in green. If you change them you must also change the jQuery code!</p>
<h2>The JavaScript magic</h2>
<p>For the sake of flexibility we'll use namespacing for the jQuery library. This will move the $-function of jQuery to another namespace (in our example this is WY, but you can of course use any other valid identifier) so it won't interfere with other libraries we might need.</p>
<p>In the page's <code>&lt;head&gt;</code> include the following javascripts (in this order):</p>
&bull; The jQuery library<br />
&bull; Some custom code to remove jQuery from the global scope (namespacing):<br />
<ol class="code">
<li>&lt;!-- namespacing jQuery --&gt;</li>
<li><span class="blue">&lt;script type="text/javascript"&gt;</span><span class="green">/*&lt;![CDATA[*/</span></li>
<li>&nbsp;&nbsp;<span class="blue">var WY = window.WY || {}; WY.$ = jQuery.noConflict(true);</span></li>
<li><span class="green">/*]]&gt;*/</span><span class="blue">&lt;/script&gt;</span></li>
</ol>
<p>This moves the jQuery library to the namespace <code>WY</code> (as you might have guessed, WY stands for <b>W</b>eb<b>Y</b>ep).
From now on we must use <code>WY.$()</code> instead of just <code>$()</code> but the great thing is that other libraries (e.g. prototype) can now use their own $-function without problems.</p>
<p>If you <i>don't</i> need other libraries like <code>prototype</code> or you also need jQuery for other effects on your site you can omit the namespacing code and remove the namespace from the jQuery calls (i.e. delete "<code>WY.</code>" globally).</p>
&bull; Some code that waits for the document to finish loading and then initializes the accordion:<br />
<ol class="code">
<li><span class="grey">&lt;!--&nbsp;&nbsp;initialize accordion when the DOM is ready --&gt;</span></li>
<li><span class="blue">&lt;script type="text/javascript"&gt;</span><span class="green">/*&lt;![CDATA[*/</span></li>
<li>&nbsp;&nbsp;<span class="blue">WY.$(document).ready(function(){</span></li>
<li>&nbsp;&nbsp;&nbsp;&nbsp;<span class="grey">// check whether we are in edit mode</span></li>
<li>&nbsp;&nbsp;&nbsp;&nbsp;<span class="blue">if (!WY.$('.accordion').find('.WebYepLoopAddButton').length){</span></li>
<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="grey">// determine height of every .accordionContent and write it to the DOM</span></li>
<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="blue">WY.$('.accordionContent').each(function(){</span></li>
<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="blue">WY.$(this).css({'height':WY.$(this).height()+'px'});</span></li>
<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="blue">});</span></li>
<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="grey">// hide all .accordionContent items</span></li>
<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="blue">WY.$('.accordionContent').css({'display':'none'});</span></li>
<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="grey">// attach a click handler to each .accordionHeader</span></li>
<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="blue">WY.$('.accordionHeader').each(function(){</span></li>
<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="blue">WY.$(this).click(function(){</span></li>
<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="blue">WY.$('.accordionContent').slideUp(350);</span></li>
<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="blue">WY.$(this).siblings('.accordionContent').stop().slideToggle(350);</span></li>
<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="blue">});</span></li>
<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="blue">});</span></li>
<li>&nbsp;&nbsp;&nbsp;&nbsp;<span class="blue">}</span></li>
<li>&nbsp;&nbsp;<span class="blue">});</span></li>
<li><span class="green">/*]]&gt;*/</span><span class="blue">&lt;/script&gt;</span></li>
</ol>
<p>Let's look at the details of this code. Line 3 sets up the code to run as soon as the page is loaded. It's the jQuery equivalent of <code>onload</code> &mdash; nothing special so far.</p>
<p>In line 5 we check whether we are in edit mode or not. This is done by searching the <code>.accordion</code> container for an item with the CSS class <code>WebYepLoopAddButton</code>. Since the entries of the accordion are in a WebYep Loop there will be at least one edit button if we are in edit mode. The button to add a loop item will always be present - even if we've got an otherwise empty page - so we'll look for the CSS class of the WebYep Loop Add button.</p>
<p>Lines 7-9 prepare the <code>.accordionContent</code> containers for smooth animations. jQuery seems to have a problem with determining the correct height of an animated block element under certain circumstances (causes the animation to be jerky). This problem is fixed by putting the actual height into the style attribute.</p>
<p>After setting up the height we hide the <code>.accordionContent</code> containers in line 11.</p>
<p>Finally we add a click handler to each <code>.accordionHead</code>. By clicking a header all <code>.accordionContent</code> containers shall slide up (line 15), except the one sibling of the clicked header which we stop and then slide down (line 16).</p>
<h2>A note on styles</h2>
<p>One last word about the styles and mobile devices:</p>
<p>As you can see from the source code of the example pages, there is nothing fancy in the stylesheet &mdash; except one thing.</p>
<p>Mobile Safari has a habit of resizing text if it feels like it. Most of the time this is great since web designers don't have to redo all their pages for iOS and they are still readable. But there are also times when this default behaviour can be rather annoing. Setting explicit text sizes and container heights like in this example is such a case. If you want to use this accordion effect in your pages then you might need to tell Safari to leave the text-size alone. This can be done by setting <code>-webkit-text-size-adjust: 100%;</code> on the <code>body</code>. <i>Don't</i> use <code>webkit-text-size-adjust: none;</code> since this will completely disable zooming!</p>
<h2>Example Pages</h2>
<p>We've prepared <a href="accordion.zip">2 example pages</a> &ndash; one for WebYep like described above and one as plain HTML. Both are essentially the same, but you'll need a working WebYep installation for the .php version.</p>
</div>
</div>
</body>
</html>
Binary file not shown.
@@ -0,0 +1,96 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>WebYep Examples - Integrating a free file manager into CKEditor</title>
<link rel="stylesheet" href="common.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
<link rel='stylesheet' href='examples.css' type='text/css' />
</head>
<body>
<div class="box pageContent">
<a href="index.html" class="backlink">&lt;&lt; back to overview</a>
<img src="logo+claim.gif" alt="WebYep - The Shiny Tiny WebCMS" alt-de="WebYep - Das feine kleine WebCMS">
<div class="introduction" style="width:730px">
This is one of a series of articles about WebYep and web design. Things are under development right now, so appearance and content may change over time.
</div>
<div id="page">
<h1>Integrating a free file manager into CKEditor</h1>
<p>While there is a commercial file manager plugin for CKEditor called CKFinder, WebYep also supports a free alternative. This article will show you how to integrate 'Filemanager' from Core Five Labs.</p>
<h2>Before you begin</h2>
<p>This document assumes that you are fairly familiar with setting up WebYep and configuring web servers like Apache. It provides step by step instructions, without explaining everything in detail. If you don't know what permissions are, or have no idea what a "document root" might be, or where it is located, you might want to leave the installation/configuration to an experienced administrator.</p>
<p>Installation instructions for CKEditor can be found in the WebYep documentation (RichText element).</p>
<p><strong>Important:</strong> since CKEditor and Filemanager are third-party products, we can't provide support for them!</p>
<h2>Download Filemanager</h2>
<ul>
<li>Download the filemanager from <a href="https://github.com/simogeo/Filemanager">GitHub</a>.<br />
You will get a file named simogeo-Filemanager-f595d02.zip (or similar).</li>
<li>Unpack the .zip and rename the resulting folder to 'filemanager'.</li>
<li>Put this folder into your <code>/webyep-system/program/opt/</code> folder.</li>
</ul>
<h2>Create the directory to hold the uploaded files</h2>
<ul>
<li>Open the folder <code>/webyep-system/data</code> and create a subfolder named "userfiles" there. This folder should have the permissions 755. If this doesn't work on your server, try 775 or 777.</li>
</ul>
<h2>Prepare Filemanager - Part 1</h2>
<ul>
<li>In the folder <code>/webyep-system/program/opt/filemanager/connectors/</code> delete every subfolder EXCEPT <code>php</code>.
</ul>
<h2>Prepare Filemanager - Part 2</h2>
<ul>
<li>Open the file <code>/webyep-system/program/opt/filemanager/connectors/php/filemanager.config.php</code>
<ul><li>in the first line, add '<code>session_start();</code>' (without the quotes) like so:
<pre class="css">&lt;?php session_start();</pre></li>
<li>below you'll find a line that reads "<code>function auth() {</code>". Replace this up to and including the next "}" with the following:
<pre class="css">function auth() {
return isset($_SESSION['WebYepIsAuthorized']) &amp;&amp; $_SESSION['WebYepIsAuthorized'];
}</pre></li>
<li>if you want another language than English, find the line that reads "<code>$config['culture'] = 'en';</code>" and change the "en" accordingly.
You'll find all available languages in the folder <code>/webyep-system/program/opt/filemanager/scripts/languages/</code>.
Every file in there represents another language, so if you want your filemanager to speak french, write:
<pre class="css">$config['culture'] = 'fr';</pre></li>
<li>you can also change the date format, by changing the line
<pre class="css">$config['date'] = 'd.M.Y H:i';</pre>
This will display a date like "29.2.2000 13:57". For a detailed explanation of the available format options, please refer to <a href="http://www.php.net/date">http://www.php.net/date</a></li>
<li>in some cases (depending on your setup) you'll have to specify the complete path to your website's root folder (e.g. "/var/www/vhost_4711/htdocs").
To do so, find the line that reads
<pre class="css">// $config['doc_root'] = '/home/user/userfiles'; // No end slash</pre>
and replace it with the following:
<pre class="css">$config['doc_root'] = '/path/to/your/document_root';</pre>
You'll have to adapt this example to your server configuration. Note that if your WebYep installation is located in a subfolder, you must append its path to the URL (e.g. '/path/to/your/document_root/subfolder' instead of '/path/to/your/document_root'). Also <i>don't</i> add a trailing slash to the path!</li></ul>
</ul>
<h2>Prepare Filemanager - Part 3</h2>
<ul>
<li>In the folder <code>/webyep-system/program/opt/filemanager/scripts</code> you will find a file named <code>filemanager.config.js.default</code>.
Rename this file to <code>filemanager.config.js</code> (i.e. remove the trailing .default)</li>
<li>Open the file <code>/webyep-system/program/opt/filemanager/scripts/filemanager.config.js</code>
<ul><li>if you want another language than English, find the line that reads "<code>var culture = 'en';</code>" and change the "en" accordingly.
You'll find all available languages in the folder <code>/webyep-system/program/opt/filemanager/scripts/languages/</code>.
Every file in there represents another language, so if you want your filemanager to speak french, write:
<pre class="css">var culture = 'fr';</pre></li>
<li>find the line that reads "<code>var fileRoot = '/' + am + 'userfiles/';</code>" and replace it by the following:
<pre class="css">var fileRoot = '/webyep-system/data/userfiles/';</pre></li></ul></li>
</ul>
<h1>Did it work?</h1>
<p>To check whether the installation was successful, do the following:</p>
<ul>
<li>Create a WebYep page containing a RichText element and upload this page to your server.</li>
<li>Open this page in your browser and switch to edit mode.</li>
<li>Click the 'Edit' Button of the RichText element. A new window with CKEditor should pop up.</li>
<li>In the toolbar click on "Image". The dialogue "Image properties" should appear.</li>
<li>If the installation of Imagemanager was successful, you'll now have a new button "Browse Server" next to the URL input field.</li>
</ul>
</div>
</div>
</body>
</html>
Oops, something went wrong.

0 comments on commit d61bbcb

Please sign in to comment.