Add Page Function Hack
I wanted to be able to make docs on the fly. Here is my sloppy mess! I wish i knew more about GIT and how to add code properly. Anyhow. I hope someone out there can use my Ajax hack.
###Edit Some Files
####libs/live.php Comment out the function generate_live and replace it with my edit.
// Generate Page
function generate_live($page) {
global $options, $multilanguage, $output_language, $base, $base_path, $mode, $base_doc;
$mode = 'Live';
//----------- Editted my Daddyfix Mar 2014
$b = explode('/', $page);
if ( $b[0] === 'newpage' && count($b)==4){
$page_path = str_replace(" ", "_", urldecode ( $b[1] ) );
$page_title = str_replace(" ", "_", urldecode ( $b[2]) );
$mybase = $base.'/'.$options['docs_path'];
$page_template = $mybase.'/template';
$new_page = $mybase.'/'.$page_path.'/'.$page_title.'.md';
if ( !file_exists($page_template) ){
$output['status']="Markdown Template file does not exist.\nCreate a template here: $page_template";
}
else if ( file_exists($new_page) ){
$output['status']="A document called $new_page already exists. Please delete the existsing file or rename.";
}
else if (!copy($page_template, $new_page)) {
$output['status']="Failed to copy template.\nFrom $page_template To $new_page";
}
else {
$output['status']="Successfully created a new document: {$page_path}/{$page_title}";
$output['redirect']=get_url("{$page_path}/{$page_title}");
}
header("Content-type: application/json");
$json = json_encode($output);
echo "{$_GET['callback']}($json)";
exit;
}
// Daddyfix edit Done ----------------------
if ($multilanguage) {
$b = explode('/', clean_url($page, "Live"));
$output_language = $b[0];
}
$file = clean_url_to_file($page);
if (!is_file($file)) $file = FALSE;
return generate_page($file);
}####js/custom.js Add the bottom three lines to the main function loader
$(function () {
$('.aj-nav').click(function (e) {
e.preventDefault();
$(this).parent().siblings().find('ul').slideUp();
$(this).next().slideToggle();
});
// Bootstrap Table Class
$('table').addClass('table');
// Responsive menu spinner
$('#menu-spinner-button').click(function () {
$('#sub-nav-collapse').slideToggle();
});
// Catch browser resize
$(window).resize(function () {
// Remove transition inline style on large screens
if ($(window).width() >= 768)
$('#sub-nav-collapse').removeAttr('style');
});
// Written By Daddyfix -------------- Mar 2014
$( "#addPageBtn" ).click(function() {
addNewPage();
});
// -------------------------------------------
});####js/custom.js Add the following function to the same custom.js file. This is the JQuery Ajax call
// Written by Daddyfix to Add an New Doc -------------------------
function addNewPage() {
var page_category = $( "input:radio[name=category]:checked" ).val();
var pcencoded = encodeURIComponent(page_category);
var page_title = $( "#txt_Title" ).val();
var pt = page_title.replace(/ /g, "_");
var ptencoded = encodeURIComponent(pt);
var url = "index.php?newpage/"+pcencoded+"/"+ptencoded+"/&callback=?";
//alert (url);
var request = $.getJSON( url, function(data){} );
request.done(function (data) {
if (typeof data.status != 'undefined') {
alert(data.status);
}
if (typeof data.redirect != 'undefined') {
$(location).attr('href',data.redirect);
}
});
request.fail(function (jqXHR, textStatus) {
alert("Function: addNewPage\nJavascript Request failed: " + textStatus);
});
}
// -----------------------------------------------------------------####template/default.tpl
Modify the main content area of the default.tpl (or your own template). It at about line 92. Look for .
<div class="homepage-content container-fluid">
<div class="container">
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
<?php //echo $page['content']; ?>
<?php if ( isset($options['add_page']) ) { ?>
<p class="lead">
<div id='addForm' style='text-align: left; width: 400px; margin-top: -30px;margin-left:auto; margin-right:auto;'>
<label>Choose Your Category</label>
<div style="width: 400px; margin-left:auto; margin-right:auto;">
<?php
$folder = $base."/".$options['docs_path'];
//echo $folder;
$directories = glob($folder . '/*' , GLOB_ONLYDIR);
$radio='';
$checked=1;
foreach ($directories as $val) {
$pretty_dir = explode("/", str_replace('_', ' ', $val));
$actual_dir = explode("/", $val);
$pretty_val = array_pop($pretty_dir);
$dir_id = array_pop($actual_dir);
?>
<input type="radio" name="category" <?php
echo "id='{$dir_id}' ";
echo "value='{$dir_id}' ";
if ( $checked=1 ) { echo "checked='yes'"; }
echo "><label for='{$dir_id}'>{$pretty_val}</label>\n";
$checked=2;
}
?>
<div style="width: 400px; text-align: left; margin-top: 30px;">
<label for='txt_Title' style="width: 100%";>Document Title</label>
<input id='txt_Title' name='txt_Title' type='text' placeholder='Spaces are OK' size='30' style="width: 60%"><button id="addPageBtn" style="width: 40%">Add Page</button>
</div>
</div>
</p>
<?php } ?>
</div>
</div>
</div>
</div>
####template/default.tpl
Add this custom style to the HEAD section of the template
<link rel="stylesheet" href="<?php echo $relative_base; ?>css/daddyfix.css">
####css/daddyfix.css Create a css file. The following is used to make the radio buttons on the add new doc page. You'll see when its working.
/*
http://www.verious.com/graphic/css-styling-radio-button-and-checkboxes/
*/
input[type=radio] {
display:none;
}
input[type=radio] + label {
display:inline-block;
margin:-2px;
padding: 4px 12px;
margin-bottom: 0;
font-size: 14px;
line-height: 20px;
color: #333;
text-align: center;
text-shadow: 0 1px 1px rgba(255,255,255,0.75);
vertical-align: middle;
cursor: pointer;
background-color: #f5f5f5;
background-image: -moz-linear-gradient(top,#fff,#e6e6e6);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));
background-image: -webkit-linear-gradient(top,#fff,#e6e6e6);
background-image: -o-linear-gradient(top,#fff,#e6e6e6);
background-image: linear-gradient(to bottom,#fff,#e6e6e6);
background-repeat: repeat-x;
border: 1px solid #ccc;
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
border-bottom-color: #b3b3b3;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe6e6e6',GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
}
input[type=radio]:checked + label{
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
-moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
background-color:#e0e0e0;
}##Last By Not Least Turn on the new page add by using the directive (json) in the config.json
{ "add_page": true }
That's it! Hope it works out for you!