How-to – Page 3 – appcropolis

How To Implement Isotope

TODO

See:

http://isotope.metafizzy.co/
http://codepen.io/desandro/pen/nFrte

isotope-filtering

HTML

<section id="isotope-example" class="content-block content-1-3">
    {{require type="javascript" library="isotope"}}
    {{json assign_to="categories"}}
        [
            {"color": "red"},
            {"color": "blue"},
            {"color": "green"},
            {"color": "orange"}
        ]
    {{/json}}  
                
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h1>Isotope - filtering</h1>
                <div id="filters" class="btn-group" role="group"> 
                    <button class="btn btn-default active" data-filter="*">show all</button>
                    {{foreach $categories as $cat}}
                    <button class="btn btn-default" data-filter=".{{$cat.color}}">{{$cat.color}}</button> 
                    {{/foreach}}
                </div> 
            </div>

            <div class="col-md-12">
                <div class="grid">              
                    {{for $i=0 to 23}}
                    <div class="element-item {{$categories[$i%4].color}}">
                        <h1 class="index">{{$i}}</h1>
                        <p class="module text-center">Module {{$i%4}}</p>
                    </div>
                    {{/for}}
                </div>
            </div>
        </div>
        <!-- /.row -->
    </div>
    <!-- /.container -->
</section>

CSS:

/* css */
#isotope-example #filters {
    margin-top: 30px;
    margin-bottom: 30px;
    }
    #isotope-example #filters button {
        outline: none;
        }


/* isotope */
#isotope-example .grid {
    border: 1px solid #ddd;
    }



/* .element-item */
#isotope-example .element-item {
    position: relative;
    float: left;
    width: 100px;
    height: 100px;
    margin: 5px;
    padding: 10px;
    background: #888;
    color: #fff;
    }
#isotope-example .element-item.red {
    background: #ea4335;
    }
#isotope-example .element-item.blue {
    background: #4285f4;
    }
#isotope-example .element-item.green {
    background: #34a853;
    }
#isotope-example .element-item.orange {
    background: #fbbc05;
    }
#isotope-example .element-item > * {
    margin: 0;
    padding: 0;
    }
    
    #isotope-example .element-item .index {
        left: 10px;
        top: 30px;
        width: 80px;
        text-transform: none;
        letter-spacing: 0;
        font-weight: normal;
        text-align: center;
        position: absolute;
        }
    #isotope-example .element-item .module {
        left: 10px;
        bottom: 5px;
        width: 80px;
        text-transform: none;
        letter-spacing: 0;
        font-size: 12px;
        font-weight: normal;
        text-align: center;
        position: absolute;
        opacity: 0.6;
        }

Javascript:

/* js */
(function() {
    try {
        // init Isotope
        var $grid = $('#isotope-example .grid').isotope({
            itemSelector: '.element-item',
            layoutMode: 'fitRows'
        });

        // bind filter button click
        $('#isotope-example #filters button').on('click', function() {
            // set active class
            $(this).siblings().removeClass('active');
            $(this).addClass('active');
            
            // send filter option
            var filterValue = $(this).attr('data-filter');
            $grid.isotope({
                filter: filterValue
            });
        });

    } catch (e) {
        if ('console' in window) {
            console.log(e);
        }
    }
})();

Snipets

This page is a collection of small examples of code that you might find useful while developing your appcropolis builder projects.

Basic Page

<!DOCTYPE html>
<html lang="en">
    <head>
        {{header}}{{/header}}
    </head>
    <body>
        <!-- .appc-page -->
        <div class="appc-page">
            {{blocks}}
        </div><!-- /.appc-page -->
        
        {{footer}}{{/footer}}
    </body>
</html>

Geolocation

{{geolocation assign_to="location"}}

<h2>Find realtors in {{$location.city}}</h2>
<!-- example output: Find realtors in Saint Louis -->

Isotope Javascript

/* js */
(function() {
    try {
        // init Isotope
        var $grid = $('#isotope-example .grid').isotope({
            itemSelector: '.element-item',
            layoutMode: 'fitRows'
        });

        // bind filter button click
        $('#isotope-example #filters button').on('click', function() {
            // set active class
            $(this).siblings().removeClass('active');
            $(this).addClass('active');
            
            // send filter option
            var filterValue = $(this).attr('data-filter');
            $grid.isotope({
                filter: filterValue
            });
        });

    } catch (e) {
        if ('console' in window) {
            console.log(e);
        }
    }
})();

Modal Popup

<a  href="#" data-toggle="modal" data-target="#very-simple-modal">Open Simple Modal</a>
{{modal id="very-simple-modal"}}{{/modal}}

Access Your Appcropolis Builder Project From Your Domain URL

After you create a project using the Appcropolis Builder, you can add a domain. Basically, you can create a policy to allow Appcropolis’ server to serve your files when requests are made from your domain.

Lets’ say that your domain name is “mycompany.com”. You can create a project inside the Appcropolis Builder, and name it anything you want, for example, “mycompany”. Your project public URL will be [PROJECT_NAME]-[YOUR_USER_NAME].simplifysites.com. For this example, your public URL might read something like this “mycompany-raul.simplifysites.com”. If you wish to server your website from “mycompany.com”, all what you have to do is:

Open your project in the builder
From the “Projects” menu, select the option “Domain”
Enter the domain you wish to link to your project (e.g. mycompany.com)
Save.
Go to your domain DNS admin page (e.g. GoDaddy – >Manage DNS)
Set your domain’s A record to point to 159.203.148.146.
Depending on your TTL (time to live), you may have to wait between 15 minutes and 6 hours before this change take effect.
From the Browser, access your domain.
Done! if the changes took effect you should be able to access your Appcropolis Builder Project from you domain URL.

How To Detect Bootstrap Responsive Breakpoints In Javascript

<section id="content-1-3" class="content-block content-1-3">
	<div class="container">
		<div class="row">
		    <div class="appc-helper device-xs visible-xs" data-device="xs">XS</div>
            <div class="appc-helper device-sm visible-sm" data-device="sm">SM</div>
            <div class="appc-helper device-md visible-md" data-device="md">MD</div>
            <div class="appc-helper device-lg visible-lg" data-device="lg">LG</div>
            <h1>Device Mode (js):</h1>
            <div class="mode"></div>
		</div><!-- /.row -->
	</div><!-- /.container -->
</section>

.appc-helper {
    float: left;
    position: fixed;
    top: -10000px;
}

// @see: http://stackoverflow.com/questions/18575582/how-to-detect-responsive-breakpoints-of-twitter-bootstrap-3-using-javascript

// Detects which UI element is visible
function getBreakPoint() {
   var device = $('[class*="device-"]').filter(':visible').attr('data-device');
    return device;
}

// check for changes
var waitForFinalEvent = function() {
    // Create a private scope to set, clear, and check for timeout.
    // This will prevent too many timeout intervals from being set.
    var b = {};
    return function(func, intervalTime, timeStamp) {
        // create a key name using timeStamp, if provided
        timeStamp || (timeStamp = "unknown");
        // if key is set in private scope, clear interval
        b[timeStamp] && clearTimeout(b[timeStamp]);
        // set timeout for the timeStamp key
        b[timeStamp] = setTimeout(func, intervalTime)
    }
}();

// initial, unique interval name.
var fullDateString = new Date();

// how often to check for changes in the layout
var checkEvery = 250;

$(window).resize(function () {
    waitForFinalEvent(function(){
        var mode = getBreakPoint();
        setMode(mode);
    }, checkEvery, fullDateString.getTime())
});

// not in use but handy
function isBreakpoint( alias ) {
    return $('.device-' + alias).is(':visible');
}

// set changes in the UI
function setMode(mode) {
    var $mode = $('.mode');
        $mode.html(mode);
}

var mode = getBreakPoint();
setMode(mode);

Pointing Your Domain Name To SimplifySites.com

Once you are done building your website using the Appcropolis Builder, you will have to do these two things to link your domain to the newly created website:

From your domain name provider admin console (e.g. GoDaddy), go to the DNS setting section and change the A Record to make it point to 159.203.148.146. All other settings should remain the same. This means that your email settings will not be changed, but all website requests will be re-routed to simplifysites.com.
NOTE: It might take 15 minutes to 24 hours for this change to be completed.
Inside the builder, open your project and go to Project > Domain and add your domain name, click the verify button, accept the change if the domain link is available, and voila!

link-domain-to-project

Anatomy Of A Web Page

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.

Basic Page Anatomy

<!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:

Default Code

<!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>

Super Simple

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>