webdev-assignment-2/static/scripts/app.js

var app = angular.module("app", ["ngRoute", "ngSanitize", "ngTagsInput"]);

// Provider configuration
app.config(
    function ($routeProvider, $locationProvider)
    {
        // Configure routes
        $routeProvider
            .when("/", {templateUrl: "views/blog.html", controller: "blog"})
            .when("/create", {templateUrl: "views/create.html", controller: "create"})
            .when("/about", {templateUrl: "views/about.html", controller: "about"})
            .when("/faq", {templateUrl: "views/faq.html", controller: "faq"})
            .otherwise({templateUrl: "404.html"});

        // Enable HTML5-style routing
        // URLs will be shown as http://host/view instead of http://host/#!/view
        $locationProvider.html5Mode({enabled: true, requireBase: false});
    }
);

// Non-provider configuration
app.run(($anchorScroll) =>
{
    // Apply 100px scroll offset to compensate for fixed header
    $anchorScroll.yOffset = 100;
})

// Blog view controller
app.controller("blog", ["$scope", "$http",
    function($scope, $http)
    {
        $scope.posts = [];

        // Retrieve posts from server and populate array
        $http.get("/api/posts")
            .then((r) => { $scope.posts = angular.fromJson(r.data); });
    }
]);

// Create view controller
app.controller("create", ["$scope", "$http",
    function($scope, $http)
    {
        // Initialise fields
        $scope.title = "";
        $scope.author = "";
        $scope.content = "";
        $scope.tags = [];

        // Disable preview by default
        $scope.previewing = false;

        // Handle post submission
        $scope.onSubmit = function()
        {
            // Create the post object
            post = {
                "title": $scope.title,
                "author": $scope.author,
                "content": $scope.content,
                "tags": $scope.tags,
                "date": new Date().getTime()
            };

            // POST it to the server
            $http.post("/api/posts", post);

            // Clear the fields
            $scope.title = "";
            $scope.author = "";
            $scope.content = "";
            $scope.tags = [];

            // Alert the user that it has been submitted
            alert("Post has been submitted.");
        }

        // Handle tag additions
        $scope.onTagAdding = ($tag) =>
        {
            // Prepend a hash if the tag doesn't already start with one
            if (!$tag.text.startsWith("#"))
                $tag.text = "#" + $tag.text;

            // Return whether the tag has already been added
            return $scope.tags.indexOf($tag.text) === -1;
        }

        // Toggle post preview
        $scope.onPreview = () =>
        {
            // Invert preview switch
            $scope.previewing = !$scope.previewing;

            // Update HTML on preview to avoid parsing for each character change
            $scope.previewHtml = () =>
            {
                // Only parse if there is content and if the preview is toggling on
                return $scope.content && $scope.previewing
                        ? marked($scope.content)
                        : "";
            }
        }
    }
]);

// About view controller
app.controller("about", ["$scope", "$http",
    function($scope, $http)
    {
        $scope.aboutContent = "";

        // Get about content from the server and populate the view
        $http.get("/api/about")
            .then((r) => { $scope.aboutContent = angular.fromJson(r.data).content; });
    }
]);

// FAQ view controller
app.controller("faq", ["$scope", "$http", "$location", "$anchorScroll",
    function($scope, $http, $location, $anchorScroll)
    {
        $scope.entries = []

        // Get FAQ entries from the server and populate the array
        $http.get("/api/faq")
            .then((r) => { $scope.entries = angular.fromJson(r.data) });

        // Handle scrolling to different entries
        $scope.scrollTo = (hash) =>
        {
            // Use $anchorScroll to avoid weird issues with hashes in the URL
            $anchorScroll(hash);
        };
    }
]);

// Navbar controller
app.controller("navButtons", ["$scope", "$location",
    function($scope, $location)
    {
        // Set the current relative path
        // Useful for setting the navButtons appropriately when navigating to a deep linked view
        $scope.current = $location.path();

        // Handle navButton clicks
        $scope.navClick = (target) =>
        {
            // Change location to the given target and set the current path
            $location.path(target);
            $scope.current = target;
        }

        // Apply the 'current' class if the target matches the current path
        $scope.isCurrent = (target) =>
        {
            return $scope.current == target ? "current" : "";
        }
    }
]);

// <head>-specific functionality
app.controller("head", ["$scope",
    function($scope)
    {
        // Set the pag title
        $scope.title = "Lemonblog";
    }
]);

// Footer controller
app.controller("footer", ["$scope",
    function($scope)
    {
        // Set the current year for the copyright string
        $scope.year = new Date().getFullYear();
    }
]);

// Markdown filter
app.filter("markdown", () =>
{
    return function(input)
    {
        // Parse input as markdown and return resulting HTML
        return marked(input);
    }
});