search

bdkjones / Kit

The Kit Compiler, as implemented in CodeKit
77 stars 6 forks source link

Feature Request: Conditionals (or Empty/Unset Vars) #4

Open calvinjuarez opened 10 years ago

calvinjuarez commented 10 years ago

For example:

page.kit

<!DOCTYPE html>
<!-- @page = Page -->
<html>
<head>...</head>
<body>
    <nav>
<!-- @import nav.kit -->
    </nav>
    ...
</body>
</html>

nav.kit

        <ul>
            <li <!-- @page == Home ? class="active" -->>
                <a href="/">Home</a>
            </li>
            <li <!-- @page == Page ? class="active" -->>
                <a href="/page.html">Page</a>
            </li>
            <li <!-- @page == Other ? class="active" -->>
                <a href="/other.html">Other</a>
            </li>
        </ul>

page.html

<!DOCTYPE html>
<html>
<head>...</head>
<body>
    <nav>
        <ul>
            <li>
                <a href="/">Home</a>
            </li>
            <li class="active">
                <a href="/page.html">Page</a>
            </li>
            <li>
                <a href="/other.html">Other</a>
            </li>
        </ul>
    </nav>
    ...
</body>
</html>
calvinjuarez commented 10 years ago

Or

Even just some way to make it so if a variable isn't defined, it just replaces the Kit comment with an empty string.

For example:

page.kit

<!DOCTYPE html>
<html>
<head>...</head>
<body>
    <nav>
<!-- @page = class="active" -->
<!-- @import nav.kit -->
    </nav>
    ...
</body>
</html>

nav.kit

        <ul>
            <li <!-- &@home -->>
                <a href="/">Home</a>
            </li>
            <li <!-- &@page -->>
                <a href="/page.html">Page</a>
            </li>
            <li <!-- &@other -->>
                <a href="/other.html">Other</a>
            </li>
        </ul>

(The & here just indicates, "If this variable isn't set, don't error, just skip it.")

page.html

<!DOCTYPE html>
<html>
<head>...</head>
<body>
    <nav>
        <ul>
            <li>
                <a href="/">Home</a>
            </li>
            <li class="active">
                <a href="/page.html">Page</a>
            </li>
            <li>
                <a href="/other.html">Other</a>
            </li>
        </ul>
    </nav>
    ...
</body>
</html>
sathomas commented 10 years ago

FYI, here's my workaround. In _nav.kit:

  <a class="btn <!--$incidentsActive-->" href="incidents.html">Incidents</a>
  <a class="btn <!--$assetsActive-->"    href="assets.html"   >Assets</a>
  <a class="btn <!--$reportsActive-->"   href="reports.html"  >Reports</a>
  <a class="btn <!--$serviceActive-->"   href="service.html"  >Service</a>
  <a class="btn <!--$intelActive-->"     href="intel.html"    >Intelligence</a>
  <a class="btn <!--$adminActive-->"     href="admin.html"    >Administration</a>

And then, e.g., in admin.kit:

<!-- $incidentsActive: inactive -->
<!-- $assetsActive:    inactive -->
<!-- $reportsActive:   inactive -->
<!-- $serviceActive:   inactive -->
<!-- $intelActive:     inactive -->
<!-- $adminActive:       active -->
<!-- @import "nav.kit" -->
albell commented 9 years ago

Hey Bryan, is this feature still on the radar? This would be extremely useful.

calvinjuarez commented 9 years ago

The answer given by @bdkjones on issue #6:

Yep. This is on deck for implementation.

calvinjuarez commented 8 years ago

https://github.com/bdkjones/CodeKit/issues/357#issuecomment-128548484

sathomas commented 8 years ago

For folks checking the status of this issue, here's a bit of a workaround that gets you conditional functionality.

As an example, here's what goes in the parent file:

<!-- $hideBlockOne: <!-- -->
<!-- $hideBlockTwo: nil -->
<!-- @import "_child.kit" -->

And here's the child file:

<!--$hideBlockOne-->
    <div id="block-one">...</div>
<!-- end of hideBlockOne -->
<!--$hideBlockOne-->
    <div id="block-two">...</div>
<!-- end of hideBlockTwo -->

The resulting compiled file will have block one commented out and block two included:

<!--
    <div id="block-one">...</div>
<!-- end of hideBlockOne -->

    <div id="block-two">...</div>
<!-- end of hideBlockTwo -->

Maybe it's not the most aesthetically pleasing approach, but it does get the job done.

And thanks @bdkjones for CodeKit!

bdkjones commented 8 years ago

Ha, that's ridiculously clever. Well done.

Sent from my iPhone

On Dec 3, 2015, at 14:16, Stephen A Thomas notifications@github.com wrote:

For folks checking the status of this issue, here's a bit of a workaround that gets you conditional functionality.

In the main file define variables to hide (or not) conditional content. To hide content, set the value of the variable to the opening HTML comment <!--; to show the content, set the value of the variable to nil.

In the included file, prefix the conditional content with the variable. After the end of the conditional content, add any HTML content.

As an example, here's what goes in the parent file:

And here's the child file:

<div id="block-one">...</div>
<div id="block-two">...</div>

The resulting compiled file will have block one commented out and block two included:

<div id="block-two">...</div>

Maybe it's not the most aesthetically pleasing approach, but it does get the job done.

And thanks @bdkjones for CodeKit!

— Reply to this email directly or view it on GitHub.