| | 7 | ## Plugin Contents |
|---|
| | 8 | |
|---|
| | 9 | The srPageChooserPlugin contains a number of classes that work together to allow easy choosing and managing of local site hyperlinks on an Apostrophe website. |
|---|
| | 10 | |
|---|
| | 11 | * `srPageChooser`: The module that displays a page tree for selecting the link, based on the Reorganize page tree built into Apostrophe. |
|---|
| | 12 | * `srWidgetFormPageChooser.class.php`: The best part about the srPageChooserPlugin is that it gives the developer a standard symfony form widget that can be dropped into a form like any other widget. |
|---|
| | 13 | * `srValidatorSlug.class.php`: A validator used for validating page slugs chosen by the widget. |
|---|
| | 14 | * `_includeFormAssets.php`: A partial which must be included for the widget to work if it is being loaded by Ajax. This loads the necessary JavaScript and CSS for the form, as defined by `$form->getJavaScripts()` and `$form->getStyleSheets()`. For an Apostrophe slot, the majority use case, this partial should be included in the `_editView.php` of the appropriate slot. |
|---|
| | 15 | |
|---|
| | 16 | ## Installation |
|---|
| | 17 | |
|---|
| | 18 | The recommended method of installation is as an svn external. To do this, starting in the your symfony project directory, navigate to your plugins directory: |
|---|
| | 19 | |
|---|
| | 20 | $ cd plugins |
|---|
| | 21 | |
|---|
| | 22 | Then add in the externals definition to the plugins directory. |
|---|
| | 23 | |
|---|
| | 24 | $ svn pe svn:externals . |
|---|
| | 25 | |
|---|
| | 26 | This will bring up your default text editor, perhaps populated with any existing svn:externals you're using. If you're using the asandbox as a starting point, the externals definition for the `plugins` directory |
|---|
| | 27 | will look like this: |
|---|
| | 28 | |
|---|
| | 29 | sfJqueryReloadedPlugin http://svn.symfony-project.com/plugins/sfJqueryReloadedPlugin/1.2/trunk |
|---|
| | 30 | sfDoctrineGuardPlugin http://svn.symfony-project.com/plugins/sfDoctrineGuardPlugin/branches/1.3 |
|---|
| | 31 | sfDoctrineActAsTaggablePlugin http://svn.symfony-project.com/plugins/sfDoctrineActAsTaggablePlugin/trunk |
|---|
| | 32 | sfSyncContentPlugin http://svn.symfony-project.com/plugins/sfSyncContentPlugin/trunk |
|---|
| | 33 | sfTaskExtraPlugin http://svn.symfony-project.com/plugins/sfTaskExtraPlugin/branches/1.3 |
|---|
| | 34 | sfFeed2Plugin http://svn.symfony-project.com/plugins/sfFeed2Plugin/branches/1.2 |
|---|
| | 35 | sfWebBrowserPlugin http://svn.symfony-project.com/plugins/sfWebBrowserPlugin/trunk |
|---|
| | 36 | apostrophePlugin http://svn.apostrophenow.org/plugins/apostrophePlugin/branches/1.3 |
|---|
| | 37 | |
|---|
| | 38 | To the bottom of this list, add: |
|---|
| | 39 | |
|---|
| | 40 | srPageChooserPlugin http://svn.symfony-project.com/plugins/srPageChooserPlugin/trunk |
|---|
| | 41 | |
|---|
| | 42 | And save the file. To download the plugin files, do an SVN update in your plugins directory: |
|---|
| | 43 | |
|---|
| | 44 | $ svn up |
|---|
| | 45 | |
|---|
| | 46 | We're done installing the plugin files. Now, change back to your symfony project directory: |
|---|
| | 47 | |
|---|
| | 48 | $ cd .. |
|---|
| | 49 | |
|---|
| | 50 | Next, you have to enable the `srPageChooser` module in your application's `settings.yml` file. If the name of your application is, for example, `frontend`, then open `apps/frontend/config/settings.yml`, find the `enabled_modules` parameter, and add `srPageChooser` to the list. |
|---|
| | 51 | |
|---|
| | 52 | Next, clear your cache: |
|---|
| | 53 | |
|---|
| | 54 | $ ./symfony cc |
|---|
| | 55 | |
|---|
| | 56 | And publish the plugin's assets, so the JavaScript and CSS files are available to the frontend. |
|---|
| | 57 | |
|---|
| | 58 | $ ./symfony plugin:publish-assets |
|---|
| | 59 | |
|---|
| | 60 | The srPageChooser is now ready to be used. |
|---|
| | 61 | |
|---|
| | 62 | ## Using With Apostrophe Slots |
|---|
| | 63 | |
|---|
| | 64 | So now that it's installed, how do we use it in our Apostrophe slots? Great question! The first step is to create a new slot type that will utilize our fancy new widget, using the handy generate-slot-type task. Let's start by creating a very simple slot that displays a link. |
|---|
| | 65 | |
|---|
| | 66 | $ ./symfony apostrophe:generate-slot-type --application=frontend --type=SimpleLink |
|---|
| | 67 | |
|---|
| | 68 | Now, you must follow the steps outlined by the "WHAT COMES NEXT" text of the symfony task: |
|---|
| | 69 | |
|---|
| | 70 | > 1. Generate your Doctrine classes: |
|---|
| | 71 | > ./symfony doctrine:build --all-classes |
|---|
| | 72 | > |
|---|
| | 73 | > 2. Enable your new slot type's module, SimpleLinkSlot, in settings.yml |
|---|
| | 74 | > |
|---|
| | 75 | > 3. Add your new slot type name, SimpleLink, to the a_slot_types list in app.yml |
|---|
| | 76 | > |
|---|
| | 77 | > 4. ./symfony cc |
|---|
| | 78 | |
|---|
| | 79 | Let's add the new slot into a template so we can use it. |
|---|
| | 80 | |
|---|
| | 81 | Assuming we're starting from a fresh asandbox installation, we need to copy defaultTemplate.php from the `a` module of the `apostrophePlugin` directory into our application-level `a` module. Skip this step if you already have a template in your `apps/frontend/modules/a/templates` directory. |
|---|
| | 82 | |
|---|
| | 83 | $ cp plugins/apostrophePlugin/modules/a/templates/defaultTemplate.php apps/frontend/modules/a/templates/ |
|---|
| | 84 | |
|---|
| | 85 | Add in the new slot `SimpleLink` into the `allowed_types` array of one of the areas in the template of your choice. |
|---|
| | 86 | |
|---|
| | 87 | Now, let's edit the form for the `SimpleLinkSlot` to add in an `sfWidgetFormPageChooser` widget. Open up the file `apps/frontend/lib/form/SimpleLinkForm.class.php` and change the following lines from: |
|---|
| | 88 | |
|---|
| | 89 | $this->setWidgets(array('text' => new sfWidgetFormTextarea())); |
|---|
| | 90 | $this->setValidators(array('text' => new sfValidatorString(array('required' => false, 'max_length' => 100)))); |
|---|
| | 91 | |
|---|
| | 92 | To: |
|---|
| | 93 | |
|---|
| | 94 | $this->setWidgets(array( |
|---|
| | 95 | 'text' => new sfWidgetFormTextarea(), |
|---|
| | 96 | 'link' => new srWidgetFormPageChooser(), |
|---|
| | 97 | )); |
|---|
| | 98 | $this->setValidators(array( |
|---|
| | 99 | 'text' => new sfValidatorString(array('max_length' => 100)), |
|---|
| | 100 | 'link' => new srValidatorSlug(), |
|---|
| | 101 | )); |
|---|
| | 102 | |
|---|
| | 103 | Take note that `srWidgetFormPageChooser` and `srValidatorSlug` begin with `sr`, not `sf` --- `sr` stands for [http://www.sunrunhome.com](SunRun, Inc.), the sponsor of this plugin and the nation's leading residential solar company. |
|---|
| | 104 | |
|---|
| | 105 | Next (and this is an important, easy-to-forget step), we need to add in a line of code into the `_editView.php` partial of `SimpleLinkSlot` that will ensure that the necessary JavaScript and CSS files for the srWidgetFormPageChooser are loaded. Bring up `apps/frontend/modules/SimpleLinkSlot/templates/_editView.php` in your text editor and change it from: |
|---|
| | 106 | |
|---|
| | 107 | <?php // Just echo the form. You might want to render the form fields differently ?> |
|---|
| | 108 | <?php echo $form ?> |
|---|
| | 109 | |
|---|
| | 110 | To: |
|---|
| | 111 | |
|---|
| | 112 | <?php // Just echo the form. You might want to render the form fields differently ?> |
|---|
| | 113 | <?php echo $form ?> |
|---|
| | 114 | <?php include_partial('srPageChooser/includeFormAssets', array('form' => $form)) ?> |
|---|
| | 115 | |
|---|
| | 116 | Load up a page that has the `SimpleLink` slot available to it, click *Add Slot*, and then choose *Simple Link*. Click *Edit* and you will see two fields, a textarea labeled *Text* and a button labeled *Link* with the text "Select a Link". Clicking this button displays an iframe showing the site's page tree. Click on one of the pages to select it as the target for the link. This populates the `link` form field with the slug of the page. For example, if you click on a page titled "Contact" in the page tree, the `link` field will be populated with "/contact". Plus, the title of the page and the slug will be displayed near the "Select a Link" button so you can know which page it points to. |
|---|
| | 117 | |
|---|
| | 118 | Finally, let's edit the `_normalView.php` template to display our newly selected link. Open up `apps/frontend/modules/SimpleLinkSlot/templates/_normalView.php` and change the code from: |
|---|
| | 119 | |
|---|
| | 120 | <?php include_partial('a/simpleEditButton', array('name' => $name, 'pageid' => $pageid, 'permid' => $permid)) ?> |
|---|
| | 121 | <?php if (isset($values['text'])): ?> |
|---|
| | 122 | <h4><?php echo htmlspecialchars($values['text']) ?></h4> |
|---|
| | 123 | <?php endif ?> |
|---|
| | 124 | |
|---|
| | 125 | To: |
|---|
| | 126 | |
|---|
| | 127 | <?php include_partial('a/simpleEditButton', array('name' => $name, 'pageid' => $pageid, 'permid' => $permid)) ?> |
|---|
| | 128 | <?php if (isset($values['text']) && isset($values['link'])): ?> |
|---|
| | 129 | <a href="<?php echo $values['link'] ?>"><?php echo htmlspecialchars($values['text']) ?></a> |
|---|
| | 130 | <?php endif ?> |
|---|
| | 131 | |
|---|
| | 132 | And that's it! |
|---|
| | 133 | |
|---|
| | 134 | ## Using with FCKEditor and aRichTextSlot |
|---|
| | 135 | |
|---|
| | 136 | TODO |
|---|
| | 137 | |
|---|