Rambox-CE/.sencha/app/slice-impl.xml

<project name="x-slice-impl">
    
    <target name="-load-sass-page" 
            depends="-detect-app-build-properties,
                     -generate-slicer-bootstrap,
                     -generate-slicer-manifest">
    </target>
    
    <!--
    Uses the compiler to generate a special theme-only scss file containing
    rules for all framework / package / app components.  This is then used
    by the slicer example page to capture theme sprites
    -->
    <target name="-compile-slicer-sass" depends="-init-compiler">
        <local name="app.example.scss.tmp"/>
        <property name="app.example.scss.tmp" value="${app.example.scss}.tmp"/>
        <x-normalize-path 
            path="${build.out.resources.dir}" 
            property="image.search.path"/>

        <local name="var.begin"/>
        <local name="var.end"/>

        <condition property="var.begin" value="dynamic(">
            <isset property="framework.isV6"/>
        </condition>
        <condition property="var.end" value=")">
            <isset property="framework.isV6"/>
        </condition>

        <property name="var.begin" value=""/>
        <property name="var.end" value="!default"/>

        <x-compile refid="${compiler.ref.id}">
            <![CDATA[
                restore
                    page
                and
                include
                    -all
                and
                sass
                    +skipWatch
                    +class-name-vars
                    +etc
                    +vars
                    +rules
                    -variable=$app-name: ${var.begin} '${app.name}' ${var.end}
                    -variable=$image-search-path:'${image.search.path}'
                    -variable=$theme-name: ${var.begin} '${theme.name}' ${var.end}
                    -output=${app.example.scss.tmp}
                    -forward=${app.sass.dynamic}
                and
                restore
                    page
                and
                sass
                    +skipWatch
                    +ruby
                    -output=${app.example.out.ruby}
            ]]>
        </x-compile>

        <if>
            <not>
                <filesmatch file1="${app.example.scss.tmp}" file2="${app.example.scss}"/>
            </not>
            <then>
                <copy file="${app.example.scss.tmp}" tofile="${app.example.scss}" overwrite="true"/>
            </then>
        </if>

        <x-get-relative-path from="${app.example.build.dir}"
                             to="${app.example.css}"
                             property="app.example.css.path"/>
        
<!--update the app's example to point to the build output-->
<echo file="${app.example.css.file}">
<![CDATA[
/*
 * This file is generated by Sencha Cmd and should NOT be edited. It redirects
 * to the most recently built CSS file for the application to allow theme.html
 * to load properly for image slicing (required to support non-CSS3 browsers
 * such as IE9 and below).
 */
@import '${app.example.css.path}';
]]>
</echo>         
    </target>

    <!--
    Compiles the scss file for the theme slicer page
    -->
    <target name="-compass-compile-slicer-css" depends="-compile-slicer-sass">
        <if>
            <x-is-true value="${app.sass.fashion}"/>
            <then>
                <if>
                    <x-is-true value="${app.sass.rhino}"/>
                    <then>
                        <x-fashion-compile
                                slicer="true"
                                file="${app.example.build.dir}"
                                toFile="${app.example.build.dir}"/>
                    </then>
                    <else>
                        <x-sencha-command>
                            fashion
                            -config=${app.dir}/app.json
                            -slicer=true
                            -compress=${build.css.compress}
                            -split=${build.css.selector.limit}
                            ${app.example.build.dir}
                            ${app.example.build.dir}
                        </x-sencha-command>
                    </else>
                </if>
            </then>
            <else>
                <x-compass-compile
                        dir="${app.example.build.dir}"
                        trace="${compass.compile.trace}"
                        boring="${compass.compile.boring}"
                        force="${compass.compile.force}"
                        sassdir="${app.example.build.dir}"
                        cssdir="${app.example.build.dir}"
                        config="${app.example.compass.config}"/>
            </else>
        </if>
    </target>
    
    <!-- Produces a bootstrap.js file for ext 4.2 slicer pages -->
    <target name="-generate-slicer-bootstrap" unless="framework.isV5">
        <local name="relpath"/>
        <local name="cmd.dir.normalized"/>
        <x-get-relative-path from="${bootstrap.base.path}"
                             to="${framework.packages.dir}"
                             property="relpath"/>

        <script language="javascript">
            <![CDATA[
                var dir = project.getProperty("cmd.dir") + '';
                dir = dir.replace(/\\/g, '/');
                if (dir.indexOf('/') !== 0) {
                    dir = '/' + dir; 
                }
                project.setProperty("cmd.dir.normalized", dir);
            ]]>
        </script>
        
        <x-bootstrap file="${bootstrap.example.js}"
                     basedir="${bootstrap.base.path}"
                     includeBoot="true"
                     includeCoreFiles="true"
                     overrideTpl="${bootstrap.override.tpl}"
                     overrideTplType="${bootstrap.override.tpltype}"
                     overrideExcludeTags="">
<![CDATA[
Ext.Boot.loadSync([
    "${cmd.dir.normalized}/ant/build/slicer/render.js",
    "${relpath}/ext-theme-base/sass/example/manifest.js",
    "${relpath}/ext-theme-base/sass/example/shortcuts.js",
    "custom.js"
]);
]]>
        </x-bootstrap>

    </target>
    
    <!-- Produces a bootstrap.js / bootstrap.json pair for ext 5 slicer pages -->
    <target name="-generate-slicer-manifest" if="framework.isV5" depends="-detect-app-build-properties">
        <local name="manifest.root.excludes"/>
        <condition property="manifest.root.excludes" value="${app.bootstrap.manifest.exclude}">
            <isset property="app.bootstrap.manifest.exclude"/>
        </condition>
        <property name="manifest.root.excludes" value=""/>

        <if>
            <x-is-true value="${app.has.js.sdk}"/>
            <then>
                <property name="manifest.bootstrap.js.exclude">
                    exclude
                    -tag=framework,package-sencha-core,package-core,package-${toolkit.name}
                </property>
                <x-compile refid="${compiler.ref.id}">
                    <![CDATA[
                        restore
                            page
                        and
                        ${manifest.bootstrap.js.exclude}
                    ]]>
                </x-compile>
            </then>
        </if>

        <property name="remove.slicer.css.bootstrap.entries" value="false"/>

        <x-compile refid="${compiler.ref.id}">
            <![CDATA[
                slicer-manifest
                    -exclude=${manifest.root.excludes}
                    -jsonp=Ext.Microloader.setManifest
                    -removeBootstrapCssEntries=${remove.slicer.css.bootstrap.entries}
                    +ignoreDisabled
                    -basePath=${bootstrap.base.path}
                    -cssFile=${app.example.css.file}
                    -out=${bootstrap.example.json}
                and
                microload
                    -operation=microloader
                    -microloaderPath=${build.slicer.microloader.file}
                    -bootPath=${build.boot.file}
                    -out=${bootstrap.example.js}
            ]]>
        </x-compile>
    </target>

    <target name="-capture-theme-image">
        <echo>Capture theme image to ${build.capture.png}</echo>
        <x-sencha-command>
            <![CDATA[
                theme
                    capture
                        -base=${app.example.build.dir}
                        -page=${app.example.theme.html}
                        -image=${build.capture.png}
                        -manifest=${build.capture.json}
            ]]>
        </x-sencha-command>
    </target>

    <target name="-capture-sass-page-image">
        <if>
            <and>
                <x-is-true value="${app.sass.fashion}"/>
                <x-is-false value="${app.sass.rhino}"/>
            </and>
            <then>
                <echo>Capture theme image to ${build.capture.png}</echo>
                <x-capture-slicer-data manifestPath="${build.capture.json}"
                                       imagePath="${build.capture.png}"
                                       refId="app.web.server"/>
            </then>
        </if>
    </target>
    
    <target name="-slice-theme-images">
        <echo>Slicing theme images to ${build.resources.dir}</echo>
        <x-sencha-command>
            <![CDATA[
                fs
                    slice
                        ${build.slice.options}
                        -image=${build.capture.png}
                        -manifest=${build.capture.json}
                        -out=${build.out.slicer.path}
            ]]>
        </x-sencha-command>
    </target>
    

    <!--
    Generates theme images for Ext JS 4.2+ apps using theme packages
    '-detect-app-build-properties' is defined in js-impl.xml
    -->
    <target name="-slice-app-theme" 
            depends="-load-sass-page,
                     -compass-compile-slicer-css,
                     -capture-theme-image,
                     -slice-theme-images">
    </target>

    <macrodef name="x-build-theme">
        <attribute name="theme" description="the path of the theme folder"/>
        <attribute name="buildsass" default="false"/>
        <attribute name="basetheme" default="default"/>
        <sequential>
            <local name="theme.name"/>

            <local name="framework.theme.dir"/>
            <local name="tmp.theme.dir"/>
            <local name="tmp.img.dir"/>
                        
            <basename property="theme.name" file="@{theme}"/>
            <local name="theme.base.name"/>
            <property name="theme.base.name" value="${theme.name}"/>
            <property name="theme.images.dir" location="@{theme}/images"/>
            <property name="theme.page.dir" location="@{theme}/${theme.page.name}"/>
            
            <property name="tmp.res.dir" value="${app.resources.dir}"/>
            <property name="tmp.theme.dir" value="${tmp.res.dir}/${theme.base.name}"/>
            <property name="tmp.img.dir" value="${tmp.theme.dir}/images"/>
            
            <property name="app.res.dir" location="${app.dir}/packages"/>
            <property name="app.img.dir" location="${app.res.dir}/images"/>
            
            <property name="framework.res.dir" location="${framework.dir}/resources"/>
            <property name="framework.img.dir" location="${framework.res.dir}/themes/images"/>
            <property name="framework.theme.dir" location="${framework.img.dir}/@{basetheme}"/>
            
            <echo>Copying base framework images from ${framework.theme.dir} to ${tmp.img.dir}</echo>
            <copy todir="${tmp.img.dir}">
                <fileset dir="${framework.theme.dir}" includes="**/*"/>
            </copy>

            <if>
                <equals arg1="@{buildsass}" arg2="true"/>
                <then>
                    <echo>Building sass for theme ${theme.name}</echo>
                    <!--x-build-sass is defined in sass-impl.xml-->
                    <x-build-sass theme="@{theme}"/>
                </then>
            </if>

            <echo>Slicing images for theme ${theme.name} to ${tmp.img.dir}</echo>
            <x-sencha-command>
                <![CDATA[
                theme
                    build
                        -data-file=${build.capture.json}
                        -image-file=${build.capture.png}
                        -page=${theme.page.dir}
                        -out=${tmp.img.dir}
                ]]>
            </x-sencha-command>

            <if>
                <available file="${theme.images.dir}"/>
                <then>
                    <echo>Copying user defined images from @{theme}/images to ${tmp.img.dir}</echo>
                    <copy todir="${tmp.img.dir}">
                        <fileset dir="${theme.images.dir}" includes="**/*"/>
                    </copy>
                </then>
            </if>

        </sequential>
    </macrodef>

    <!--
    This is a legacy macrodef for copying resources in theme-directory based themes.
    It is provided to support building Ext JS 4.1 app themes
    -->
    <macrodef name="x-copy-resources">
        <sequential>
            <copy todir="${build.resources.dir}" includeEmptyDirs="false">
                <fileset dir="${app.resources.dir}" 
                         includes="**/*"/>
            </copy>

            <x-get-relative-path from="${app.dir}"
                                 to="${framework.dir}"
                                 property="framework.rel.path"/>
            
            <copy toDir="${build.out.base.path}/${framework.rel.path}">
                <fileset dir="${framework.dir}" 
                         includes="src/ux/**/css/**/*"/>
            </copy>
        </sequential>
    </macrodef>

    <!--
    Generates theme images for Ext JS 4.1 apps that use directory based
    themes.  These have been deprecated in favor of ExtJS 4.2 theme packages
    -->
    <target name="-slice-theme-directories">
        <echo>Processing theme directories from ${app.theme.dir}</echo>
        <for param="theme">
            <dirset dir="${app.theme.dir}" includes="*"/>
            <sequential>
                <x-build-theme theme="@{theme}"/>
            </sequential>
        </for>
        <x-copy-resources/>
    </target>
    
    <target name="-slice-images">
        <x-run-if-true value="${enable.ext42.themes}">
            <x-ant-call target="-slice-app-theme"/>
        </x-run-if-true>
        <x-run-if-true value="${enable.ext41.themes}">
            <x-ant-call target="-slice-theme-directories"/>
        </x-run-if-true>
    </target>

    <target name="-before-slice"/>
    <target name="-slice" depends="-slice-images"/>
    <target name="-after-slice"/>
    
    <!--
    Refresh Individual Theme
    -->
    <target name="-before-refresh-theme"/>
    <target name="-refresh-theme">
        <if>
            <x-is-true value="${enable.ext41.themes}"/>
            <then>
                <local name="theme.dir"/>
                <property name="theme.dir" location="${app.theme.dir}/${args.themeName}"/>
                <x-build-theme theme="${theme.dir}" buildsass="true"/>
                <x-copy-resources/>
            </then>
        </if>
    </target>
    <target name="-after-refresh-theme"/>
</project>