components/admin-js

There is no license information available for the latest version (dev-master) of this package.

Installs: 171

Dependents: 1

Suggesters: 0

Stars: 1

Watchers: 1

Forks: 0

Open Issues: 0

Language:JavaScript

Type:component

dev-master 2014-11-18 03:09 UTC

README

Compilation of plugin useful for an admistration interface using require js and compoment-installer.

If you don't know how to install plugin with components look at this link

admin-js work with composer you can add it to your composer.json file with:

"components/admin-js": "dev-master"

Run composer install to install it.

Getting started

<html>
    <head>
      <meta charset="utf-8">
      <title>Set up/title>
    </head>
    <body>
      <script src="../components/require.js"></script>
      <script>
        requirejs.config({
            baseUrl: '../components',
        });
      </script>
      <script>
         require(["admin-js"],function(views){
                    new views.AdminView();
         });
      </script>
    </body>
</html>

Picture resizer

add the data-type='picture-resizer' to the img balise:

    <html>
<head>
  <meta charset="utf-8">
  <title>QUnit basic example</title>
  <link rel="stylesheet" href="../components/bootstrap3/css/bootstrap.min.css" />
  <style>
        .img-left{
            float: left;
        }
        .img-border {
        margin: 0 auto 0;
        border: #999999 solid 1px;
        }
  </style>
</head>
<body>
     <div class="row">
            <div class="box">
                <div class="col-lg-12">
                    <hr>
                    <h2 class="intro-text text-center">Build a website <strong>worth visiting</strong>
                    </h2>
                    <hr>
                    <img alt="test alt" style="margin-right: 15px;" data-type='picture-resizer' class="img-responsive img-border img-left" src="http://cms.sion.nc/img/intro-pic.jpg" alt="">
                    <hr class="visible-xs">
                    <p>The boxes used in this template are nested inbetween a normal Bootstrap row and the start of your column layout. The boxes will be full-width boxes, so if you want to make them smaller then you will need to customize.</p>
                    <p>A huge thanks to <a href="http://join.deathtothestockphoto.com/" target="_blank">Death to the Stock Photo</a> for allowing us to use the beautiful photos that make this template really come to life. When using this template, make sure your photos are decent. Also make sure that the file size on your photos is kept to a minumum to keep load times to a minimum.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc placerat diam quis nisl vestibulum dignissim. In hac habitasse platea dictumst. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
                    <img data-alt='test' data-description='test description' style="margin-right: 15px;" data-type='picture-resizer' class="img-responsive img-border img-left" src="http://cms.sion.nc/img/intro-pic.jpg" alt="">
                </div>
            </div>
    </div>
  <script src="../components/require.js"></script>
  <script>
    requirejs.config({
        baseUrl: '../components',
    });
  </script>
  <script>
     require(["admin-js"],function(views){
                new views.AdminView();
     });
  </script>
</body>
</html>

Data table example

add the data-type='data-table' to the html

    <table data-type='data-table'>
    <thead>
        <tr>
        </tr>
    </thead>
    <tbody> 
        <tr>
        </tr>        
    </tbody>
    </table>

Data sortable example

add the data-sortable='true' to the html

    <ul  data-sortable='true' data-url='link for the ajax request'>
          <li data-id="server side id of the element">
              Categorie
              <ul data-sortable='true'>
                  <li>Categorie enfant</li>
              </ul>
            </li>
    </ul>