Lightweight CMS in ATK (video)

As my designer says – best way to break a great web design is to give CMS access to the client. Without any consideration for style they will star moving things around and break stuff. Often not willing to pay for a proper update they will continue to tweak themselves. So what’s the alternative?

There is some – contextual editing. In this post i’ll show how you can do it in ATK

I have implemented it for our upcoming homepage design. It consists of multiple blocks of data with short and precise explanations. We do want to give power to edit text to our content guys, but we don’t want them to break layout.

So we decided to make a light-weight CMS. Here is a video how it works:

We started by adding a new keyword into our page templates, <?editable?>. The first word inside that block is treated as a “content-key”. The rest is default content. Designer is free to add as many content areas as he wishes to. They can come in all shapes and sizes and developer is not even involved, it’s just a template tweak.

SMlite have a function called eachTag(). It’s suitable in cases where you have same tag appearing multiple times in the template such as this. We use id to call a function which substitutes content if a better version is defined in the database. It also makes content clickable and even adds a pinkish layer on hover.

$this->template->eachTag('editable',array($this,'loadContent'));

Inside the function we need to first load the new content if it already have been re-defined:

		list($content_key,$content)=preg_split('/\n/',$content,2);

		$e=$this->api->page.'_'.$content_key;
		$c=$this->api->db->dsql()
			->table('content')
			->where('ckey',$e)
			->field('content')
			->do_getOne();
		if($c)$content=$c;

Since we will be using this area with JavaScript we need to establish ID for it:

 $content='<div id="'.$e.'">'.$content.'</div>';

When double-clicked, we want this area to spawn a new dialog and pass on information about key as well as default content:

		$this->js('dblclick')->_selector('#'.$e)
			->univ()->dialogURL('Administration',
					$this->api->getDestinationURL('admin/content',
						array('e'=>$e,'t'=>$c?false:$content)));

We also want to highlight the box, but only if user is logged in:

		if($this->api->auth->isLoggedIn()){
			$this->js('mouseenter',$this->js()
					->_selectorThis()->css(array('background'=>'#fef')))->_selector('#'.$e);
			$this->js('mouseleave',$this->js()
					->_selectorThis()->css(array('background'=>null)))->_selector('#'.$e);
		}

That’s all we need to do. This code goes to ancestor of all our pages (AWPage). We then need to set up a page for admin/content. If you are familiar with ATK you should have no problems making it, but here is the code just in case:

class page_admin_content extends AdminPage {
	function init(){
		parent::init();

		$this->api->stickyGET('e');

		$f=$this->add('AWForm');
		$f->addField('readonly','Key')->set($_GET['e']);
		$f->addField('text','content')->set($_GET['t'])->js(true)->wymeditor();

		$f->setSource('content');
		$f->setConditionFromGET('ckey','e');

		$f->addSubmit('Save')->addClass('wymupdate');
		$f->addButton('Cancel')
			->js('click')->univ()->closeDialog();

		if($f->isSubmitted()){
			$f->update();
			$f->js()->univ()->closeDialog()->execute();
		}
	}
}

But oh wait – we have integrated wymeditor into our system. Was that difficult? No. It took two lines of code instead of one (like with all those jQurey addons)

			$url=$this->api->locateURL('js','wymeditor/jquery.wymeditor.js');
			$this->api->template->append('js_include',
					'<script type="text/javascript" src="'.$url.'"></script>'."\n");

and drop default installation of wymeditor in one of the js install locations, no modifications required. Some other time I will post about those fancy effects we have on the popup windows.

About these ads