function show(el) {
$('.current').removeClass('current');
$(el).addClass('current');
var msg = el.tagName;
$('pre').html(msg);
}
$('.main').mousemove(function(e) {
var x = e.clientX, y = e.clientY,
elementMouseIsOver = document.elementFromPoint(x, y);
show(elementMouseIsOver);
});
A basic builder web page is not any different from the pages that you are used to build. In a standard HTML page you will need to include the jQuery and Bootstrap libraries. Additionally, you may want to include FontAwesome icon library if you wish to take advantage of hundreds of free icons that accessible from the Builder interface.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Page</title>
<!-- style -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="{{resources}}/css/my-page.css" rel="stylesheet">
</head>
<body>
<!-- .appc-page -->
<div class="appc-page">
{{blocks}}
</div><!-- /.appc-page -->
<!-- scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript" src="{{resources}}/js/my-page.js"></script>
</body>
</html>
In the previous example I chose to include jQuery and Bootstrap from their CDN respective location. Also notice that I am including a CSS and Javascript files name my-page.css and my-page.js respectively. This assumes that you have such files in your project resources files. The example below, is the complete code generated by the builder:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>{{wp_title}}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{{wp_head}}
<!-- style -->
<link href="{{builder_resources}}/vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="{{builder_resources}}/vendors/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="{{resources}}/css/{{$post.post_name}}.css{{random before='?rand='}}" rel="stylesheet">
</head>
<body>
<!-- .appc-page -->
<div class="appc-page">
{{blocks}}
</div><!-- /.appc-page -->
<!-- scripts -->
<script type="text/javascript" src="{{builder_resources}}/vendors/jquery/jquery-1.10.2.min.js"></script>
{{wp_footer}}
<script src="{{builder_resources}}/vendors/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="{{resources}}/js/{{$post.post_name}}.js{{random before='?rand='}}"></script>
</body>
</html>
You can let the builder create all the necessary page code and include Javascript and CSS dependancies by using this code:
<!DOCTYPE html>
<html lang="en">
<head>
{{header}}{{/header}}
</head>
<body>
<!-- .appc-page -->
<div class="appc-page">
{{blocks}}
</div><!-- /.appc-page -->
{{footer}}{{/footer}}
</body>
</html>
TODO:
array (size=27)
'ID' => int 2
'post_author' => string '1' (length=1)
'post_date' => string '2015-10-03 18:46:17' (length=19)
'post_date_gmt' => string '2015-10-03 18:46:17' (length=19)
'post_content' => string '<p>This is an example page. It’s different from a blog post because it will stay in one place and will show up in your site navigation (in most themes). Most people start with an About page that introduces them to potential site visitors. It might say something like this:</p>
<blockquote><p>Hi there! I’m a bike messenger by day, aspiring actor by night, and this is my blog. I live in Los Angeles, have a great dog named Jack, and I like piña coladas. (And gettin’ caught in the rain.)</p>
<'... (length=1027)
'post_title' => string 'My Home Page' (length=12)
'post_excerpt' => string 'This is an example page. It’s different from a blog post because it will stay in one place and will show up in your site navigation (in most themes). Most people start with an About page that introduces them to potential site visitors. It might say something like this:
Hi there! I’m a bike messenger by day, aspiring actor by night, and this is my blog. I live in Los Angeles, have a great dog named Jack, and I like piña coladas. (And gettin’ caught in the rain.)
…or something like th'... (length=874)
'post_status' => string 'publish' (length=7)
'comment_status' => string 'open' (length=4)
'ping_status' => string 'closed' (length=6)
'post_password' => string '' (length=0)
'post_name' => string 'front-page' (length=10)
'to_ping' => string '' (length=0)
'pinged' => string '' (length=0)
'post_modified' => string '2016-02-24 17:25:40' (length=19)
'post_modified_gmt' => string '2016-02-24 17:25:40' (length=19)
'post_content_filtered' => string '<p>This is an example page. It’s different from a blog post because it will stay in one place and will show up in your site navigation (in most themes). Most people start with an About page that introduces them to potential site visitors. It might say something like this:</p>
<blockquote><p>Hi there! I’m a bike messenger by day, aspiring actor by night, and this is my blog. I live in Los Angeles, have a great dog named Jack, and I like piña coladas. (And gettin’ caught in the rain.)</p>
<'... (length=1027)
'post_parent' => int 0
'guid' => string 'http://bldr-appcropolis.localhost:8888/?page_id=2' (length=49)
'menu_order' => int 0
'post_type' => string 'page' (length=4)
'post_mime_type' => string '' (length=0)
'comment_count' => string '0' (length=1)
'filter' => string 'raw' (length=3)
'post_thumbnail' => string 'http://basic-blog-developer.simplifysites.com/sites/basic-blog-developer.simplifysites.com/wp/wp-content/uploads/2015/10/10-credits.png' (length=135)
'post_permalink' => string 'http://basic-blog-developer.simplifysites.com/' (length=46)
'post_content_raw' => string '<p>This is an example page. It’s different from a blog post because it will stay in one place and will show up in your site navigation (in most themes). Most people start with an About page that introduces them to potential site visitors. It might say something like this:</p>
<blockquote><p>Hi there! I’m a bike messenger by day, aspiring actor by night, and this is my blog. I live in Los Angeles, have a great dog named Jack, and I like piña coladas. (And gettin’ caught in the rain.)</p></'... (length=1025)
TODO: explain what is in the binder response
array (size=15)
'success' => boolean true
'action' => string 'appc_post_category_content' (length=26)
'offset' => int 0
'post_count' => int 1
'found_posts' => int 1
'total_pages' => int 1
'size' => string '6' (length=1)
'paged' => int 1
'has_next' => boolean false
'next' => null
'has_prev' => boolean false
'prev' => null
'is_first' => boolean true
'is_last' => boolean true
'data' => ...)
TODO: